From 39867d11a32e40a808fc4b05d7bbc8671e773c01 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 14 Sep 2024 10:26:33 +1000
Subject: [PATCH] feat(ui): move canvas reset button out of settings

---
 .../Settings/CanvasSettingsPopover.tsx         |  2 --
 .../components/Toolbar/CanvasToolbar.tsx       |  2 ++
 .../CanvasToolbarResetCanvasButton.tsx}        | 18 ++++++++++++------
 3 files changed, 14 insertions(+), 8 deletions(-)
 rename invokeai/frontend/web/src/features/controlLayers/components/{Settings/CanvasSettingsResetButton.tsx => Toolbar/CanvasToolbarResetCanvasButton.tsx} (56%)

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 2b67d8626e..6815d436f1 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsPopover.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsPopover.tsx
@@ -19,7 +19,6 @@ import { CanvasSettingsSnapToGridCheckbox } from 'features/controlLayers/compone
 import { CanvasSettingsInvertScrollCheckbox } from 'features/controlLayers/components/Settings/CanvasSettingsInvertScrollCheckbox';
 import { CanvasSettingsLogDebugInfoButton } from 'features/controlLayers/components/Settings/CanvasSettingsLogDebugInfo';
 import { CanvasSettingsRecalculateRectsButton } from 'features/controlLayers/components/Settings/CanvasSettingsRecalculateRectsButton';
-import { CanvasSettingsResetButton } from 'features/controlLayers/components/Settings/CanvasSettingsResetButton';
 import { CanvasSettingsShowHUDSwitch } from 'features/controlLayers/components/Settings/CanvasSettingsShowHUDSwitch';
 import { CanvasSettingsShowProgressOnCanvas } from 'features/controlLayers/components/Settings/CanvasSettingsShowProgressOnCanvasSwitch';
 import { memo } from 'react';
@@ -45,7 +44,6 @@ export const CanvasSettingsPopover = memo(() => {
             <CanvasSettingsShowProgressOnCanvas />
             <CanvasSettingsDynamicGridSwitch />
             <CanvasSettingsShowHUDSwitch />
-            <CanvasSettingsResetButton />
             <DebugSettings />
           </Flex>
         </PopoverBody>
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbar.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbar.tsx
index f4e3c2435a..aea5695aba 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbar.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbar.tsx
@@ -5,6 +5,7 @@ import { ToolChooser } from 'features/controlLayers/components/Tool/ToolChooser'
 import { ToolColorPicker } from 'features/controlLayers/components/Tool/ToolFillColorPicker';
 import { ToolSettings } from 'features/controlLayers/components/Tool/ToolSettings';
 import { CanvasToolbarFitBboxToLayersButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarFitBboxToLayersButton';
+import { CanvasToolbarResetCanvasButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarResetCanvasButton';
 import { CanvasToolbarResetViewButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarResetViewButton';
 import { CanvasToolbarSaveToGalleryButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarSaveToGalleryButton';
 import { CanvasToolbarScale } from 'features/controlLayers/components/Toolbar/CanvasToolbarScale';
@@ -34,6 +35,7 @@ export const CanvasToolbar = memo(() => {
       <ToolColorPicker />
       <CanvasToolbarFitBboxToLayersButton />
       <CanvasToolbarSaveToGalleryButton />
+      <CanvasToolbarResetCanvasButton />
       <CanvasSettingsPopover />
     </Flex>
   );
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsResetButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarResetCanvasButton.tsx
similarity index 56%
rename from invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsResetButton.tsx
rename to invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarResetCanvasButton.tsx
index 32a409a0e0..27a8f9816f 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsResetButton.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarResetCanvasButton.tsx
@@ -1,11 +1,12 @@
-import { Button } from '@invoke-ai/ui-library';
+import { IconButton } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { canvasReset } from 'features/controlLayers/store/canvasSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { PiTrashBold } from 'react-icons/pi';
 
-export const CanvasSettingsResetButton = memo(() => {
+export const CanvasToolbarResetCanvasButton = memo(() => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const canvasManager = useCanvasManager();
@@ -14,10 +15,15 @@ export const CanvasSettingsResetButton = memo(() => {
     canvasManager.stage.fitLayersToStage();
   }, [canvasManager.stage, dispatch]);
   return (
-    <Button onClick={onClick} colorScheme="error" size="sm">
-      {t('controlLayers.resetCanvas')}
-    </Button>
+    <IconButton
+      aria-label={t('controlLayers.resetCanvas')}
+      tooltip={t('controlLayers.resetCanvas')}
+      onClick={onClick}
+      colorScheme="error"
+      icon={<PiTrashBold />}
+      variant="ghost"
+    />
   );
 });
 
-CanvasSettingsResetButton.displayName = 'CanvasSettingsResetButton';
+CanvasToolbarResetCanvasButton.displayName = 'CanvasToolbarResetCanvasButton';