feat(ui): tweak paste buttons

invoke-ai · Feb 6, 2025 · e63bd26 · e63bd26
1 parent 91ded4b
commit e63bd26
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
@@ -1819,11 +1819,11 @@
         "newRegionalGuidance": "New $t(controlLayers.regionalGuidance)",
         "pasteTo": "Paste To",
         "pasteToAssets": "Assets",
-        "pasteToAssetsDesc": "Assets tab of Gallery",
+        "pasteToAssetsDesc": "Paste to Assets",
         "pasteToBbox": "Bbox",
-        "pasteToBboxDesc": "New raster layer, aligned to the Bbox",
+        "pasteToBboxDesc": "New Layer (in Bbox)",
         "pasteToCanvas": "Canvas",
-        "pasteToCanvasDesc": "New raster layer, aligned to the Canvas",
+        "pasteToCanvasDesc": "New Layer (in Canvas)",
         "pastedTo": "Pasted to {{destination}}",
         "transparency": "Transparency",
         "enableTransparencyEffect": "Enable Transparency Effect",

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasPasteModal.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasPasteModal.tsx
@@ -20,6 +20,7 @@ import { toast } from 'features/toast/toast';
 import { atom } from 'nanostores';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { PiBoundingBoxBold, PiImageBold } from 'react-icons/pi';
 import { useUploadImageMutation } from 'services/api/endpoints/images';
 
 const $imageFile = atom<File | null>(null);
@@ -125,14 +126,14 @@ export const CanvasPasteModal = memo(() => {
         <ModalCloseButton />
         <ModalBody display="flex" justifyContent="center">
           <Flex flexDir="column" gap={4} w="min-content">
-            <Button size="lg" onClick={pasteToAssets} isDisabled={isLoading}>
-              {t('controlLayers.pasteToAssetsDesc')}
+            <Button size="lg" onClick={pasteToCanvas} isDisabled={isLoading} leftIcon={<PiImageBold />}>
+              {t('controlLayers.pasteToCanvasDesc')}
             </Button>
-            <Button size="lg" onClick={pasteToBbox} isDisabled={isLoading}>
+            <Button size="lg" onClick={pasteToBbox} isDisabled={isLoading} leftIcon={<PiBoundingBoxBold />}>
               {t('controlLayers.pasteToBboxDesc')}
             </Button>
-            <Button size="lg" onClick={pasteToCanvas} isDisabled={isLoading}>
-              {t('controlLayers.pasteToCanvasDesc')}
+            <Button size="lg" onClick={pasteToAssets} isDisabled={isLoading} variant="ghost">
+              {t('controlLayers.pasteToAssetsDesc')}
             </Button>
           </Flex>
         </ModalBody>