Setup-styled-components#74; Card styles

client/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "axios": "^0.18.0",
     "jwt-decode": "^2.2.0",
+    "polished": "^3.2.0",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-redux": "^6.0.0",

client/src/App.js

@@ -44,13 +44,15 @@ class App extends Component {
                 <Router>
                     <div className="App">
                         <Navbar/>
-                        <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}/>
+                        <main>
+                            <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}/>
+                        </main>
                         <Footer/>
                         <GlobalStyle/>
                     </div>

client/src/Global.js

@@ -1,19 +1,29 @@
 import {createGlobalStyle} from 'styled-components'
+import {normalize} from 'polished'
 
 const GlobalStyle = createGlobalStyle`
+    ${normalize()}
+    html {
+        box-sizing: border-box;
+    }
+
+    *, *:before, *:after {
+        box-sizing: inherit;
+    }
+
     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;
+    main {
+        max-width: 1264px;
+        width: 100%;
+        height: 100%;
+        margin: 0 auto;
     }
 `;
 

client/src/components/homepage/Homepage.js

@@ -22,7 +22,7 @@ class Homepage extends Component {
 
         return (
             <div className="Landing">
-                <Heading>Full Stack Musician</Heading>
+                <Heading>Recent Questions</Heading>
                 {name ? <h2>Hi {name}</h2> : null}
                 <Button>
                     <Link to="/ask">Ask a Question</Link>

client/src/components/layout/Navbar.js

@@ -26,7 +26,7 @@ class Navbar extends Component {
                     <Link to="/login">Login</Link>    
                 </li>
                 <li>
-                    <Link to="/register">Signup</Link>
+                    <Link to="/register">Sign up</Link>
                 </li>
             </ul>
         );

client/src/components/questions/AllQuestions.js

@@ -1,24 +1,27 @@
 import React, {Component} from "react";
 import {Link} from "react-router-dom";
 
+// Styled Components
+import {Card} from '../../elements'
+
 class AllQuestions extends Component {
     render() {
         const {questions} = this.props;
 
         return (
-            <ul className="AllQuestions">
+            <div className="AllQuestions">
                 {questions.map(question => {
                     return (
-                        <li key={question._id}>
+                        <Card key={question._id}>
                             <Link to={`/questions/${question._id}`}>{question.title}</Link> -
                             {question.user ? 
                                 <Link to={`/users/${question.user._id}/${question.user.name}`}>{question.user.name}</Link> :
                                 'User deleted profile :('
                             }
-                        </li>
+                        </Card>
                     )
                 })}
-            </ul>
+            </div>
         )
     }
 }

client/src/elements/Buttons.js

@@ -1,12 +1,21 @@
 import styled from 'styled-components'
+import {darken} from 'polished'
+import {blue, elevation} from '../utils'
 
 export const Button = styled.button`
     padding: 5px 20px;
     border-radius: 4px;
     color: white;
-    font-size: 2rem;
+    font-size: 1rem;
     border: none;
-    background: indigo;
+    background: ${blue};
+    ${elevation[1]};
+    transition: 0.3s ease all;
+
+    &:hover {
+        ${elevation[2]};
+        background: ${darken(0.2, blue)};
+    }
 `;
 
 export const CancelButton = styled(Button)`

client/src/elements/Cards.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components'
+import {lighterblack} from '../utils'
+
+export const Card = styled.div`    
+    padding: 12px 8px;
+    border-bottom: 1px solid ${lighterblack};
+`;

client/src/elements/index.js

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

client/src/utils/Colors.js

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