Merge pull request #39 from nwhacks/web/flexbox-utils

Web/flexbox utils, login style rework

web/components/auth/Login/Login.js

@@ -52,14 +52,14 @@ class Login extends React.Component {
   loginView() {
     const { email, password, error } = this.state;
     return (
-      <div id="login">
+      <div id="login" className="fill-height flex jc-center ai-center dir-col">
         <div>
           <form
             onSubmit={this.login}
             className="input-group">
-            <span>Sign in</span>
-            <div className="card">
-              <div className="card-left">
+            <h2 className="pad-sides">Sign in</h2>
+            <div className="card split flex">
+              <div className="pad-ends pad-sides margin-text-inputs">
                 <TextInput
                   placeholder="Enter your email"
                   value={email}
@@ -79,8 +79,9 @@ class Login extends React.Component {
                 />
                 <PrimaryButton
                   text="Submit"
+                  className="fill-width"
                   />
-                <p>
+                <p className="flex jc-center">
                   Don&apos;t have an account yet?&nbsp;
                   <Link to="/">Apply here</Link>
                 </p>

web/components/auth/Login/Login.sass

@@ -1,88 +1,13 @@
 div#login
-  display: flex
-  justify-content: center
-  height: 100%
-  align-items: center
-
   > div
     max-width: 748px
     width: 60%
-    display: flex
-    flex-direction: column
-    align-items: center
 
     form
       height: 60%
       min-height: 400px
 
-      width: 100%
-
-      display: flex
-      flex-direction: column
-      justify-content: center
-
-      > span
-        padding-left: 44px
-        padding-right: 44px
-
-        width: 100%
-        display: flex
-        justify-content: flex-start
-
-        font-family: Merriweather
-        font-style: normal
-        font-weight: bold
-        line-height: normal
-        font-size: 32px
-
-        color: $primary
-
-        margin-bottom: 28px
-
-      div.card
-        display: flex
-        background-color: $white
-        overflow: hidden
-
-        /* Drop shadow */
-        box-shadow: 0px 4px 6px $shadow
-        border-radius: 4px
-
-        > *
-          width: 50%
-
-        > div.card-left
-          padding-left: 44px
-          padding-right: 44px
-          padding-top: 48px
-          padding-bottom: 48px
-
-          > div.text-input
-            &:first-of-type
-              margin-bottom: 40px
-            &:last-of-type
-              margin-bottom: 56px
-
-          > button
-            width: 100%
-
-          > p
-            display: flex
-            justify-content: center
-
-            margin-top: 10px
-            width: 100%
-            font-family: Apercu Pro
-            font-size: 14px
-            color: $primary
-
-            > a
-              &:visited
-                color: $primary
-
-              &:hover
-                color: $secondary-highlight
-
-        > div.card-right
-          /* Placeholder for future illustration
+      > .card
+        > .card-right
+          /* Placeholder for future illustration */
           background: linear-gradient(180deg, #2C31AE 0%, #21258A 100%)

web/components/input/buttons/PrimaryButton/index.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const PrimaryButton = ({ text, onClick, disabled }) => (
+const PrimaryButton = ({ text, onClick, disabled, className }) => (
   <button
     onClick={onClick}
     type="submit"
     disabled={disabled}
-    className="primary">
+    className={`primary ${className}`}>
     { text }
   </button>
 );
@@ -15,6 +15,7 @@ PrimaryButton.propTypes = {
   text: PropTypes.string.isRequired,
   onClick: PropTypes.func,
   disabled: PropTypes.bool,
+  className: PropTypes.string,
 };
 
 export default PrimaryButton;

web/styles/breakpoints.sass

@@ -0,0 +1,5 @@
+$desktop: 1300px;
+$laptop: 1080px;
+$tablet: 900px;
+$phablet: 760px;
+$mobile: 480px;

web/styles/decoration.sass

@@ -0,0 +1,8 @@
+.shadow
+  box-shadow: 0px 4px 6px $shadow
+
+.card
+  @extend .shadow
+  border-radius: 4px
+  background-color: $white
+  overflow: hidden

web/styles/index.sass

@@ -2,15 +2,19 @@
 @import ./colors
 @import ./typography
 @import ./animations
+@import ./utils
+@import ./breakpoints
+@import ./decoration
 
 /* components */
 @import ../components/index
 
 /* containers */
 @import ../containers/index
 
+// Remove from here once definitions are set up
 html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+h1, h3, h4, h5, h6, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
@@ -26,7 +30,6 @@ time, mark, audio, video
   margin: 0
   padding: 0
   border: 0
-  font: inherit
   vertical-align: baseline
 
 html
@@ -36,7 +39,6 @@ html
 body
   height: 100%
   width: 100%
-  font-family: 'Merriweather', serif
 
 #app
   height: 100%

web/styles/typography.sass

@@ -15,3 +15,27 @@
   font-weight: normal
   font-style: normal
   src: url(./fonts/apercu_regular_pro.otf) format('opentype')
+
+a
+  &:visited
+    color: $primary
+
+  &:hover
+    color: $secondary-highlight
+
+p
+  font-size: 14px
+  font-family: Apercu Pro
+  color: $primary
+  margin-top: 10px
+
+h2
+  font-family: Merriweather
+  font-style: normal
+  font-weight: bold
+  line-height: normal
+  font-size: 32px
+  color: $primary
+  padding-left: 44px
+  padding-right: 44px
+  margin-bottom: 28px

web/styles/utils.sass

@@ -0,0 +1,62 @@
+.fill
+  &-width
+    width: 100%
+
+  &-height
+    height: 100%
+
+.split
+  > *
+    width: 50%
+
+// padding declarations
+.pad
+  &-sides
+    padding-left: 44px
+    padding-right: 44px
+
+  &-ends
+    padding-top: 48px
+    padding-bottom: 48px
+
+// margin declarations
+.margin
+  &-text-inputs
+    > .text-input
+      &:first-of-type
+        margin-bottom: 40px
+      &:last-of-type
+        margin-bottom: 56px
+
+// flexbox utility classes
+.flex
+  display: flex
+
+  // flex-directions
+  &.dir
+    &-col
+      flex-direction: column
+
+  // justify-content
+  &.jc
+    &-center
+      justify-content: center
+
+    &-around
+      justify-content: space-around
+
+    &-between
+      justify-content: space-between
+      &-right-if-one
+        :only-child
+          align-self: flex-end
+          margin-left: auto
+
+  // flex-wrap
+  &.wrap
+    flex-wrap: wrap
+
+  // align-items
+  &.ai
+    &-center
+      align-items: center