Merge pull request #1 from joekrump/component-syntax-updates

Component syntax updates

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

@@ -17,13 +17,10 @@ class AdminNav extends React.Component {
 
   constructor(props) {
     super(props);
-
-    this.state = {
-      menuOpen: true
-    }
+    this.state = { menuOpen: true };
   }
 
-  handleToggleMenu() {
+  toggleMenu() {
     this.setState({
       menuOpen: !this.state.menuOpen
     });
@@ -37,21 +34,21 @@ class AdminNav extends React.Component {
     e.preventDefault();
     auth.logout(() => {
       // dispatch an action if the server has successfully logged out the user.
-      this.props.logoutUser('/login');
+      this.props.logoutUser("/login");
     }, () => {
       this.props.loginUser(auth.getUser(), auth.getToken(), true)
     }, this.props.dispatch);
   }
 
   renderBackButton() {
-    return (this.props.pluralName === '' || this.props.adminPageType === 'index') ? null 
+    return (this.props.pluralName === "" || this.props.adminPageType === 'index') ? null 
       : <BackButton 
           label={this.props.pluralName} 
-          link={'/admin/' + this.props.pluralName} />
+          link={'/admin/' + this.props.pluralName}
+        />
   }
 
   render() {
-
     let iconElementRight = null;
 
     if(this.props.loggedIn) {
@@ -74,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>
@@ -86,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;
     } 
   }