allquestions-styling

nickllerandi · Apr 28, 2019 · 1656b98 · 1656b98
1 parent 321133b
commit 1656b98
Showing 1 changed file with 60 additions and 9 deletions.
diff --git a/client/src/components/questions/AllQuestions.js b/client/src/components/questions/AllQuestions.js
@@ -1,8 +1,10 @@
 import React, {Component} from "react";
 import {Link} from "react-router-dom";
+import styled from 'styled-components'
 
-// Styled Components
-import {Card} from '../../elements'
+// Styled Components / Utils
+import {lighterblack, black, blue} from '../../utils'
+// import {Card} from '../../elements'
 
 class AllQuestions extends Component {
     render() {
@@ -13,13 +15,24 @@ class AllQuestions extends Component {
                 {questions.map(question => {
                     return (
                         <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 :('
-                            }
+                            <div className='likes'>
+                                <div className='likes_value'>{question.likes.length}</div>
+                                <div>likes</div>
+                            </div>
+
+                            <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}`}> {question.user.name}</Link> :
+                                        'User deleted profile :('
+                                    }
+                                </div>
+                            </div>
                         </Card>
                     )
                 })}
@@ -28,4 +41,42 @@ 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;
+        }
+    }
+
+    .summary {
+        flex: 1 auto;
+        width: auto;
+        float: none;
+        margin: 0;
+        overflow: hidden;
+
+        h3 {
+            font-weight: 400;
+            margin: 0 0 .35em 0;
+            line-height: 1.3;
+        }
+    }
+
+    a {
+        text-decoration: none;
+        color: ${black};
+    }
+
+    a:hover {
+        color: ${blue}
+    }
+`;
+
 export default AllQuestions;