From 7a1463dbcff23ae202392a0f9716e2bfc48cbf43 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Tue, 4 Sep 2018 20:48:37 +0200
Subject: [PATCH] Footer and Logo

---
 client/public/index.html          |  13 ++++++++++++
 client/src/App.js                 |   6 +++---
 client/src/components/Footer.js   |  33 ++++++++++++++++++++++++++++++
 client/src/components/Home.js     |  10 ++++-----
 client/src/components/Navbar.js   |  19 +++++++++++++++--
 client/src/img/aa-logo-dark-8.png | Bin 0 -> 801 bytes
 client/src/index.css              |  31 ++++++++++++++++------------
 7 files changed, 89 insertions(+), 23 deletions(-)
 create mode 100644 client/src/components/Footer.js
 create mode 100644 client/src/img/aa-logo-dark-8.png

diff --git a/client/public/index.html b/client/public/index.html
index a611e4e0d..9c3b5fe63 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -1,5 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
+  <style>
+
+  body {
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
+  }
+
+  main {
+    flex: 1 0 auto;
+  }
+
+  </style>
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
diff --git a/client/src/App.js b/client/src/App.js
index 131e52d1a..e0862e44e 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -2,13 +2,11 @@ import React, { Component } from 'react';
 import ApolloClient from 'apollo-boost';
 import {ApolloProvider} from 'react-apollo';
 
-import Navbar from './components/Navbar'
 import { Route, BrowserRouter, Switch } from 'react-router-dom'
 
 // Components
 
-
-
+import Navbar from './components/Navbar'
 import Home from './components/Home'
 import Profile from './components/Profile'
 import Browse from './components/Browse'
@@ -16,6 +14,7 @@ import Search from './components/Search'
 import About from './components/About'
 import Contact from './components/Contact'
 import Post from './components/Post'
+import Footer from './components/Footer'
 
 // Apollo Client Setup
 
@@ -40,6 +39,7 @@ class App extends Component {
               <Route path='/contact' component={Contact} />
               <Route path='/:post_id' component={Post} />
             </Switch>
+            <Footer/>
           </div>
 
         </ApolloProvider>
diff --git a/client/src/components/Footer.js b/client/src/components/Footer.js
new file mode 100644
index 000000000..801f04039
--- /dev/null
+++ b/client/src/components/Footer.js
@@ -0,0 +1,33 @@
+import React from 'react'
+
+const Footer = () => {
+  return (
+    <footer>
+      <div className="container">
+        <div className="row">
+          <div className="col l6 s12">
+            <h5 className="white-text">Footer Content</h5>
+            <p className="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
+          </div>
+          <div className="col l4 offset-l2 s12">
+            <h5 className="white-text">Links</h5>
+            <ul>
+              <li><a className="grey-text text-lighten-3" href="#!">Link 1</a></li>
+              <li><a className="grey-text text-lighten-3" href="#!">Link 2</a></li>
+              <li><a className="grey-text text-lighten-3" href="#!">Link 3</a></li>
+              <li><a className="grey-text text-lighten-3" href="#!">Link 4</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div className="footer-copyright">
+        <div className="container">
+        © 2014 Copyright Text
+        <a className="grey-text text-lighten-4 right" href="#!">More Links</a>
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer
diff --git a/client/src/components/Home.js b/client/src/components/Home.js
index a3a40ac48..8d06ed3f2 100644
--- a/client/src/components/Home.js
+++ b/client/src/components/Home.js
@@ -21,7 +21,7 @@ class Home extends Component {
               <img src={PortraitImage} alt="" className="responsive-img materialboxed"></img>
           </div>
           <div className="col s12 l6 offset-l1">
-            <h2 className="indigo-text text-darken-4">Portraits</h2>
+            <h2 className="indigo-text text-darken-4">Title 1</h2>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at lacus congue, suscipit elit nec, tincidunt orci.</p>
           </div>
         </div>
@@ -30,7 +30,7 @@ class Home extends Component {
               <img src={CityImage} alt="" className="responsive-img materialboxed"></img>
           </div>
           <div className="col s12 l6 offset-l1 pull-l5 right-align">
-            <h2 className="indigo-text text-darken-4">Cityscapes</h2>
+            <h2 className="indigo-text text-darken-4">Title 2</h2>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at lacus congue, suscipit elit nec, tincidunt orci.</p>
           </div>
         </div>
@@ -39,7 +39,7 @@ class Home extends Component {
               <img src={NatureImage} alt="" className="responsive-img materialboxed"></img>
           </div>
           <div className="col s12 l6 offset-l1">
-            <h2 className="indigo-text text-darken-4">Nature</h2>
+            <h2 className="indigo-text text-darken-4">Title 3</h2>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at lacus congue, suscipit elit nec, tincidunt orci.</p>
           </div>
         </div>
@@ -71,12 +71,12 @@ class Home extends Component {
               </li>
             </ul>
             <div id="photography" className="col s12">
-                <p className="flow-text indigo-text text-darken-4">Photography</p>
+                <p className="flow-text indigo-text text-darken-4">This</p>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at lacus congue, suscipit elit nec, tincidunt orci.</p>
                 <p>Mauris dolor augue, vulputate in pharetra ac, facilisis nec libero. Fusce condimentum gravida urna, vitae scelerisque erat ornare nec.</p>
             </div>
             <div id="editing" className="col s12">
-                <p className="flow-text indigo-text text-darken-4">Editing</p>
+                <p className="flow-text indigo-text text-darken-4">That</p>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at lacus congue, suscipit elit nec, tincidunt orci.</p>
                 <p>Mauris dolor augue, vulputate in pharetra ac, facilisis nec libero. Fusce condimentum gravida urna, vitae scelerisque erat ornare nec.</p>
             </div>
diff --git a/client/src/components/Navbar.js b/client/src/components/Navbar.js
index 8736f6014..2d4144ccc 100644
--- a/client/src/components/Navbar.js
+++ b/client/src/components/Navbar.js
@@ -1,12 +1,27 @@
 import React from 'react';
 import { NavLink, withRouter } from 'react-router-dom'
 
+// Images
+
+import AALogo from '../img/aa-logo-dark-8.png'
+
 const Navbar = (props) => {
   return (
     <header>
       <nav className="nav-wrapper transparent">
-        <div className="container">
-          <a href="http://www.advancedalgos.net" className="brand-logo">Users Module</a>
+        <div >
+
+          <ul className="left hide-on-med-and-down" id="brand-menu">
+            <li>
+              <a href="http://www.advancedalgos.net">
+                <div>
+                  <img src={AALogo} alt="Advanced Algos" width="120" height="24" topmargin="216"></img>
+                </div>
+              </a>
+            </li>
+            <li><a href="http://www.advancedalgos.net" className="module-name">Users Module</a></li>
+          </ul>
+
           <a href="" className="sidenav-trigger" data-target="mobile-menu">
             <i className="material-icons">menu</i>
           </a>
diff --git a/client/src/img/aa-logo-dark-8.png b/client/src/img/aa-logo-dark-8.png
new file mode 100644
index 0000000000000000000000000000000000000000..a6bcfcb906337b47c4179bbe04a198d343e9acd5
GIT binary patch
literal 801
zcmeAS@N?(olHy`uVBq!ia0vp^6+kS(!3-qX{7&uyQpo{6A+A1|g^xXLAn5=9|8NGJ
z4VMKnfPxTlI0+U&(FGBKlR#Z2x~)w>>*Py<{DK(-5*{=hXmB{-@WCKp!G;8b2^SOu
zHY~VMpiuDP!GwUyc(r3drJMyGk;M!Q+(IDCc<FB49|i^{OHUWa5RcBc({AQHHsEnx
zuaf=!okiKUN&o*(Wlc@j{A8oaW?Um6IO(e3($gkCj{EYSd~tsV(_NLcuVVjNuAcdN
zd|{+m+V^Qc4liTBdH>U|#C6dkC2dc4)Y?_nGd$SKUhrXgvwi1u(Y^LL|K4~n)Sp@R
z`>@T_(#c(2x2{SCY%SiZvZ*Y)?%*{u&5XQ@pX63{>|+qPDEdKU-wLL4D%wn?kE$01
zaCvHN6H&`Mdh_j{wURN$3}uCR6R(|laObh%RPQ;PI8HCx*L--JV6SpzgOlp>9fGpn
zdDBu{L-kjGd7C*+m??YqGIonuYd>bB#46nif0=eTN2w_38E2;a@<JUR#i|EIx_VRO
zj&lCcP@KYI6MD%aA?fkFgx$H@er{{44V{pfCvxSG&ZN9=#(^3=vO2a*JNh0!<>a%D
z;ClZcW5QWsn}j02_X*Df)VF=RXIjj>Ku}M5rReL-eV2r5mN-r6w%^m(e^>ZU#PguP
z4BG<=w^~<3nD6|!IGJ_DHIbrw$98tON{Hlb`g<)*|KO$n8V_#&4%IF@xAkrR>b~+1
zdKPyM-Zc5`opJrn{#Dwmo-JC%eUbA;N7~K56-)dMJokNkeRfFS(^dLG8@rZ>u9h`Y
zjXf}#C(}oA(e4>?>une>zWiZzE%wE3g|n>%(`NH8oSg7o^`BT(Vf)XbDG3})6W%p0
z%z2c>b1iCis?SZH1~JC<4Sr`%pa1WCQ8G?yVoA6EY`;0PetrBVzs2a(96SEDNeh2X
nozE0txc}(C+xN2>_A$nu(wwUNP<T2pWifcV`njxgN@xNAWvYyD

literal 0
HcmV?d00001

diff --git a/client/src/index.css b/client/src/index.css
index 625ec9a08..224f6d63e 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1,12 +1,6 @@
-body {
-  background: #eee;
-  font-family: "Arial";
-}
 
-#main h1{
-  color:#444;
-  text-align: center;
-}
+
+
 
 #main{
   padding: 0px;
@@ -15,6 +9,11 @@ body {
   height: 100%;
 }
 
+#main h1{
+  color:#444;
+  text-align: center;
+}
+
 #user-list{
   color: black;
   padding: 0;
@@ -97,7 +96,7 @@ body {
   margin: 0;
   padding: 0;
   font-family: sans-serif;
-  background: #eee;
+  background-color:rgb(255, 255, 255);
 }
 
 nav a.active{
@@ -122,12 +121,12 @@ nav a.active{
 }
 
 
-
+.module-name{
+  text-decoration-color: white;
+}
 
 header{
-  background: url(img/nav-bar.jpg);
-  background-size: cover;
-  background-position: center;
+  background-color:rgb(48, 48, 54);
   min-height: 50px;
 }
 @media screen and (max-width: 670px){
@@ -145,3 +144,9 @@ header{
 .tabs .tab a:focus, .tabs .tab a:focus.active{
   background: transparent;
 }
+
+
+footer{
+  background-color:rgb(48, 48, 54);
+  min-height: 50px;
+}