Redesign nav bar, GlobalSearch, and dropdowns

website/src/styles/bootstrap/style-override.scss

@@ -12,8 +12,7 @@ mark {
 
 // Dropdown menu
 .dropdown-menu {
-  width: 100%;
-  padding: 0.1rem 0;
+  color: var(--body-color);
   box-shadow: 0 2px 6px rgba(#000, 0.25);
 
   @include scrollable-y;
@@ -24,17 +23,51 @@ mark {
 }
 
 .dropdown-item {
+  $icon-size: $font-size-base;
+
+  display: flex;
+  align-items: flex-start;
+  border-radius: 0.25rem;
   color: var(--body-color);
   cursor: pointer;
 
+  .dropdown-item-left-icon {
+    flex: 0 0 auto;
+    width: $icon-size;
+    height: $icon-size;
+    margin-top: 0.14rem;
+    margin-right: 0.4rem;
+  }
+
+  .dropdown-item-right-content {
+    align-self: center;
+    margin-left: auto;
+
+    &.dropdown-item-right-content-icon {
+      width: $icon-size * 0.75;
+      height: $icon-size * 0.75;
+      color: var(--gray-mid);
+    }
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    .dropdown-item-right-content {
+      &.dropdown-item-right-content-icon {
+        color: unset;
+      }
+    }
+  }
+
   &:hover,
   &:focus,
   &.dropdown-selected {
-    color: theme-color();
+    color: var(--body-color);
     background: var(--gray-lightest);
   }
 
-  &.dropdown-selected:active {
+  &:active {
     color: #fff;
     background: theme-color();
   }
@@ -46,18 +79,18 @@ mark {
     &.dropdown-selected {
       background: rgba(theme-color('danger'), 0.2);
     }
+
+    &:active {
+      color: #fff;
+      background: theme-color();
+    }
   }
 
   @include touchscreen-only {
     $touch-horizontal-padding: 0.5rem;
 
     padding-top: $touch-horizontal-padding;
     padding-bottom: $touch-horizontal-padding;
-    border-bottom: 1px solid var(--gray-lighter);
-
-    &:last-child {
-      border-bottom: 0;
-    }
   }
 }
 

website/src/styles/bootstrap/variable-overrides.scss

@@ -1,12 +1,12 @@
 // Override the default bootstrap variables in this file.
 
 // Colors
-$gray-dark:                 #222324;
-$gray:                      #69707a;
-$gray-mid:                  #848490;
-$gray-light:                #aeb1b5;
-$gray-lighter:              #d3d6db;
-$gray-lightest:             #f3f5f8;
+$gray-dark: #222324;
+$gray: #69707a;
+$gray-mid: #848490;
+$gray-light: #aeb1b5;
+$gray-lighter: #d3d6db;
+$gray-lightest: #f3f5f8;
 
 $primary: #ff5138;
 $danger: #b71c1c;
@@ -20,26 +20,26 @@ $dark: $gray-dark;
 $body-color: $gray;
 
 // Typography
-$font-size-xlg:   2rem !default;
-$font-size-s:     0.85rem !default;
-$font-size-xs:    0.75rem !default;
-$font-size-xxs:   0.65rem !default;
+$font-size-xlg: 2rem !default;
+$font-size-s: 0.85rem !default;
+$font-size-xs: 0.75rem !default;
+$font-size-xxs: 0.65rem !default;
 
 // Fonts
-$headings-margin-bottom:    1rem;
+$headings-margin-bottom: 1rem;
 
 // Form states and alerts
-$state-success-text:        #fff;
-$state-success-bg:          theme-color('success');
+$state-success-text: #fff;
+$state-success-bg: theme-color('success');
 
-$state-info-text:           #fff;
-$state-info-bg:             theme-color('info');
+$state-info-text: #fff;
+$state-info-bg: theme-color('info');
 
-$state-warning-text:        #fff;
-$state-warning-bg:          theme-color('warning');
+$state-warning-text: #fff;
+$state-warning-bg: theme-color('warning');
 
-$state-danger-text:         #fff;
-$state-danger-bg:           theme-color('danger');
+$state-danger-text: #fff;
+$state-danger-bg: theme-color('danger');
 
 // Element styles
 $mark-bg: transparent;
@@ -56,8 +56,15 @@ $input-focus-color: var(--body-color);
 $input-focus-border-color: $primary;
 $input-disabled-bg: var(--body-bg);
 
-$dropdown-border-color: var(--gray-lighter);
+$dropdown-padding-x: 0.4rem;
+$dropdown-padding-y: $dropdown-padding-x;
 $dropdown-bg: var(--body-bg);
+$dropdown-border-color: var(--gray-lighter);
+$dropdown-divider-bg: var(--gray-lighter);
+$dropdown-item-padding-y: 0.375rem;
+$dropdown-item-padding-x: 0.75rem;
+$dropdown-header-color: var(--gray-mid);
+$dropdown-header-padding: $dropdown-item-padding-y $dropdown-item-padding-x;
 
 $mark-padding: 0;
 

website/src/styles/constants.scss

@@ -4,12 +4,7 @@
 $navbar-height: 3rem;
 $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;
@@ -21,6 +16,8 @@ $entering-duration: 0.225s;
 $desktop-fullscreen-duration: 0.275s;
 $desktop-exiting-duration: 0.175s;
 $desktop-entering-duration: 0.195s;
+
+// Source: https://github.com/material-components/material-components-web/blob/master/packages/mdc-animation/_animation.scss
 $material-standard-curve: cubic-bezier(0.4, 0, 0.2, 1);
 $material-deceleration-curve: cubic-bezier(0, 0, 0.2, 1);
 $material-acceleration-curve: cubic-bezier(0.4, 0, 1, 1);
@@ -53,7 +50,7 @@ $nusmods-theme-colors: (
     #95aec7,
     #ae95c7,
     #c795ae,
-    #c79595
+    #c79595,
   ),
   chalk: (
     #fb9fb1,
@@ -63,7 +60,7 @@ $nusmods-theme-colors: (
     #12cfc0,
     #6fc2ef,
     #e1a3ee,
-    #deaf8f
+    #deaf8f,
   ),
   eighties: (
     #f2777a,
@@ -73,7 +70,7 @@ $nusmods-theme-colors: (
     #6cc,
     #69c,
     #c9c,
-    #d27b53
+    #d27b53,
   ),
   google: (
     #cc342b,
@@ -83,7 +80,7 @@ $nusmods-theme-colors: (
     #3971ed,
     #79a4f9,
     #a36ac7,
-    #ec9998
+    #ec9998,
   ),
   mocha: (
     #cb6077,
@@ -93,7 +90,7 @@ $nusmods-theme-colors: (
     #7bbda4,
     #8ab3b5,
     #a89bb9,
-    #bb9584
+    #bb9584,
   ),
   monokai: (
     #f92672,
@@ -103,7 +100,7 @@ $nusmods-theme-colors: (
     #a1efe4,
     #66d9ef,
     #ae81ff,
-    #c63
+    #c63,
   ),
   ocean: (
     #bf616a,
@@ -113,7 +110,7 @@ $nusmods-theme-colors: (
     #96b5b4,
     #8fa1b3,
     #b48ead,
-    #ab7967
+    #ab7967,
   ),
   oceanic-next: (
     #ec5f67,
@@ -123,7 +120,7 @@ $nusmods-theme-colors: (
     #5fb3b3,
     #69c,
     #c594c5,
-    #ab7967
+    #ab7967,
   ),
   paraiso: (
     #ef6155,
@@ -133,7 +130,7 @@ $nusmods-theme-colors: (
     #5bc4bf,
     #06b6ef,
     #815ba4,
-    #e96ba8
+    #e96ba8,
   ),
   railscasts: (
     #da4939,
@@ -143,7 +140,7 @@ $nusmods-theme-colors: (
     #519f50,
     #6d9cbe,
     #b6b3eb,
-    #bc9458
+    #bc9458,
   ),
   tomorrow: (
     #c66,
@@ -153,7 +150,7 @@ $nusmods-theme-colors: (
     #8abeb7,
     #81a2be,
     #b294bb,
-    #a3685a
+    #a3685a,
   ),
   twilight: (
     #cf6a4c,
@@ -163,7 +160,7 @@ $nusmods-theme-colors: (
     #afc4db,
     #7587a6,
     #9b859d,
-    #9b703f
+    #9b703f,
   ),
 );
 
@@ -173,9 +170,7 @@ $snackbar-z-index: 2500;
 $sentry-z-index: 2000;
 $modal-z-index: 1500;
 $module-select-z-index: 960;
-$module-finder-search-z-index-sm: 950;
 $venue-detail-expanded-z-index: 920;
-$navtabs-z-index: 900;
 $navbar-z-index: 890;
 $module-finder-search-z-index-md: 850;
 $zindex-dropdown: 820; // Bootstrap override

website/src/styles/layout/site.scss

@@ -7,14 +7,11 @@ body,
   // Ensures the page always fill the height of the page. Combined with the
   // flexbox on .app-container, this allows the footer to be aligned to the
   // page bottom when there's insufficient page content
-  height: 100%;
+  min-height: 100vh;
 }
 
 body {
-  padding-top: 4rem;
-
   @include media-breakpoint-down(sm) {
-    padding-top: $navbar-height;
     font-size: 1rem * $sm-font-size-ratio;
   }
 }
@@ -36,30 +33,8 @@ a {
   padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
     env(safe-area-inset-left);
 
-  @include media-breakpoint-down(sm) {
-    .main-content {
-      padding-top: 1rem;
-    }
-  }
-
-  @include media-breakpoint-up(md) {
-    > nav {
-      width: calc(#{$side-nav-width-md} + #{($grid-gutter-width / 2)});
-    }
-
-    .main-content {
-      padding-left: $side-nav-width-md;
-    }
-  }
-
-  @include media-breakpoint-up(xl) {
-    > nav {
-      width: $side-nav-width-lg;
-    }
-
-    .main-content {
-      padding-left: $side-nav-width-lg;
-    }
+  .main-content {
+    padding-top: 1rem;
   }
 }
 

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};
@@ -52,7 +52,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;