Merge pull request #29290 from overleaf/dp-dashboard-dark-2

Dark mode for DS nav

GitOrigin-RevId: fb8ad9ec45e88c39810421d11ecc69ab874121ce

services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx

@@ -20,7 +20,9 @@ import Footer from '@/shared/components/footer/footer'
 import SidebarDsNav from '@/features/project-list/components/sidebar/sidebar-ds-nav'
 import SystemMessages from '@/shared/components/system-messages'
 import overleafLogo from '@/shared/svgs/overleaf-a-ds-solution-mallard.svg'
+import overleafLogoDark from '@/shared/svgs/overleaf-a-ds-solution-mallard-dark.svg'
 import CookieBanner from '@/shared/components/cookie-banner'
+import { useActiveOverallTheme } from '@/shared/hooks/use-active-overall-theme'
 
 export function ProjectListDsNav() {
   const navbarProps = getMeta('ol-navbar')
@@ -35,6 +37,7 @@ export function ProjectListDsNav() {
     tags,
     selectedTagId,
   } = useProjectListContext()
+  const activeOverallTheme = useActiveOverallTheme()
 
   const selectedTag = tags.find(tag => tag._id === selectedTagId)
 
@@ -59,7 +62,9 @@ export function ProjectListDsNav() {
       <SystemMessages />
       <DefaultNavbar
         {...navbarProps}
-        overleafLogo={overleafLogo}
+        overleafLogo={
+          activeOverallTheme === 'dark' ? overleafLogoDark : overleafLogo
+        }
         showCloseIcon
       />
       <div className="project-list-wrapper">

services/web/frontend/stylesheets/components/navbar.scss

@@ -198,6 +198,7 @@
 
           box-shadow: none;
           background-color: var(--navbar-hamburger-submenu-bg);
+          border: none;
           width: auto;
 
           .dropdown-item {
@@ -245,8 +246,7 @@
   }
 }
 
-.website-redesign-navbar,
-.website-redesign .navbar-default {
+@mixin navbar-light() {
   --navbar-title-color: var(--content-primary);
   --navbar-title-color-hover: var(--content-secondary);
   --navbar-brand-image-url: var(
@@ -266,12 +266,56 @@
   --navbar-link-hover-border-color: var(--navbar-link-border-color);
 
   // Toggler
-  --navbar-toggler-expanded-color: var(--white);
-  --navbar-toggler-expanded-bg: var(--bg-dark-primary);
+  --navbar-toggler-expanded-bg: none;
+  --navbar-toggler-expanded-color: var(--content-secondary);
 
   // Mobile view
   --navbar-hamburger-submenu-bg: var(--bg-light-secondary);
   --navbar-hamburger-submenu-item-color: var(--navbar-link-color);
-  --navbar-hamburger-submenu-item-hover-color: var(--white);
+  --navbar-hamburger-submenu-item-hover-color: var(--content-primary-dark);
   --navbar-hamburger-submenu-item-hover-bg: var(--bg-dark-primary);
 }
+
+@mixin navbar-dark() {
+  --navbar-title-color: var(--content-primary-dark);
+  --navbar-title-color-hover: var(--content-secondary-dark);
+  --navbar-brand-image-url: var(
+    --navbar-brand-image-redesign-url,
+    url('../../../frontend/js/shared/svgs/overleaf-green.svg')
+  );
+  --navbar-subdued-color: var(--content-primary-dark);
+  --navbar-subdued-hover-bg: var(--bg-dark-secondary);
+  --navbar-subdued-hover-color: var(--content-primary-dark);
+  --navbar-bg: var(--bg-dark-primary);
+
+  // Navbar links
+  --navbar-link-color: var(--content-primary-dark);
+  --navbar-link-border-color: var(--border-primary-dark);
+  --navbar-link-hover-color: var(--navbar-link-color);
+  --navbar-link-hover-bg: var(--bg-dark-tertiary);
+  --navbar-link-hover-border-color: var(--navbar-link-border-color);
+
+  // Toggler
+  --navbar-toggler-expanded-bg: none;
+  --navbar-toggler-expanded-color: var(--content-secondary-dark);
+
+  // Mobile view
+  --navbar-hamburger-submenu-bg: var(--bg-dark-primary);
+  --navbar-hamburger-submenu-item-color: var(--navbar-link-color);
+  --navbar-hamburger-submenu-item-hover-color: var(--content-primary-dark);
+  --navbar-hamburger-submenu-item-hover-bg: var(--bg-dark-secondary);
+}
+
+.website-redesign-navbar,
+.website-redesign .navbar-default {
+  @include navbar-light;
+}
+
+@include theme('default') {
+  #project-list-root {
+    .website-redesign-navbar,
+    .website-redesign .navbar-default {
+      @include navbar-dark;
+    }
+  }
+}

services/web/frontend/stylesheets/pages/project-list-ds-nav.scss

@@ -1,3 +1,21 @@
+:root {
+  --ds-nav-active-bg: var(--bg-accent-03);
+  --ds-nav-active-color: var(--green-60);
+  --theme-toggle-selected-background: var(--green-20);
+
+  @include theme('default') {
+    --ds-nav-active-bg: var(--green-70);
+    --ds-nav-active-color: var(--green-10);
+    --theme-toggle-selected-background: var(--green-70);
+  }
+}
+
+body {
+  --ds-nav-bg-color: var(--bg-primary-themed);
+  --ds-nav-hover-bg: var(--bg-secondary-themed);
+  --ds-nav-color: var(--content-secondary-themed);
+}
+
 .project-ds-nav-page {
   display: flex;
   flex-direction: column;
@@ -15,9 +33,6 @@
   .navbar-default {
     position: relative;
 
-    --navbar-toggler-expanded-bg: none;
-    --navbar-toggler-expanded-color: var(--content-secondary);
-
     .navbar-header .navbar-logo {
       @include media-breakpoint-up(md) {
         position: relative;
@@ -63,8 +78,8 @@
               border-radius: var(--border-radius-medium);
 
               &.show {
-                background-color: var(--bg-accent-03);
-                color: var(--green-60);
+                background-color: var(--ds-nav-active-bg);
+                color: var(--ds-nav-active-color);
               }
             }
           }
@@ -78,6 +93,7 @@
   }
 
   .project-list-wrapper {
+    background-color: var(--ds-nav-bg-color);
     flex-grow: 1;
     display: flex;
     overflow-y: hidden;
@@ -176,7 +192,7 @@
         > button {
           width: 100%;
           text-align: left;
-          color: var(--content-secondary);
+          color: var(--ds-nav-color);
           background: none;
           border-radius: var(--border-radius-medium);
           border: none;
@@ -184,18 +200,19 @@
         }
 
         &:hover button {
-          background-color: var(--bg-light-secondary);
+          background-color: var(--ds-nav-hover-bg);
         }
 
         &.active button {
-          background-color: var(--bg-accent-03);
-          color: var(--green-60);
+          background-color: var(--ds-nav-active-bg);
+          color: var(--ds-nav-active-color);
           font-weight: bold;
         }
       }
 
       .dropdown-header {
         font-weight: bold;
+        color: var(--ds-nav-color);
       }
 
       > li.tag {
@@ -208,7 +225,7 @@
         button.dropdown-toggle {
           border-radius: var(--border-radius-full);
           border: none;
-          color: var(--content-secondary);
+          color: var(--ds-nav-color);
           height: 20px;
           width: 20px;
           padding: 0;
@@ -293,7 +310,7 @@
 
   .ds-nav-icon-dropdown {
     .dropdown-toggle {
-      color: var(--content-secondary);
+      color: var(--ds-nav-color);
       background: none;
       height: 44px;
       width: 44px;
@@ -301,12 +318,12 @@
       overflow: hidden;
 
       &:hover {
-        background-color: var(--bg-light-secondary);
+        background-color: var(--ds-nav-hover-bg);
       }
 
       &.show {
-        background-color: var(--bg-accent-03);
-        color: var(--green-60);
+        background-color: var(--ds-nav-active-bg);
+        color: var(--ds-nav-active-color);
       }
 
       &::after {
@@ -327,6 +344,7 @@
   }
 
   .ds-nav-ds-name {
+    color: var(--ds-nav-color);
     margin-bottom: var(--spacing-05);
 
     span {
@@ -336,6 +354,10 @@
       @include body-xs;
     }
   }
+
+  .add-affiliation {
+    color: var(--ds-nav-color);
+  }
 }
 
 .theme-toggle {
@@ -364,14 +386,6 @@
   gap: var(--spacing-01);
 }
 
-:root {
-  --theme-toggle-selected-background: var(--green-70);
-}
-
-@include theme('light') {
-  --theme-toggle-selected-background: var(--green-20);
-}
-
 .theme-toggle-radio {
   display: flex;