Nav-styles#71

nickllerandi · Apr 22, 2019 · 45afce9 · 45afce9
1 parent b43e290
commit 45afce9
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 11 deletions.
diff --git a/client/src/components/layout/Navbar.js b/client/src/components/layout/Navbar.js
@@ -6,22 +6,18 @@ import styled from 'styled-components'
 import {logoutUser} from "../../actions/authActions";
 import {clearCurrentProfile} from "../../actions/profileActions";
 
-import fsmLogo from '../../img/fsm.png'
+// import fsmLogo from '../../img/fsm-green.png'
 
 const HeaderNav = styled.header`
     min-width: auto;
     box-shadow: 0 1px 0 rgba(12,13,14,0.1), 0 1px 6px rgba(59,64,69,0.1);
-    top: 0;
-    left: 0;
     width: 100%;
     background-color: #fafafb;
-    transition: box-shadow cubic-bezier(.165, .84, .44, 1) .25s;
     height: 50px;
-    border-top: 3px solid #F48024;
+    border-top: 3px solid #6BD7DB;
 
     .container {
         max-width: 1264px;
-        box-sizing: border-box;
         width: 100%;
         height: 100%;
         margin: 0 auto;
@@ -30,6 +26,23 @@ const HeaderNav = styled.header`
         flex-flow: row nowrap;
         align-items: center;
 
+        .main {
+            height: 100%;
+
+            .logo {
+                padding: 0 8px;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                transition: background-color 
+                    cubic-bezier(.165, .84, .44, 1) .25s;
+
+                &:hover {
+                    background-color: rgba(239,240,241,0.75);
+                }
+            }
+        }
+
         ul {
             height: 100%;
             display: flex;
@@ -42,10 +55,8 @@ const HeaderNav = styled.header`
             justify-content: flex-end;
 
             li {
-                position: relative;
                 flex-shrink: 0;
                 display: inline-flex;
-                padding-bottom: 0;
                 height: 100%;
 
                 a {
@@ -55,8 +66,12 @@ const HeaderNav = styled.header`
                     padding: 0 10px;
                     text-decoration: none;
                     white-space: nowrap;
-                    position: relative;
-                    transition: background-color cubic-bezier(.165, .84, .44, 1) .25s,color cubic-bezier(.165, .84, .44, 1) .25s;
+                    transition: background-color 
+                        cubic-bezier(.165, .84, .44, 1) .25s,color cubic-bezier(.165, .84, .44, 1) .25s;
+
+                    &:hover {
+                        color: #3b4045;
+                        background-color: #eff0f1;
                     }
                 }
             }
@@ -103,7 +118,7 @@ class Navbar extends Component {
                 <div className="container">
                     <div className="main">
                         <Link to="/" className="logo">
-                            <span>
+                            <span className="fsm_logo">
                                 Full Stack Musician
                             </span>
                         </Link>

diff --git a/client/src/img/fsm-green.png b/client/src/img/fsm-green.png
diff --git a/client/src/index.css b/client/src/index.css
@@ -2,6 +2,7 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    font-family: Arial, Helvetica, sans-serif;
 }
 
 a:visited {