From 7ad74e680d4460e0b7ed85c67d32a87a92c1419a Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 4 Jan 2024 15:56:16 +1100
Subject: [PATCH] feat(ui): make invexpander button styles less complex

just make it like a normal button - normal and hover state, no difference when its expanded. the icon clearly indicates this, and you see the extra components
---
 .../components/InvExpander/InvExpander.tsx    | 30 +++++++++----------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/invokeai/frontend/web/src/common/components/InvExpander/InvExpander.tsx b/invokeai/frontend/web/src/common/components/InvExpander/InvExpander.tsx
index 7f6f4d1d6d..7a20b3601e 100644
--- a/invokeai/frontend/web/src/common/components/InvExpander/InvExpander.tsx
+++ b/invokeai/frontend/web/src/common/components/InvExpander/InvExpander.tsx
@@ -4,30 +4,28 @@ import { Collapse, Icon, useDisclosure } from '@chakra-ui/react';
 import type { InvExpanderProps } from 'common/components/InvExpander/types';
 import { InvText } from 'common/components/InvText/wrapper';
 import { t } from 'i18next';
-import { useMemo } from 'react';
 import { BiCollapseVertical, BiExpandVertical } from 'react-icons/bi';
 
+const buttonStyles: SystemStyleObject = {
+  color: 'base.400',
+  borderColor: 'base.400',
+  transitionDuration: 'normal',
+  transitionProperty: 'common',
+  ':hover, :hover *': {
+    transitionDuration: 'normal',
+    transitionProperty: 'common',
+    color: 'base.300',
+    borderColor: 'base.300',
+  },
+};
+
 export const InvExpander = ({
   children,
   label = t('common.advancedOptions'),
   defaultIsOpen = false,
 }: InvExpanderProps) => {
   const { isOpen, onToggle } = useDisclosure({ defaultIsOpen });
-  const buttonStyles = useMemo<SystemStyleObject>(
-    () => ({
-      color: isOpen ? 'base.300' : 'base.400',
-      borderColor: isOpen ? 'base.300' : 'base.400',
-      transitionDuration: 'normal',
-      transitionProperty: 'common',
-      ':hover, :hover *': {
-        transitionDuration: 'normal',
-        transitionProperty: 'common',
-        color: isOpen ? 'base.200' : 'base.300',
-        borderColor: isOpen ? 'base.200' : 'base.300',
-      },
-    }),
-    [isOpen]
-  );
+
   return (
     <Flex flexDir="column" w="full">
       <Flex