AllQuestions-styling

nickllerandi · Apr 30, 2019 · 31e728a · 31e728a
1 parent 766e93f
commit 31e728a
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -55,7 +55,12 @@ class App extends Component {
                                 <Route exact path="/users/:id/:name/edit" component={ProfileEdit}/>
                             </div>
                             <div className='sidebar'>
-                                Here is the sidebar
+                                <div className='ad'>
+                                    I'm an ad
+                                </div>
+                                <div className='ad'>
+                                    I'm also an ad
+                                </div>
                             </div>
                         </main>
                         <Footer/>

diff --git a/client/src/Global.js b/client/src/Global.js
@@ -1,5 +1,6 @@
 import {createGlobalStyle} from 'styled-components'
 import {normalize} from 'polished'
+import {elevation} from './utils'
 
 const GlobalStyle = createGlobalStyle`
     ${normalize()}
@@ -33,8 +34,15 @@ const GlobalStyle = createGlobalStyle`
         .sidebar {
             width: 25%;
             height: 50rem;
-            background: lightgrey;
             float: right;
+
+            .ad {
+                padding: 1rem;
+                margin: 1rem;
+                height: 11rem;
+                border: 1px solid #d6d9dc; 
+                ${elevation[1]};
+            }
         }
     }
 `;

diff --git a/client/src/elements/Buttons.js b/client/src/elements/Buttons.js
@@ -23,6 +23,10 @@ export const Button = styled.button`
 
 const SignUpButton = styled(Button)`
     background: ${green};
+    
+    &:hover {
+        background: ${darken(0.2, green)};
+    }
 `;
 
 Button.SignUp = SignUpButton;