update header and mobile navigation style

andela · Sep 6, 2019 · 0f911ed · 0f911ed
1 parent 0bf6d7c
commit 0f911ed
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 11 deletions.
diff --git a/src/components/GenreScroll/genreScroll.scss b/src/components/GenreScroll/genreScroll.scss
@@ -23,6 +23,7 @@
     background-repeat: no-repeat;
     background-position: center center;
     background-size: 100% auto;
+    text-shadow: 0.3px 0.3px #000000;
   }
 
   .genre:hover {

diff --git a/src/components/app.scss b/src/components/app.scss
@@ -7,11 +7,8 @@
 *
 * SCSS Designed by TeamDahlia.
 */
-@import url('https://fonts.googleapis.com/css?family=Ubuntu:100,200,300,400,500,600,700,800,900,bold,bolder');
-
-/* $grey: #e5e5e5;
-$white: #ffffff;
-$black: #000008; */
+@import url('https://fonts.googleapis.com/css?family=Ubuntu::300,300i,400,400i,500,500i,700,700i&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,600i,700,700i,900,900i&display=swap');
 
 /*border box allows us to add padding and border to our elements without increasing their size */
 *, *::before, *::after {
@@ -47,7 +44,7 @@ ul {
 ul li {
   list-style: none;
 }
-@import url('https://fonts.googleapis.com/css?family=Ubuntu:400,700&display=swap');
 
-$color-new: #cc4397;
-$color-blue: #0059ff;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Source Sans Pro', sans-serif;
+}
diff --git a/src/components/layout/Navbar/UnauthenticatedNav.jsx b/src/components/layout/Navbar/UnauthenticatedNav.jsx
@@ -61,8 +61,12 @@ const UnauthenticatedNav = () => {
             </div>
           </nav>
           <ul className="sidenav" id="mobile-demo">
-            <button type="button" className="nav-link" onClick={() => { handleOpenModal('signup'); }}>Sign Up </button>
-            <button type="button" className="nav-btn" onClick={() => { handleOpenModal('signin'); }}>Sign In</button>
+            <li>
+              <button type="button" className="nav-link" onClick={() => { handleOpenModal('signup'); }}>Sign Up </button>
+            </li>
+            <li>
+              <button type="button" className="nav-btn" onClick={() => { handleOpenModal('signin'); }}>Sign In</button>
+            </li>
           </ul>
         </div>
       </div>

diff --git a/src/components/layout/Navbar/navbar.scss b/src/components/layout/Navbar/navbar.scss
@@ -96,7 +96,15 @@ $color-black: #000008;
   }
 
   ul.sidenav {
-    padding-left: 2rem;
+    padding: 0 1.5rem;
+
+    li:not(:last-child) {
+      border-bottom: 1px solid $color-black;
+    }
+
+    li button {
+      padding-left: 20px !important;
+    }
   }
 
   .unauthenticated-nav + .sidenav .nav-link, .unauthenticated-nav + .sidenav .nav-btn {