Nav-styles#71; 4.24 200

client/src/components/layout/Navbar.js

@@ -6,15 +6,74 @@ import styled from 'styled-components'
 import {logoutUser} from "../../actions/authActions";
 import {clearCurrentProfile} from "../../actions/profileActions";
 
-import fsmLogo from '../../img/fsm-green.png'
+import fsmLogo from '../../img/fsm-green2.png'
+import {lightblack, green, elevation, fixed} from '../../utils'
+
+class Navbar extends Component {
+    onLogoutClick = (e) => {
+        e.preventDefault();
+        this.props.clearCurrentProfile();
+        this.props.logoutUser();
+    };
+
+    render() {
+        const {isAuthenticated} = this.props.authReducer;
+        const {user} = this.props.authReducer;
+
+        const outState = (
+            <ul>
+                <li>
+                    <Link to="/login">Login</Link>    
+                </li>
+                <li>
+                    <Link to="/register">Signup</Link>
+                </li>
+            </ul>
+        );
+
+        const inState = (
+            <ul>
+                <li>
+                    <Link to={`/users/${user.id}/${user.name}`}>
+                        {user.name}
+                    </Link>
+                </li>
+                <li>
+                    <Link to="#" onClick={this.onLogoutClick}>
+                        Logout
+                    </Link>
+                </li>
+            </ul>
+        );
+
+
+        return (
+            <HeaderNav>
+                <div className="container">
+                    <div className="main">
+                        <Link to="/" className="logo">
+                            <img 
+                                src={fsmLogo} 
+                                className="fsm_logo"
+                                alt="Full Stack Musician"
+                            />
+                        </Link>
+                    </div>
+                    {isAuthenticated ? inState : outState}
+                </div>
+            </HeaderNav>
+        )
+    }
+}
 
 const HeaderNav = styled.header`
     min-width: auto;
-    box-shadow: 0 1px 0 rgba(12,13,14,0.1), 0 1px 6px rgba(59,64,69,0.1);
+    ${elevation[1]};
     width: 100%;
     background-color: #fafafb;
     height: 90px;
-    border-top: 3px solid #6BD7DB;
+    border-top: 3px solid ${green};
+    ${fixed()};
 
     .container {
         max-width: 1264px;
@@ -40,6 +99,10 @@ const HeaderNav = styled.header`
                 &:hover {
                     background-color: rgba(239,240,241,0.75);
                 }
+
+                .fsm_logo {
+                    height: 100%;
+                }
             }
         }
 
@@ -60,7 +123,7 @@ const HeaderNav = styled.header`
                 height: 100%;
 
                 a {
-                    color: #848d95;
+                    color: ${lightblack};
                     display: inline-flex;
                     align-items: center;
                     padding: 0 10px;
@@ -79,63 +142,6 @@ const HeaderNav = styled.header`
     }
 `;
 
-class Navbar extends Component {
-    onLogoutClick = (e) => {
-        e.preventDefault();
-        this.props.clearCurrentProfile();
-        this.props.logoutUser();
-    };
-
-    render() {
-        const {isAuthenticated} = this.props.authReducer;
-        const {user} = this.props.authReducer;
-
-        const outState = (
-            <ul>
-                <li>
-                    <Link to="/login">Login</Link>    
-                </li>
-                <li>
-                    <Link to="/register">Signup</Link>
-                </li>
-            </ul>
-        );
-
-        const inState = (
-            <ul>
-                <li>
-                    <Link to={`/users/${user.id}/${user.name}`}>
-                        {user.name}
-                    </Link>
-                </li>
-                <li>
-                    <Link to="#" onClick={this.onLogoutClick}>
-                        Logout
-                    </Link>
-                </li>
-            </ul>
-        );
-
-
-        return (
-            <HeaderNav>
-                <div className="container">
-                    <div className="main">
-                        <Link to="/" className="logo">
-                            <img 
-                                src={fsmLogo} 
-                                className="fsm_logo"
-                                alt="Full Stack Musician"
-                            />
-                        </Link>
-                    </div>
-                    {isAuthenticated ? inState : outState}
-                </div>
-            </HeaderNav>
-        )
-    }
-}
-
 const mapStateToProps = state => ({
     authReducer: state.authReducer
 });

client/src/elements/Headings.js

@@ -3,7 +3,7 @@ import {above} from '../utils'
 
 export const Heading = styled.h1`
     font-size: 2rem;
-    ${above.small`
-        color:blue
+    ${above.large`
+        color:black;
     `}
 `;

client/src/utils/Breakpoints.js

@@ -8,7 +8,7 @@ const sizes = {
 
 export const above = Object.keys(sizes).reduce((acc, label) => {
     acc[label] = (...args) => css`
-      @media (max-width: ${sizes[label] / 16}em) {
+      @media (min-width: ${sizes[label]}px) {
         ${css(...args)}
       }
     `
@@ -17,7 +17,7 @@ export const above = Object.keys(sizes).reduce((acc, label) => {
 
   export const below = Object.keys(sizes).reduce((acc, label) => {
     acc[label] = (...args) => css`
-      @media (max-width: ${sizes[label] / 16}em) {
+      @media (max-width: ${sizes[label]}px) {
         ${css(...args)}
       }
     `

client/src/utils/Colors.js

@@ -0,0 +1,5 @@
+export const green = '#92EEC4'
+export const blue = '#85DAEF'
+export const lightblue = '#8EEEEF'
+export const black = '#242729'
+export const lightblack = '#848d95'

client/src/utils/Elevation.js

@@ -0,0 +1,5 @@
+export default [
+    'box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.7)',
+    'box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
+    'box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',
+]

client/src/utils/Position.js

@@ -0,0 +1,27 @@
+import {css} from 'styled-components'
+
+export const fixed = ({
+    x = 0, 
+    y = 0,
+    yProp = 'top',
+    xProp = 'left'
+} = {}) => {
+    return css`
+        position: fixed;
+        ${yProp}: ${y};
+        ${xProp}: ${x};
+    `;
+}
+
+export const absolute = ({
+    x = 0, 
+    y = 0,
+    yProp = 'top',
+    xProp = 'left'
+} = {}) => {
+    return css`
+        position: absolute;
+        ${yProp}: ${y};
+        ${xProp}: ${x};
+    `;
+}

client/src/utils/index.js

@@ -1 +1,7 @@
-export * from './Breakpoints'
+import elevation from './Elevation'
+
+export * from './Breakpoints'
+export * from './Colors'
+export * from './Position'
+
+export {elevation};