Merge pull request #81 from nllerandi/card_redesign

Card redesign
nickllerandi · Jun 4, 2019 · c28618c · c28618c
2 parents 7dc4e6d + e695c40
commit c28618c
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 67 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() {
@@ -14,28 +14,37 @@ class AllQuestions extends Component {
             <div className="AllQuestions">
                 {questions.map(question => {
                     return (
-                        <Card key={question._id}>
-                            <div className='likes'>
-                                <div className='likes_value'>{question.likes.length}</div>
-                                <div>likes</div>
-                            </div>
+                        <Card
+                            className='card' 
+                            key={question._id}
+                        >
+                            <h3 className='card__heading'>
+                                <Link to={`/questions/${question._id}`}>
+                                    {question.title}
+                                </Link>
+                            </h3> 
 
-                            <div className='summary'>
-                                <h3>
-                                    <Link to={`/questions/${question._id}`}>
-                                        {question.title}
-                                    </Link>
-                                </h3>
-                                <div className='started'>
-                                    {question.user ? (
-                                        <Link to={`/users/${question.user._id}/${question.user.name}`}>
+                            <div className='card__user'>
+                                {question.user ? (
+                                    <Link to={`/users/${question.user._id}/${question.user.name}`}>
+                                        <button className='card__user-button'>
                                             {question.user.name}
-                                        </Link>
-                                    ) :
-                                        'User deleted profile :('
-                                    }
+                                        </button>
+                                    </Link>
+                                ) :
+                                    'User deleted profile :('
+                                }
+                            </div>
+
+                            <div className='card__rating'>
+                                <div className='card__rating-answers'>
+                                    {question.answers.length} answers
+                                </div>    
+                                <div className='card__rating-likes'>
+                                    {question.likes.length} likes
                                 </div>
                             </div>
+
                         </Card>
                     )
                 })}
@@ -46,54 +55,63 @@ class AllQuestions extends Component {
 
 const Card = styled.div`    
     display: flex;
-    padding: 12px 8px;
-    border-bottom: 1px solid ${lighterblack};
-    color: ${black};
-
-    .likes {
-        padding-right: 30px;
-
-        &_value {
-            text-align: center;
+    align-items: center;
+    
+    .card {
+        &__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};
         }
-    }
 
-    .summary {
-        flex: 1 auto;
-        width: auto;
-        float: none;
-        margin: 0;
-        overflow: hidden;
+        &__user {
+            font-size: 1.2rem;
+            display: flex;
 
-        h3 {
-            font-weight: 400;
-            margin: 0 0 .35em 0;
-            line-height: 1.3;
-
-            a {
-                text-decoration: none;
-                color: ${black};
-            }
+            &-button {
+                border: none;
+                color: ${primary};
+                font-size: inherit;
+                cursor: pointer;
+                border-bottom: 1px solid currentColor;
+                display: inline-block;
+                background-color: transparent;
+                transition: all .2s;
 
-            a:hover {
-                color: ${primary}
+                &:hover {
+                    color: ${primary_light};
+                }
             }
         }
 
-        .started {
-            width: auto;
-            line-height: inherit;
-            padding-top: 4px;
-            float: right;
-            
-            a {
-                text-decoration: none;
-                color: ${primary};
-                
-                &:hover {
-                    color: ${darken(0.2, primary)};
-                }
+        &__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'