Replace navbar bottom border with softer shadow

Author: taneliang

website/src/styles/constants.scss

@@ -7,9 +7,7 @@ $navtab-height: 3rem;
 $side-nav-width-md: 4rem;
 $side-nav-width-lg: 10rem;
 
-$navtab-shadow-height: 0.8rem;
-$navtab-shadow-color: rgba(#000, 0.1);
-$navtab-shadow-color-night: rgba(#000, 0.7);
+$navbar-shadow-height: 0.2rem;
 
 // Type
 $sm-font-size-ratio: 0.875;
@@ -53,7 +51,7 @@ $nusmods-theme-colors: (
     #95aec7,
     #ae95c7,
     #c795ae,
-    #c79595
+    #c79595,
   ),
   chalk: (
     #fb9fb1,
@@ -63,7 +61,7 @@ $nusmods-theme-colors: (
     #12cfc0,
     #6fc2ef,
     #e1a3ee,
-    #deaf8f
+    #deaf8f,
   ),
   eighties: (
     #f2777a,
@@ -73,7 +71,7 @@ $nusmods-theme-colors: (
     #6cc,
     #69c,
     #c9c,
-    #d27b53
+    #d27b53,
   ),
   google: (
     #cc342b,
@@ -83,7 +81,7 @@ $nusmods-theme-colors: (
     #3971ed,
     #79a4f9,
     #a36ac7,
-    #ec9998
+    #ec9998,
   ),
   mocha: (
     #cb6077,
@@ -93,7 +91,7 @@ $nusmods-theme-colors: (
     #7bbda4,
     #8ab3b5,
     #a89bb9,
-    #bb9584
+    #bb9584,
   ),
   monokai: (
     #f92672,
@@ -103,7 +101,7 @@ $nusmods-theme-colors: (
     #a1efe4,
     #66d9ef,
     #ae81ff,
-    #c63
+    #c63,
   ),
   ocean: (
     #bf616a,
@@ -113,7 +111,7 @@ $nusmods-theme-colors: (
     #96b5b4,
     #8fa1b3,
     #b48ead,
-    #ab7967
+    #ab7967,
   ),
   oceanic-next: (
     #ec5f67,
@@ -123,7 +121,7 @@ $nusmods-theme-colors: (
     #5fb3b3,
     #69c,
     #c594c5,
-    #ab7967
+    #ab7967,
   ),
   paraiso: (
     #ef6155,
@@ -133,7 +131,7 @@ $nusmods-theme-colors: (
     #5bc4bf,
     #06b6ef,
     #815ba4,
-    #e96ba8
+    #e96ba8,
   ),
   railscasts: (
     #da4939,
@@ -143,7 +141,7 @@ $nusmods-theme-colors: (
     #519f50,
     #6d9cbe,
     #b6b3eb,
-    #bc9458
+    #bc9458,
   ),
   tomorrow: (
     #c66,
@@ -153,7 +151,7 @@ $nusmods-theme-colors: (
     #8abeb7,
     #81a2be,
     #b294bb,
-    #a3685a
+    #a3685a,
   ),
   twilight: (
     #cf6a4c,
@@ -163,7 +161,7 @@ $nusmods-theme-colors: (
     #afc4db,
     #7587a6,
     #9b859d,
-    #9b703f
+    #9b703f,
   ),
 );
 

website/src/styles/utils/css-variables.scss

@@ -20,7 +20,7 @@
   --body-bg-transparent: #{rgba($body-bg, 0)};
 
   // Shadows
-  --navtab-shadow: #{rgba(#000, 0.1)};
+  --navbar-shadow: #{rgba(#000, 0.09)};
 
   // Body font color
   --body-color: #{$body-color};
@@ -51,7 +51,7 @@ body.mode-dark {
   --body-bg-transparent: #{rgba($gray-dark, 0)};
 
   // Shadows
-  --navtab-shadow: #{rgba(#000, 0.26)};
+  --navbar-shadow: #{rgba(#000, 0.5)};
 
   // Body font color
   --body-color: #aaa;

website/src/views/components/SearchkitSearchBox.scss

@@ -13,13 +13,13 @@
 
   @include media-breakpoint-down(sm) {
     z-index: $module-finder-search-z-index-sm;
-    padding: 0 0 $navtab-shadow-height;
+    padding: 0 0 $navbar-shadow-height;
     margin: -1rem (-$grid-gutter-width / 2) 0;
     border-top: 1px solid var(--gray-lighter);
     background: linear-gradient(
       to bottom,
-      var(--body-bg) calc(100% - #{$navtab-shadow-height}),
-      var(--navtab-shadow) calc(100% - #{$navtab-shadow-height}),
+      var(--body-bg) calc(100% - #{$navbar-shadow-height}),
+      var(--navbar-shadow) calc(100% - #{$navbar-shadow-height}),
       rgba(#000, 0)
     );
   }

website/src/views/components/SideMenu.scss

@@ -67,7 +67,7 @@ $offset-top: $navbar-height + 1rem;
     transform: translateY($closed-menu-translation);
     transition: transform $animation-duration, box-shadow $animation-duration;
     &.isOpen {
-      box-shadow: 0 -10px 20px var(--navtab-shadow);
+      box-shadow: 0 -10px 20px var(--navbar-shadow);
       transform: translateY(0);
     }
   }

website/src/views/layout/Navbar.scss

@@ -11,10 +11,21 @@ $logo-vert-padding: 0.875rem;
   z-index: $navbar-z-index;
   padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
   background: var(--body-bg);
-  border-bottom: 1px solid var(--gray-lighter);
   display: flex;
   flex-flow: column;
   align-items: center;
+
+  // Fake shadow - don't use box shadow as the sides will be lighter
+  &::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    bottom: -$navbar-shadow-height;
+    left: 0;
+    height: $navbar-shadow-height;
+    background: linear-gradient(to bottom, var(--navbar-shadow), rgba(#000, 0));
+    pointer-events: none;
+  }
 }
 
 .topBar {
@@ -78,20 +89,6 @@ $logo-vert-padding: 0.875rem;
   .navbarWrapper {
     top: -$navbar-height;
     border-bottom-width: 0;
-
-    // Fake shadow - can't use box shadow because they will appear on top of the
-    // top nav bar
-    // TODO: See if box shadow works now because this shadow is now on the nav bar itself
-    &::after {
-      content: '';
-      position: absolute;
-      right: 0;
-      bottom: -$navtab-shadow-height; // TODO: Rename these vars
-      left: 0;
-      height: $navtab-shadow-height;
-      background: linear-gradient(to bottom, var(--navtab-shadow), rgba(#000, 0));
-      pointer-events: none;
-    }
   }
 
   .bottomBar {