diff --git a/services/web/app/src/Features/Project/ProjectController.js b/services/web/app/src/Features/Project/ProjectController.js index a503e9e490..18c1619302 100644 --- a/services/web/app/src/Features/Project/ProjectController.js +++ b/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', diff --git a/services/web/app/src/infrastructure/ExpressLocals.js b/services/web/app/src/infrastructure/ExpressLocals.js index 975ca7d07c..d4bd6ece00 100644 --- a/services/web/app/src/infrastructure/ExpressLocals.js +++ b/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` ) } diff --git a/services/web/app/views/layout-base.pug b/services/web/app/views/layout-base.pug index 8ff0f4a3b7..42db767bb9 100644 --- a/services/web/app/views/layout-base.pug +++ b/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) diff --git a/services/web/app/views/project/ide-react.pug b/services/web/app/views/project/ide-react.pug index d0f18d2260..4bbf311d97 100644 --- a/services/web/app/views/project/ide-react.pug +++ b/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' diff --git a/services/web/frontend/js/features/editor-left-menu/components/settings/settings-overall-theme.tsx b/services/web/frontend/js/features/editor-left-menu/components/settings/settings-overall-theme.tsx index dbf36e8e9a..9e2d846a35 100644 --- a/services/web/frontend/js/features/editor-left-menu/components/settings/settings-overall-theme.tsx +++ b/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 } diff --git a/services/web/frontend/js/features/editor-left-menu/hooks/use-set-overall-theme.tsx b/services/web/frontend/js/features/editor-left-menu/hooks/use-set-overall-theme.tsx index 947bb9bc8d..6b696f4474 100644 --- a/services/web/frontend/js/features/editor-left-menu/hooks/use-set-overall-theme.tsx +++ b/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(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]) diff --git a/services/web/frontend/js/utils/is-ieee-branded.ts b/services/web/frontend/js/utils/is-ieee-branded.ts new file mode 100644 index 0000000000..6952b4e05a --- /dev/null +++ b/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 +}