Merge pull request #125 from canyener/styling-login-page

Styling login page

src/components/LoginPage.js

@@ -4,8 +4,12 @@ import { connect } from 'react-redux'
 import { startLogin } from '../actions/auth'
 
 export const LoginPage = ({ startLogin }) => (
-  <div>
-    <button onClick={startLogin}>Login</button>
+  <div className="box-layout">
+  <div className="box-layout__box">
+    <h1 className="box-layout__title">Expensify</h1>
+    <p>It's time to get your expenses under control.</p>
+    <button className="button" onClick={startLogin}>Login with Google</button>
+  </div>
   </div>
 )
 

src/styles/base/_base.scss

@@ -3,8 +3,18 @@ html {
 }
 
 body {
+  color: $dark-grey;
   font-family: Helvetica, Arial, sans-serif;
   font-size: $m-size;
+  line-height: 1.6;
+}
+
+button {
+  cursor: pointer;
+}
+
+button:disabled {
+  cursor: default;
 }
 
 .is-active {

src/styles/base/_settings.scss

@@ -1,5 +1,12 @@
 //Colors
 $dark-blue: #333745;
+$dark-grey: #333333;
+$blue: #1c88bf;
+
+// Font Size
+$font-size-large: 1.8rem;
 
 //Spacing
-$m-size: 1.6rem;
+$s-size: 1.2rem;
+$m-size: 1.6rem;
+$l-size: 3.2rem;

src/styles/components/_box-layout.scss

@@ -0,0 +1,22 @@
+.box-layout {
+  align-items: center;
+  background: url('/images/bg.jpg');
+  background-size: cover;
+  display: flex;
+  height: 100vh;
+  justify-content: center;
+  width: 100vw;
+}
+
+.box-layout__box {
+  background: fade-out(white, .15);
+  border-radius: 3px;
+  padding: $l-size $m-size;
+  text-align: center;
+  width: 25rem;
+}
+
+.box-layout__title {
+  margin: 0 0 $m-size 0;
+  line-height: 1;
+}

src/styles/components/_button.scss

@@ -0,0 +1,8 @@
+.button {
+  background: $blue;
+  border: none;
+  color: white;
+  font-size: $font-size-large;
+  font-weight: 300;
+  padding: $s-size;
+}

src/styles/styles.scss

@@ -1,3 +1,5 @@
 @import '/base/normalize';
 @import '/base/settings';
-@import '/base/base';
+@import '/base/base';
+@import './components/box-layout';
+@import './components/button';

src/tests/components/__snapshots__/LoginPage.test.js.snap

@@ -1,11 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`LoginPage #Snapshots Should render LoginPage correctly 1`] = `
-<div>
-  <button
-    onClick={[Function]}
+<div
+  className="box-layout"
+>
+  <div
+    className="box-layout__box"
   >
-    Login
-  </button>
+    <h1
+      className="box-layout__title"
+    >
+      Expensify
+    </h1>
+    <p>
+      It's time to get your expenses under control.
+    </p>
+    <button
+      className="button"
+      onClick={[Function]}
+    >
+      Login with Google
+    </button>
+  </div>
 </div>
 `;