styled cards

nickllerandi · Jun 4, 2019 · e695c40 · e695c40
1 parent 6081a8b
commit e695c40
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 21 deletions.
diff --git a/client/src/Global.js b/client/src/Global.js
@@ -1,5 +1,5 @@
 import {createGlobalStyle} from 'styled-components'
-import {normalize} from 'polished'
+// import {normalize} from 'polished'
 import {black, white} from './utils'
 
 // ${normalize()} removed from const GlobalStyle

diff --git a/client/src/components/homepage/Homepage.js b/client/src/components/homepage/Homepage.js
@@ -10,7 +10,7 @@ import {getQuestions} from "../../actions/questionActions";
 import AllQuestions from "../questions/AllQuestions";
 
 // Styled Components
-import {Heading, Button} from '../../elements'
+import {Button} from '../../elements'
 import {lighterblack} from '../../utils'
 
 class Homepage extends Component {
@@ -55,9 +55,9 @@ const HomepageStyled = styled.div`
         }
 
         &__h1 {
-            font-weight: 300;
-            text-transform: uppercase;
-            /* letter-spacing: 1px; */
+            font-weight: 600;
+            /* text-transform: uppercase; */
+            letter-spacing: 1px;
             padding: 1.5rem 3rem;
         }
 

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, primary, secondary, secondary_light} from '../../utils'
+import {white, primary} from '../../utils'
 
 const Sidebar = () => {
     return (

diff --git a/client/src/components/questions/AllQuestions.js b/client/src/components/questions/AllQuestions.js
@@ -3,8 +3,8 @@ import {Link} from "react-router-dom";
 import styled from 'styled-components'
 
 // Styled Components / Utils
-import {lighterblack, black, primary} from '../../utils'
-import {darken} from 'polished'
+import {lighterblack, black, primary, primary_light, white} from '../../utils'
+import {lighten} from 'polished'
 
 class AllQuestions extends Component {
     render() {
@@ -27,7 +27,7 @@ class AllQuestions extends Component {
                             <div className='card__user'>
                                 {question.user ? (
                                     <Link to={`/users/${question.user._id}/${question.user.name}`}>
-                                        <button className='btn-inline'>
+                                        <button className='card__user-button'>
                                             {question.user.name}
                                         </button>
                                     </Link>
@@ -37,11 +37,11 @@ class AllQuestions extends Component {
                             </div>
 
                             <div className='card__rating'>
-                                <div className='card_rating-likes'>
-                                    {question.likes.length}
-                                </div>
-                                <div className='card_rating-answers'>
-                                    {question.answers.length}
+                                <div className='card__rating-answers'>
+                                    {question.answers.length} answers
+                                </div>    
+                                <div className='card__rating-likes'>
+                                    {question.likes.length} likes
                                 </div>
                             </div>
 
@@ -55,25 +55,63 @@ class AllQuestions extends Component {
 
 const Card = styled.div`    
     display: flex;
+    align-items: center;
     
     .card {
-        &__heading {
+        &__heading,
+        &__heading > *:link,
+        &__heading > *:visited {
             margin-right: auto;
+            font-size: 2.25rem;
+            font-weight: 300;
+            /* text-transform: uppercase; */
+            /* letter-spacing: 1px; */
+            padding: 1.5rem;
+            text-decoration: none;
+            color: ${black};
         }
 
         &__user {
-            
-        }
+            font-size: 1.2rem;
+            display: flex;
 
-        &__rating {
-
-            &-likes {
+            &-button {
+                border: none;
+                color: ${primary};
+                font-size: inherit;
+                cursor: pointer;
+                border-bottom: 1px solid currentColor;
+                display: inline-block;
+                background-color: transparent;
+                transition: all .2s;
 
+                &:hover {
+                    color: ${primary_light};
+                }
             }
+        }
+
+        &__rating {
+            background-color: ${primary};
+            margin-left: 3rem;
+            color: ${white};
+            align-self: stretch;
+            padding: 0 2.25rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
 
             &-answers {
+                font-size: 2.25rem;
+                font-weight: 300;
+            }           
 
+            &-likes {
+                font-size: .8rem;
+                text-transform: uppercase;
             }
+
         }
     }
 `;

diff --git a/client/src/elements/Buttons.js b/client/src/elements/Buttons.js
@@ -8,7 +8,7 @@ export const Button = styled.button`
     color: white;
     font-size: inherit;
     border: none;
-    background: ${secondary};
+    background: ${primary};
     cursor: pointer;
     ${elevation[1]};
     transition: 0.3s ease all;

diff --git a/client/src/utils/Colors.js b/client/src/utils/Colors.js
@@ -1,4 +1,5 @@
 export const primary = '#5EC5B6'
+export const primary_light = '#6fbcb1'
 export const secondary = '#54C0E4'
 export const secondary_light = '#8EEEEF'