From 4faa687c64bdaabb697e7aa577680f4d5d3a4686 Mon Sep 17 00:00:00 2001
From: nicholas llerandi <nicholasllerandi@gmail.com>
Date: Tue, 23 Apr 2019 08:11:21 -0400
Subject: [PATCH] Nav-styles#71; styles organization 1

---
 client/src/App.css                         |  0
 client/src/App.js                          |  5 ++--
 client/src/Global.js                       | 20 ++++++++++++++++
 client/src/components/homepage/Homepage.js | 18 ++++----------
 client/src/components/layout/Navbar.js     | 28 +++++++++++++---------
 client/src/elements/Buttons.js             | 14 +++++++++++
 client/src/elements/Headings.js            |  9 +++++++
 client/src/elements/index.js               |  2 ++
 client/src/index.css                       | 10 --------
 client/src/index.js                        |  1 -
 client/src/utils/Breakpoints.js            | 26 ++++++++++++++++++++
 client/src/utils/index.js                  |  1 +
 12 files changed, 97 insertions(+), 37 deletions(-)
 delete mode 100755 client/src/App.css
 create mode 100644 client/src/Global.js
 create mode 100644 client/src/elements/Buttons.js
 create mode 100644 client/src/elements/Headings.js
 create mode 100644 client/src/elements/index.js
 delete mode 100755 client/src/index.css
 create mode 100644 client/src/utils/Breakpoints.js
 create mode 100644 client/src/utils/index.js

diff --git a/client/src/App.css b/client/src/App.css
deleted file mode 100755
index e69de29..0000000
diff --git a/client/src/App.js b/client/src/App.js
index a5ae7d7..99d2d1d 100755
--- a/client/src/App.js
+++ b/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>
diff --git a/client/src/Global.js b/client/src/Global.js
new file mode 100644
index 0000000..4ed6587
--- /dev/null
+++ b/client/src/Global.js
@@ -0,0 +1,20 @@
+import {createGlobalStyle} from 'styled-components'
+
+const GlobalStyle = createGlobalStyle`
+    body {
+        margin: 0;
+        padding: 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
\ No newline at end of file
diff --git a/client/src/components/homepage/Homepage.js b/client/src/components/homepage/Homepage.js
index 8f1726d..791a6df 100644
--- a/client/src/components/homepage/Homepage.js
+++ b/client/src/components/homepage/Homepage.js
@@ -1,22 +1,15 @@
 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";
 
-import styled from "styled-components"
-
-const Button = styled.button`
-    background: indigo;
-    padding: 5px 10px;
-    border-radius: 4px;
-    color: white;
-    font-size: 2rem;
-    border: none;
-    ${props => props.type === 'cancel' && 'background: tomato'}
-`;
+// Styled Components
+import {Heading, Button} from '../../elements'
 
 class Homepage extends Component {
     componentDidMount() {
@@ -29,12 +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}
                 <Button>
                     <Link to="/ask">Ask a Question</Link>
                 </Button>
-                <Button type='cancel'>Cancel</Button>
                 <AllQuestions
                     questions={questions}
                 />
diff --git a/client/src/components/layout/Navbar.js b/client/src/components/layout/Navbar.js
index 54e30bb..634efc6 100644
--- a/client/src/components/layout/Navbar.js
+++ b/client/src/components/layout/Navbar.js
@@ -6,14 +6,14 @@ 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-green.png'
 
 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);
     width: 100%;
     background-color: #fafafb;
-    height: 50px;
+    height: 90px;
     border-top: 3px solid #6BD7DB;
 
     .container {
@@ -103,12 +103,16 @@ class Navbar extends Component {
 
         const inState = (
             <ul>
-                <Link to={`/users/${user.id}/${user.name}`}>
-                    {user.name}
-                </Link>
-                <button onClick={this.onLogoutClick}>
-                    Logout
-                </button>
+                <li>
+                    <Link to={`/users/${user.id}/${user.name}`}>
+                        {user.name}
+                    </Link>
+                </li>
+                <li>
+                    <Link to="#" onClick={this.onLogoutClick}>
+                        Logout
+                    </Link>
+                </li>
             </ul>
         );
 
@@ -118,9 +122,11 @@ class Navbar extends Component {
                 <div className="container">
                     <div className="main">
                         <Link to="/" className="logo">
-                            <span className="fsm_logo">
-                                Full Stack Musician
-                            </span>
+                            <img 
+                                src={fsmLogo} 
+                                className="fsm_logo"
+                                alt="Full Stack Musician"
+                            />
                         </Link>
                     </div>
                     {isAuthenticated ? inState : outState}
diff --git a/client/src/elements/Buttons.js b/client/src/elements/Buttons.js
new file mode 100644
index 0000000..4aaa66a
--- /dev/null
+++ b/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;
+`;
\ No newline at end of file
diff --git a/client/src/elements/Headings.js b/client/src/elements/Headings.js
new file mode 100644
index 0000000..f97c0e6
--- /dev/null
+++ b/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.small`
+        color:blue
+    `}
+`;
\ No newline at end of file
diff --git a/client/src/elements/index.js b/client/src/elements/index.js
new file mode 100644
index 0000000..03b163b
--- /dev/null
+++ b/client/src/elements/index.js
@@ -0,0 +1,2 @@
+export * from './Headings'
+export * from './Buttons'
\ No newline at end of file
diff --git a/client/src/index.css b/client/src/index.css
deleted file mode 100755
index 6429d0f..0000000
--- a/client/src/index.css
+++ /dev/null
@@ -1,10 +0,0 @@
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: Arial, Helvetica, sans-serif;
-}
-
-a:visited {
-    color: inherit;
-}
\ No newline at end of file
diff --git a/client/src/index.js b/client/src/index.js
index 0c5e75d..955691f 100755
--- a/client/src/index.js
+++ b/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';
 
diff --git a/client/src/utils/Breakpoints.js b/client/src/utils/Breakpoints.js
new file mode 100644
index 0000000..afc66b3
--- /dev/null
+++ b/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 (max-width: ${sizes[label] / 16}em) {
+        ${css(...args)}
+      }
+    `
+    return acc
+  }, {})
+
+  export const below = Object.keys(sizes).reduce((acc, label) => {
+    acc[label] = (...args) => css`
+      @media (max-width: ${sizes[label] / 16}em) {
+        ${css(...args)}
+      }
+    `
+    return acc
+  }, {})
+
diff --git a/client/src/utils/index.js b/client/src/utils/index.js
new file mode 100644
index 0000000..96d34a0
--- /dev/null
+++ b/client/src/utils/index.js
@@ -0,0 +1 @@
+export * from './Breakpoints'
\ No newline at end of file