From dfc0c587b1892507dbf49d2cc4d84f8f8957b949 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 19 Nov 2022 19:01:35 +1100
Subject: [PATCH] Adds theme changer popover

---
 .../system/components/SiteHeader.scss         | 11 -----
 .../system/components/StatusIndicator.tsx     |  3 --
 .../system/components/ThemeChanger.tsx        | 48 ++++++++++++++-----
 3 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/frontend/src/features/system/components/SiteHeader.scss b/frontend/src/features/system/components/SiteHeader.scss
index 3c4d267ae5..f9b40912c0 100644
--- a/frontend/src/features/system/components/SiteHeader.scss
+++ b/frontend/src/features/system/components/SiteHeader.scss
@@ -24,14 +24,3 @@
   align-items: center;
   column-gap: 0.5rem;
 }
-
-.theme-changer-dropdown {
-  .invokeai__select-picker {
-    background-color: var(--background-color-light) !important;
-    font-size: 0.9rem;
-    &:focus {
-      border: none !important;
-      box-shadow: none !important;
-    }
-  }
-}
diff --git a/frontend/src/features/system/components/StatusIndicator.tsx b/frontend/src/features/system/components/StatusIndicator.tsx
index add43c2fc1..1da6c2a892 100644
--- a/frontend/src/features/system/components/StatusIndicator.tsx
+++ b/frontend/src/features/system/components/StatusIndicator.tsx
@@ -33,8 +33,6 @@ const StatusIndicator = () => {
     wasErrorSeen,
   } = useAppSelector(systemSelector);
   const dispatch = useAppDispatch();
-  // const statusMessageTextColor =
-  //   isConnected && !hasError ? 'green.500' : 'red.500';
 
   let statusStyle;
   if (isConnected && !hasError) {
@@ -84,7 +82,6 @@ const StatusIndicator = () => {
         cursor={statusIndicatorCursor}
         onClick={handleClickStatusIndicator}
         className={`status ${statusStyle}`}
-        // textColor={statusMessageTextColor}
       >
         {statusMessage}
       </Text>
diff --git a/frontend/src/features/system/components/ThemeChanger.tsx b/frontend/src/features/system/components/ThemeChanger.tsx
index f37b4b57eb..138b310633 100644
--- a/frontend/src/features/system/components/ThemeChanger.tsx
+++ b/frontend/src/features/system/components/ThemeChanger.tsx
@@ -1,8 +1,10 @@
-import { useColorMode } from '@chakra-ui/react';
-import React, { ChangeEvent } from 'react';
+import { useColorMode, VStack } from '@chakra-ui/react';
 import { RootState, useAppDispatch, useAppSelector } from 'app/store';
-import IAISelect from 'common/components/IAISelect';
 import { setCurrentTheme } from 'features/options/store/optionsSlice';
+import IAIPopover from 'common/components/IAIPopover';
+import IAIIconButton from 'common/components/IAIIconButton';
+import { FaCheck, FaPalette } from 'react-icons/fa';
+import IAIButton from 'common/components/IAIButton';
 
 const THEMES = ['dark', 'light', 'green'];
 
@@ -13,17 +15,39 @@ export default function ThemeChanger() {
     (state: RootState) => state.options.currentTheme
   );
 
-  const themeChangeHandler = (e: ChangeEvent<HTMLSelectElement>) => {
-    setColorMode(e.target.value);
-    dispatch(setCurrentTheme(e.target.value));
+  const handleChangeTheme = (theme: string) => {
+    setColorMode(theme);
+    dispatch(setCurrentTheme(theme));
   };
 
   return (
-    <IAISelect
-      validValues={THEMES}
-      value={currentTheme}
-      onChange={themeChangeHandler}
-      styleClass="theme-changer-dropdown"
-    ></IAISelect>
+    <IAIPopover
+      trigger="hover"
+      triggerComponent={
+        <IAIIconButton
+          aria-label="Theme"
+          size={'sm'}
+          variant="link"
+          data-variant="link"
+          fontSize={20}
+          icon={<FaPalette />}
+        />
+      }
+    >
+      <VStack align={'stretch'}>
+        {THEMES.map((theme) => (
+          <IAIButton
+            style={{
+              width: '6rem',
+            }}
+            leftIcon={currentTheme === theme ? <FaCheck /> : undefined}
+            size={'sm'}
+            onClick={() => handleChangeTheme(theme)}
+          >
+            {theme.charAt(0).toUpperCase() + theme.slice(1)}
+          </IAIButton>
+        ))}
+      </VStack>
+    </IAIPopover>
   );
 }