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

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

GitOrigin-RevId: 80d10a911f3a188867db9b825f3ae8413f555b64

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

@@ -347,7 +347,6 @@ 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,
-      ieeeStylesheetEnabled
+      enableIeeeBranding
     ) {
       // Themes only exist in OL v2
       if (Settings.overleaf != null) {
-        // 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)) {
+        // 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)) {
           return 'ieee-'
         } else if (userSettings && userSettings.overallTheme != null) {
           return userSettings.overallTheme
@@ -213,11 +213,10 @@ 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(
-        `main-${computedThemeModifier}style${bootstrap5Modifier}.css`
+        bootstrapVersion === 5
+          ? 'main-style-bootstrap-5.css'
+          : `main-${themeModifier}style.css`
       )
     }
 

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

@@ -9,7 +9,8 @@ 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 isApplicationPage = false
+	- let enableIeeeBranding = true
 
 	block entrypointVar
 
@@ -21,10 +22,9 @@ 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, ieeeStylesheetEnabled), bootstrapVersion), id="main-stylesheet")
+		link(rel='stylesheet', href=buildCssPath(getCssThemeModifier(userSettings, brandVariation, enableIeeeBranding), 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,6 +8,7 @@ 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,6 +6,7 @@ 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()
@@ -24,11 +25,7 @@ export default function SettingsOverallTheme() {
     [overallThemes]
   )
 
-  const brandVariation = getMeta('ol-brandVariation')
-  const { ieeeBrandId } = getMeta('ol-ExposedSettings')
-  const isIEEEBranded = brandVariation?.brand_id === ieeeBrandId
-
-  if (!overallThemes || isIEEEBranded) {
+  if (!overallThemes || isIEEEBranded()) {
     return null
   }
 

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

@@ -7,6 +7,7 @@ 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)
@@ -28,7 +29,8 @@ export default function useSetOverallTheme() {
 
   useEffect(() => {
     // Sets `data-theme` attribute to the body element, needed for Bootstrap 5 theming
-    const theme = overallTheme === 'light-' ? 'light' : 'default'
+    const theme =
+      overallTheme === 'light-' && !isIEEEBranded() ? 'light' : 'default'
     document.body.dataset.theme = theme
   }, [overallTheme])
 

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

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