Merge pull request #80 from nllerandi/Setup-grid-system#76

Setup grid system#76
nickllerandi · Jun 3, 2019 · 7dc4e6d · 7dc4e6d
2 parents e511c0a + 16fd174
commit 7dc4e6d
Show file tree

Hide file tree

Showing 12 changed files with 378 additions and 156 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/client/src/App.js b/client/src/App.js
@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import {BrowserRouter as Router, Route} from "react-router-dom";
 import {Provider} from "react-redux";
 import jwtDecode from "jwt-decode";
+import styled from 'styled-components';
 
 // Utils / Actions
 import {setAuthToken} from "./utils/setAuthToken";
@@ -12,10 +13,12 @@ import store from "./store";
 
 // CSS / Global Styles
 import GlobalStyle from './Global'
+import {black, white} from './utils'
 
 // Components
 // Layout
 import Navbar from "./components/layout/Navbar";
+import Sidebar from './components/layout/Sidebar'
 import Homepage from "./components/homepage/Homepage";
 import Footer from "./components/layout/Footer";
 
@@ -42,34 +45,51 @@ class App extends Component {
         return (
             <Provider store={store}>
                 <Router>
-                    <div className="App">
+                    <AppWrapper>
                         <Navbar/>
-                        <main>
-                            <div className='mainbar'>
+                        <ContentWrapper>
+                            <SidebarWrapper>
+                                <Sidebar/>
+                            </SidebarWrapper>
+                            <MainbarWrapper>
                                 <Route exact path="/" component={Homepage}/>
                                 <Route exact path="/register" component={Register}/>
                                 <Route exact path="/login" component={Login}/>
                                 <Route exact path="/ask" component={Ask}/>
                                 <Route exact path="/questions/:id" component={Question}/>
                                 <Route exact path="/users/:id/:name" component={Profile}/>
                                 <Route exact path="/users/:id/:name/edit" component={ProfileEdit}/>
-                            </div>
-                            <div className='sidebar'>
-                                <div className='ad ad--1'>
-                                    I'm an ad
-                                </div>
-                                <div className='ad ad--2'>
-                                    I'm also an ad
-                                </div>
-                            </div>
-                        </main>
+                            </MainbarWrapper>
+                        </ContentWrapper>
                         <Footer/>
                         <GlobalStyle/>
-                    </div>
+                    </AppWrapper>
                 </Router>
             </Provider>
         );
     }
 }
 
+const AppWrapper = styled.div`
+    max-width: 125rem;
+    margin: 4rem auto;
+    background-color: ${white};
+    min-height: 100vh;
+`;
+
+const ContentWrapper = styled.div`
+    display: flex;
+`;
+
+const SidebarWrapper = styled.nav`
+    background-color: ${black};
+    flex: 0 0 15%;
+    color: ${white};
+`;
+
+const MainbarWrapper = styled.div`
+    background-color: ${white};
+    flex: 1;
+`;
+
 export default App;
diff --git a/client/src/Global.js b/client/src/Global.js
@@ -1,54 +1,36 @@
 import {createGlobalStyle} from 'styled-components'
 import {normalize} from 'polished'
-import {elevation} from './utils'
+import {black, white} from './utils'
+
+// ${normalize()} removed from const GlobalStyle
 
 const GlobalStyle = createGlobalStyle`
-    ${normalize()}
 
     * {
         margin: 0;
         padding: 0;
     }
 
-    *, *:before, *:after {
+    *, 
+    *:before, 
+    *:after {
         box-sizing: inherit;
     }
 
     html {
         box-sizing: border-box;
+        font-size: 62.5%;
     }
 
     body {
-        padding: 90px 0 0;
         font-family: Arial, Helvetica, sans-serif;
+        font-weight: 400;
+        line-height: 1.6;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
-    }
-
-    .App {
-        max-width: 1264px;
-        width: 90%;
-        height: 100%;
-        margin: 0 auto;
-
-        .mainbar {
-            width: 75%;
-            float: left;
-        }
-
-        .sidebar {
-            width: 25%;
-            float: right;
-        }
-    }
-
-    .ad {
-        padding: 1rem;
-        margin: 1rem;
-        height: 11rem;
-        width: 15rem;
-        border: 1px solid #d6d9dc; 
-        ${elevation[1]};
+        background-color: ${white};
+        color: ${black};
+        min-height: 100vh;
     }
 `;
 

diff --git a/client/src/components/homepage/Homepage.js b/client/src/components/homepage/Homepage.js
@@ -1,6 +1,7 @@
 import React, {Component} from "react";
 import {Link} from "react-router-dom";
 import {connect} from "react-redux";
+import styled from 'styled-components'
 
 // Actions
 import {getQuestions} from "../../actions/questionActions";
@@ -10,6 +11,7 @@ import AllQuestions from "../questions/AllQuestions";
 
 // Styled Components
 import {Heading, Button} from '../../elements'
+import {lighterblack} from '../../utils'
 
 class Homepage extends Component {
     componentDidMount() {
@@ -20,19 +22,53 @@ class Homepage extends Component {
         const {questions} = this.props.questionReducer;
 
         return (
-            <div className="RecentQuestions">
-                <Heading>Recent Questions</Heading>
-                <Link to="/ask">
-                    <Button>Ask a Question</Button>
-                </Link>
+            <HomepageStyled className="homepage">
+                <div className='homepage__heading'>
+                    <h1 className='homepage__h1'>
+                        Recent Questions
+                    </h1>
+
+                    <div className='homepage__ask-button'>
+                        <Link to="/ask">
+                            <Button>Ask a Question</Button>
+                        </Link>
+                    </div>
+                </div>
+
                 <AllQuestions
                     questions={questions}
                 />
-            </div>
+            </HomepageStyled>
         )
     }
 }
 
+const HomepageStyled = styled.div`
+
+    .homepage {
+        &__heading {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid ${lighterblack};
+            font-size: 1.4rem;
+        }
+
+        &__h1 {
+            font-weight: 300;
+            text-transform: uppercase;
+            /* letter-spacing: 1px; */
+            padding: 1.5rem 3rem;
+        }
+
+        &__ask-button {
+            display: inline-block;
+        }
+    }
+
+    
+`
+
 const mapStateToProps = state => ({
     authReducer: state.authReducer,
     questionReducer: state.questionReducer