Skip to content

Commit 5779542

Browse files
joshistoastpsychedelicious
joshistoast
and
psychedelicious
authored
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 <[email protected]>
1 parent ebda81e commit 5779542

File tree

57 files changed

+281
-234
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+281
-234
lines changed

‎invokeai/frontend/web/src/common/components/InvTabs/theme.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,9 @@ const line = definePartsStyle(() => ({
4242
px: 4,
4343
py: 1,
4444
fontSize: 'sm',
45-
color: 'base.400',
45+
color: 'base.200',
4646
_selected: {
47-
color: 'blue.400',
47+
color: 'blue.200',
4848
},
4949
},
5050
tabpanel: {

‎invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
66
import { clearCanvasHistory } from 'features/canvas/store/canvasSlice';
77
import { memo, useCallback } from 'react';
88
import { useTranslation } from 'react-i18next';
9-
import { FaTrash } from 'react-icons/fa';
9+
import { PiTrashSimpleFill } from 'react-icons/pi';
1010

1111
const ClearCanvasHistoryButtonModal = () => {
1212
const isStaging = useAppSelector(isStagingSelector);
@@ -23,7 +23,7 @@ const ClearCanvasHistoryButtonModal = () => {
2323
<InvButton
2424
onClick={onOpen}
2525
size="sm"
26-
leftIcon={<FaTrash />}
26+
leftIcon={<PiTrashSimpleFill />}
2727
isDisabled={isStaging}
2828
>
2929
{t('unifiedCanvas.clearCanvasHistory')}

‎invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,14 @@ import { memo, useCallback } from 'react';
1919
import { useHotkeys } from 'react-hotkeys-hook';
2020
import { useTranslation } from 'react-i18next';
2121
import {
22-
FaArrowLeft,
23-
FaArrowRight,
24-
FaCheck,
25-
FaEye,
26-
FaEyeSlash,
27-
FaSave,
28-
FaTimes,
29-
} from 'react-icons/fa';
22+
PiArrowLeftBold,
23+
PiArrowRightBold,
24+
PiCheckBold,
25+
PiEyeBold,
26+
PiEyeSlashBold,
27+
PiFloppyDiskBold,
28+
PiXBold,
29+
} from 'react-icons/pi';
3030
import { useGetImageDTOQuery } from 'services/api/endpoints/images';
3131

3232
const selector = createMemoizedSelector(selectCanvasSlice, (canvas) => {
@@ -140,7 +140,7 @@ const IAICanvasStagingAreaToolbar = () => {
140140
<InvIconButton
141141
tooltip={`${t('unifiedCanvas.previous')} (Left)`}
142142
aria-label={`${t('unifiedCanvas.previous')} (Left)`}
143-
icon={<FaArrowLeft />}
143+
icon={<PiArrowLeftBold />}
144144
onClick={handlePrevImage}
145145
colorScheme="invokeBlue"
146146
isDisabled={!shouldShowStagingImage}
@@ -154,7 +154,7 @@ const IAICanvasStagingAreaToolbar = () => {
154154
<InvIconButton
155155
tooltip={`${t('unifiedCanvas.next')} (Right)`}
156156
aria-label={`${t('unifiedCanvas.next')} (Right)`}
157-
icon={<FaArrowRight />}
157+
icon={<PiArrowRightBold />}
158158
onClick={handleNextImage}
159159
colorScheme="invokeBlue"
160160
isDisabled={!shouldShowStagingImage}
@@ -164,7 +164,7 @@ const IAICanvasStagingAreaToolbar = () => {
164164
<InvIconButton
165165
tooltip={`${t('unifiedCanvas.accept')} (Enter)`}
166166
aria-label={`${t('unifiedCanvas.accept')} (Enter)`}
167-
icon={<FaCheck />}
167+
icon={<PiCheckBold />}
168168
onClick={handleAccept}
169169
colorScheme="invokeBlue"
170170
/>
@@ -180,22 +180,22 @@ const IAICanvasStagingAreaToolbar = () => {
180180
: t('unifiedCanvas.showResultsOff')
181181
}
182182
data-alert={!shouldShowStagingImage}
183-
icon={shouldShowStagingImage ? <FaEye /> : <FaEyeSlash />}
183+
icon={shouldShowStagingImage ? <PiEyeBold /> : <PiEyeSlashBold />}
184184
onClick={handleToggleShouldShowStagingImage}
185185
colorScheme="invokeBlue"
186186
/>
187187
<InvIconButton
188188
tooltip={t('unifiedCanvas.saveToGallery')}
189189
aria-label={t('unifiedCanvas.saveToGallery')}
190190
isDisabled={!imageDTO || !imageDTO.is_intermediate}
191-
icon={<FaSave />}
191+
icon={<PiFloppyDiskBold />}
192192
onClick={handleSaveToGallery}
193193
colorScheme="invokeBlue"
194194
/>
195195
<InvIconButton
196196
tooltip={t('unifiedCanvas.discardAll')}
197197
aria-label={t('unifiedCanvas.discardAll')}
198-
icon={<FaTimes />}
198+
icon={<PiXBold />}
199199
onClick={handleDiscardStagingArea}
200200
colorScheme="error"
201201
fontSize={20}

‎invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,11 @@ import { memo, useCallback } from 'react';
2525
import type { RgbaColor } from 'react-colorful';
2626
import { useHotkeys } from 'react-hotkeys-hook';
2727
import { useTranslation } from 'react-i18next';
28-
import { FaMask, FaSave, FaTrash } from 'react-icons/fa';
28+
import {
29+
PiExcludeBold,
30+
PiFloppyDiskBackFill,
31+
PiTrashSimpleFill,
32+
} from 'react-icons/pi';
2933

3034
const IAICanvasMaskOptions = () => {
3135
const dispatch = useAppDispatch();
@@ -110,7 +114,7 @@ const IAICanvasMaskOptions = () => {
110114
<InvIconButton
111115
aria-label={t('unifiedCanvas.maskingOptions')}
112116
tooltip={t('unifiedCanvas.maskingOptions')}
113-
icon={<FaMask />}
117+
icon={<PiExcludeBold />}
114118
isChecked={layer === 'mask'}
115119
isDisabled={isStaging}
116120
/>
@@ -136,12 +140,16 @@ const IAICanvasMaskOptions = () => {
136140
onChange={handleChangeMaskColor}
137141
/>
138142
</Box>
139-
<InvButton size="sm" leftIcon={<FaSave />} onClick={handleSaveMask}>
143+
<InvButton
144+
size="sm"
145+
leftIcon={<PiFloppyDiskBackFill />}
146+
onClick={handleSaveMask}
147+
>
140148
{t('unifiedCanvas.saveMask')}
141149
</InvButton>
142150
<InvButton
143151
size="sm"
144-
leftIcon={<FaTrash />}
152+
leftIcon={<PiTrashSimpleFill />}
145153
onClick={handleClearMask}
146154
>
147155
{t('unifiedCanvas.clearMask')}

‎invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
55
import { memo, useCallback } from 'react';
66
import { useHotkeys } from 'react-hotkeys-hook';
77
import { useTranslation } from 'react-i18next';
8-
import { FaRedo } from 'react-icons/fa';
8+
import { PiArrowClockwiseBold } from 'react-icons/pi';
99

1010
const IAICanvasRedoButton = () => {
1111
const dispatch = useAppDispatch();
@@ -34,7 +34,7 @@ const IAICanvasRedoButton = () => {
3434
<InvIconButton
3535
aria-label={`${t('unifiedCanvas.redo')} (Ctrl+Shift+Z)`}
3636
tooltip={`${t('unifiedCanvas.redo')} (Ctrl+Shift+Z)`}
37-
icon={<FaRedo />}
37+
icon={<PiArrowClockwiseBold />}
3838
onClick={handleRedo}
3939
isDisabled={!canRedo}
4040
/>

‎invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import type { ChangeEvent } from 'react';
2424
import { memo, useCallback } from 'react';
2525
import { useHotkeys } from 'react-hotkeys-hook';
2626
import { useTranslation } from 'react-i18next';
27-
import { FaWrench } from 'react-icons/fa';
27+
import { PiGearSixBold } from 'react-icons/pi';
2828

2929
const IAICanvasSettingsButtonPopover = () => {
3030
const dispatch = useAppDispatch();
@@ -114,7 +114,7 @@ const IAICanvasSettingsButtonPopover = () => {
114114
<InvIconButton
115115
tooltip={t('unifiedCanvas.canvasSettings')}
116116
aria-label={t('unifiedCanvas.canvasSettings')}
117-
icon={<FaWrench />}
117+
icon={<PiGearSixBold />}
118118
/>
119119
</InvPopoverTrigger>
120120
<InvPopoverContent>

‎invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,13 @@ import type { RgbaColor } from 'react-colorful';
2626
import { useHotkeys } from 'react-hotkeys-hook';
2727
import { useTranslation } from 'react-i18next';
2828
import {
29-
FaEraser,
30-
FaEyeDropper,
31-
FaFillDrip,
32-
FaPaintBrush,
33-
FaSlidersH,
34-
FaTimes,
35-
} from 'react-icons/fa';
29+
PiEraserBold,
30+
PiEyedropperBold,
31+
PiPaintBrushBold,
32+
PiPaintBucketBold,
33+
PiSlidersHorizontalBold,
34+
PiXBold,
35+
} from 'react-icons/pi';
3636

3737
const IAICanvasToolChooserOptions = () => {
3838
const dispatch = useAppDispatch();
@@ -198,37 +198,37 @@ const IAICanvasToolChooserOptions = () => {
198198
<InvIconButton
199199
aria-label={`${t('unifiedCanvas.brush')} (B)`}
200200
tooltip={`${t('unifiedCanvas.brush')} (B)`}
201-
icon={<FaPaintBrush />}
201+
icon={<PiPaintBrushBold />}
202202
isChecked={tool === 'brush' && !isStaging}
203203
onClick={handleSelectBrushTool}
204204
isDisabled={isStaging}
205205
/>
206206
<InvIconButton
207207
aria-label={`${t('unifiedCanvas.eraser')} (E)`}
208208
tooltip={`${t('unifiedCanvas.eraser')} (E)`}
209-
icon={<FaEraser />}
209+
icon={<PiEraserBold />}
210210
isChecked={tool === 'eraser' && !isStaging}
211211
isDisabled={isStaging}
212212
onClick={handleSelectEraserTool}
213213
/>
214214
<InvIconButton
215215
aria-label={`${t('unifiedCanvas.fillBoundingBox')} (Shift+F)`}
216216
tooltip={`${t('unifiedCanvas.fillBoundingBox')} (Shift+F)`}
217-
icon={<FaFillDrip />}
217+
icon={<PiPaintBucketBold />}
218218
isDisabled={isStaging}
219219
onClick={handleFillRect}
220220
/>
221221
<InvIconButton
222222
aria-label={`${t('unifiedCanvas.eraseBoundingBox')} (Del/Backspace)`}
223223
tooltip={`${t('unifiedCanvas.eraseBoundingBox')} (Del/Backspace)`}
224-
icon={<FaTimes />}
224+
icon={<PiXBold />}
225225
isDisabled={isStaging}
226226
onClick={handleEraseBoundingBox}
227227
/>
228228
<InvIconButton
229229
aria-label={`${t('unifiedCanvas.colorPicker')} (C)`}
230230
tooltip={`${t('unifiedCanvas.colorPicker')} (C)`}
231-
icon={<FaEyeDropper />}
231+
icon={<PiEyedropperBold />}
232232
isChecked={tool === 'colorPicker' && !isStaging}
233233
isDisabled={isStaging}
234234
onClick={handleSelectColorPickerTool}
@@ -238,7 +238,7 @@ const IAICanvasToolChooserOptions = () => {
238238
<InvIconButton
239239
aria-label={t('unifiedCanvas.brushOptions')}
240240
tooltip={t('unifiedCanvas.brushOptions')}
241-
icon={<FaSlidersH />}
241+
icon={<PiSlidersHorizontalBold />}
242242
/>
243243
</InvPopoverTrigger>
244244
<InvPopoverContent>

‎invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -30,15 +30,15 @@ import { memo, useCallback, useMemo } from 'react';
3030
import { useHotkeys } from 'react-hotkeys-hook';
3131
import { useTranslation } from 'react-i18next';
3232
import {
33-
FaArrowsAlt,
34-
FaCopy,
35-
FaCrosshairs,
36-
FaDownload,
37-
FaLayerGroup,
38-
FaSave,
39-
FaTrash,
40-
FaUpload,
41-
} from 'react-icons/fa';
33+
PiCopyBold,
34+
PiCrosshairSimpleBold,
35+
PiDownloadSimpleBold,
36+
PiFloppyDiskBold,
37+
PiHandGrabbingBold,
38+
PiStackBold,
39+
PiTrashSimpleBold,
40+
PiUploadSimpleBold,
41+
} from 'react-icons/pi';
4242

4343
import IAICanvasMaskOptions from './IAICanvasMaskOptions';
4444
import IAICanvasRedoButton from './IAICanvasRedoButton';
@@ -217,14 +217,14 @@ const IAICanvasToolbar = () => {
217217
<InvIconButton
218218
aria-label={`${t('unifiedCanvas.move')} (V)`}
219219
tooltip={`${t('unifiedCanvas.move')} (V)`}
220-
icon={<FaArrowsAlt />}
220+
icon={<PiHandGrabbingBold />}
221221
isChecked={tool === 'move' || isStaging}
222222
onClick={handleSelectMoveTool}
223223
/>
224224
<InvIconButton
225225
aria-label={`${t('unifiedCanvas.resetView')} (R)`}
226226
tooltip={`${t('unifiedCanvas.resetView')} (R)`}
227-
icon={<FaCrosshairs />}
227+
icon={<PiCrosshairSimpleBold />}
228228
onClick={handleClickResetCanvasView}
229229
/>
230230
</InvButtonGroup>
@@ -233,30 +233,30 @@ const IAICanvasToolbar = () => {
233233
<InvIconButton
234234
aria-label={`${t('unifiedCanvas.mergeVisible')} (Shift+M)`}
235235
tooltip={`${t('unifiedCanvas.mergeVisible')} (Shift+M)`}
236-
icon={<FaLayerGroup />}
236+
icon={<PiStackBold />}
237237
onClick={handleMergeVisible}
238238
isDisabled={isStaging}
239239
/>
240240
<InvIconButton
241241
aria-label={`${t('unifiedCanvas.saveToGallery')} (Shift+S)`}
242242
tooltip={`${t('unifiedCanvas.saveToGallery')} (Shift+S)`}
243-
icon={<FaSave />}
243+
icon={<PiFloppyDiskBold />}
244244
onClick={handleSaveToGallery}
245245
isDisabled={isStaging}
246246
/>
247247
{isClipboardAPIAvailable && (
248248
<InvIconButton
249249
aria-label={`${t('unifiedCanvas.copyToClipboard')} (Cmd/Ctrl+C)`}
250250
tooltip={`${t('unifiedCanvas.copyToClipboard')} (Cmd/Ctrl+C)`}
251-
icon={<FaCopy />}
251+
icon={<PiCopyBold />}
252252
onClick={handleCopyImageToClipboard}
253253
isDisabled={isStaging}
254254
/>
255255
)}
256256
<InvIconButton
257257
aria-label={`${t('unifiedCanvas.downloadAsImage')} (Shift+D)`}
258258
tooltip={`${t('unifiedCanvas.downloadAsImage')} (Shift+D)`}
259-
icon={<FaDownload />}
259+
icon={<PiDownloadSimpleBold />}
260260
onClick={handleDownloadAsImage}
261261
isDisabled={isStaging}
262262
/>
@@ -270,15 +270,15 @@ const IAICanvasToolbar = () => {
270270
<InvIconButton
271271
aria-label={`${t('common.upload')}`}
272272
tooltip={`${t('common.upload')}`}
273-
icon={<FaUpload />}
273+
icon={<PiUploadSimpleBold />}
274274
isDisabled={isStaging}
275275
{...getUploadButtonProps()}
276276
/>
277277
<input {...getUploadInputProps()} />
278278
<InvIconButton
279279
aria-label={`${t('unifiedCanvas.clearCanvas')}`}
280280
tooltip={`${t('unifiedCanvas.clearCanvas')}`}
281-
icon={<FaTrash />}
281+
icon={<PiTrashSimpleBold />}
282282
onClick={handleResetCanvas}
283283
colorScheme="error"
284284
isDisabled={isStaging}

‎invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
55
import { memo, useCallback } from 'react';
66
import { useHotkeys } from 'react-hotkeys-hook';
77
import { useTranslation } from 'react-i18next';
8-
import { FaUndo } from 'react-icons/fa';
8+
import { PiArrowCounterClockwiseBold } from 'react-icons/pi';
99

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

0 commit comments

Comments
 (0)