styling homepage heading

nickllerandi · May 31, 2019 · 5954522 · 5954522
1 parent d77ff3a
commit 5954522
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 12 deletions.
diff --git a/client/src/Global.js b/client/src/Global.js
@@ -2,8 +2,9 @@ import {createGlobalStyle} from 'styled-components'
 import {normalize} from 'polished'
 import {black, white} from './utils'
 
+// ${normalize()} removed from const GlobalStyle
+
 const GlobalStyle = createGlobalStyle`
-    ${normalize()}
 
     * {
         margin: 0;

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.35rem;
+        }
+
+        &__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

diff --git a/client/src/components/layout/Sidebar.js b/client/src/components/layout/Sidebar.js
@@ -6,7 +6,7 @@ import styled from 'styled-components'
 import sprites from '../../img/sprite.svg'
 
 // UTILS
-import {white} from '../../utils'
+import {white, primary, secondary, secondary_light} from '../../utils'
 
 const Sidebar = () => {
     return (
@@ -52,17 +52,35 @@ const SidebarStyled = styled.div`
     justify-content: space-between;
 
     .side-nav {
+        font-size: 1.4rem;
+        list-style: none;
+        margin-top: 3.5rem;
+
         &__item {
 
         }
 
-        &__link {
+        &__link:link,
+        &__link:visited {
+            color: ${white};
+            text-decoration: none;
+            text-transform: uppercase;
+            display: block;
+            padding: 1.5rem 3rem;
+
+            display: flex;
+            align-items: center;
+        }
 
+        &__link:hover {
+            color: ${primary}
         }
 
         &__icon {
             width: 1.75rem;
             height: 1.75rem;
+            margin-right: 2rem;
+            fill: currentColor;
         }
     }
 

diff --git a/client/src/components/questions/AllQuestions.js b/client/src/components/questions/AllQuestions.js
@@ -6,8 +6,6 @@ import styled from 'styled-components'
 import {lighterblack, black, primary} from '../../utils'
 import {darken} from 'polished'
 
-// import {Card} from '../../elements'
-
 class AllQuestions extends Component {
     render() {
         const {questions} = this.props;

diff --git a/client/src/elements/Buttons.js b/client/src/elements/Buttons.js
@@ -6,7 +6,7 @@ export const Button = styled.button`
     padding: 5px 20px;
     border-radius: 4px;
     color: white;
-    font-size: 1.4rem;
+    font-size: inherit;
     border: none;
     background: ${secondary};
     cursor: pointer;