add git gateway auth page styles

decaporg · Dec 7, 2017 · f7365ae · f7365ae
1 parent e3a33b9
commit f7365ae
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 42 deletions.
diff --git a/src/backends/git-gateway/AuthenticationPage.css b/src/backends/git-gateway/AuthenticationPage.css
@@ -1,25 +1,45 @@
 .nc-gitGatewayAuthenticationPage-root {
   display: flex;
+  flex-flow: column nowrap;
   align-items: center;
   justify-content: center;
   height: 100vh;
 }
 
-.nc-gitGatewayAuthenticationPage-card {
+.nc-gitGatewayAuthenticationPage-form {
   width: 350px;
-  padding: 10px;
+  margin-top: -80px;
+  & input {
+    background-color: #fff;
+    border-radius: var(--borderRadius);
+
+    font-size: 14px;
+    padding: 10px 10px;
+    margin-bottom: 15px;
+    margin-top: 6px;
+    width: 100%;
+    position: relative;
+    z-index: 1;
+
+    &:focus {
+      outline: none;
+      box-shadow: inset 0 0 0 2px var(--colorBlue);
+    }
+  }
 }
 
-.nc-gitGatewayAuthenticationPage-card img {
+.nc-gitGatewayAuthenticationPage-button {
+  @apply(--button);
+  @apply(--dropShadowDeep);
+  @apply(--buttonDefault);
+  @apply(--buttonGray);
+
+  padding: 0 30px;
   display: block;
-  margin: auto;
-  padding-bottom: 5px;
+  margin-top: 20px;
+  margin-left: auto;
 }
 
 .nc-gitGatewayAuthenticationPage-errorMsg {
-  color: #dd0000;
-}
-
-.nc-gitGatewayAuthenticationPage-iconContainer {
-  text-align: center;
+  color: var(--colorErrorText);
 }
diff --git a/src/backends/git-gateway/AuthenticationPage.js b/src/backends/git-gateway/AuthenticationPage.js
@@ -101,38 +101,34 @@ export default class AuthenticationPage extends React.Component {
 
     return (
       <section className="nc-gitGatewayAuthenticationPage-root">
-        <div className="nc-gitGatewayAuthenticationPage-card">
-          <form onSubmit={this.handleLogin}>
-            <div className="nc-gitGatewayAuthenticationPage-iconContainer">
-              <Icon type="netlify" size="140px"/>
-            </div>
-            {error && <p>
-              <span className="nc-gitGatewayAuthenticationPage-errorMsg">{error}</span>
-            </p>}
-            {errors.server && <p>
-              <span className="nc-gitGatewayAuthenticationPage-errorMsg">{errors.server}</span>
-            </p>}
-            <label>Email</label>
-            <input
-              type="text"
-              name="email"
-              value={this.state.email}
-              onChange={partial(this.handleChange, 'email')}
-            />
-            <div>{ errors.email || null }</div>
-            <label>Password</label>
-            <input
-              type="password"
-              name="password"
-              value={this.state.password}
-              onChange={partial(this.handleChange, 'password')}
-            />
-            <div>{ errors.password || null }</div>
-            <button className="nc-gitGatewayAuthenticationPage-button" disabled={inProgress}>
-              {inProgress ? "Logging in..." : "Login"}
-            </button>
-          </form>
-        </div>
+        <Icon className="nc-githubAuthenticationPage-logo" size="500px" type="netlify-cms"/>
+        <form className="nc-gitGatewayAuthenticationPage-form" onSubmit={this.handleLogin}>
+          {!error && <p>
+            <span className="nc-gitGatewayAuthenticationPage-errorMsg">{error}</span>
+          </p>}
+          {!errors.server && <p>
+            <span className="nc-gitGatewayAuthenticationPage-errorMsg">{errors.server}</span>
+          </p>}
+          <div className="nc-gitGatewayAuthenticationPage-errorMsg">{ errors.email || null }</div>
+          <input
+            type="text"
+            name="email"
+            placeholder="Email"
+            value={this.state.email}
+            onChange={partial(this.handleChange, 'email')}
+          />
+          <div className="nc-gitGatewayAuthenticationPage-errorMsg">{ errors.password || null }</div>
+          <input
+            type="password"
+            name="password"
+            placeholder="Password"
+            value={this.state.password}
+            onChange={partial(this.handleChange, 'password')}
+          />
+          <button className="nc-gitGatewayAuthenticationPage-button" disabled={inProgress}>
+            {inProgress ? "Logging in..." : "Login"}
+          </button>
+        </form>
       </section>
     );
   }