Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: 💄 update lots of icons

Browse Source
This commit is contained in:
Josh Corbett 2024-01-17 21:08:38 -07:00 committed by psychedelicious
parent aa25ea62a5
commit 2967a78c5a
30 changed files with 81 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx
View File

@ -4,8 +4,7 @@ import { InvText } from 'common/components/InvText/wrapper';
import newGithubIssueUrl from 'new-github-issue-url'; import newGithubIssueUrl from 'new-github-issue-url';
import { memo, useCallback, useMemo } from 'react'; import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaCopy, FaExternalLinkAlt } from 'react-icons/fa'; import { PiArrowCounterClockwiseBold,PiArrowSquareOutBold, PiCopyBold } from 'react-icons/pi'
import { FaArrowRotateLeft } from 'react-icons/fa6';
import { serializeError } from 'serialize-error'; import { serializeError } from 'serialize-error';
type Props = { type Props = {
@ -68,16 +67,16 @@ const AppErrorBoundaryFallback = ({ error, resetErrorBoundary }: Props) => {
</Flex> </Flex>
<Flex gap={4}> <Flex gap={4}>
<InvButton <InvButton
leftIcon={<FaArrowRotateLeft />} leftIcon={<PiArrowCounterClockwiseBold />}
onClick={resetErrorBoundary} onClick={resetErrorBoundary}
> >
{t('accessibility.resetUI')} {t('accessibility.resetUI')}
</InvButton> </InvButton>
<InvButton leftIcon={<FaCopy />} onClick={handleCopy}> <InvButton leftIcon={<PiCopyBold />} onClick={handleCopy}>
{t('common.copyError')} {t('common.copyError')}
</InvButton> </InvButton>
<Link href={url} isExternal> <Link href={url} isExternal>
<InvButton leftIcon={<FaExternalLinkAlt />}> <InvButton leftIcon={<PiArrowSquareOutBold />}>
{t('accessibility.createIssue')} {t('accessibility.createIssue')}
</InvButton> </InvButton>
</Link> </Link>

6
invokeai/frontend/web/src/common/components/IAIDndImage.tsx
View File

@ -22,16 +22,16 @@ import type {
SyntheticEvent, SyntheticEvent,
} from 'react'; } from 'react';
import { memo, useCallback, useMemo, useState } from 'react'; import { memo, useCallback, useMemo, useState } from 'react';
import { FaImage, FaUpload } from 'react-icons/fa'; import { PiImageBold, PiUploadSimpleBold } from 'react-icons/pi'
import type { ImageDTO, PostUploadAction } from 'services/api/types'; import type { ImageDTO, PostUploadAction } from 'services/api/types';
import IAIDraggable from './IAIDraggable'; import IAIDraggable from './IAIDraggable';
import IAIDroppable from './IAIDroppable'; import IAIDroppable from './IAIDroppable';
import SelectionOverlay from './SelectionOverlay'; import SelectionOverlay from './SelectionOverlay';
const defaultUploadElement = <Icon as={FaUpload} boxSize={16} />; const defaultUploadElement = <Icon as={PiUploadSimpleBold} boxSize={16} />;
const defaultNoContentFallback = <IAINoContentFallback icon={FaImage} />; const defaultNoContentFallback = <IAINoContentFallback icon={PiImageBold} />;
type IAIDndImageProps = FlexProps & { type IAIDndImageProps = FlexProps & {
imageDTO: ImageDTO | undefined; imageDTO: ImageDTO | undefined;

4
invokeai/frontend/web/src/common/components/IAIImageFallback.tsx
View File

@ -1,7 +1,7 @@
import type { As, FlexProps, StyleProps } from '@chakra-ui/react'; import type { As, FlexProps, StyleProps } from '@chakra-ui/react';
import { Flex, Icon, Skeleton, Spinner } from '@chakra-ui/react'; import { Flex, Icon, Skeleton, Spinner } from '@chakra-ui/react';
import { memo, useMemo } from 'react'; import { memo, useMemo } from 'react';
import { FaImage } from 'react-icons/fa'; import { PiImageBold } from 'react-icons/pi'
import type { ImageDTO } from 'services/api/types'; import type { ImageDTO } from 'services/api/types';
import { InvText } from './InvText/wrapper'; import { InvText } from './InvText/wrapper';
@ -43,7 +43,7 @@ type IAINoImageFallbackProps = FlexProps & {
}; };
export const IAINoContentFallback = memo((props: IAINoImageFallbackProps) => { export const IAINoContentFallback = memo((props: IAINoImageFallbackProps) => {
const { icon = FaImage, boxSize = 16, sx, ...rest } = props; const { icon = PiImageBold, boxSize = 16, sx, ...rest } = props;
const styles = useMemo( const styles = useMemo(
() => ({ () => ({

4
invokeai/frontend/web/src/common/components/IAIInformationalPopover/IAIInformationalPopover.tsx
View File

@ -14,7 +14,7 @@ import { merge, omit } from 'lodash-es';
import type { ReactElement } from 'react'; import type { ReactElement } from 'react';
import { memo, useCallback, useMemo } from 'react'; import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaExternalLinkAlt } from 'react-icons/fa'; import { PiArrowSquareOutBold } from 'react-icons/pi';
import type { Feature, PopoverData } from './constants'; import type { Feature, PopoverData } from './constants';
import { OPEN_DELAY, POPOVER_DATA, POPPER_MODIFIERS } from './constants'; import { OPEN_DELAY, POPOVER_DATA, POPPER_MODIFIERS } from './constants';
@ -132,7 +132,7 @@ const PopoverContent = ({ data, feature }: PopoverContentProps) => {
<InvButton <InvButton
pt={1} pt={1}
onClick={handleClick} onClick={handleClick}
leftIcon={<FaExternalLinkAlt />} leftIcon={<PiArrowSquareOutBold />}
alignSelf="flex-end" alignSelf="flex-end"
variant="link" variant="link"
> >

8
invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx
View File

@ -25,7 +25,7 @@ import {
import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { memo, useCallback, useEffect, useMemo, useState } from 'react'; import { memo, useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaRulerVertical, FaSave, FaUndo } from 'react-icons/fa'; import { PiArrowCounterClockwiseBold,PiFloppyDiskBold, PiRulerBold } from 'react-icons/pi'
import { import {
useAddImageToBoardMutation, useAddImageToBoardMutation,
useChangeImageIsIntermediateMutation, useChangeImageIsIntermediateMutation,
@ -210,18 +210,18 @@ const ControlAdapterImagePreview = ({ isSmall, id }: Props) => {
<> <>
<IAIDndImageIcon <IAIDndImageIcon
onClick={handleResetControlImage} onClick={handleResetControlImage}
icon={controlImage ? <FaUndo /> : undefined} icon={controlImage ? <PiArrowCounterClockwiseBold size={16} /> : undefined}
tooltip={t('controlnet.resetControlImage')} tooltip={t('controlnet.resetControlImage')}
/> />
<IAIDndImageIcon <IAIDndImageIcon
onClick={handleSaveControlImage} onClick={handleSaveControlImage}
icon={controlImage ? <FaSave size={16} /> : undefined} icon={controlImage ? <PiFloppyDiskBold size={16} /> : undefined}
tooltip={t('controlnet.saveControlImage')} tooltip={t('controlnet.saveControlImage')}
styleOverrides={saveControlImageStyleOverrides} styleOverrides={saveControlImageStyleOverrides}
/> />
<IAIDndImageIcon <IAIDndImageIcon
onClick={handleSetControlImageToDimensions} onClick={handleSetControlImageToDimensions}
icon={controlImage ? <FaRulerVertical size={16} /> : undefined} icon={controlImage ? <PiRulerBold size={16} /> : undefined}
tooltip={t('controlnet.setControlImageDimensions')} tooltip={t('controlnet.setControlImageDimensions')}
styleOverrides={setControlImageDimensionsStyleOverrides} styleOverrides={setControlImageDimensionsStyleOverrides}
/> />

4
invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsPreview.tsx
View File

@ -9,7 +9,7 @@ import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableCon
import { selectDynamicPromptsSlice } from 'features/dynamicPrompts/store/dynamicPromptsSlice'; import { selectDynamicPromptsSlice } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
import { memo, useMemo } from 'react'; import { memo, useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaCircleExclamation } from 'react-icons/fa6'; import { PiWarningCircleBold } from 'react-icons/pi'
const selectPrompts = createMemoizedSelector( const selectPrompts = createMemoizedSelector(
selectDynamicPromptsSlice, selectDynamicPromptsSlice,
@ -47,7 +47,7 @@ const ParamDynamicPromptsPreview = () => {
p={8} p={8}
> >
<IAINoContentFallback <IAINoContentFallback
icon={FaCircleExclamation} icon={PiWarningCircleBold}
label="Problem generating prompts" label="Problem generating prompts"
/> />
</Flex> </Flex>

4
invokeai/frontend/web/src/features/embedding/AddEmbeddingButton.tsx
View File

@ -2,7 +2,7 @@ import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
import { InvTooltip } from 'common/components/InvTooltip/InvTooltip'; import { InvTooltip } from 'common/components/InvTooltip/InvTooltip';
import { memo } from 'react'; import { memo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaCode } from 'react-icons/fa'; import { PiCodeBold } from 'react-icons/pi'
type Props = { type Props = {
isOpen: boolean; isOpen: boolean;
@ -18,7 +18,7 @@ export const AddEmbeddingButton = memo((props: Props) => {
variant="promptOverlay" variant="promptOverlay"
isDisabled={isOpen} isDisabled={isOpen}
aria-label={t('embedding.addEmbedding')} aria-label={t('embedding.addEmbedding')}
icon={<FaCode />} icon={<PiCodeBold />}
onClick={onOpen} onClick={onOpen}
/> />
</InvTooltip> </InvTooltip>

6
invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx
View File

@ -14,7 +14,7 @@ import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { addToast } from 'features/system/store/systemSlice'; import { addToast } from 'features/system/store/systemSlice';
import { memo, useCallback, useMemo } from 'react'; import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaDownload, FaPlus } from 'react-icons/fa'; import { PiDownloadBold, PiPlusBold } from 'react-icons/pi'
import { useBulkDownloadImagesMutation } from 'services/api/endpoints/images'; import { useBulkDownloadImagesMutation } from 'services/api/endpoints/images';
import { useBoardName } from 'services/api/hooks/useBoardName'; import { useBoardName } from 'services/api/hooks/useBoardName';
import type { BoardDTO } from 'services/api/types'; import type { BoardDTO } from 'services/api/types';
@ -94,7 +94,7 @@ const BoardContextMenu = ({
<InvMenuList visibility="visible"> <InvMenuList visibility="visible">
<InvMenuGroup title={boardName}> <InvMenuGroup title={boardName}>
<InvMenuItem <InvMenuItem
icon={<FaPlus />} icon={<PiPlusBold />}
isDisabled={isSelectedForAutoAdd || autoAssignBoardOnClick} isDisabled={isSelectedForAutoAdd || autoAssignBoardOnClick}
onClick={handleSetAutoAdd} onClick={handleSetAutoAdd}
> >
@ -102,7 +102,7 @@ const BoardContextMenu = ({
</InvMenuItem> </InvMenuItem>
{isBulkDownloadEnabled && ( {isBulkDownloadEnabled && (
<InvMenuItem <InvMenuItem
icon={<FaDownload />} icon={<PiDownloadBold />}
onClickCapture={handleBulkDownload} onClickCapture={handleBulkDownload}
> >
{t('boards.downloadBoard')} {t('boards.downloadBoard')}

6
invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
View File

@ -25,7 +25,7 @@ import {
} from 'features/gallery/store/gallerySlice'; } from 'features/gallery/store/gallerySlice';
import { memo, useCallback, useMemo, useState } from 'react'; import { memo, useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaUser } from 'react-icons/fa'; import { PiImagesSquare } from 'react-icons/pi';
import { import {
useGetBoardAssetsTotalQuery, useGetBoardAssetsTotalQuery,
useGetBoardImagesTotalQuery, useGetBoardImagesTotalQuery,
@ -195,8 +195,8 @@ const GalleryBoard = ({
alignItems="center" alignItems="center"
> >
<Icon <Icon
boxSize={12} boxSize={14}
as={FaUser} as={PiImagesSquare}
mt={-6} mt={-6}
opacity={0.7} opacity={0.7}
color="base.500" color="base.500"

4
invokeai/frontend/web/src/features/gallery/components/Boards/GalleryBoardContextMenuItems.tsx
View File

@ -1,7 +1,7 @@
import { InvMenuItem } from 'common/components/InvMenu/InvMenuItem'; import { InvMenuItem } from 'common/components/InvMenu/InvMenuItem';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaTrash } from 'react-icons/fa'; import { PiTrashSimpleBold } from 'react-icons/pi'
import type { BoardDTO } from 'services/api/types'; import type { BoardDTO } from 'services/api/types';
type Props = { type Props = {
@ -20,7 +20,7 @@ const GalleryBoardContextMenuItems = ({ board, setBoardToDelete }: Props) => {
return ( return (
<> <>
<InvMenuItem color="error.300" icon={<FaTrash />} onClick={handleDelete}> <InvMenuItem color="error.300" icon={<PiTrashSimpleBold />} onClick={handleDelete}>
{t('boards.deleteBoard')} {t('boards.deleteBoard')}
</InvMenuItem> </InvMenuItem>
</> </>

4
invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx
View File

@ -17,7 +17,7 @@ import { AnimatePresence, motion } from 'framer-motion';
import type { CSSProperties } from 'react'; import type { CSSProperties } from 'react';
import { memo, useCallback, useMemo, useRef, useState } from 'react'; import { memo, useCallback, useMemo, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaImage } from 'react-icons/fa'; import { PiImageBold } from 'react-icons/pi';
import { useGetImageDTOQuery } from 'services/api/endpoints/images'; import { useGetImageDTOQuery } from 'services/api/endpoints/images';
const selectLastSelectedImageName = createSelector( const selectLastSelectedImageName = createSelector(
@ -99,7 +99,7 @@ const CurrentImagePreview = () => {
dropLabel={t('gallery.setCurrentImage')} dropLabel={t('gallery.setCurrentImage')}
noContentFallback={ noContentFallback={
<IAINoContentFallback <IAINoContentFallback
icon={FaImage} icon={PiImageBold}
label={t('gallery.noImageSelected')} label={t('gallery.noImageSelected')}
/> />
} }

8
invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx
View File

@ -11,7 +11,7 @@ import { useOverlayScrollbars } from 'overlayscrollbars-react';
import type { CSSProperties } from 'react'; import type { CSSProperties } from 'react';
import { memo, useCallback, useEffect, useRef, useState } from 'react'; import { memo, useCallback, useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaExclamationCircle, FaImage } from 'react-icons/fa'; import { PiImageBold, PiWarningCircleBold } from 'react-icons/pi'
import type { import type {
GridComponents, GridComponents,
ItemContent, ItemContent,
@ -88,7 +88,7 @@ const GalleryImageGrid = () => {
if (!currentData) { if (!currentData) {
return ( return (
<Flex w="full" h="full" alignItems="center" justifyContent="center"> <Flex w="full" h="full" alignItems="center" justifyContent="center">
<IAINoContentFallback label={t('gallery.loading')} icon={FaImage} /> <IAINoContentFallback label={t('gallery.loading')} icon={PiImageBold} />
</Flex> </Flex>
); );
} }
@ -98,7 +98,7 @@ const GalleryImageGrid = () => {
<Flex w="full" h="full" alignItems="center" justifyContent="center"> <Flex w="full" h="full" alignItems="center" justifyContent="center">
<IAINoContentFallback <IAINoContentFallback
label={t('gallery.noImagesInGallery')} label={t('gallery.noImagesInGallery')}
icon={FaImage} icon={PiImageBold}
/> />
</Flex> </Flex>
); );
@ -138,7 +138,7 @@ const GalleryImageGrid = () => {
<Box w="full" h="full"> <Box w="full" h="full">
<IAINoContentFallback <IAINoContentFallback
label={t('gallery.unableToLoad')} label={t('gallery.unableToLoad')}
icon={FaExclamationCircle} icon={PiWarningCircleBold}
/> />
</Box> </Box>
); );

6
invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx
View File

@ -7,7 +7,7 @@ import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import type { CSSProperties } from 'react'; import type { CSSProperties } from 'react';
import { memo, useCallback, useMemo } from 'react'; import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaCopy, FaDownload } from 'react-icons/fa'; import { PiCopyBold, PiDownloadSimpleBold } from 'react-icons/pi';
type Props = { type Props = {
label: string; label: string;
@ -72,7 +72,7 @@ const DataViewer = (props: Props) => {
<InvTooltip label={`${t('gallery.download')} ${label} JSON`}> <InvTooltip label={`${t('gallery.download')} ${label} JSON`}>
<InvIconButton <InvIconButton
aria-label={`${t('gallery.download')} ${label} JSON`} aria-label={`${t('gallery.download')} ${label} JSON`}
icon={<FaDownload />} icon={<PiDownloadSimpleBold size={16} />}
variant="ghost" variant="ghost"
opacity={0.7} opacity={0.7}
onClick={handleDownload} onClick={handleDownload}
@ -83,7 +83,7 @@ const DataViewer = (props: Props) => {
<InvTooltip label={`${t('gallery.copy')} ${label} JSON`}> <InvTooltip label={`${t('gallery.copy')} ${label} JSON`}>
<InvIconButton <InvIconButton
aria-label={`${t('gallery.copy')} ${label} JSON`} aria-label={`${t('gallery.copy')} ${label} JSON`}
icon={<FaCopy />} icon={<PiCopyBold size={16} />}
variant="ghost" variant="ghost"
opacity={0.7} opacity={0.7}
onClick={handleCopy} onClick={handleCopy}

4
invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx
View File

@ -5,8 +5,8 @@ import { InvText } from 'common/components/InvText/wrapper';
import { InvTooltip } from 'common/components/InvTooltip/InvTooltip'; import { InvTooltip } from 'common/components/InvTooltip/InvTooltip';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaCopy } from 'react-icons/fa';
import { IoArrowUndoCircleOutline } from 'react-icons/io5'; import { IoArrowUndoCircleOutline } from 'react-icons/io5';
import { PiCopyBold } from 'react-icons/pi';
type MetadataItemProps = { type MetadataItemProps = {
isLink?: boolean; isLink?: boolean;
@ -57,7 +57,7 @@ const ImageMetadataItem = ({
<InvTooltip label={`Copy ${label}`}> <InvTooltip label={`Copy ${label}`}>
<InvIconButton <InvIconButton
aria-label={`Copy ${label}`} aria-label={`Copy ${label}`}
icon={<FaCopy />} icon={<PiCopyBold />}
size="xs" size="xs"
variant="ghost" variant="ghost"
fontSize={14} fontSize={14}

8
invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx
View File

@ -5,7 +5,7 @@ import { useGalleryImages } from 'features/gallery/hooks/useGalleryImages';
import { useGalleryNavigation } from 'features/gallery/hooks/useGalleryNavigation'; import { useGalleryNavigation } from 'features/gallery/hooks/useGalleryNavigation';
import { memo } from 'react'; import { memo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaAngleDoubleRight, FaAngleLeft, FaAngleRight } from 'react-icons/fa'; import { PiCaretDoubleRightBold,PiCaretLeftBold, PiCaretRightBold } from 'react-icons/pi'
const nextPrevButtonStyles: ChakraProps['sx'] = { const nextPrevButtonStyles: ChakraProps['sx'] = {
color: 'base.100', color: 'base.100',
@ -35,7 +35,7 @@ const NextPrevImageButtons = () => {
{!isOnFirstImage && ( {!isOnFirstImage && (
<InvIconButton <InvIconButton
aria-label={t('accessibility.previousImage')} aria-label={t('accessibility.previousImage')}
icon={<FaAngleLeft size={64} />} icon={<PiCaretLeftBold size={64} />}
variant="unstyled" variant="unstyled"
onClick={handleLeftImage} onClick={handleLeftImage}
boxSize={16} boxSize={16}
@ -52,7 +52,7 @@ const NextPrevImageButtons = () => {
{!isOnLastImage && ( {!isOnLastImage && (
<InvIconButton <InvIconButton
aria-label={t('accessibility.nextImage')} aria-label={t('accessibility.nextImage')}
icon={<FaAngleRight size={64} />} icon={<PiCaretRightBold size={64} />}
variant="unstyled" variant="unstyled"
onClick={handleRightImage} onClick={handleRightImage}
boxSize={16} boxSize={16}
@ -62,7 +62,7 @@ const NextPrevImageButtons = () => {
{isOnLastImage && areMoreImagesAvailable && !isFetching && ( {isOnLastImage && areMoreImagesAvailable && !isFetching && (
<InvIconButton <InvIconButton
aria-label={t('accessibility.loadMore')} aria-label={t('accessibility.loadMore')}
icon={<FaAngleDoubleRight size={64} />} icon={<PiCaretDoubleRightBold size={64} />}
variant="unstyled" variant="unstyled"
onClick={handleLoadMoreImages} onClick={handleLoadMoreImages}
boxSize={16} boxSize={16}

4
invokeai/frontend/web/src/features/lora/components/LoRACard.tsx
View File

@ -11,7 +11,7 @@ import { InvSlider } from 'common/components/InvSlider/InvSlider';
import type { LoRA } from 'features/lora/store/loraSlice'; import type { LoRA } from 'features/lora/store/loraSlice';
import { loraRemoved, loraWeightChanged } from 'features/lora/store/loraSlice'; import { loraRemoved, loraWeightChanged } from 'features/lora/store/loraSlice';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
import { FaTrashCan } from 'react-icons/fa6'; import { PiTrashSimpleBold } from 'react-icons/pi';
type LoRACardProps = { type LoRACardProps = {
lora: LoRA; lora: LoRA;
@ -43,7 +43,7 @@ export const LoRACard = memo((props: LoRACardProps) => {
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={handleRemoveLora} onClick={handleRemoveLora}
icon={<FaTrashCan />} icon={<PiTrashSimpleBold />}
/> />
</InvCardHeader> </InvCardHeader>
<InvCardBody> <InvCardBody>

4
invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx
View File

@ -11,7 +11,7 @@ import { InvText } from 'common/components/InvText/wrapper';
import { setAdvancedAddScanModel } from 'features/modelManager/store/modelManagerSlice'; import { setAdvancedAddScanModel } from 'features/modelManager/store/modelManagerSlice';
import { memo, useCallback, useEffect, useMemo, useState } from 'react'; import { memo, useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaTimes } from 'react-icons/fa'; import { PiXBold } from 'react-icons/pi';
import AdvancedAddCheckpoint from './AdvancedAddCheckpoint'; import AdvancedAddCheckpoint from './AdvancedAddCheckpoint';
import AdvancedAddDiffusers from './AdvancedAddDiffusers'; import AdvancedAddDiffusers from './AdvancedAddDiffusers';
@ -94,7 +94,7 @@ const ScanAdvancedAddModels = () => {
: 'Add Diffusers Model'} : 'Add Diffusers Model'}
</InvText> </InvText>
<InvIconButton <InvIconButton
icon={<FaTimes />} icon={<PiXBold />}
aria-label={t('modelManager.closeAdvanced')} aria-label={t('modelManager.closeAdvanced')}
onClick={handleClickSetAdvanced} onClick={handleClickSetAdvanced}
size="sm" size="sm"

8
invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx
View File

@ -11,7 +11,7 @@ import {
import type { CSSProperties } from 'react'; import type { CSSProperties } from 'react';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaSearch, FaSync, FaTrash } from 'react-icons/fa'; import { PiArrowsCounterClockwiseBold, PiMagnifyingGlassBold, PiTrashSimpleBold } from 'react-icons/pi';
import { useGetModelsInFolderQuery } from 'services/api/endpoints/models'; import { useGetModelsInFolderQuery } from 'services/api/endpoints/models';
type SearchFolderForm = { type SearchFolderForm = {
@ -93,7 +93,7 @@ function SearchFolderForm() {
<InvIconButton <InvIconButton
aria-label={t('modelManager.findModels')} aria-label={t('modelManager.findModels')}
tooltip={t('modelManager.findModels')} tooltip={t('modelManager.findModels')}
icon={<FaSearch />} icon={<PiMagnifyingGlassBold />}
fontSize={18} fontSize={18}
size="sm" size="sm"
type="submit" type="submit"
@ -102,7 +102,7 @@ function SearchFolderForm() {
<InvIconButton <InvIconButton
aria-label={t('modelManager.scanAgain')} aria-label={t('modelManager.scanAgain')}
tooltip={t('modelManager.scanAgain')} tooltip={t('modelManager.scanAgain')}
icon={<FaSync />} icon={<PiArrowsCounterClockwiseBold />}
onClick={scanAgainHandler} onClick={scanAgainHandler}
fontSize={18} fontSize={18}
size="sm" size="sm"
@ -112,7 +112,7 @@ function SearchFolderForm() {
<InvIconButton <InvIconButton
aria-label={t('modelManager.clearCheckpointFolder')} aria-label={t('modelManager.clearCheckpointFolder')}
tooltip={t('modelManager.clearCheckpointFolder')} tooltip={t('modelManager.clearCheckpointFolder')}
icon={<FaTrash />} icon={<PiTrashSimpleBold />}
size="sm" size="sm"
onClick={handleClickClearCheckpointFolder} onClick={handleClickClearCheckpointFolder}
isDisabled={!searchFolder} isDisabled={!searchFolder}

7
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon.tsx
View File

@ -4,8 +4,7 @@ import { useNodeClassification } from 'features/nodes/hooks/useNodeClassificatio
import type { Classification } from 'features/nodes/types/common'; import type { Classification } from 'features/nodes/types/common';
import { memo } from 'react'; import { memo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaFlask } from 'react-icons/fa'; import { PiFlaskBold, PiHammerBold } from 'react-icons/pi'
import { FaHammer } from 'react-icons/fa6';
interface Props { interface Props {
nodeId: string; nodeId: string;
@ -56,11 +55,11 @@ ClassificationTooltipContent.displayName = 'ClassificationTooltipContent';
const getIcon = (classification: Classification) => { const getIcon = (classification: Classification) => {
if (classification === 'beta') { if (classification === 'beta') {
return FaHammer; return PiHammerBold;
} }
if (classification === 'prototype') { if (classification === 'prototype') {
return FaFlask; return PiFlaskBold;
} }
return undefined; return undefined;

4
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx
View File

@ -8,7 +8,7 @@ import { useNodeTemplate } from 'features/nodes/hooks/useNodeTemplate';
import { isInvocationNodeData } from 'features/nodes/types/invocation'; import { isInvocationNodeData } from 'features/nodes/types/invocation';
import { memo, useMemo } from 'react'; import { memo, useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaInfoCircle } from 'react-icons/fa'; import { PiInfoBold } from 'react-icons/pi'
interface Props { interface Props {
nodeId: string; nodeId: string;
@ -24,7 +24,7 @@ const InvocationNodeInfoIcon = ({ nodeId }: Props) => {
shouldWrapChildren shouldWrapChildren
> >
<Icon <Icon
as={FaInfoCircle} as={PiInfoBold}
display="block" display="block"
boxSize={4} boxSize={4}
w={8} w={8}

8
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx
View File

@ -10,7 +10,7 @@ import type { NodeExecutionState } from 'features/nodes/types/invocation';
import { zNodeStatus } from 'features/nodes/types/invocation'; import { zNodeStatus } from 'features/nodes/types/invocation';
import { memo, useMemo } from 'react'; import { memo, useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaCheck, FaEllipsisH, FaExclamation } from 'react-icons/fa'; import { PiCheckBold, PiDotsThreeOutlineFill, PiWarningBold } from 'react-icons/pi'
type Props = { type Props = {
nodeId: string; nodeId: string;
@ -122,7 +122,7 @@ type StatusIconProps = {
const StatusIcon = memo((props: StatusIconProps) => { const StatusIcon = memo((props: StatusIconProps) => {
const { progress, status } = props.nodeExecutionState; const { progress, status } = props.nodeExecutionState;
if (status === zNodeStatus.enum.PENDING) { if (status === zNodeStatus.enum.PENDING) {
return <Icon as={FaEllipsisH} boxSize={iconBoxSize} color="base.300" />; return <Icon as={PiDotsThreeOutlineFill} boxSize={iconBoxSize} color="base.300" />;
} }
if (status === zNodeStatus.enum.IN_PROGRESS) { if (status === zNodeStatus.enum.IN_PROGRESS) {
return progress === null ? ( return progress === null ? (
@ -144,10 +144,10 @@ const StatusIcon = memo((props: StatusIconProps) => {
); );
} }
if (status === zNodeStatus.enum.COMPLETED) { if (status === zNodeStatus.enum.COMPLETED) {
return <Icon as={FaCheck} boxSize={iconBoxSize} color="ok.300" />; return <Icon as={PiCheckBold} boxSize={iconBoxSize} color="ok.300" />;
} }
if (status === zNodeStatus.enum.FAILED) { if (status === zNodeStatus.enum.FAILED) {
return <Icon as={FaExclamation} boxSize={iconBoxSize} color="error.300" />; return <Icon as={PiWarningBold} boxSize={iconBoxSize} color="error.300" />;
} }
return null; return null;
}); });

6
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldContextMenu.tsx
View File

@ -16,7 +16,7 @@ import {
import type { ReactNode } from 'react'; import type { ReactNode } from 'react';
import { memo, useCallback, useMemo } from 'react'; import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaMinus, FaPlus } from 'react-icons/fa'; import { PiMinusBold, PiPlusBold } from 'react-icons/pi';
type Props = { type Props = {
nodeId: string; nodeId: string;
@ -65,7 +65,7 @@ const FieldContextMenu = ({ nodeId, fieldName, kind, children }: Props) => {
menuItems.push( menuItems.push(
<InvMenuItem <InvMenuItem
key={`${nodeId}.${fieldName}.expose-field`} key={`${nodeId}.${fieldName}.expose-field`}
icon={<FaPlus />} icon={<PiPlusBold />}
onClick={handleExposeField} onClick={handleExposeField}
> >
{t('nodes.addLinearView')} {t('nodes.addLinearView')}
@ -76,7 +76,7 @@ const FieldContextMenu = ({ nodeId, fieldName, kind, children }: Props) => {
menuItems.push( menuItems.push(
<InvMenuItem <InvMenuItem
key={`${nodeId}.${fieldName}.unexpose-field`} key={`${nodeId}.${fieldName}.unexpose-field`}
icon={<FaMinus />} icon={<PiMinusBold />}
onClick={handleUnexposeField} onClick={handleUnexposeField}
> >
{t('nodes.removeLinearView')} {t('nodes.removeLinearView')}

6
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx
View File

@ -8,7 +8,7 @@ import { workflowExposedFieldRemoved } from 'features/nodes/store/workflowSlice'
import { HANDLE_TOOLTIP_OPEN_DELAY } from 'features/nodes/types/constants'; import { HANDLE_TOOLTIP_OPEN_DELAY } from 'features/nodes/types/constants';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaInfoCircle, FaTrash } from 'react-icons/fa'; import { PiInfoBold, PiTrashSimpleBold } from 'react-icons/pi';
import EditableFieldTitle from './EditableFieldTitle'; import EditableFieldTitle from './EditableFieldTitle';
import FieldTooltipContent from './FieldTooltipContent'; import FieldTooltipContent from './FieldTooltipContent';
@ -58,7 +58,7 @@ const LinearViewField = ({ nodeId, fieldName }: Props) => {
placement="top" placement="top"
> >
<Flex h="full" alignItems="center"> <Flex h="full" alignItems="center">
<Icon fontSize="sm" color="base.300" as={FaInfoCircle} /> <Icon fontSize="sm" color="base.300" as={PiInfoBold} />
</Flex> </Flex>
</InvTooltip> </InvTooltip>
<InvIconButton <InvIconButton
@ -67,7 +67,7 @@ const LinearViewField = ({ nodeId, fieldName }: Props) => {
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={handleRemoveField} onClick={handleRemoveField}
icon={<FaTrash />} icon={<PiTrashSimpleBold />}
/> />
</Flex> </Flex>
<InputFieldRenderer nodeId={nodeId} fieldName={fieldName} /> <InputFieldRenderer nodeId={nodeId} fieldName={fieldName} />

4
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldInputComponent.tsx
View File

@ -15,7 +15,7 @@ import type {
} from 'features/nodes/types/field'; } from 'features/nodes/types/field';
import { memo, useCallback, useEffect, useMemo } from 'react'; import { memo, useCallback, useEffect, useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaUndo } from 'react-icons/fa'; import { PiArrowCounterClockwiseBold } from 'react-icons/pi';
import { useGetImageDTOQuery } from 'services/api/endpoints/images'; import { useGetImageDTOQuery } from 'services/api/endpoints/images';
import type { PostUploadAction } from 'services/api/types'; import type { PostUploadAction } from 'services/api/types';
@ -95,7 +95,7 @@ const ImageFieldInputComponent = (
> >
<IAIDndImageIcon <IAIDndImageIcon
onClick={handleReset} onClick={handleReset}
icon={imageDTO ? <FaUndo /> : undefined} icon={imageDTO ? <PiArrowCounterClockwiseBold /> : undefined}
tooltip="Reset Image" tooltip="Reset Image"
/> />
</IAIDndImage> </IAIDndImage>

4
invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/UpdateNodesButton.tsx
View File

@ -4,7 +4,7 @@ import { useGetNodesNeedUpdate } from 'features/nodes/hooks/useGetNodesNeedUpdat
import { updateAllNodesRequested } from 'features/nodes/store/actions'; import { updateAllNodesRequested } from 'features/nodes/store/actions';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaExclamationTriangle } from 'react-icons/fa'; import { PiWarningBold } from 'react-icons/pi';
const UpdateNodesButton = () => { const UpdateNodesButton = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
@ -20,7 +20,7 @@ const UpdateNodesButton = () => {
return ( return (
<InvButton <InvButton
leftIcon={<FaExclamationTriangle />} leftIcon={<PiWarningBold />}
onClick={handleClickUpdateNodes} onClick={handleClickUpdateNodes}
pointerEvents="auto" pointerEvents="auto"
> >

4
invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx
View File

@ -9,7 +9,7 @@ import { getSecondsFromTimestamps } from 'features/queue/util/getSecondsFromTime
import type { MouseEvent } from 'react'; import type { MouseEvent } from 'react';
import { memo, useCallback, useMemo } from 'react'; import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaTimes } from 'react-icons/fa'; import { PiXBold } from 'react-icons/pi';
import type { SessionQueueItemDTO } from 'services/api/types'; import type { SessionQueueItemDTO } from 'services/api/types';
import { COLUMN_WIDTHS } from './constants'; import { COLUMN_WIDTHS } from './constants';
@ -63,7 +63,7 @@ const QueueItemComponent = ({ index, item, context }: InnerItemProps) => {
[item.status] [item.status]
); );
const icon = useMemo(() => <FaTimes />, []); const icon = useMemo(() => <PiXBold />, []);
return ( return (
<Flex <Flex
flexDir="column" flexDir="column"

6
invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx
View File

@ -10,7 +10,7 @@ import { getSecondsFromTimestamps } from 'features/queue/util/getSecondsFromTime
import type { ReactNode } from 'react'; import type { ReactNode } from 'react';
import { memo, useMemo } from 'react'; import { memo, useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaTimes } from 'react-icons/fa'; import { PiXBold } from 'react-icons/pi';
import { useGetQueueItemQuery } from 'services/api/endpoints/queue'; import { useGetQueueItemQuery } from 'services/api/endpoints/queue';
import type { SessionQueueItemDTO } from 'services/api/types'; import type { SessionQueueItemDTO } from 'services/api/types';
@ -81,7 +81,7 @@ const QueueItemComponent = ({ queueItemDTO }: Props) => {
: true : true
} }
aria-label={t('queue.cancelItem')} aria-label={t('queue.cancelItem')}
leftIcon={<FaTimes />} leftIcon={<PiXBold />}
colorScheme="error" colorScheme="error"
> >
{t('queue.cancelItem')} {t('queue.cancelItem')}
@ -91,7 +91,7 @@ const QueueItemComponent = ({ queueItemDTO }: Props) => {
isLoading={isLoadingCancelBatch} isLoading={isLoadingCancelBatch}
isDisabled={isCanceled} isDisabled={isCanceled}
aria-label={t('queue.cancelBatch')} aria-label={t('queue.cancelBatch')}
leftIcon={<FaTimes />} leftIcon={<PiXBold />}
colorScheme="error" colorScheme="error"
> >
{t('queue.cancelBatch')} {t('queue.cancelBatch')}

4
invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLConcatButton.tsx
View File

@ -4,7 +4,7 @@ import { InvTooltip } from 'common/components/InvTooltip/InvTooltip';
import { setShouldConcatSDXLStylePrompt } from 'features/sdxl/store/sdxlSlice'; import { setShouldConcatSDXLStylePrompt } from 'features/sdxl/store/sdxlSlice';
import { memo, useCallback, useMemo } from 'react'; import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaLink, FaUnlink } from 'react-icons/fa'; import { PiLinkSimpleBold,PiLinkSimpleBreakBold } from 'react-icons/pi';
export const SDXLConcatButton = memo(() => { export const SDXLConcatButton = memo(() => {
const shouldConcatSDXLStylePrompt = useAppSelector( const shouldConcatSDXLStylePrompt = useAppSelector(
@ -31,7 +31,7 @@ export const SDXLConcatButton = memo(() => {
<InvIconButton <InvIconButton
aria-label={label} aria-label={label}
onClick={handleShouldConcatPromptChange} onClick={handleShouldConcatPromptChange}
icon={shouldConcatSDXLStylePrompt ? <FaLink /> : <FaUnlink />} icon={shouldConcatSDXLStylePrompt ? <PiLinkSimpleBold size={14} /> : <PiLinkSimpleBreakBold size={14} />}
variant="promptOverlay" variant="promptOverlay"
fontSize={12} fontSize={12}
px={0.5} px={0.5}

4
invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx
View File

@ -3,7 +3,7 @@ import { useAppSelector } from 'app/store/storeHooks';
import { InvTooltip } from 'common/components/InvTooltip/InvTooltip'; import { InvTooltip } from 'common/components/InvTooltip/InvTooltip';
import { memo } from 'react'; import { memo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaExclamationTriangle } from 'react-icons/fa'; import { PiWarningBold } from 'react-icons/pi';
const StatusIndicator = () => { const StatusIndicator = () => {
const isConnected = useAppSelector((s) => s.system.isConnected); const isConnected = useAppSelector((s) => s.system.isConnected);
@ -17,7 +17,7 @@ const StatusIndicator = () => {
shouldWrapChildren shouldWrapChildren
gutter={10} gutter={10}
> >
<Icon as={FaExclamationTriangle} color="error.300" /> <Icon as={PiWarningBold} color="error.300" />
</InvTooltip> </InvTooltip>
); );
} }

6
invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryPagination.tsx
View File

@ -4,7 +4,7 @@ import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
import type { Dispatch, SetStateAction } from 'react'; import type { Dispatch, SetStateAction } from 'react';
import { memo, useCallback, useMemo } from 'react'; import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaChevronLeft, FaChevronRight } from 'react-icons/fa'; import { PiCaretLeftBold, PiCaretRightBold } from 'react-icons/pi';
import type { paths } from 'services/api/schema'; import type { paths } from 'services/api/schema';
const PAGES_TO_DISPLAY = 7; const PAGES_TO_DISPLAY = 7;
@ -60,7 +60,7 @@ const WorkflowLibraryPagination = ({ page, setPage, data }: Props) => {
onClick={handlePrevPage} onClick={handlePrevPage}
isDisabled={page === 0} isDisabled={page === 0}
aria-label={t('common.prevPage')} aria-label={t('common.prevPage')}
icon={<FaChevronLeft />} icon={<PiCaretLeftBold />}
/> />
{pages.map((p) => ( {pages.map((p) => (
<InvButton <InvButton
@ -79,7 +79,7 @@ const WorkflowLibraryPagination = ({ page, setPage, data }: Props) => {
onClick={handleNextPage} onClick={handleNextPage}
isDisabled={page === data.pages - 1} isDisabled={page === data.pages - 1}
aria-label={t('common.nextPage')} aria-label={t('common.nextPage')}
icon={<FaChevronRight />} icon={<PiCaretRightBold />}
/> />
</InvButtonGroup> </InvButtonGroup>
); );