From abb0450a6a76268f8680052805812838f1128747 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Tue, 11 Feb 2025 14:28:36 +0100
Subject: [PATCH] fix: Use the right theme even if the payload is a variant.
 (#9292)

Also, use extra css selectors to increase specificity so that this
takes precedence over the MUI themes.

I don't like that we need to do this weird selector thing, but hey, it
is what it is.
---
 .../__snapshots__/FeedbackCESForm.test.tsx.snap   |  2 +-
 .../__snapshots__/TagTypeList.test.tsx.snap       |  2 +-
 frontend/src/hooks/useThemeMode.ts                | 15 +++++++++++++--
 frontend/src/themes/dark-theme.legacy.ts          |  7 ++++++-
 frontend/src/themes/theme.legacy.ts               |  7 ++++++-
 5 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap b/frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap
index 45eafb565c..330308bd14 100644
--- a/frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap
+++ b/frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap
@@ -169,7 +169,7 @@ exports[`FeedbackCESForm 1`] = `
           hidden=""
         >
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-l6m2tn-MuiButtonBase-root-MuiButton-root"
+            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1ln3ri4-MuiButtonBase-root-MuiButton-root"
             disabled=""
             tabindex="-1"
             type="submit"
diff --git a/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap b/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
index dd5892995a..1405fa91d2 100644
--- a/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
+++ b/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
@@ -75,7 +75,7 @@ exports[`renders an empty list correctly 1`] = `
               />
               <button
                 aria-labelledby="useId-0"
-                className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1xfu7h-MuiButtonBase-root-MuiButton-root"
+                className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1cn29am-MuiButtonBase-root-MuiButton-root"
                 disabled={false}
                 onBlur={[Function]}
                 onClick={[Function]}
diff --git a/frontend/src/hooks/useThemeMode.ts b/frontend/src/hooks/useThemeMode.ts
index 5767b0b8d7..0b34628e5c 100644
--- a/frontend/src/hooks/useThemeMode.ts
+++ b/frontend/src/hooks/useThemeMode.ts
@@ -7,6 +7,7 @@ import legacyLightTheme from 'themes/theme.legacy';
 import legacyDarkTheme from 'themes/dark-theme.legacy';
 import type { Theme } from '@mui/material/styles/createTheme';
 import { useUiFlag } from './useUiFlag';
+import type { Variant } from 'utils/variants';
 
 interface IUseThemeModeOutput {
     resolveTheme: () => Theme;
@@ -19,12 +20,22 @@ export const useThemeMode = (): IUseThemeModeOutput => {
     const key = 'unleash-theme';
     const uiGlobalFontSizeEnabled = useUiFlag('uiGlobalFontSize');
 
+    let useNewTheme = false;
+    if (typeof uiGlobalFontSizeEnabled === 'boolean') {
+        useNewTheme = uiGlobalFontSizeEnabled;
+    } else if (
+        typeof uiGlobalFontSizeEnabled === 'object' &&
+        'name' in uiGlobalFontSizeEnabled
+    ) {
+        useNewTheme = (uiGlobalFontSizeEnabled as Variant).name !== 'disabled';
+    }
+
     const resolveTheme = () => {
         if (themeMode === 'light') {
-            return uiGlobalFontSizeEnabled ? lightTheme : legacyLightTheme;
+            return useNewTheme ? lightTheme : legacyLightTheme;
         }
 
-        return uiGlobalFontSizeEnabled ? darkTheme : legacyDarkTheme;
+        return useNewTheme ? darkTheme : legacyDarkTheme;
     };
 
     const onSetThemeMode = () => {
diff --git a/frontend/src/themes/dark-theme.legacy.ts b/frontend/src/themes/dark-theme.legacy.ts
index 87b4e57ce2..c0bba9bb8b 100644
--- a/frontend/src/themes/dark-theme.legacy.ts
+++ b/frontend/src/themes/dark-theme.legacy.ts
@@ -39,7 +39,12 @@ const theme = {
         fontWeightBold: '700',
         fontWeightMedium: '700',
         allVariants: { lineHeight: 1.4 },
-        button: { lineHeight: 1.75, fontSize: '16px' },
+        button: {
+            lineHeight: 1.75,
+            '&&&': {
+                fontSize: '16px',
+            },
+        },
         h1: {
             fontSize: '1.5rem',
             lineHeight: 1.875,
diff --git a/frontend/src/themes/theme.legacy.ts b/frontend/src/themes/theme.legacy.ts
index 75b3906b6a..fb98718f0a 100644
--- a/frontend/src/themes/theme.legacy.ts
+++ b/frontend/src/themes/theme.legacy.ts
@@ -31,7 +31,12 @@ export const theme = {
         fontWeightBold: '700',
         fontWeightMedium: '700',
         allVariants: { lineHeight: 1.4 },
-        button: { lineHeight: 1.75, fontSize: '16px' },
+        button: {
+            lineHeight: 1.75,
+            '&&&': {
+                fontSize: '16px',
+            },
+        },
         h1: {
             fontSize: '1.5rem',
             lineHeight: 1.875,