diff --git a/client/src/App.js b/client/src/App.js
index 38b8463..7064f6a 100755
--- a/client/src/App.js
+++ b/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
diff --git a/client/src/components/homepage/Homepage.js b/client/src/components/homepage/Homepage.js
index f0357d3..0b5a8f7 100644
--- a/client/src/components/homepage/Homepage.js
+++ b/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 (
diff --git a/client/src/components/questions/AnswerFeed.js b/client/src/components/questions/AnswerFeed.js
index 62ee8fc..dc7a25a 100644
--- a/client/src/components/questions/AnswerFeed.js
+++ b/client/src/components/questions/AnswerFeed.js
@@ -1,39 +1,91 @@
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 (
-
+
{this.props.questionReducer.question.answers.map(answer => {
return (
- {answer.name} - {answer.body} - {answer.date}
- {this.props.authReducer.user.id === answer.user ?
-
:
- null
- }
+
{answer.body}
+
+
+
+
{answer.name}
+
+ {this.props.authReducer.user.id === answer.user ?
+
+ Delete
+ :
+ null
+ }
+
)
})}
-
+
);
}
}
+const AnswerFeedStyled = styled.div`
+ /* background-color: yellowgreen; */
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+
+ .Answer {
+ background-color: ${white};
+ ${elevation[2]};
+ 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
diff --git a/client/src/components/questions/Question.js b/client/src/components/questions/Question.js
index 5ee297b..0631c51 100644
--- a/client/src/components/questions/Question.js
+++ b/client/src/components/questions/Question.js
@@ -11,7 +11,8 @@ import AnswerFeed from "./AnswerFeed";
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() {
@@ -83,26 +84,30 @@ class Question extends Component {
-
{body}
-
- {this.state.errors.alreadyLiked}
-
- {user === id ? (
-
- ) :
- null
- }
+
+
+ {this.state.errors.alreadyLiked}
+
+ {user === id ? (
+
+ ) :
+ null
+ }
+
+ {body}
+
+
+
+
-
+
)
@@ -112,16 +117,30 @@ class Question extends Component {
const DetailStyled = styled.div`
display: flex;
padding: 4.5rem;
+ background-color: ${lighterblack};
+ font-size: 1.4rem;
.body {
- background-color: orangered;
+ background-color: ${white};
flex: 0 0 60%;
margin-right: 4.5rem;
- }
+ ${elevation[2]};
+ padding: 3rem;
- .answers {
- background-color: yellowgreen;
- flex: 1;
+ &__question {
+ display: flex;
+ align-items: flex-start;
+ margin-bottom: 1rem;
+
+
+ &-button {
+ margin-right: 1rem;
+ }
+ }
+
+ & .paragraph {
+ margin-top: -4px;
+ }
}
`
diff --git a/client/src/elements/Buttons.js b/client/src/elements/Buttons.js
index 79351e2..5df28df 100644
--- a/client/src/elements/Buttons.js
+++ b/client/src/elements/Buttons.js
@@ -29,4 +29,9 @@ const SignUpButton = styled(Button)`
}
`;
-Button.SignUp = SignUpButton;
\ No newline at end of file
+const DeleteButton = styled(Button)`
+ background: tomato;
+`
+
+Button.SignUp = SignUpButton;
+Button.Delete = DeleteButton;
\ No newline at end of file