style github and test-repo auth pages

decaporg · Dec 7, 2017 · cd5da3d · cd5da3d
1 parent 39e4ca6
commit cd5da3d
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 8 deletions.
diff --git a/src/backends/github/AuthenticationPage.css b/src/backends/github/AuthenticationPage.css
@@ -6,7 +6,24 @@
   height: 100vh;
 }
 
+.nc-githubAuthenticationPage-logo {
+  color: #c4c6d2;
+  margin-top: -300px;
+}
+
 .nc-githubAuthenticationPage-button {
-  padding: .25em 1em;
-  height: auto;
+  @apply(--button);
+  @apply(--dropShadowDeep);
+  @apply(--buttonDefault);
+  @apply(--buttonGray);
+
+  padding: 0 30px;
+  margin-top: -80px;
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  & .nc-icon {
+    margin-right: 18px;
+  }
 }
diff --git a/src/backends/github/AuthenticationPage.js b/src/backends/github/AuthenticationPage.js
@@ -35,6 +35,7 @@ export default class AuthenticationPage extends React.Component {
 
     return (
       <section className="nc-githubAuthenticationPage-root">
+        <Icon className="nc-githubAuthenticationPage-logo" size="500px" type="netlify-cms"/>
         <Notifs CustomComponent={Toast} />
         {loginError && <p>{loginError}</p>}
         <button

diff --git a/src/backends/test-repo/AuthenticationPage.js b/src/backends/test-repo/AuthenticationPage.js
@@ -16,17 +16,17 @@ export default class AuthenticationPage extends React.Component {
   render() {
     const { inProgress } = this.props;
 
-    return (<section className="nc-gitGatewayAuthenticationPage-root">
-      <div className="nc-gitGatewayAuthenticationPage-card">
-        <Icon type="netlify" size="large"/>
+    return (
+      <section className="nc-githubAuthenticationPage-root">
+        <Icon className="nc-githubAuthenticationPage-logo" size="500px" type="netlify-cms"/>
         <button
-          className="nc-gitGatewayAuthenticationPage-button"
+          className="nc-githubAuthenticationPage-button"
           disabled={inProgress}
           onClick={this.handleLogin}
         >
           {inProgress ? "Logging in..." : "Login"}
         </button>
-      </div>
-    </section>);
+      </section>
+    );
   }
 }
diff --git a/src/components/UI/Icon/images/_index.js b/src/components/UI/Icon/images/_index.js
@@ -26,6 +26,7 @@ import iconMarkdown from './markdown.svg';
 import iconMedia from './media.svg';
 import iconMediaAlt from './media-alt.svg';
 import iconNetlify from './netlify.svg';
+import iconNetlifyCms from './netlify-cms-logo.svg';
 import iconPage from './page.svg';
 import iconPages from './pages.svg';
 import iconPagesAlt from './pages-alt.svg';
@@ -66,6 +67,7 @@ const images = {
   'media': iconMedia,
   'media-alt': iconMediaAlt,
   'netlify': iconNetlify,
+  'netlify-cms': iconNetlifyCms,
   'page': iconPage,
   'pages': iconPages,
   'pages-alt': iconPagesAlt,