Merge pull request #29536 from overleaf/dp-fix-logo

Fix overleaf logo color on ds nav

GitOrigin-RevId: c48ed09339aa1af03bdbad29e76d8cdb74260f0c

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

@@ -37,7 +37,7 @@ export function ProjectListDsNav() {
     tags,
     selectedTagId,
   } = useProjectListContext()
-  const activeOverallTheme = useActiveOverallTheme()
+  const activeOverallTheme = useActiveOverallTheme('themed-project-dashboard')
 
   const selectedTag = tags.find(tag => tag._id === selectedTagId)
 

services/web/frontend/js/shared/hooks/use-active-overall-theme.tsx

@@ -2,6 +2,7 @@ import { useUserSettingsContext } from '@/shared/context/user-settings-context'
 import { OverallTheme } from '@/shared/utils/styles'
 import { isIEEEBranded } from '@/utils/is-ieee-branded'
 import { useEffect, useMemo, useState } from 'react'
+import { useSplitTestContext } from '../context/split-test-context'
 
 export type ActiveOverallTheme = 'dark' | 'light'
 
@@ -28,7 +29,10 @@ function getTheme(
   return 'dark'
 }
 
-export const useActiveOverallTheme = (): ActiveOverallTheme => {
+export const useActiveOverallTheme = (
+  featureFlag?: string
+): ActiveOverallTheme => {
+  const { splitTestVariants } = useSplitTestContext()
   const [browserPrefersDarkMode, setBrowserPrefersDarkMode] = useState(
     mediaWatcher.matches
   )
@@ -37,8 +41,13 @@ export const useActiveOverallTheme = (): ActiveOverallTheme => {
   } = useUserSettingsContext()
 
   const activeOverallTheme = useMemo<ActiveOverallTheme>(() => {
+    // Override theme if feature flag is provided and not enabled
+    if (featureFlag && splitTestVariants[featureFlag] !== 'enabled') {
+      return 'light'
+    }
+
     return getTheme(overallTheme, browserPrefersDarkMode)
-  }, [overallTheme, browserPrefersDarkMode])
+  }, [overallTheme, browserPrefersDarkMode, featureFlag, splitTestVariants])
 
   useEffect(() => {
     const listener = (e: MediaQueryListEvent) => {

services/web/frontend/js/shared/hooks/use-themed-page.tsx

@@ -1,16 +1,8 @@
 import { useEffect } from 'react'
 import { useActiveOverallTheme } from './use-active-overall-theme'
-import { useSplitTestContext } from '../context/split-test-context'
 
 export default function useThemedPage(featureFlag?: string) {
-  const { splitTestVariants } = useSplitTestContext()
-
-  let activeOverallTheme = useActiveOverallTheme()
-
-  // Override theme if feature flag is provided and not enabled
-  if (featureFlag && splitTestVariants[featureFlag] !== 'enabled') {
-    activeOverallTheme = 'light'
-  }
+  const activeOverallTheme = useActiveOverallTheme(featureFlag)
 
   useEffect(() => {
     // Sets the body's data-theme attribute for theming