Adds theme changer popover

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;
-    }
-  }
-}

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>

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>
   );
 }