From 012b75ddce05e6c98fb6ac3580d9ff22ff3e5108 Mon Sep 17 00:00:00 2001
From: Josh Corbett <joshwcorbett@icloud.com>
Date: Sun, 8 Sep 2024 17:37:17 -0600
Subject: [PATCH 1/2] feat: :lipstick: minor qol ui tweaks

updated a lot of icon buttons, some spacing tweaks
---
 .../CanvasEntityList/EntityListGlobalActionBar.tsx         | 2 +-
 .../EntityListGlobalActionBarAddLayerMenu.tsx              | 2 +-
 .../EntityListGlobalActionBarFitBboxToLayers.tsx           | 2 +-
 .../CanvasEntityList/EntityListSelectedEntityActionBar.tsx | 4 ++--
 .../EntityListSelectedEntityActionBarDuplicateButton.tsx   | 2 +-
 .../EntityListSelectedEntityActionBarFill.tsx              | 2 +-
 .../EntityListSelectedEntityActionBarFilterButton.tsx      | 6 +++---
 .../EntityListSelectedEntityActionBarTransformButton.tsx   | 2 +-
 .../controlLayers/components/Tool/ToolFillColorPicker.tsx  | 2 +-
 .../components/common/CanvasEntityAddOfTypeButton.tsx      | 2 +-
 .../components/common/CanvasEntityDeleteButton.tsx         | 7 +++----
 .../components/common/CanvasEntityEnabledToggle.tsx        | 7 +++----
 .../components/common/CanvasEntityGroupList.tsx            | 2 +-
 .../components/common/CanvasEntityHeaderCommonActions.tsx  | 2 +-
 .../CanvasEntityIsBookmarkedForQuickSwitchToggle.tsx       | 3 +--
 .../components/common/CanvasEntityIsLockedToggle.tsx       | 3 +--
 .../components/common/CanvasEntityMenuItemsFilter.tsx      | 4 ++--
 .../components/common/CanvasEntityMergeVisibleButton.tsx   | 2 +-
 .../components/common/CanvasEntityTypeIsHiddenToggle.tsx   | 2 +-
 19 files changed, 27 insertions(+), 31 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListGlobalActionBar.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListGlobalActionBar.tsx
index 3d495db228b..034eb0355ee 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListGlobalActionBar.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListGlobalActionBar.tsx
@@ -9,7 +9,7 @@ export const EntityListGlobalActionBar = memo(() => {
     <Flex w="full" py={1} px={1} gap={2} alignItems="center">
       <EntityListGlobalActionBarDenoisingStrength />
       <Spacer />
-      <Flex>
+      <Flex gap={0.5}>
         <EntityListGlobalActionBarFitBboxToLayers />
         <EntityListGlobalActionBarAddLayerMenu />
       </Flex>
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListGlobalActionBarAddLayerMenu.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListGlobalActionBarAddLayerMenu.tsx
index 694d50aab6f..e974c257747 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListGlobalActionBarAddLayerMenu.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListGlobalActionBarAddLayerMenu.tsx
@@ -23,7 +23,7 @@ export const EntityListGlobalActionBarAddLayerMenu = memo(() => {
       <MenuButton
         as={IconButton}
         size="sm"
-        variant="link"
+        variant="ghost"
         alignSelf="stretch"
         tooltip={t('controlLayers.addLayer')}
         aria-label={t('controlLayers.addLayer')}
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListGlobalActionBarFitBboxToLayers.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListGlobalActionBarFitBboxToLayers.tsx
index 3fbdf18a2e4..405b5d68d07 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListGlobalActionBarFitBboxToLayers.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListGlobalActionBarFitBboxToLayers.tsx
@@ -15,7 +15,7 @@ export const EntityListGlobalActionBarFitBboxToLayers = memo(() => {
     <IconButton
       onClick={onClick}
       size="sm"
-      variant="link"
+      variant="ghost"
       alignSelf="stretch"
       aria-label={t('controlLayers.fitBboxToLayers')}
       tooltip={t('controlLayers.fitBboxToLayers')}
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBar.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBar.tsx
index b9e511e3e55..95de8a4ab1f 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBar.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBar.tsx
@@ -11,8 +11,8 @@ export const EntityListSelectedEntityActionBar = memo(() => {
     <Flex w="full" py={1} px={1} gap={2} alignItems="center">
       <EntityListSelectedEntityActionBarOpacity />
       <Spacer />
-      <EntityListSelectedEntityActionBarFill />
-      <Flex>
+      <Flex gap={0.5}>
+        <EntityListSelectedEntityActionBarFill />
         <EntityListSelectedEntityActionBarFilterButton />
         <EntityListSelectedEntityActionBarTransformButton />
         <EntityListSelectedEntityActionBarDuplicateButton />
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarDuplicateButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarDuplicateButton.tsx
index 27d75426772..498e35a50c5 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarDuplicateButton.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarDuplicateButton.tsx
@@ -22,7 +22,7 @@ export const EntityListSelectedEntityActionBarDuplicateButton = memo(() => {
       onClick={onClick}
       isDisabled={!selectedEntityIdentifier}
       size="sm"
-      variant="link"
+      variant="ghost"
       alignSelf="stretch"
       aria-label={t('controlLayers.duplicate')}
       tooltip={t('controlLayers.duplicate')}
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFill.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFill.tsx
index 117d3bc84fb..b873aa5cdc0 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFill.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFill.tsx
@@ -47,7 +47,7 @@ export const EntityListSelectedEntityActionBarFill = memo(() => {
   return (
     <Popover isLazy>
       <PopoverTrigger>
-        <Flex role="button" aria-label={t('controlLayers.maskFill')} tabIndex={-1} w={8} h={8}>
+        <Flex role="button" aria-label={t('controlLayers.maskFill')} tabIndex={-1} w={8} h={8} _hover={{ bg: 'base.800' }} _active={{ bg: 'transparent' }} borderRadius="md" transitionDuration="faster">
           <Tooltip label={t('controlLayers.maskFill')}>
             <Flex w="full" h="full" alignItems="center" justifyContent="center">
               <Box borderRadius="full" w={6} h={6} borderWidth={1} bg={rgbColorToString(fill.color)} />
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFilterButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFilterButton.tsx
index 5daf6529e5a..c516d8ff376 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFilterButton.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFilterButton.tsx
@@ -5,7 +5,7 @@ import { selectSelectedEntityIdentifier } from 'features/controlLayers/store/sel
 import { isFilterableEntityIdentifier } from 'features/controlLayers/store/types';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiShootingStarBold } from 'react-icons/pi';
+import { PiFunnelBold } from 'react-icons/pi';
 
 export const EntityListSelectedEntityActionBarFilterButton = memo(() => {
   const { t } = useTranslation();
@@ -25,11 +25,11 @@ export const EntityListSelectedEntityActionBarFilterButton = memo(() => {
       onClick={filter.start}
       isDisabled={filter.isDisabled}
       size="sm"
-      variant="link"
+      variant="ghost"
       alignSelf="stretch"
       aria-label={t('controlLayers.filter.filter')}
       tooltip={t('controlLayers.filter.filter')}
-      icon={<PiShootingStarBold />}
+      icon={<PiFunnelBold />}
     />
   );
 });
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarTransformButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarTransformButton.tsx
index 6b8942fb37b..90ac52d482a 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarTransformButton.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarTransformButton.tsx
@@ -25,7 +25,7 @@ export const EntityListSelectedEntityActionBarTransformButton = memo(() => {
       onClick={transform.start}
       isDisabled={transform.isDisabled}
       size="sm"
-      variant="link"
+      variant="ghost"
       alignSelf="stretch"
       aria-label={t('controlLayers.transform.transform')}
       tooltip={t('controlLayers.transform.transform')}
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolFillColorPicker.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolFillColorPicker.tsx
index 87d8ff2a3b2..fdc0e6a62bd 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolFillColorPicker.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolFillColorPicker.tsx
@@ -23,7 +23,7 @@ export const ToolColorPicker = memo(() => {
   return (
     <Popover isLazy>
       <PopoverTrigger>
-        <Flex role="button" aria-label={t('controlLayers.fill.fillColor')} tabIndex={-1} w={8} h={8}>
+        <Flex role="button" aria-label={t('controlLayers.fill.fillColor')} tabIndex={-1} w={10} h={10} _hover={{ bg: 'base.800' }} _active={{ bg: 'transparent' }} borderRadius="base" transitionDuration="faster">
           <Tooltip label={t('controlLayers.fill.fillColor')}>
             <Flex w="full" h="full" alignItems="center" justifyContent="center">
               <Box borderRadius="full" w={6} h={6} borderWidth={1} bg={rgbaColorToString(fill)} />
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityAddOfTypeButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityAddOfTypeButton.tsx
index ac7b7d67f37..83da9a62f04 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityAddOfTypeButton.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityAddOfTypeButton.tsx
@@ -63,7 +63,7 @@ export const CanvasEntityAddOfTypeButton = memo(({ type }: Props) => {
       size="sm"
       aria-label={label}
       tooltip={label}
-      variant="link"
+      variant="ghost"
       icon={<PiPlusBold />}
       onClick={onClick}
       alignSelf="stretch"
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityDeleteButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityDeleteButton.tsx
index 299b6534314..11edf08bb4d 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityDeleteButton.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityDeleteButton.tsx
@@ -4,7 +4,7 @@ import { useEntityIdentifierContext } from 'features/controlLayers/contexts/Enti
 import { entityDeleted } from 'features/controlLayers/store/canvasSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiTrashSimpleFill } from 'react-icons/pi';
+import { PiTrashSimpleBold } from 'react-icons/pi';
 
 export const CanvasEntityDeleteButton = memo(() => {
   const { t } = useTranslation();
@@ -19,9 +19,8 @@ export const CanvasEntityDeleteButton = memo(() => {
       size="sm"
       aria-label={t('common.delete')}
       tooltip={t('common.delete')}
-      variant="link"
-      alignSelf="stretch"
-      icon={<PiTrashSimpleFill />}
+      variant="ghost"
+      icon={<PiTrashSimpleBold />}
       onClick={onClick}
       colorScheme="error"
     />
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityEnabledToggle.tsx b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityEnabledToggle.tsx
index ba2db501829..5113cd35a6d 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityEnabledToggle.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityEnabledToggle.tsx
@@ -5,7 +5,7 @@ import { useEntityIsEnabled } from 'features/controlLayers/hooks/useEntityIsEnab
 import { entityIsEnabledToggled } from 'features/controlLayers/store/canvasSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiCircleBold, PiCircleFill } from 'react-icons/pi';
+import { PiCircleDashedBold, PiCircleFill } from 'react-icons/pi';
 
 export const CanvasEntityEnabledToggle = memo(() => {
   const { t } = useTranslation();
@@ -21,9 +21,8 @@ export const CanvasEntityEnabledToggle = memo(() => {
       size="sm"
       aria-label={t(isEnabled ? 'common.enabled' : 'common.disabled')}
       tooltip={t(isEnabled ? 'common.enabled' : 'common.disabled')}
-      variant="link"
-      alignSelf="stretch"
-      icon={isEnabled ? <PiCircleFill /> : <PiCircleBold />}
+      variant="ghost"
+      icon={isEnabled ? <PiCircleFill /> : <PiCircleDashedBold />}
       onClick={onClick}
     />
   );
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityGroupList.tsx b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityGroupList.tsx
index 3d28c59243d..fd210353d96 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityGroupList.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityGroupList.tsx
@@ -27,7 +27,7 @@ export const CanvasEntityGroupList = memo(({ isSelected, type, children }: Props
 
   return (
     <Flex flexDir="column" w="full">
-      <Flex w="full" px={1}>
+      <Flex w="full" px={1} gap={0.5}>
         <Flex
           flexGrow={1}
           as={Button}
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeaderCommonActions.tsx b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeaderCommonActions.tsx
index 2615771b0df..f66bbac417f 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeaderCommonActions.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeaderCommonActions.tsx
@@ -10,7 +10,7 @@ export const CanvasEntityHeaderCommonActions = memo(() => {
   const entityIdentifier = useEntityIdentifierContext();
 
   return (
-    <Flex alignSelf="stretch">
+    <Flex alignSelf="stretch" alignItems="center" gap={0.5}>
       <CanvasEntityIsBookmarkedForQuickSwitchToggle />
       {entityIdentifier.type !== 'ip_adapter' && <CanvasEntityIsLockedToggle />}
       <CanvasEntityEnabledToggle />
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityIsBookmarkedForQuickSwitchToggle.tsx b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityIsBookmarkedForQuickSwitchToggle.tsx
index 90cb9e953be..d43974dfe42 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityIsBookmarkedForQuickSwitchToggle.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityIsBookmarkedForQuickSwitchToggle.tsx
@@ -25,8 +25,7 @@ export const CanvasEntityIsBookmarkedForQuickSwitchToggle = memo(() => {
       size="sm"
       aria-label={t(isBookmarked ? 'controlLayers.removeBookmark' : 'controlLayers.bookmark')}
       tooltip={t(isBookmarked ? 'controlLayers.removeBookmark' : 'controlLayers.bookmark')}
-      variant="link"
-      alignSelf="stretch"
+      variant={isBookmarked ? 'outline' : 'ghost'}
       icon={isBookmarked ? <PiBookmarkSimpleFill /> : <PiBookmarkSimpleBold />}
       onClick={onClick}
     />
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityIsLockedToggle.tsx b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityIsLockedToggle.tsx
index e41a1d89e7b..cb43560774f 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityIsLockedToggle.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityIsLockedToggle.tsx
@@ -21,8 +21,7 @@ export const CanvasEntityIsLockedToggle = memo(() => {
       size="sm"
       aria-label={t(isLocked ? 'controlLayers.locked' : 'controlLayers.unlocked')}
       tooltip={t(isLocked ? 'controlLayers.locked' : 'controlLayers.unlocked')}
-      variant="link"
-      alignSelf="stretch"
+      variant={isLocked ? 'outline' : 'ghost'}
       icon={isLocked ? <PiLockSimpleFill /> : <PiLockSimpleOpenBold />}
       onClick={onClick}
     />
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityMenuItemsFilter.tsx b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityMenuItemsFilter.tsx
index 9e361c0911b..92ae14282cc 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityMenuItemsFilter.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityMenuItemsFilter.tsx
@@ -3,7 +3,7 @@ import { useEntityIdentifierContext } from 'features/controlLayers/contexts/Enti
 import { useEntityFilter } from 'features/controlLayers/hooks/useEntityFilter';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiShootingStarBold } from 'react-icons/pi';
+import { PiFunnelBold } from 'react-icons/pi';
 
 export const CanvasEntityMenuItemsFilter = memo(() => {
   const { t } = useTranslation();
@@ -11,7 +11,7 @@ export const CanvasEntityMenuItemsFilter = memo(() => {
   const filter = useEntityFilter(entityIdentifier);
 
   return (
-    <MenuItem onClick={filter.start} icon={<PiShootingStarBold />} isDisabled={filter.isDisabled}>
+    <MenuItem onClick={filter.start} icon={<PiFunnelBold />} isDisabled={filter.isDisabled}>
       {t('controlLayers.filter.filter')}
     </MenuItem>
   );
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityMergeVisibleButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityMergeVisibleButton.tsx
index dee0cba7988..9ec146f96e7 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityMergeVisibleButton.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityMergeVisibleButton.tsx
@@ -83,7 +83,7 @@ export const CanvasEntityMergeVisibleButton = memo(({ type }: Props) => {
       size="sm"
       aria-label={t('controlLayers.mergeVisible')}
       tooltip={t('controlLayers.mergeVisible')}
-      variant="link"
+      variant="ghost"
       icon={<PiStackBold />}
       onClick={onClick}
       alignSelf="stretch"
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityTypeIsHiddenToggle.tsx b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityTypeIsHiddenToggle.tsx
index de8e1eb3150..6747a843678 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityTypeIsHiddenToggle.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityTypeIsHiddenToggle.tsx
@@ -31,7 +31,7 @@ export const CanvasEntityTypeIsHiddenToggle = memo(({ type }: Props) => {
       size="sm"
       aria-label={t(isHidden ? 'controlLayers.hidingType' : 'controlLayers.showingType', { type: typeString })}
       tooltip={t(isHidden ? 'controlLayers.hidingType' : 'controlLayers.showingType', { type: typeString })}
-      variant="link"
+      variant={isHidden ? 'outline' : 'ghost'}
       icon={isHidden ? <PiEyeClosedBold /> : <PiEyeBold />}
       onClick={onClick}
       alignSelf="stretch"

From 31ad768698dfdf9cbeabbf4e1c94cb62852112d9 Mon Sep 17 00:00:00 2001
From: Josh Corbett <joshwcorbett@icloud.com>
Date: Sun, 8 Sep 2024 17:42:05 -0600
Subject: [PATCH 2/2] style: :rotating_light: satisfy the linter

---
 .../EntityListSelectedEntityActionBarFill.tsx        | 12 +++++++++++-
 .../components/Tool/ToolFillColorPicker.tsx          | 12 +++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFill.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFill.tsx
index b873aa5cdc0..831b134e875 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFill.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFill.tsx
@@ -47,7 +47,17 @@ export const EntityListSelectedEntityActionBarFill = memo(() => {
   return (
     <Popover isLazy>
       <PopoverTrigger>
-        <Flex role="button" aria-label={t('controlLayers.maskFill')} tabIndex={-1} w={8} h={8} _hover={{ bg: 'base.800' }} _active={{ bg: 'transparent' }} borderRadius="md" transitionDuration="faster">
+        <Flex
+          role="button"
+          aria-label={t('controlLayers.maskFill')}
+          tabIndex={-1}
+          w={8}
+          h={8}
+          _hover={{ bg: 'base.800' }}
+          _active={{ bg: 'transparent' }}
+          borderRadius="md"
+          transitionDuration="faster"
+        >
           <Tooltip label={t('controlLayers.maskFill')}>
             <Flex w="full" h="full" alignItems="center" justifyContent="center">
               <Box borderRadius="full" w={6} h={6} borderWidth={1} bg={rgbColorToString(fill.color)} />
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolFillColorPicker.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolFillColorPicker.tsx
index fdc0e6a62bd..80bb6de7bce 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolFillColorPicker.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolFillColorPicker.tsx
@@ -23,7 +23,17 @@ export const ToolColorPicker = memo(() => {
   return (
     <Popover isLazy>
       <PopoverTrigger>
-        <Flex role="button" aria-label={t('controlLayers.fill.fillColor')} tabIndex={-1} w={10} h={10} _hover={{ bg: 'base.800' }} _active={{ bg: 'transparent' }} borderRadius="base" transitionDuration="faster">
+        <Flex
+          role="button"
+          aria-label={t('controlLayers.fill.fillColor')}
+          tabIndex={-1}
+          w={10}
+          h={10}
+          _hover={{ bg: 'base.800' }}
+          _active={{ bg: 'transparent' }}
+          borderRadius="base"
+          transitionDuration="faster"
+        >
           <Tooltip label={t('controlLayers.fill.fillColor')}>
             <Flex w="full" h="full" alignItems="center" justifyContent="center">
               <Box borderRadius="full" w={6} h={6} borderWidth={1} bg={rgbaColorToString(fill)} />