moved common styling pieces into variables.scss file

Author: joekrump

src/components/App.scss

@@ -1,14 +1,16 @@
+@import "../variables.scss";
+
 .link {
   &.light {
-    color: #81D4FA; /* lightBlue200 */
+    color: $darkPurple;
     &:hover {
-      color: #B3E5FC; /* lightBlue100 */
+      color: $lightPurple;
     }
   }
   &.dark {
-    color: #3d5afe; /* indigoA200 */
+    color: $lightBlue100;
     &:hover {
-      color: #536DFE; /* indigoA400 */
+      color: $lightBlue200;
     }
   }
 }

src/components/Layout/FrontendPage.scss

@@ -1,7 +1,4 @@
-// Components/Layout/FrontendPage.scss
-//
-
-$darkPurple: #3d5afe;
+@import "../../variables.scss";
 
 .frontend-page-container {
   padding-top: 56px;

src/components/Menu/SpeedDial.scss

@@ -1,4 +1,4 @@
-$actionSpacing: 8px;
+@import "../../variables.scss";
 
 .cover {
   position: fixed;
@@ -52,7 +52,6 @@ $actionSpacing: 8px;
     height: 200px;
 
     .action {
-      // flex-direction: row-reverse;
       display: flex;
       height: 42px;
       padding: $actionSpacing 0;

src/components/Nav/AdminNav.js

@@ -20,7 +20,7 @@ class AdminNav extends React.Component {
     this.state = { menuOpen: true };
   }
 
-  handleToggleMenu() {
+  toggleMenu() {
     this.setState({
       menuOpen: !this.state.menuOpen
     });
@@ -71,7 +71,7 @@ class AdminNav extends React.Component {
         <Drawer
           open={this.state.menuOpen}
           docked={false}
-          onRequestChange={() => this.handleToggleMenu()}
+          onRequestChange={() => this.toggleMenu()}
         >
           <AdminMenu currentUser={this.props.user} routeOptions={AppConfig.routes.admin} />
         </Drawer>
@@ -83,7 +83,7 @@ class AdminNav extends React.Component {
                 {this.renderBackButton()}
               </div>
             )}
-            onLeftIconButtonTouchTap={() => this.handleToggleMenu()}
+            onLeftIconButtonTouchTap={() => this.toggleMenu()}
             style={{ position: 'fixed' }}
             iconElementRight={iconElementRight}
           />

src/components/Nav/Breadcrumb.scss

@@ -1,11 +1,7 @@
-// components/Nav/Breadcumb.scss
-//
-$darkGrey: #424242;
-$lightPrimary: #aab7ff;
-$darkPrimary: #3d5afe;
+@import "../../variables.scss";
 
 .breadcrumb-links {
-  background-color: $darkGrey;
+  background-color: $midGrey;
   height: 30px;
   margin-top: -1px;
 

src/components/Nav/SiteTopNav.scss

@@ -1,11 +1,10 @@
-$darkPurple: #3d5afe;
-$linkColor: #e6e6e6;
+@import "../../variables.scss";
 
 .top-nav {
   position: fixed;
   height: 56px;
   width: 100%;
-  background-color: #212121;
+  background-color: $darkGrey;
   z-index: 100;
   margin: 0;
   padding: 0;
@@ -38,12 +37,12 @@ $linkColor: #e6e6e6;
         font-weight: 300;
         max-width: 140px;
         text-decoration: none;
-        padding: 0 0.5rem 2px 0.5rem;
+        padding: 14px 0.5rem 14px 0.5rem;
 
         &.active, &:hover, &:focus {
           color: #fff;
           padding-bottom: 0;
-          border-bottom: 2px solid $darkPurple;
+          border-bottom: 2px solid $darkPrimary;
         }
       }
     }
@@ -58,7 +57,7 @@ $linkColor: #e6e6e6;
         font-weight: 300;
         color: $linkColor;
         &:hover, &:focus {
-          color: $darkPurple;
+          color: $darkPrimary;
         }
       }
     }

src/components/Pages/Card/Card.scss

@@ -1,3 +1,5 @@
+@import "../../../variables.scss";
+
 .admin-container {
   display: flex;
   align-items: center;
@@ -12,7 +14,7 @@
 
   &.basic {
     .front, .back {
-      border: 2px solid #e6e6e6;
+      border: 2px solid $linkColor;
       background: #252429;
     } 
   }

src/components/Pages/Errors/ErrorPage.scss

@@ -1,3 +1,5 @@
+@import "../../../variables.scss";
+
 body {
   background-blend-mode: soft-light;
 }
@@ -10,7 +12,7 @@ body {
     .page-container {
       position: relative;
       top: 100px;
-      border: 1px solid #e6e6e6;
+      border: 1px solid $linkColor;
       padding: 30px;
 
       .content {

src/variables.scss

@@ -0,0 +1,14 @@
+// colors
+$red: red;
+$lightBlue200: #81D4FA; /* lightBlue200 */
+$lightBlue100: #B3E5FC; /* lightBlue100 */
+$lightPurple: #536DFE; /* indigoA400 */
+$darkPurple: #3d5afe;
+$midGrey: #424242;
+$darkGrey: #212121;
+$lightPrimary: #aab7ff;
+$darkPrimary: $darkPurple;
+$linkColor: #e6e6e6;
+
+// spacing
+$actionSpacing: 8px;