From dc9407b780fe79d7e153376990e374310c19ceea Mon Sep 17 00:00:00 2001
From: nicholas llerandi <nicholasllerandi@gmail.com>
Date: Wed, 19 Jun 2019 09:04:33 -0400
Subject: [PATCH] question styles 904

---
 client/src/components/layout/Ads.js           | 34 +++++++++++++++++++
 client/src/components/questions/Answer.js     |  2 +-
 client/src/components/questions/AnswerFeed.js |  5 +--
 client/src/components/questions/Question.js   | 11 +++---
 4 files changed, 45 insertions(+), 7 deletions(-)
 create mode 100644 client/src/components/layout/Ads.js

diff --git a/client/src/components/layout/Ads.js b/client/src/components/layout/Ads.js
new file mode 100644
index 0000000..bf2d533
--- /dev/null
+++ 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
\ No newline at end of file
diff --git a/client/src/components/questions/Answer.js b/client/src/components/questions/Answer.js
index 11e2fd2..b112c61 100644
--- 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
index dc7a25a..64e3e71 100644
--- 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
index 0631c51..6065f7d 100644
--- 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,7 +125,7 @@ const DetailStyled = styled.div`
 
     .body {
         background-color: ${white};
-        flex: 0 0 60%;
+        flex: 0 0 70%;
         margin-right: 4.5rem;
         ${elevation[2]};
         padding: 3rem;
@@ -130,7 +133,7 @@ const DetailStyled = styled.div`
         &__question {
             display: flex;
             align-items: flex-start;
-            margin-bottom: 1rem;
+            margin-bottom: 3.5rem;
 
 
             &-button {