From e0d2536d6f160413fb0c6d328591c52934268cb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Wed, 22 Mar 2023 14:39:02 +0000
Subject: [PATCH] feat: dark mode switch (#3370)

https://linear.app/unleash/issue/1-802/replace-the-dark-mode-switch

<img width="221" alt="image"
src="https://user-images.githubusercontent.com/14320932/226900284-642f5f0d-5f10-47a5-92cc-080bddbcbfc1.png">
<img width="159" alt="image"
src="https://user-images.githubusercontent.com/14320932/226900684-13a044a3-4a18-41fc-bc76-f4f34a911a53.png">

**Note**: The second screenshot does not show the dark theme because
that's part of https://github.com/Unleash/unleash/pull/3298

Improves the dark mode switch to be a simple IconButton that acts as a
flip switch.
---
 frontend/src/component/menu/Header/Header.tsx | 34 +++++++++++++------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/frontend/src/component/menu/Header/Header.tsx b/frontend/src/component/menu/Header/Header.tsx
index 677d2b5a33..21d20682d9 100644
--- a/frontend/src/component/menu/Header/Header.tsx
+++ b/frontend/src/component/menu/Header/Header.tsx
@@ -5,10 +5,8 @@ import { Link } from 'react-router-dom';
 import {
     AppBar,
     Container,
-    FormControlLabel,
     IconButton,
     Tooltip,
-    Switch,
     styled,
     Theme,
 } from '@mui/material';
@@ -31,7 +29,11 @@ import {
     adminMenuRoutes,
     getCondensedRoutes,
 } from 'component/menu/routes';
-import { KeyboardArrowDown } from '@mui/icons-material';
+import {
+    DarkModeOutlined,
+    KeyboardArrowDown,
+    LightModeOutlined,
+} from '@mui/icons-material';
 import { filterByConfig } from 'component/common/util';
 import { useAuthPermissions } from 'hooks/api/getters/useAuth/useAuthPermissions';
 import { useId } from 'hooks/useId';
@@ -239,15 +241,25 @@ const Header: VFC = () => {
                                 uiConfig.flags.ENABLE_DARK_MODE_SUPPORT
                             )}
                             show={
-                                <FormControlLabel
-                                    control={
-                                        <Switch
-                                            onChange={onSetThemeMode}
-                                            checked={themeMode === 'dark'}
-                                        />
+                                <Tooltip
+                                    title={
+                                        themeMode === 'dark'
+                                            ? 'Switch to light theme'
+                                            : 'Switch to dark theme'
                                     }
-                                    label="darkmode"
-                                />
+                                    arrow
+                                >
+                                    <IconButton
+                                        onClick={onSetThemeMode}
+                                        sx={focusable}
+                                    >
+                                        <ConditionallyRender
+                                            condition={themeMode === 'dark'}
+                                            show={<DarkModeOutlined />}
+                                            elseShow={<LightModeOutlined />}
+                                        />
+                                    </IconButton>
+                                </Tooltip>
                             }
                         />
                         <ConditionallyRender