From 6494f04d2528b35871a40ffbc44eab4ea919f511 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sun, 15 Jul 2018 11:06:53 +0200
Subject: [PATCH] Added structure and some stylings to CreateServer component

---
 src/common/MenuLayout.js      |  7 ++++---
 src/servers/CreateServer.js   | 38 +++++++++++++++++++++++++++++++++--
 src/servers/CreateServer.scss | 11 ++++++++++
 src/utils/base.scss           | 10 +++++++++
 4 files changed, 61 insertions(+), 5 deletions(-)
 create mode 100644 src/servers/CreateServer.scss

diff --git a/src/common/MenuLayout.js b/src/common/MenuLayout.js
index 253a4cdd..f0f6cdff 100644
--- a/src/common/MenuLayout.js
+++ b/src/common/MenuLayout.js
@@ -9,9 +9,10 @@ export default function MenuLayout() {
       <AsideMenu />
       <div className="col-md-10 offset-md-2 col-sm-9 offset-sm-3">
         <Switch>
-          <Route exact
-                 path="/server/:serverId/list-short-urls/:page"
-                 component={ShortUrls}
+          <Route
+            exact
+            path="/server/:serverId/list-short-urls/:page"
+            component={ShortUrls}
           />
         </Switch>
       </div>
diff --git a/src/servers/CreateServer.js b/src/servers/CreateServer.js
index ecf5da64..bdc98240 100644
--- a/src/servers/CreateServer.js
+++ b/src/servers/CreateServer.js
@@ -1,7 +1,41 @@
 import React from 'react';
+import { connect } from 'react-redux';
+
+import './CreateServer.scss';
+
+export const CreateServer = () => {
+  const submit = e => e.preventDefault();
 
-export default () => {
   return (
-    <div>Create server</div>
+    <div className="create-server">
+      <form onSubmit={submit}>
+        <div className="form-group row">
+          <label htmlFor="name" className="col-lg-1 col-md-2 col-form-label create-server__label">Name:</label>
+          <div className="col-lg-11 col-md-10">
+            <input type="text" className="form-control" id="name" placeholder="Name" />
+          </div>
+        </div>
+
+        <div className="form-group row">
+          <label htmlFor="url" className="col-lg-1 col-md-2 col-form-label create-server__label">URL:</label>
+          <div className="col-lg-11 col-md-10">
+            <input type="url" className="form-control" id="url" placeholder="URL" />
+          </div>
+        </div>
+
+        <div className="form-group row">
+          <label htmlFor="apiKey" className="col-lg-1 col-md-2 col-form-label create-server__label">API key:</label>
+          <div className="col-lg-11 col-md-10">
+            <input type="text" className="form-control" id="apiKey" placeholder="API key" />
+          </div>
+        </div>
+
+        <div className="text-right">
+          <button className="btn btn-primary btn-outline-primary">Create</button>
+        </div>
+      </form>
+    </div>
   );
 };
+
+export default connect()(CreateServer);
diff --git a/src/servers/CreateServer.scss b/src/servers/CreateServer.scss
new file mode 100644
index 00000000..8f9ef042
--- /dev/null
+++ b/src/servers/CreateServer.scss
@@ -0,0 +1,11 @@
+@import "../utils/base";
+
+.create-server {
+  padding: 40px 20px;
+}
+
+.create-server__label {
+  @media (min-width: $mdMin) {
+    text-align: right;
+  }
+}
diff --git a/src/utils/base.scss b/src/utils/base.scss
index 551c41a2..e867449d 100644
--- a/src/utils/base.scss
+++ b/src/utils/base.scss
@@ -1,4 +1,14 @@
 
+// Breakpoints
+$xsMax: 575px;
+$smMin: 576px;
+$smMax: 577px;
+$mdMin: 768px;
+$mdMax: 991px;
+$lgMin: 992px;
+$lgMax: 1199px;
+$xlgMin: 1200px;
+
 // Colors
 $mainColor: #4696e5;