From 972f03960a1b5a5fd80d2a28e0991280c82a738e Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 28 Aug 2024 16:04:37 +1000
Subject: [PATCH] feat(ui): tidy canvas toolbar buttons

---
 .../components/Settings/CanvasSettingsPopover.tsx             | 2 +-
 .../features/controlLayers/components/UndoRedoButtonGroup.tsx | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsPopover.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsPopover.tsx
index f0e39e9afc..dae5e143c8 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsPopover.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsPopover.tsx
@@ -27,7 +27,7 @@ export const CanvasSettingsPopover = memo(() => {
   return (
     <Popover isLazy>
       <PopoverTrigger>
-        <IconButton aria-label={t('common.settingsLabel')} icon={<RiSettings4Fill />} />
+        <IconButton aria-label={t('common.settingsLabel')} icon={<RiSettings4Fill />} variant="ghost" />
       </PopoverTrigger>
       <PopoverContent>
         <PopoverArrow />
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/UndoRedoButtonGroup.tsx b/invokeai/frontend/web/src/features/controlLayers/components/UndoRedoButtonGroup.tsx
index ec8ced184b..fb3dae9b90 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/UndoRedoButtonGroup.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/UndoRedoButtonGroup.tsx
@@ -29,13 +29,14 @@ export const UndoRedoButtonGroup = memo(() => {
   ]);
 
   return (
-    <ButtonGroup>
+    <ButtonGroup isAttached={false}>
       <IconButton
         aria-label={t('unifiedCanvas.undo')}
         tooltip={t('unifiedCanvas.undo')}
         onClick={handleUndo}
         icon={<PiArrowCounterClockwiseBold />}
         isDisabled={!mayUndo}
+        variant="ghost"
       />
       <IconButton
         aria-label={t('unifiedCanvas.redo')}
@@ -43,6 +44,7 @@ export const UndoRedoButtonGroup = memo(() => {
         onClick={handleRedo}
         icon={<PiArrowClockwiseBold />}
         isDisabled={!mayRedo}
+        variant="ghost"
       />
     </ButtonGroup>
   );