In the process of refractoring NavBar component- will finish once I g…

…et home
mvhs-apps · Jul 12, 2018 · 59497db · 59497db
1 parent 4fe4945
commit 59497db
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 86 deletions.
diff --git a/public/index.html b/public/index.html
@@ -10,7 +10,6 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -20,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Shelterhub</title>
+    <title>ShelterHub</title>
   </head>
   <body>
     <noscript>

diff --git a/src/components/about.js b/src/components/about.js
@@ -7,7 +7,7 @@ export default class About extends Component {
       <div className="about" >
         <NavBar />
         <div className="page-content">
-          <h1 className="title-head">
+          <h1>
               About Us
           </h1>
           <br />

diff --git a/src/components/nav-bar.js b/src/components/nav-bar.js
@@ -3,17 +3,17 @@ import { Link } from 'react-router-dom';
 export default class NavBar extends Component {
   render() {
     return(
-      <ul className="nav-bar">
-
-        <li className="nav-bar_item" id="header-item"> <Link className="nav-bar_header" to=''>Shelterhub</Link> </li>
-        <li className="nav-bar_item"> <Link className="nav-bar_button" to='/home'>Home</Link> </li>
-        <li className="nav-bar_item"> <Link className="nav-bar_button" to='/database'>Inventory</Link> </li>
-        <li className="nav-bar_item"> <Link className="nav-bar_button" to='/profile'>Profile</Link> </li>
-        <li className="nav-bar_item"> <Link className="nav-bar_button" to='/about'>About</Link> </li> 
-        <li className="nav-bar_item"> <Link className="nav-bar_button" to='/contactus'>Contact Us</Link> </li> 
-        <li className="nav-bar_item"> <Link className="nav-bar_button" to='/settings'>Settings</Link> </li>
-
-      </ul>
+      <div className="nav-bar">
+        <ul>
+          <li><a href="/home">ShelterHub</a></li>
+          <li><a href="/home">ShelterHub</a></li>
+          <li><a href="/home">ShelterHub</a></li>
+          <li><a href="/home">ShelterHub</a></li>
+          <li><a href="/home">ShelterHub</a></li>
+          <li><a href="/home">ShelterHub</a></li>
+          <li><a href="/home">ShelterHub</a></li>
+        </ul>
+      </div>
     );
   }
 }
diff --git a/src/stylesheets/style.css b/src/stylesheets/style.css
@@ -49,80 +49,14 @@ body {
 }
 
 /* === NavBar Component === */
-
 .nav-bar {
-  list-style-type: none;
-  display: grid;
-  grid-template-columns: 1fr repeat(6, 125px);
-  grid-template-rows: 1fr;
-  background-color: var(--forest-green);
-  margin-top: 0;
-}
-
-.nav-bar:nth-child(n+2) {
-  grid-column: n;
-  grid-row: 1;
-}
-
-/* .nav-bar:nth-child(1) {
-  grid-column: 1;
-  grid-row: 1;
-}
-
-.nav-bar:nth-child(2) {
-  grid-column: 2;
-  grid-row: 1;
-}
-
-.nav-bar:nth-child(3) {
-  grid-column: 3;
-  grid-row: 1;
-}
-
-.nav-bar:nth-child(4) {
-  grid-column: 4;
-  grid-row: 1;
-} */
-
-.nav-bar_item .nav-bar_button {
-  display: block;
-  background-color: var(--light-green);
-  color: hsl(0, 0%, 20%);
-  font-family: bebas neue;
-  font-size: 1.5rem;
-  border: none;
-  min-width: 65px;
-  text-align: center;
-  padding: 10px;
-  text-decoration: none;
-}
-
-.nav-bar_button:hover {
-  background-color: var(--light-green--desat1);
-}
-
-.nav-bar_button:active {
-  background-color: var(--light-green--desat2);
-}
-
-.nav-bar_header {
-  color: white;
-  font-family: bebas neue;
-  font-size: 2.2rem;
-  border: none;
-  padding: 10px;
-  text-decoration: none;
+  font-family: DINPro Black;
+  color: Black; 
+  text-decoration: none; 
 }
 
-@media (max-width: 500px) {
-  .nav-bar {
-    grid-template-rows: 1fr 1fr;
-  }
-
-  .nav-bar_item {
-    grid-column: 1;
-    grid-row: 2;
-  }
+.nav-bar li {
+  display: inline; 
 }
 
 /* === SignInPanel Component === */
@@ -230,7 +164,7 @@ h1 {
   font-family: DINPro Black; 
 }
 
-h2 {
+h2, h3, h4, h5, h6 {
   font-family: DINPro Bold;
 }