feat: enable dark mode for all (#3614)

Unleash · Apr 25, 2023 · 545e231 · 545e231
1 parent ae60cf0
commit 545e231
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 56 deletions.
diff --git a/frontend/src/component/menu/Header/Header.tsx b/frontend/src/component/menu/Header/Header.tsx
@@ -239,32 +239,22 @@ const Header: VFC = () => {
                         />
                     </StyledLinks>
                     <StyledUserContainer>
-                        <ConditionallyRender
-                            condition={Boolean(
-                                uiConfig.flags.ENABLE_DARK_MODE_SUPPORT
-                            )}
-                            show={
-                                <Tooltip
-                                    title={
-                                        themeMode === 'dark'
-                                            ? 'Switch to light theme'
-                                            : 'Switch to dark theme'
-                                    }
-                                    arrow
-                                >
-                                    <IconButton
-                                        onClick={onSetThemeMode}
-                                        sx={focusable}
-                                    >
-                                        <ConditionallyRender
-                                            condition={themeMode === 'dark'}
-                                            show={<DarkModeOutlined />}
-                                            elseShow={<LightModeOutlined />}
-                                        />
-                                    </IconButton>
-                                </Tooltip>
+                        <Tooltip
+                            title={
+                                themeMode === 'dark'
+                                    ? 'Switch to light theme'
+                                    : 'Switch to dark theme'
                             }
-                        />
+                            arrow
+                        >
+                            <IconButton onClick={onSetThemeMode} sx={focusable}>
+                                <ConditionallyRender
+                                    condition={themeMode === 'dark'}
+                                    show={<DarkModeOutlined />}
+                                    elseShow={<LightModeOutlined />}
+                                />
+                            </IconButton>
+                        </Tooltip>{' '}
                         <ConditionallyRender
                             condition={!isOss()}
                             show={<Notifications />}

diff --git a/frontend/src/component/providers/UIProvider/UIProvider.tsx b/frontend/src/component/providers/UIProvider/UIProvider.tsx
@@ -3,34 +3,26 @@ import UIContext, { createEmptyToast, themeMode } from 'contexts/UIContext';
 import { IToast } from 'interfaces/toast';
 import { getLocalStorageItem } from 'utils/storage';
 
-const resolveMode = (darkmode: boolean): themeMode => {
+const resolveMode = (): themeMode => {
     const value = getLocalStorageItem('unleash-theme');
     if (value) {
         return value as themeMode;
     }
 
-    let osDark;
-    if (darkmode) {
-        osDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    }
+    const osDark =
+        window.matchMedia &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches;
 
     if (osDark) {
         return 'dark';
     }
     return 'light';
 };
 
-interface IUiProviderProps {
-    darkmode: boolean;
-}
-
-const UIProvider: React.FC<IUiProviderProps> = ({
-    children,
-    darkmode = false,
-}) => {
+const UIProvider: React.FC = ({ children }) => {
     const [toastData, setToast] = useState<IToast>(createEmptyToast());
     const [showFeedback, setShowFeedback] = useState(false);
-    const [themeMode, setThemeMode] = useState(resolveMode(darkmode));
+    const [themeMode, setThemeMode] = useState(resolveMode());
 
     const context = React.useMemo(
         () => ({

diff --git a/frontend/src/component/providers/UIProvider/UIProviderContainer.tsx b/frontend/src/component/providers/UIProvider/UIProviderContainer.tsx
@@ -8,9 +8,5 @@ export const UIProviderContainer: React.FC = ({ children }) => {
         return null;
     }
 
-    return (
-        <UIProvider darkmode={uiConfig.flags.ENABLE_DARK_MODE_SUPPORT || false}>
-            {children}
-        </UIProvider>
-    );
+    return <UIProvider>{children}</UIProvider>;
 };
diff --git a/frontend/src/component/tags/TagTypeList/__tests__/TagTypeList.test.tsx b/frontend/src/component/tags/TagTypeList/__tests__/TagTypeList.test.tsx
@@ -13,7 +13,7 @@ test('renders an empty list correctly', () => {
         <MemoryRouter>
             <ThemeProvider>
                 <AnnouncerProvider>
-                    <UIProvider darkmode={false}>
+                    <UIProvider>
                         <AccessProviderMock
                             permissions={[{ permission: ADMIN }]}
                         >

diff --git a/frontend/src/interfaces/uiConfig.ts b/frontend/src/interfaces/uiConfig.ts
@@ -36,7 +36,6 @@ export interface IFlags {
     T?: boolean;
     UNLEASH_CLOUD?: boolean;
     UG?: boolean;
-    ENABLE_DARK_MODE_SUPPORT?: boolean;
     embedProxyFrontend?: boolean;
     maintenanceMode?: boolean;
     messageBanner?: boolean;

diff --git a/src/lib/__snapshots__/create-config.test.ts.snap b/src/lib/__snapshots__/create-config.test.ts.snap
@@ -66,7 +66,6 @@ exports[`should create default config 1`] = `
       "isEnabled": [Function],
     },
     "flags": {
-      "ENABLE_DARK_MODE_SUPPORT": false,
       "anonymiseEventLog": false,
       "bulkOperations": false,
       "caseInsensitiveInOperators": false,
@@ -93,7 +92,6 @@ exports[`should create default config 1`] = `
   },
   "flagResolver": FlagResolver {
     "experiments": {
-      "ENABLE_DARK_MODE_SUPPORT": false,
       "anonymiseEventLog": false,
       "bulkOperations": false,
       "caseInsensitiveInOperators": false,
@@ -168,9 +166,6 @@ exports[`should create default config 1`] = `
   "strategySegmentsLimit": 5,
   "ui": {
     "environment": "Open Source",
-    "flags": {
-      "ENABLE_DARK_MODE_SUPPORT": false,
-    },
   },
   "versionCheck": {
     "enable": true,

diff --git a/src/lib/create-config.ts b/src/lib/create-config.ts
@@ -105,9 +105,6 @@ function loadUI(options: IUnleashOptions): IUIConfig {
         environment: 'Open Source',
     };
 
-    ui.flags = {
-        ENABLE_DARK_MODE_SUPPORT: false,
-    };
     return mergeAll([ui, uiO]);
 }
 

diff --git a/src/lib/types/experimental.ts b/src/lib/types/experimental.ts
@@ -4,7 +4,6 @@ export type IFlags = Partial<typeof flags>;
 export type IFlagKey = keyof IFlags;
 
 const flags = {
-    ENABLE_DARK_MODE_SUPPORT: false,
     anonymiseEventLog: false,
     embedProxy: parseEnvVarBoolean(
         process.env.UNLEASH_EXPERIMENTAL_EMBED_PROXY,

diff --git a/src/lib/util/flag-resolver.test.ts b/src/lib/util/flag-resolver.test.ts
@@ -7,7 +7,7 @@ test('should produce empty exposed flags', () => {
 
     const result = resolver.getAll();
 
-    expect(result.ENABLE_DARK_MODE_SUPPORT).toBe(false);
+    expect(result.anonymiseEventLog).toBe(false);
 });
 
 test('should produce UI flags with extra dynamic flags', () => {