question styles 904

nickllerandi · Jun 19, 2019 · dc9407b · dc9407b
1 parent ff741af
commit dc9407b
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 7 deletions.
diff --git a/client/src/components/layout/Ads.js b/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
diff --git a/client/src/components/questions/Answer.js b/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

diff --git a/client/src/components/questions/AnswerFeed.js b/client/src/components/questions/AnswerFeed.js
@@ -56,13 +56,14 @@ class AnswerFeed extends Component {
 
 const AnswerFeedStyled = styled.div`
     /* background-color: yellowgreen;  */
-    flex: 1;   
+    /* flex: 1;    */
     display: flex;
     flex-direction: column;
+    margin-top: 3.5rem;
 
     .Answer {
         background-color: ${white};
-        ${elevation[2]};
+        ${elevation[1]};
         padding: 3rem;
         margin-bottom: 3.5rem;
 

diff --git a/client/src/components/questions/Question.js b/client/src/components/questions/Question.js
@@ -6,6 +6,7 @@ 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";
@@ -105,9 +106,11 @@ class Question extends Component {
                         <hr/>
 
                         <Answer/>
+                        <hr/>
+                        <AnswerFeed/>
                     </div>
-
-                    <AnswerFeed/>
+                    
+                    <Ads/>
                 </DetailStyled>
             </div>
         )
@@ -122,15 +125,15 @@ const DetailStyled = styled.div`
 
     .body {
         background-color: ${white};
-        flex: 0 0 60%;
+        flex: 0 0 70%;
         margin-right: 4.5rem;
         ${elevation[2]};
         padding: 3rem;
 
         &__question {
             display: flex;
             align-items: flex-start;
-            margin-bottom: 1rem;
+            margin-bottom: 3.5rem;
 
 
             &-button {