Make nav bar white with bottom border

White background allows more colors to be used in the nav bar.

Feels like there are too many horizontal lines in the app, but just
playing around for now. We can try fixing this later.

Author: taneliang

website/src/views/layout/GlobalSearch.scss

@@ -12,7 +12,6 @@ $dropdown-height: 40rem;
   height: 100%;
   padding-right: $container-padding;
   margin-left: auto;
-  border-right: 1px solid var(--gray-lighter);
   font-size: 0.9rem;
 
   &:hover .icon {

website/src/views/layout/Navbar.scss

@@ -10,7 +10,8 @@ $logo-vert-padding: 0.875rem;
   top: 0;
   z-index: $navbar-z-index;
   padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
-  background: var(--gray-lightest);
+  background: var(--body-bg);
+  border-bottom: 1px solid var(--gray-lighter);
   display: flex;
   flex-flow: column;
   align-items: center;
@@ -76,6 +77,21 @@ $logo-vert-padding: 0.875rem;
 @include media-breakpoint-down(sm) {
   .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 {

website/src/views/layout/Navbar.tsx

@@ -10,15 +10,13 @@ import GlobalSearchContainer from './GlobalSearchContainer';
 import styles from './Navbar.scss';
 import Navtabs from './Navtabs';
 
-const Navbar: FC = ({ children }) => {
+const Navbar: FC = () => {
   return (
     <div className={styles.navbarWrapper}>
       {/* Bottom bar must be above the top bar in HTML, so that top bar can be interacted with. */}
       <nav className={styles.topBar}>
         <div className={styles.navLeft}>
-          <NavLink className={styles.brand} to="/" title="Home">
-            <Logo className={styles.brandLogo} title="NUSMods" />
-          </NavLink>
+          <NavLogo />
           <ErrorBoundary>
             <GlobalSearchContainer />
           </ErrorBoundary>
@@ -36,3 +34,11 @@ const Navbar: FC = ({ children }) => {
 // <div className={styles.weekText}>{weekText}</div>
 
 export default Navbar;
+
+const NavLogo: FC = () => {
+  return (
+    <NavLink className={styles.brand} to="/" title="Home">
+      <Logo className={styles.brandLogo} title="NUSMods" />
+    </NavLink>
+  );
+};

website/src/views/layout/Navtabs.scss

@@ -16,38 +16,6 @@
   align-items: stretch;
   height: $navtab-height;
   margin: 0 auto;
-
-  // @include media-breakpoint-up(md) {
-  //   flex-direction: column;
-  //   justify-content: flex-start;
-  //   margin-top: 0.5rem;
-  //   box-shadow: none;
-  // }
-
-  // @include media-breakpoint-up(xl) {
-  //   margin-top: 1rem;
-  // }
-
-  @include media-breakpoint-down(sm) {
-    position: sticky;
-    top: 0;
-    right: 0;
-    left: 0;
-    background-color: var(--body-bg);
-
-    // Fake shadow - can't use box shadow because they will appear on top of the
-    // top nav bar
-    &::after {
-      content: '';
-      position: absolute;
-      right: 0;
-      bottom: -$navtab-shadow-height;
-      left: 0;
-      height: $navtab-shadow-height;
-      background: linear-gradient(to bottom, var(--navtab-shadow), rgba(#000, 0));
-      pointer-events: none;
-    }
-  }
 }
 
 .link {