Nav-styles#71; styles organization 1

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: 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,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}
                 />

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}

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.small`
+        color:blue
+    `}
+`;

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 (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
+  }, {})
+

client/src/utils/index.js

@@ -0,0 +1 @@
+export * from './Breakpoints'