Merge pull request #73 from nllerandi/Nav-styles#71

Nav styles#71

client/package.json

@@ -11,7 +11,8 @@
     "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.3",
     "redux": "^4.0.1",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "styled-components": "^4.2.0"
   },
   "scripts": {
     "start": "react-scripts start",

client/src/App.js

@@ -10,8 +10,8 @@ import {setCurrentUser} from "./actions/authActions";
 // Redux Store
 import store from "./store";
 
-// CSS
-import './App.css';
+// CSS / Global Styles
+import GlobalStyle from './Global'
 
 // Components
 // Layout
@@ -52,6 +52,7 @@ class App extends Component {
                         <Route exact path="/users/:id/:name" component={Profile}/>
                         <Route exact path="/users/:id/:name/edit" component={ProfileEdit}/>
                         <Footer/>
+                        <GlobalStyle/>
                     </div>
                 </Router>
             </Provider>

client/src/Global.js

@@ -0,0 +1,20 @@
+import {createGlobalStyle} from 'styled-components'
+
+const GlobalStyle = createGlobalStyle`
+    body {
+        margin: 0;
+        padding: 90px 0 0;
+        box-sizing: border-box;
+        font-family: Arial, Helvetica, sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+    a:link, a:visited {
+        text-decoration: none;
+        list-style: none;
+        color: inherit;
+    }
+`;
+
+export default GlobalStyle

client/src/components/homepage/Homepage.js

@@ -1,11 +1,16 @@
 import React, {Component} from "react";
 import {Link} from "react-router-dom";
 import {connect} from "react-redux";
+
+// Actions
 import {getQuestions} from "../../actions/questionActions";
 
 // Components
 import AllQuestions from "../questions/AllQuestions";
 
+// Styled Components
+import {Heading, Button} from '../../elements'
+
 class Homepage extends Component {
     componentDidMount() {
         this.props.getQuestions();
@@ -17,9 +22,11 @@ class Homepage extends Component {
 
         return (
             <div className="Landing">
-                <h1>Fullstack Musician</h1>
+                <Heading>Full Stack Musician</Heading>
                 {name ? <h2>Hi {name}</h2> : null}
-                <Link to="/ask">Ask a Question</Link>
+                <Button>
+                    <Link to="/ask">Ask a Question</Link>
+                </Button>
                 <AllQuestions
                     questions={questions}
                 />

client/src/components/layout/Navbar.js

@@ -1,10 +1,14 @@
 import React, {Component} from "react";
 import {Link} from "react-router-dom";
 import {connect} from "react-redux";
+import styled from 'styled-components'
 
 import {logoutUser} from "../../actions/authActions";
 import {clearCurrentProfile} from "../../actions/profileActions";
 
+import fsmLogo from '../../img/fsm-green2.png'
+import {lightblack, green, elevation, fixed} from '../../utils'
+
 class Navbar extends Component {
     onLogoutClick = (e) => {
         e.preventDefault();
@@ -17,33 +21,127 @@ class Navbar extends Component {
         const {user} = this.props.authReducer;
 
         const outState = (
-            <div>
-                <Link to="/login">Login</Link> -
-                <Link to="/register">Signup</Link>
-            </div>
+            <ul>
+                <li>
+                    <Link to="/login">Login</Link>    
+                </li>
+                <li>
+                    <Link to="/register">Signup</Link>
+                </li>
+            </ul>
         );
 
         const inState = (
-            <div>
-                <Link to={`/users/${user.id}/${user.name}`}>
-                    {user.name}
-                </Link>
-                <button onClick={this.onLogoutClick}>
-                    Logout
-                </button>
-            </div>
+            <ul>
+                <li>
+                    <Link to={`/users/${user.id}/${user.name}`}>
+                        {user.name}
+                    </Link>
+                </li>
+                <li>
+                    <Link to="#" onClick={this.onLogoutClick}>
+                        Logout
+                    </Link>
+                </li>
+            </ul>
         );
 
 
         return (
-            <nav className="Navbar">
-                <Link to="/">FSM</Link>
-                {isAuthenticated ? inState : outState}
-            </nav>
+            <StyledNavbar>
+                <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>
+            </StyledNavbar>
         )
     }
 }
 
+const StyledNavbar = styled.header`
+    min-width: auto;
+    ${elevation[1]};
+    width: 100%;
+    background-color: #fafafb;
+    height: 90px;
+    border-top: 3px solid ${green};
+    ${fixed()};
+
+    .container {
+        max-width: 1264px;
+        width: 100%;
+        height: 100%;
+        margin: 0 auto;
+        position: relative;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+
+        .main {
+            height: 100%;
+
+            .logo {
+                padding: 0 8px;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                transition: background-color 
+                    cubic-bezier(.165, .84, .44, 1) .25s;
+
+                &:hover {
+                    background-color: rgba(239,240,241,0.75);
+                }
+
+                .fsm_logo {
+                    height: 100%;
+                }
+            }
+        }
+
+        ul {
+            height: 100%;
+            display: flex;
+            list-style: none;
+            margin: 0;
+            padding: 0;
+            padding-left: 48px;
+            align-items: center;
+            flex-grow: 1;
+            justify-content: flex-end;
+
+            li {
+                flex-shrink: 0;
+                display: inline-flex;
+                height: 100%;
+
+                a {
+                    color: ${lightblack};
+                    display: inline-flex;
+                    align-items: center;
+                    padding: 0 10px;
+                    text-decoration: none;
+                    white-space: nowrap;
+                    transition: background-color 
+                        cubic-bezier(.165, .84, .44, 1) .25s,color cubic-bezier(.165, .84, .44, 1) .25s;
+
+                    &:hover {
+                        color: #3b4045;
+                        background-color: #eff0f1;
+                    }
+                }
+            }
+        }
+    }
+`;
+
 const mapStateToProps = state => ({
     authReducer: state.authReducer
 });

client/src/elements/Buttons.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components'
+
+export const Button = styled.button`
+    padding: 5px 20px;
+    border-radius: 4px;
+    color: white;
+    font-size: 2rem;
+    border: none;
+    background: indigo;
+`;
+
+export const CancelButton = styled(Button)`
+    background: tomato;
+`;

client/src/elements/Headings.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components'
+import {above} from '../utils'
+
+export const Heading = styled.h1`
+    font-size: 2rem;
+    ${above.large`
+        color:black;
+    `}
+`;

client/src/elements/index.js

@@ -0,0 +1,2 @@
+export * from './Headings'
+export * from './Buttons'

client/src/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 

client/src/utils/Breakpoints.js

@@ -0,0 +1,26 @@
+import {css} from 'styled-components'
+
+const sizes = {
+    small: 400,
+    med: 960,
+    large: 1140
+}
+
+export const above = Object.keys(sizes).reduce((acc, label) => {
+    acc[label] = (...args) => css`
+      @media (min-width: ${sizes[label]}px) {
+        ${css(...args)}
+      }
+    `
+    return acc
+  }, {})
+
+  export const below = Object.keys(sizes).reduce((acc, label) => {
+    acc[label] = (...args) => css`
+      @media (max-width: ${sizes[label]}px) {
+        ${css(...args)}
+      }
+    `
+    return acc
+  }, {})
+

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

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