feat(ui): make expander divider button, add hover, remove color

On one hand I like the color but on the other it makes this divider a focus point, which doesn't really makes sense to me. I tried several shades but think it adds a bit too much distraction for your eyes.

invokeai/frontend/web/src/common/components/InvExpander/InvExpander.tsx

@@ -1,8 +1,10 @@
 import { Divider, Flex } from '@chakra-ui/layout';
+import type { SystemStyleObject } from '@chakra-ui/react';
 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';
 
 export const InvExpander = ({
@@ -11,29 +13,46 @@ export const InvExpander = ({
   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 flexDir="row" alignItems="center" gap={3} py={4}>
-        <Divider w="unset" flexGrow={1} />
-        <Flex
-          as="button"
-          onClick={onToggle}
-          flexDir="row"
-          alignItems="center"
-          gap={2}
-        >
+      <Flex
+        as="button"
+        flexDir="row"
+        alignItems="center"
+        gap={3}
+        py={4}
+        px={2}
+        onClick={onToggle}
+        sx={buttonStyles}
+      >
+        <Divider w="unset" flexGrow={1} sx={buttonStyles} />
+        <Flex flexDir="row" alignItems="center" gap={2}>
           <Icon
             as={isOpen ? BiCollapseVertical : BiExpandVertical}
             fontSize="14px"
-            color={isOpen ? 'blue.400' : 'base.400'}
+            sx={buttonStyles}
           />
           <InvText
             variant="subtext"
             fontSize="sm"
-            fontWeight="bold"
+            fontWeight="semibold"
             flexShrink={0}
-            mb="2px"
-            color={isOpen ? 'blue.400' : 'base.400'}
+            sx={buttonStyles}
           >
             {label}
           </InvText>