Merge pull request #82 from nllerandi/question_styles

Question styles

client/src/App.js

@@ -13,7 +13,7 @@ import store from "./store";
 
 // CSS / Global Styles
 import GlobalStyle from './Global'
-import {black, white} from './utils'
+import {black, white, primary} from './utils'
 
 // Components
 // Layout

client/src/components/homepage/Homepage.js

@@ -15,10 +15,12 @@ import {lighterblack} from '../../utils'
 
 class Homepage extends Component {
     componentDidMount() {
+        console.log('componentDidMount')
         this.props.getQuestions();
     }
 
     render() {
+        console.log('render')
         const {questions} = this.props.questionReducer;
 
         return (

client/src/components/layout/Ads.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import styled from 'styled-components'
+
+// UTILS
+import {elevation, white} from '../../utils'
+
+
+const Ads = () => {
+    return (
+        <AdsStyled>
+            <div className='Ad'>I'm an ad</div>
+            <div className='Ad'>I'm an ad</div>
+            <div className='Ad'>I'm an ad</div>
+            <div className='Ad'>I'm an ad</div>
+            <div className='Ad'>I'm an ad</div>
+        </AdsStyled>
+    )
+}
+
+const AdsStyled = styled.div`
+    /* background-color: yellowgreen; */
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    .Ad {
+        background-color: ${white};
+        ${elevation[1]};
+        padding: 3rem;
+        margin-bottom: 3.5rem;
+    }
+`
+
+export default Ads

client/src/components/questions/Answer.js

@@ -39,7 +39,7 @@ class Answer extends Component {
         const {errors} = this.state;
 
         return (
-            <div className="Answer">
+            <div className="Answer" style={{margin:'3.5rem 0'}}>
                 Answer this question
                 <form noValidate onSubmit={this.onSubmit}>
                     <input

client/src/components/questions/AnswerFeed.js

@@ -1,39 +1,92 @@
 import React, { Component } from 'react';
 import {connect} from 'react-redux';
+import styled from 'styled-components';
+import {Link} from 'react-router-dom'
 
 // Actions
 import {deleteAnswer} from '../../actions/questionActions';
 
+import {Button} from '../../elements'
+import {elevation, white} from '../../utils'
+
 class AnswerFeed extends Component {
+    componentDidMount() {
+        console.log('componentDidMount')
+    }
+
     onAnswerDeleteClick(answerId) {
         this.props.deleteAnswer(this.props.questionReducer.question._id, answerId)
     }
 
+    // {answer.name} - {answer.body} - {answer.date}
+
     render() {
+        console.log('render')
         return (
-            <div className="AnswerFeed">
+            <AnswerFeedStyled className="AnswerFeed">
                 {this.props.questionReducer.question.answers.map(answer => {
                     return (
                         <div 
+                            className='Answer'
                             key={answer._id}
                         >
-                            {answer.name} - {answer.body} - {answer.date}
-                            {this.props.authReducer.user.id === answer.user ?       
-                                <button 
-                                    onClick={this.onAnswerDeleteClick.bind(this, answer._id)}
-                                >
-                                    Delete
-                                </button> : 
-                                null
-                            }
+                            <div className='Answer__text'>{answer.body}</div>
+
+                            <div className='Answer__user'>
+                                <Link to={`/users/${answer.user}/${answer.name}`}>
+                                    <div className='Answer__user__name'>{answer.name}</div>
+                                </Link>
+                                {this.props.authReducer.user.id === answer.user ?       
+                                    <Button.Delete 
+                                        className='Answer__user__delete'
+                                        onClick={this.onAnswerDeleteClick.bind(this, answer._id)}
+                                    >
+                                        Delete
+                                    </Button.Delete> : 
+                                    null
+                                }
+                            </div>
                         </div>
                     )
                 })}
-            </div>
+            </AnswerFeedStyled>
         );
     }
 }
 
+const AnswerFeedStyled = styled.div`
+    /* background-color: yellowgreen;  */
+    /* flex: 1;    */
+    display: flex;
+    flex-direction: column;
+    margin-top: 3.5rem;
+
+    .Answer {
+        background-color: ${white};
+        ${elevation[1]};
+        padding: 3rem;
+        margin-bottom: 3.5rem;
+
+        &__text {
+            margin-bottom: 2rem;
+        }
+
+        &__user {
+            display: flex;
+            /* justify-content: space-between; */
+            align-items: center;
+
+            & a {
+                margin-right: auto;
+            }
+        }
+
+        &__delete {
+
+        }
+    }
+`
+
 const mapStateToProps = state => ({
     authReducer: state.authReducer,
     questionReducer: state.questionReducer

client/src/components/questions/Question.js

@@ -1,16 +1,19 @@
 import React, {Component} from "react";
 import {connect} from "react-redux";
 import {Link} from "react-router-dom";
+import styled from 'styled-components'
 
 // COMPONENTS
 import Answer from "./Answer";
 import AnswerFeed from "./AnswerFeed";
+import Ads from '../layout/Ads'
 
 // ACTIONS
 import {getQuestion, deleteQuestion, likeQuestion, clearErrors} from "../../actions/questionActions";
 
 // STYLED-COMPONENTS
-import {Card} from '../../elements'
+import {Card, Button} from '../../elements'
+import {lighterblack, white, elevation} from '../../utils'
 
 class Question extends Component {
     constructor() {
@@ -51,7 +54,7 @@ class Question extends Component {
         if (likes === undefined) return "...loading"
 
         return (
-            <div>
+            <div className='Question'>
                 <Card
                     className='card' 
                     key={question._id}
@@ -80,28 +83,70 @@ class Question extends Component {
                     </div>        
                 </Card>
 
-                    <p>{body}</p>
-
-                    <button 
-                        onClick={this.onLikeClick.bind(this, questionId)}
-                    >
-                        Like
-                    </button>
-                    {this.state.errors.alreadyLiked}
+                <DetailStyled className='detail'>
+                    <div className='body'>
+                        <div className='body__question'>
+                            <Button className='body__question-button'
+                                onClick={this.onLikeClick.bind(this, questionId)}
+                            >
+                                Like
+                            </Button>
+                            {this.state.errors.alreadyLiked}
+
+                            {user === id ? (
+                                <button onClick={this.deleteQuestion.bind(this, questionId)}>Delete</button>    
+                            ) :
+                            null
+                            }
+                            <p className='paragraph'>
+                                {body}
+                            </p>
+                        </div>
+
+                        <hr/>
+
+                        <Answer/>
+                        <hr/>
+                        <AnswerFeed/>
+                    </div>
 
-                    {user === id ? (
-                        <button onClick={this.deleteQuestion.bind(this, questionId)}>Delete</button>    
-                    ) :
-                    null
-                    }
-                    <hr/>
-                    <Answer/>
-                    <AnswerFeed/>
+                    <Ads/>
+                </DetailStyled>
             </div>
         )
     }
 }
 
+const DetailStyled = styled.div`
+    display: flex;
+    padding: 4.5rem;
+    background-color: ${lighterblack};
+    font-size: 1.4rem;
+
+    .body {
+        background-color: ${white};
+        flex: 0 0 70%;
+        margin-right: 4.5rem;
+        ${elevation[2]};
+        padding: 3rem;
+
+        &__question {
+            display: flex;
+            align-items: flex-start;
+            margin-bottom: 3.5rem;
+
+
+            &-button {
+                margin-right: 1rem;
+            }
+        }
+
+        & .paragraph {
+            margin-top: -4px;
+        }
+    }
+`
+
 const mapStateToProps = state => ({
     questionReducer: state.questionReducer,
     authReducer: state.authReducer,

client/src/elements/Buttons.js

@@ -29,4 +29,9 @@ const SignUpButton = styled(Button)`
     }
 `;
 
-Button.SignUp = SignUpButton;
+const DeleteButton = styled(Button)`
+    background: tomato;
+`
+
+Button.SignUp = SignUpButton;
+Button.Delete = DeleteButton;