Setup-styled-components#74

nickllerandi · Apr 27, 2019 · a571a13 · a571a13
1 parent f6be57b
commit a571a13
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 13 deletions.
diff --git a/client/src/components/homepage/Homepage.js b/client/src/components/homepage/Homepage.js
@@ -18,7 +18,6 @@ class Homepage extends Component {
 
     render() {
         const {questions} = this.props.questionReducer;
-        const {name} = this.props.authReducer.user;
 
         return (
             <div className="Landing">

diff --git a/client/src/components/layout/Navbar.js b/client/src/components/layout/Navbar.js
@@ -8,6 +8,7 @@ import {clearCurrentProfile} from "../../actions/profileActions";
 
 import fsmLogo from '../../img/fsm-green2.png'
 import {lightblack, green, elevation, fixed} from '../../utils'
+import {Button} from '../../elements'
 
 class Navbar extends Component {
     onLogoutClick = (e) => {
@@ -25,9 +26,11 @@ class Navbar extends Component {
                 <li>
                     <Link to="/login">Login</Link>    
                 </li>
-                <li>
-                    <Link to="/register">Sign up</Link>
-                </li>
+                    <Link to="/register">
+                        <Button.SignUp>
+                            Sign Up
+                        </Button.SignUp>
+                    </Link>
             </ul>
         );
 

diff --git a/client/src/elements/Buttons.js b/client/src/elements/Buttons.js
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 import {darken} from 'polished'
-import {blue, elevation} from '../utils'
+import {blue, green, elevation} from '../utils'
 
 export const Button = styled.button`
     padding: 5px 20px;
@@ -17,8 +17,12 @@ export const Button = styled.button`
         ${elevation[2]};
         background: ${darken(0.2, blue)};
     }
+
+    &:focus {outline:0;}
+`;
+
+const SignUpButton = styled(Button)`
+    background: ${green};
 `;
 
-export const CancelButton = styled(Button)`
-    background: tomato;
-`;
+Button.SignUp = SignUpButton;
diff --git a/client/src/elements/Cards.js b/client/src/elements/Cards.js
@@ -1,16 +1,16 @@
 import styled from 'styled-components'
-import {black, lighterblack, blue, lightblue} from '../utils'
+import {black, lighterblack, blue} from '../utils'
 
 export const Card = styled.div`    
     padding: 12px 8px;
     border-bottom: 1px solid ${lighterblack};
 
-    a:hover {
-        color: ${blue}
-    }
-
     a {
         text-decoration: none;
         color: ${black};
     }
+
+    a:hover {
+        color: ${blue}
+    }
 `;