From 8506d98f34d09cb2c4352840dcc63322662f697c Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 13 Sep 2024 12:29:59 +1000
Subject: [PATCH] feat(ui): brighter border around fill color buttons

---
 .../EntityListSelectedEntityActionBarFill.tsx            | 9 ++++++++-
 .../components/Tool/ToolFillColorPicker.tsx              | 9 ++++++++-
 2 files changed, 16 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 117d3bc84f..21383b93c4 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFill.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFill.tsx
@@ -50,7 +50,14 @@ export const EntityListSelectedEntityActionBarFill = memo(() => {
         <Flex role="button" aria-label={t('controlLayers.maskFill')} tabIndex={-1} w={8} h={8}>
           <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)} />
+              <Box
+                borderRadius="full"
+                borderColor="base.300"
+                w={6}
+                h={6}
+                borderWidth={1}
+                bg={rgbColorToString(fill.color)}
+              />
             </Flex>
           </Tooltip>
         </Flex>
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 87d8ff2a3b..c12f3af7b1 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolFillColorPicker.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolFillColorPicker.tsx
@@ -26,7 +26,14 @@ export const ToolColorPicker = memo(() => {
         <Flex role="button" aria-label={t('controlLayers.fill.fillColor')} tabIndex={-1} w={8} h={8}>
           <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)} />
+              <Box
+                borderRadius="full"
+                borderColor="base.300"
+                w={6}
+                h={6}
+                borderWidth={1}
+                bg={rgbaColorToString(fill)}
+              />
             </Flex>
           </Tooltip>
         </Flex>