Updated icons + Minor UI Tweaks (#5427)

* feat: 💄 updated icons + minor ui tweaks * revert: 💄 removes ui tweaks * revert: 💄 removed more ui tweaks removed more ui tweaks and a commented-out icon import * style: 🚨 satisfy the linter --------- Co-authored-by: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
2024-08-30 20:32:17 +00:00 · 2024-01-06 20:14:44 -07:00
parent ebda81e96e
commit 5779542084
57 changed files with 281 additions and 234 deletions
--- a/invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx
@ -6,7 +6,7 @@ import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
 import { clearCanvasHistory } from 'features/canvas/store/canvasSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaTrash } from 'react-icons/fa';
+import { PiTrashSimpleFill } from 'react-icons/pi';

 const ClearCanvasHistoryButtonModal = () => {
  const isStaging = useAppSelector(isStagingSelector);
@ -23,7 +23,7 @@ const ClearCanvasHistoryButtonModal = () => {
      <InvButton
        onClick={onOpen}
        size="sm"
-        leftIcon={<FaTrash />}
+        leftIcon={<PiTrashSimpleFill />}
        isDisabled={isStaging}
      >
        {t('unifiedCanvas.clearCanvasHistory')}
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
@ -19,14 +19,14 @@ import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import {
-  FaArrowLeft,
-  FaArrowRight,
-  FaCheck,
-  FaEye,
-  FaEyeSlash,
-  FaSave,
-  FaTimes,
-} from 'react-icons/fa';
+  PiArrowLeftBold,
+  PiArrowRightBold,
+  PiCheckBold,
+  PiEyeBold,
+  PiEyeSlashBold,
+  PiFloppyDiskBold,
+  PiXBold,
+} from 'react-icons/pi';
 import { useGetImageDTOQuery } from 'services/api/endpoints/images';

 const selector = createMemoizedSelector(selectCanvasSlice, (canvas) => {
@ -140,7 +140,7 @@ const IAICanvasStagingAreaToolbar = () => {
        <InvIconButton
          tooltip={`${t('unifiedCanvas.previous')} (Left)`}
          aria-label={`${t('unifiedCanvas.previous')} (Left)`}
-          icon={<FaArrowLeft />}
+          icon={<PiArrowLeftBold />}
          onClick={handlePrevImage}
          colorScheme="invokeBlue"
          isDisabled={!shouldShowStagingImage}
@ -154,7 +154,7 @@ const IAICanvasStagingAreaToolbar = () => {
        <InvIconButton
          tooltip={`${t('unifiedCanvas.next')} (Right)`}
          aria-label={`${t('unifiedCanvas.next')} (Right)`}
-          icon={<FaArrowRight />}
+          icon={<PiArrowRightBold />}
          onClick={handleNextImage}
          colorScheme="invokeBlue"
          isDisabled={!shouldShowStagingImage}
@ -164,7 +164,7 @@ const IAICanvasStagingAreaToolbar = () => {
        <InvIconButton
          tooltip={`${t('unifiedCanvas.accept')} (Enter)`}
          aria-label={`${t('unifiedCanvas.accept')} (Enter)`}
-          icon={<FaCheck />}
+          icon={<PiCheckBold />}
          onClick={handleAccept}
          colorScheme="invokeBlue"
        />
@ -180,7 +180,7 @@ const IAICanvasStagingAreaToolbar = () => {
              : t('unifiedCanvas.showResultsOff')
          }
          data-alert={!shouldShowStagingImage}
-          icon={shouldShowStagingImage ? <FaEye /> : <FaEyeSlash />}
+          icon={shouldShowStagingImage ? <PiEyeBold /> : <PiEyeSlashBold />}
          onClick={handleToggleShouldShowStagingImage}
          colorScheme="invokeBlue"
        />
@ -188,14 +188,14 @@ const IAICanvasStagingAreaToolbar = () => {
          tooltip={t('unifiedCanvas.saveToGallery')}
          aria-label={t('unifiedCanvas.saveToGallery')}
          isDisabled={!imageDTO || !imageDTO.is_intermediate}
-          icon={<FaSave />}
+          icon={<PiFloppyDiskBold />}
          onClick={handleSaveToGallery}
          colorScheme="invokeBlue"
        />
        <InvIconButton
          tooltip={t('unifiedCanvas.discardAll')}
          aria-label={t('unifiedCanvas.discardAll')}
-          icon={<FaTimes />}
+          icon={<PiXBold />}
          onClick={handleDiscardStagingArea}
          colorScheme="error"
          fontSize={20}
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx
@ -25,7 +25,11 @@ import { memo, useCallback } from 'react';
 import type { RgbaColor } from 'react-colorful';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
-import { FaMask, FaSave, FaTrash } from 'react-icons/fa';
+import {
+  PiExcludeBold,
+  PiFloppyDiskBackFill,
+  PiTrashSimpleFill,
+} from 'react-icons/pi';

 const IAICanvasMaskOptions = () => {
  const dispatch = useAppDispatch();
@ -110,7 +114,7 @@ const IAICanvasMaskOptions = () => {
        <InvIconButton
          aria-label={t('unifiedCanvas.maskingOptions')}
          tooltip={t('unifiedCanvas.maskingOptions')}
-          icon={<FaMask />}
+          icon={<PiExcludeBold />}
          isChecked={layer === 'mask'}
          isDisabled={isStaging}
        />
@ -136,12 +140,16 @@ const IAICanvasMaskOptions = () => {
                onChange={handleChangeMaskColor}
              />
            </Box>
-            <InvButton size="sm" leftIcon={<FaSave />} onClick={handleSaveMask}>
+            <InvButton
+              size="sm"
+              leftIcon={<PiFloppyDiskBackFill />}
+              onClick={handleSaveMask}
+            >
              {t('unifiedCanvas.saveMask')}
            </InvButton>
            <InvButton
              size="sm"
-              leftIcon={<FaTrash />}
+              leftIcon={<PiTrashSimpleFill />}
              onClick={handleClearMask}
            >
              {t('unifiedCanvas.clearMask')}
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx
@ -5,7 +5,7 @@ import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
-import { FaRedo } from 'react-icons/fa';
+import { PiArrowClockwiseBold } from 'react-icons/pi';

 const IAICanvasRedoButton = () => {
  const dispatch = useAppDispatch();
@ -34,7 +34,7 @@ const IAICanvasRedoButton = () => {
    <InvIconButton
      aria-label={`${t('unifiedCanvas.redo')} (Ctrl+Shift+Z)`}
      tooltip={`${t('unifiedCanvas.redo')} (Ctrl+Shift+Z)`}
-      icon={<FaRedo />}
+      icon={<PiArrowClockwiseBold />}
      onClick={handleRedo}
      isDisabled={!canRedo}
    />
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx
@ -24,7 +24,7 @@ import type { ChangeEvent } from 'react';
 import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
-import { FaWrench } from 'react-icons/fa';
+import { PiGearSixBold } from 'react-icons/pi';

 const IAICanvasSettingsButtonPopover = () => {
  const dispatch = useAppDispatch();
@ -114,7 +114,7 @@ const IAICanvasSettingsButtonPopover = () => {
        <InvIconButton
          tooltip={t('unifiedCanvas.canvasSettings')}
          aria-label={t('unifiedCanvas.canvasSettings')}
-          icon={<FaWrench />}
+          icon={<PiGearSixBold />}
        />
      </InvPopoverTrigger>
      <InvPopoverContent>
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx
@ -26,13 +26,13 @@ import type { RgbaColor } from 'react-colorful';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import {
-  FaEraser,
-  FaEyeDropper,
-  FaFillDrip,
-  FaPaintBrush,
-  FaSlidersH,
-  FaTimes,
-} from 'react-icons/fa';
+  PiEraserBold,
+  PiEyedropperBold,
+  PiPaintBrushBold,
+  PiPaintBucketBold,
+  PiSlidersHorizontalBold,
+  PiXBold,
+} from 'react-icons/pi';

 const IAICanvasToolChooserOptions = () => {
  const dispatch = useAppDispatch();
@ -198,7 +198,7 @@ const IAICanvasToolChooserOptions = () => {
      <InvIconButton
        aria-label={`${t('unifiedCanvas.brush')} (B)`}
        tooltip={`${t('unifiedCanvas.brush')} (B)`}
-        icon={<FaPaintBrush />}
+        icon={<PiPaintBrushBold />}
        isChecked={tool === 'brush' && !isStaging}
        onClick={handleSelectBrushTool}
        isDisabled={isStaging}
@ -206,7 +206,7 @@ const IAICanvasToolChooserOptions = () => {
      <InvIconButton
        aria-label={`${t('unifiedCanvas.eraser')} (E)`}
        tooltip={`${t('unifiedCanvas.eraser')} (E)`}
-        icon={<FaEraser />}
+        icon={<PiEraserBold />}
        isChecked={tool === 'eraser' && !isStaging}
        isDisabled={isStaging}
        onClick={handleSelectEraserTool}
@ -214,21 +214,21 @@ const IAICanvasToolChooserOptions = () => {
      <InvIconButton
        aria-label={`${t('unifiedCanvas.fillBoundingBox')} (Shift+F)`}
        tooltip={`${t('unifiedCanvas.fillBoundingBox')} (Shift+F)`}
-        icon={<FaFillDrip />}
+        icon={<PiPaintBucketBold />}
        isDisabled={isStaging}
        onClick={handleFillRect}
      />
      <InvIconButton
        aria-label={`${t('unifiedCanvas.eraseBoundingBox')} (Del/Backspace)`}
        tooltip={`${t('unifiedCanvas.eraseBoundingBox')} (Del/Backspace)`}
-        icon={<FaTimes />}
+        icon={<PiXBold />}
        isDisabled={isStaging}
        onClick={handleEraseBoundingBox}
      />
      <InvIconButton
        aria-label={`${t('unifiedCanvas.colorPicker')} (C)`}
        tooltip={`${t('unifiedCanvas.colorPicker')} (C)`}
-        icon={<FaEyeDropper />}
+        icon={<PiEyedropperBold />}
        isChecked={tool === 'colorPicker' && !isStaging}
        isDisabled={isStaging}
        onClick={handleSelectColorPickerTool}
@ -238,7 +238,7 @@ const IAICanvasToolChooserOptions = () => {
          <InvIconButton
            aria-label={t('unifiedCanvas.brushOptions')}
            tooltip={t('unifiedCanvas.brushOptions')}
-            icon={<FaSlidersH />}
+            icon={<PiSlidersHorizontalBold />}
          />
        </InvPopoverTrigger>
        <InvPopoverContent>
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
@ -30,15 +30,15 @@ import { memo, useCallback, useMemo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import {
-  FaArrowsAlt,
-  FaCopy,
-  FaCrosshairs,
-  FaDownload,
-  FaLayerGroup,
-  FaSave,
-  FaTrash,
-  FaUpload,
-} from 'react-icons/fa';
+  PiCopyBold,
+  PiCrosshairSimpleBold,
+  PiDownloadSimpleBold,
+  PiFloppyDiskBold,
+  PiHandGrabbingBold,
+  PiStackBold,
+  PiTrashSimpleBold,
+  PiUploadSimpleBold,
+} from 'react-icons/pi';

 import IAICanvasMaskOptions from './IAICanvasMaskOptions';
 import IAICanvasRedoButton from './IAICanvasRedoButton';
@ -217,14 +217,14 @@ const IAICanvasToolbar = () => {
        <InvIconButton
          aria-label={`${t('unifiedCanvas.move')} (V)`}
          tooltip={`${t('unifiedCanvas.move')} (V)`}
-          icon={<FaArrowsAlt />}
+          icon={<PiHandGrabbingBold />}
          isChecked={tool === 'move' || isStaging}
          onClick={handleSelectMoveTool}
        />
        <InvIconButton
          aria-label={`${t('unifiedCanvas.resetView')} (R)`}
          tooltip={`${t('unifiedCanvas.resetView')} (R)`}
-          icon={<FaCrosshairs />}
+          icon={<PiCrosshairSimpleBold />}
          onClick={handleClickResetCanvasView}
        />
      </InvButtonGroup>
@ -233,14 +233,14 @@ const IAICanvasToolbar = () => {
        <InvIconButton
          aria-label={`${t('unifiedCanvas.mergeVisible')} (Shift+M)`}
          tooltip={`${t('unifiedCanvas.mergeVisible')} (Shift+M)`}
-          icon={<FaLayerGroup />}
+          icon={<PiStackBold />}
          onClick={handleMergeVisible}
          isDisabled={isStaging}
        />
        <InvIconButton
          aria-label={`${t('unifiedCanvas.saveToGallery')} (Shift+S)`}
          tooltip={`${t('unifiedCanvas.saveToGallery')} (Shift+S)`}
-          icon={<FaSave />}
+          icon={<PiFloppyDiskBold />}
          onClick={handleSaveToGallery}
          isDisabled={isStaging}
        />
@ -248,7 +248,7 @@ const IAICanvasToolbar = () => {
          <InvIconButton
            aria-label={`${t('unifiedCanvas.copyToClipboard')} (Cmd/Ctrl+C)`}
            tooltip={`${t('unifiedCanvas.copyToClipboard')} (Cmd/Ctrl+C)`}
-            icon={<FaCopy />}
+            icon={<PiCopyBold />}
            onClick={handleCopyImageToClipboard}
            isDisabled={isStaging}
          />
@ -256,7 +256,7 @@ const IAICanvasToolbar = () => {
        <InvIconButton
          aria-label={`${t('unifiedCanvas.downloadAsImage')} (Shift+D)`}
          tooltip={`${t('unifiedCanvas.downloadAsImage')} (Shift+D)`}
-          icon={<FaDownload />}
+          icon={<PiDownloadSimpleBold />}
          onClick={handleDownloadAsImage}
          isDisabled={isStaging}
        />
@ -270,7 +270,7 @@ const IAICanvasToolbar = () => {
        <InvIconButton
          aria-label={`${t('common.upload')}`}
          tooltip={`${t('common.upload')}`}
-          icon={<FaUpload />}
+          icon={<PiUploadSimpleBold />}
          isDisabled={isStaging}
          {...getUploadButtonProps()}
        />
@ -278,7 +278,7 @@ const IAICanvasToolbar = () => {
        <InvIconButton
          aria-label={`${t('unifiedCanvas.clearCanvas')}`}
          tooltip={`${t('unifiedCanvas.clearCanvas')}`}
-          icon={<FaTrash />}
+          icon={<PiTrashSimpleBold />}
          onClick={handleResetCanvas}
          colorScheme="error"
          isDisabled={isStaging}
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton.tsx
@ -5,7 +5,7 @@ import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
-import { FaUndo } from 'react-icons/fa';
+import { PiArrowCounterClockwiseBold } from 'react-icons/pi';

 const IAICanvasUndoButton = () => {
  const dispatch = useAppDispatch();
@ -33,7 +33,7 @@ const IAICanvasUndoButton = () => {
    <InvIconButton
      aria-label={`${t('unifiedCanvas.undo')} (Ctrl+Z)`}
      tooltip={`${t('unifiedCanvas.undo')} (Ctrl+Z)`}
-      icon={<FaUndo />}
+      icon={<PiArrowCounterClockwiseBold />}
      onClick={handleUndo}
      isDisabled={!canUndo}
    />