feat(ui): IAICustomSelect tweak styles

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

@@ -1,4 +1,4 @@
-import { CheckIcon } from '@chakra-ui/icons';
+import { CheckIcon, ChevronUpIcon } from '@chakra-ui/icons';
 import {
   Box,
   Flex,
@@ -10,7 +10,6 @@ import {
   GridItem,
   List,
   ListItem,
-  Select,
   Text,
   Tooltip,
   TooltipProps,
@@ -20,6 +19,7 @@ import { useSelect } from 'downshift';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 
 import { memo } from 'react';
+import { getInputOutlineStyles } from 'theme/util/getInputOutlineStyles';
 
 export type ItemTooltips = { [key: string]: string };
 
@@ -82,16 +82,20 @@ const IAICustomSelect = (props: IAICustomSelectProps) => {
         </FormLabel>
       )}
       <Tooltip label={tooltip} {...tooltipProps}>
-        <Select
+        <Flex
           {...getToggleButtonProps({ ref: refs.setReference })}
           {...buttonProps}
-          as={Flex}
           sx={{
             alignItems: 'center',
             userSelect: 'none',
             cursor: 'pointer',
             overflow: 'hidden',
             width: 'full',
+            py: 1,
+            px: 2,
+            gap: 2,
+            justifyContent: 'space-between',
+            ...getInputOutlineStyles(),
           }}
         >
           <Text
@@ -106,7 +110,15 @@ const IAICustomSelect = (props: IAICustomSelectProps) => {
           >
             {selectedItem}
           </Text>
-        </Select>
+          <ChevronUpIcon
+            sx={{
+              color: 'base.300',
+              transform: isOpen ? 'rotate(0deg)' : 'rotate(180deg)',
+              transitionProperty: 'common',
+              transitionDuration: 'normal',
+            }}
+          />
+        </Flex>
       </Tooltip>
       <Box {...getMenuProps()}>
         {isOpen && (
@@ -115,9 +127,8 @@ const IAICustomSelect = (props: IAICustomSelectProps) => {
             ref={refs.setFloating}
             sx={{
               ...floatingStyles,
-              width: 'full',
               top: 0,
-              left: 0,
+              insetInlineStart: 0,
               flexDirection: 'column',
               zIndex: 2,
               bg: 'base.800',
@@ -133,7 +144,16 @@ const IAICustomSelect = (props: IAICustomSelectProps) => {
             }}
           >
             <OverlayScrollbarsComponent>
-              {items.map((item, index) => (
+              {items.map((item, index) => {
+                const isSelected = selectedItem === item;
+                const isHighlighted = highlightedIndex === index;
+                const fontWeight = isSelected ? 700 : 500;
+                const bg = isHighlighted
+                  ? 'base.700'
+                  : isSelected
+                  ? 'base.750'
+                  : undefined;
+                return (
                   <Tooltip
                     isDisabled={!itemTooltips}
                     key={`${item}${index}`}
@@ -143,7 +163,7 @@ const IAICustomSelect = (props: IAICustomSelectProps) => {
                   >
                     <ListItem
                       sx={{
-                      bg: highlightedIndex === index ? 'base.700' : undefined,
+                        bg,
                         py: 1,
                         paddingInlineStart: 3,
                         paddingInlineEnd: 6,
@@ -157,14 +177,14 @@ const IAICustomSelect = (props: IAICustomSelectProps) => {
                       {withCheckIcon ? (
                         <Grid gridTemplateColumns="1.25rem auto">
                           <GridItem>
-                          {selectedItem === item && <CheckIcon boxSize={2} />}
+                            {isSelected && <CheckIcon boxSize={2} />}
                           </GridItem>
                           <GridItem>
                             <Text
                               sx={{
                                 fontSize: 'sm',
                                 color: 'base.100',
-                              fontWeight: 500,
+                                fontWeight,
                               }}
                             >
                               {item}
@@ -175,8 +195,8 @@ const IAICustomSelect = (props: IAICustomSelectProps) => {
                         <Text
                           sx={{
                             fontSize: 'sm',
-                          color: 'base.100',
+                            color: 'base.50',
-                          fontWeight: 500,
+                            fontWeight,
                           }}
                         >
                           {item}
@@ -184,7 +204,8 @@ const IAICustomSelect = (props: IAICustomSelectProps) => {
                       )}
                     </ListItem>
                   </Tooltip>
-              ))}
+                );
+              })}
             </OverlayScrollbarsComponent>
           </List>
         )}

invokeai/frontend/web/src/theme/util/getInputOutlineStyles.ts

@@ -1,6 +1,6 @@
 import { StyleFunctionProps } from '@chakra-ui/theme-tools';
 
-export const getInputOutlineStyles = (_props: StyleFunctionProps) => ({
+export const getInputOutlineStyles = (_props?: StyleFunctionProps) => ({
   outline: 'none',
   borderWidth: 2,
   borderStyle: 'solid',