Merge pull request #22495 from overleaf/revert-22468-td-bs5-ieee-overall-theme

Revert "Always apply overall dark theme with IEEE-branded editor and tear down ieee-stylesheet feature flag"

GitOrigin-RevId: 223b4816b02ba96212ea7e779e16770cd4f16949

services/web/app/src/Features/Project/ProjectController.js

@@ -347,6 +347,7 @@ const _ProjectController = {
       !anonymous && 'ro-mirror-on-client',
       'track-pdf-download',
       !anonymous && 'writefull-oauth-promotion',
+      'ieee-stylesheet',
       'write-and-cite',
       'write-and-cite-ars',
       'default-visual-for-beginners',

services/web/app/src/infrastructure/ExpressLocals.js

@@ -189,13 +189,13 @@ module.exports = function (webRouter, privateApiRouter, publicApiRouter) {
     res.locals.getCssThemeModifier = function (
       userSettings,
       brandVariation,
-      enableIeeeBranding
+      ieeeStylesheetEnabled
     ) {
       // Themes only exist in OL v2
       if (Settings.overleaf != null) {
-        // The IEEE theme is no longer applied in the editor, which sets
-        // enableIeeeBranding to false, but is used in the IEEE portal
-        if (enableIeeeBranding && res.locals.isIEEE(brandVariation)) {
+        // The IEEE theme takes precedence over the user personal setting, i.e. a user with
+        // a theme setting of "light" will still get the IEE theme in IEEE branded projects.
+        if (ieeeStylesheetEnabled && res.locals.isIEEE(brandVariation)) {
           return 'ieee-'
         } else if (userSettings && userSettings.overallTheme != null) {
           return userSettings.overallTheme
@@ -213,10 +213,11 @@ module.exports = function (webRouter, privateApiRouter, publicApiRouter) {
       bootstrapVersion = 3
     ) {
       // Pick which main stylesheet to use based on Bootstrap version
+      const bootstrap5Modifier = bootstrapVersion === 5 ? '-bootstrap-5' : ''
+      const computedThemeModifier = bootstrapVersion === 5 ? '' : themeModifier
+
       return res.locals.buildStylesheetPath(
-        bootstrapVersion === 5
-          ? 'main-style-bootstrap-5.css'
-          : `main-${themeModifier}style.css`
+        `main-${computedThemeModifier}style${bootstrap5Modifier}.css`
       )
     }
 

services/web/app/views/layout-base.pug

@@ -9,8 +9,7 @@ html(
 	- let bootstrap5PageStatus = 'disabled' // One of 'disabled', 'enabled', and 'queryStringOnly'
 	- let bootstrap5PageSplitTest = '' // Limits Bootstrap 5 usage on this page to users with an assignment of "enabled" for the specified split test. If left empty and bootstrap5PageStatus is "enabled", the page always uses Bootstrap 5.
 	- let isWebsiteRedesign = false
-	- let isApplicationPage = false
-	- let enableIeeeBranding = true
+	- let isApplicationPage = false	
 
 	block entrypointVar
 
@@ -22,9 +21,10 @@ html(
 		include ./_metadata.pug
 
 		- const bootstrapVersion = bootstrap5PageStatus !== 'disabled' && (bootstrap5Override || (bootstrap5PageStatus === 'enabled' && (bootstrap5PageSplitTest === '' || splitTestVariants[bootstrap5PageSplitTest] === 'enabled'))) ? 5 : 3
-	
+		- const ieeeStylesheetEnabled = splitTestVariants?.['ieee-stylesheet'] !== 'disabled'
+
 		//- Stylesheet
-		link(rel='stylesheet', href=buildCssPath(getCssThemeModifier(userSettings, brandVariation, enableIeeeBranding), bootstrapVersion), id="main-stylesheet")
+		link(rel='stylesheet', href=buildCssPath(getCssThemeModifier(userSettings, brandVariation, ieeeStylesheetEnabled), bootstrapVersion), id="main-stylesheet")
 		block css
 			each file in entrypointStyles(entrypoint)
 				link(rel='stylesheet', href=file)

services/web/app/views/project/ide-react.pug

@@ -8,7 +8,6 @@ block vars
 	- bootstrap5PageStatus = 'enabled' // One of 'disabled', 'enabled', and 'queryStringOnly'
 	- bootstrap5PageSplitTest = 'bootstrap-5-ide'
 	- metadata.robotsNoindexNofollow = true
-	- enableIeeeBranding = false
 
 block entrypointVar
 	- entrypoint = 'pages/ide'

services/web/frontend/js/features/editor-left-menu/components/settings/settings-overall-theme.tsx

@@ -6,7 +6,6 @@ import SettingsMenuSelect, { Option } from './settings-menu-select'
 import { useProjectSettingsContext } from '../../context/project-settings-context'
 import type { OverallThemeMeta } from '../../../../../../types/project-settings'
 import type { OverallTheme } from '../../../source-editor/extensions/theme'
-import { isIEEEBranded } from '@/utils/is-ieee-branded'
 
 export default function SettingsOverallTheme() {
   const { t } = useTranslation()
@@ -25,7 +24,11 @@ export default function SettingsOverallTheme() {
     [overallThemes]
   )
 
-  if (!overallThemes || isIEEEBranded()) {
+  const brandVariation = getMeta('ol-brandVariation')
+  const { ieeeBrandId } = getMeta('ol-ExposedSettings')
+  const isIEEEBranded = brandVariation?.brand_id === ieeeBrandId
+
+  if (!overallThemes || isIEEEBranded) {
     return null
   }
 

services/web/frontend/js/features/editor-left-menu/hooks/use-set-overall-theme.tsx

@@ -7,7 +7,6 @@ import { UserSettings } from '../../../../../types/user-settings'
 import { useUserSettingsContext } from '@/shared/context/user-settings-context'
 import getMeta from '@/utils/meta'
 import { isBootstrap5 } from '@/features/utils/bootstrap-5'
-import { isIEEEBranded } from '@/utils/is-ieee-branded'
 
 export default function useSetOverallTheme() {
   const [chosenTheme, setChosenTheme] = useState<OverallThemeMeta | null>(null)
@@ -29,8 +28,7 @@ export default function useSetOverallTheme() {
 
   useEffect(() => {
     // Sets `data-theme` attribute to the body element, needed for Bootstrap 5 theming
-    const theme =
-      overallTheme === 'light-' && !isIEEEBranded() ? 'light' : 'default'
+    const theme = overallTheme === 'light-' ? 'light' : 'default'
     document.body.dataset.theme = theme
   }, [overallTheme])
 

services/web/frontend/js/utils/is-ieee-branded.ts

@@ -1,8 +0,0 @@
-import getMeta from '@/utils/meta'
-
-export function isIEEEBranded() {
-  const brandVariation = getMeta('ol-brandVariation')
-  const { ieeeBrandId } = getMeta('ol-ExposedSettings')
-
-  return brandVariation?.brand_id === ieeeBrandId
-}