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

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

@ -22,16 +22,16 @@ import type {
SyntheticEvent,
} 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 IAIDraggable from './IAIDraggable';
import IAIDroppable from './IAIDroppable';
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 & {
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 { Flex, Icon, Skeleton, Spinner } from '@chakra-ui/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 { InvText } from './InvText/wrapper';
@ -43,7 +43,7 @@ type IAINoImageFallbackProps = FlexProps & {
};
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(
() => ({

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 { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { FaExternalLinkAlt } from 'react-icons/fa';
import { PiArrowSquareOutBold } from 'react-icons/pi';
import type { Feature, PopoverData } from './constants';
import { OPEN_DELAY, POPOVER_DATA, POPPER_MODIFIERS } from './constants';
@ -132,7 +132,7 @@ const PopoverContent = ({ data, feature }: PopoverContentProps) => {
<InvButton
pt={1}
onClick={handleClick}
leftIcon={<FaExternalLinkAlt />}
leftIcon={<PiArrowSquareOutBold />}
alignSelf="flex-end"
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 { memo, useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { FaRulerVertical, FaSave, FaUndo } from 'react-icons/fa';
import { PiArrowCounterClockwiseBold,PiFloppyDiskBold, PiRulerBold } from 'react-icons/pi'
import {
useAddImageToBoardMutation,
useChangeImageIsIntermediateMutation,
@ -210,18 +210,18 @@ const ControlAdapterImagePreview = ({ isSmall, id }: Props) => {
<>
<IAIDndImageIcon
onClick={handleResetControlImage}
icon={controlImage ? <FaUndo /> : undefined}
icon={controlImage ? <PiArrowCounterClockwiseBold size={16} /> : undefined}
tooltip={t('controlnet.resetControlImage')}
/>
<IAIDndImageIcon
onClick={handleSaveControlImage}
icon={controlImage ? <FaSave size={16} /> : undefined}
icon={controlImage ? <PiFloppyDiskBold size={16} /> : undefined}
tooltip={t('controlnet.saveControlImage')}
styleOverrides={saveControlImageStyleOverrides}
/>
<IAIDndImageIcon
onClick={handleSetControlImageToDimensions}
icon={controlImage ? <FaRulerVertical size={16} /> : undefined}
icon={controlImage ? <PiRulerBold size={16} /> : undefined}
tooltip={t('controlnet.setControlImageDimensions')}
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 { memo, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { FaCircleExclamation } from 'react-icons/fa6';
import { PiWarningCircleBold } from 'react-icons/pi'
const selectPrompts = createMemoizedSelector(
selectDynamicPromptsSlice,
@ -47,7 +47,7 @@ const ParamDynamicPromptsPreview = () => {
p={8}
>
<IAINoContentFallback
icon={FaCircleExclamation}
icon={PiWarningCircleBold}
label="Problem generating prompts"
/>
</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 { memo } from 'react';
import { useTranslation } from 'react-i18next';
import { FaCode } from 'react-icons/fa';
import { PiCodeBold } from 'react-icons/pi'
type Props = {
isOpen: boolean;
@ -18,7 +18,7 @@ export const AddEmbeddingButton = memo((props: Props) => {
variant="promptOverlay"
isDisabled={isOpen}
aria-label={t('embedding.addEmbedding')}
icon={<FaCode />}
icon={<PiCodeBold />}
onClick={onOpen}
/>
</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 { memo, useCallback, useMemo } from 'react';
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 { useBoardName } from 'services/api/hooks/useBoardName';
import type { BoardDTO } from 'services/api/types';
@ -94,7 +94,7 @@ const BoardContextMenu = ({
<InvMenuList visibility="visible">
<InvMenuGroup title={boardName}>
<InvMenuItem
icon={<FaPlus />}
icon={<PiPlusBold />}
isDisabled={isSelectedForAutoAdd || autoAssignBoardOnClick}
onClick={handleSetAutoAdd}
>
@ -102,7 +102,7 @@ const BoardContextMenu = ({
</InvMenuItem>
{isBulkDownloadEnabled && (
<InvMenuItem
icon={<FaDownload />}
icon={<PiDownloadBold />}
onClickCapture={handleBulkDownload}
>
{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';
import { memo, useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { FaUser } from 'react-icons/fa';
import { PiImagesSquare } from 'react-icons/pi';
import {
useGetBoardAssetsTotalQuery,
useGetBoardImagesTotalQuery,
@ -195,8 +195,8 @@ const GalleryBoard = ({
alignItems="center"
>
<Icon
boxSize={12}
as={FaUser}
boxSize={14}
as={PiImagesSquare}
mt={-6}
opacity={0.7}
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 { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { FaTrash } from 'react-icons/fa';
import { PiTrashSimpleBold } from 'react-icons/pi'
import type { BoardDTO } from 'services/api/types';
type Props = {
@ -20,7 +20,7 @@ const GalleryBoardContextMenuItems = ({ board, setBoardToDelete }: Props) => {
return (
<>
<InvMenuItem color="error.300" icon={<FaTrash />} onClick={handleDelete}>
<InvMenuItem color="error.300" icon={<PiTrashSimpleBold />} onClick={handleDelete}>
{t('boards.deleteBoard')}
</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 { memo, useCallback, useMemo, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { FaImage } from 'react-icons/fa';
import { PiImageBold } from 'react-icons/pi';
import { useGetImageDTOQuery } from 'services/api/endpoints/images';
const selectLastSelectedImageName = createSelector(
@ -99,7 +99,7 @@ const CurrentImagePreview = () => {
dropLabel={t('gallery.setCurrentImage')}
noContentFallback={
<IAINoContentFallback
icon={FaImage}
icon={PiImageBold}
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 { memo, useCallback, useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { FaExclamationCircle, FaImage } from 'react-icons/fa';
import { PiImageBold, PiWarningCircleBold } from 'react-icons/pi'
import type {
GridComponents,
ItemContent,
@ -88,7 +88,7 @@ const GalleryImageGrid = () => {
if (!currentData) {
return (
<Flex w="full" h="full" alignItems="center" justifyContent="center">
<IAINoContentFallback label={t('gallery.loading')} icon={FaImage} />
<IAINoContentFallback label={t('gallery.loading')} icon={PiImageBold} />
</Flex>
);
}
@ -98,7 +98,7 @@ const GalleryImageGrid = () => {
<Flex w="full" h="full" alignItems="center" justifyContent="center">
<IAINoContentFallback
label={t('gallery.noImagesInGallery')}
icon={FaImage}
icon={PiImageBold}
/>
</Flex>
);
@ -138,7 +138,7 @@ const GalleryImageGrid = () => {
<Box w="full" h="full">
<IAINoContentFallback
label={t('gallery.unableToLoad')}
icon={FaExclamationCircle}
icon={PiWarningCircleBold}
/>
</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 { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { FaCopy, FaDownload } from 'react-icons/fa';
import { PiCopyBold, PiDownloadSimpleBold } from 'react-icons/pi';
type Props = {
label: string;
@ -72,7 +72,7 @@ const DataViewer = (props: Props) => {
<InvTooltip label={`${t('gallery.download')} ${label} JSON`}>
<InvIconButton
aria-label={`${t('gallery.download')} ${label} JSON`}
icon={<FaDownload />}
icon={<PiDownloadSimpleBold size={16} />}
variant="ghost"
opacity={0.7}
onClick={handleDownload}
@ -83,7 +83,7 @@ const DataViewer = (props: Props) => {
<InvTooltip label={`${t('gallery.copy')} ${label} JSON`}>
<InvIconButton
aria-label={`${t('gallery.copy')} ${label} JSON`}
icon={<FaCopy />}
icon={<PiCopyBold size={16} />}
variant="ghost"
opacity={0.7}
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 { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { FaCopy } from 'react-icons/fa';
import { IoArrowUndoCircleOutline } from 'react-icons/io5';
import { PiCopyBold } from 'react-icons/pi';
type MetadataItemProps = {
isLink?: boolean;
@ -57,7 +57,7 @@ const ImageMetadataItem = ({
<InvTooltip label={`Copy ${label}`}>
<InvIconButton
aria-label={`Copy ${label}`}
icon={<FaCopy />}
icon={<PiCopyBold />}
size="xs"
variant="ghost"
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 { memo } from 'react';
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'] = {
color: 'base.100',
@ -35,7 +35,7 @@ const NextPrevImageButtons = () => {
{!isOnFirstImage && (
<InvIconButton
aria-label={t('accessibility.previousImage')}
icon={<FaAngleLeft size={64} />}
icon={<PiCaretLeftBold size={64} />}
variant="unstyled"
onClick={handleLeftImage}
boxSize={16}
@ -52,7 +52,7 @@ const NextPrevImageButtons = () => {
{!isOnLastImage && (
<InvIconButton
aria-label={t('accessibility.nextImage')}
icon={<FaAngleRight size={64} />}
icon={<PiCaretRightBold size={64} />}
variant="unstyled"
onClick={handleRightImage}
boxSize={16}
@ -62,7 +62,7 @@ const NextPrevImageButtons = () => {
{isOnLastImage && areMoreImagesAvailable && !isFetching && (
<InvIconButton
aria-label={t('accessibility.loadMore')}
icon={<FaAngleDoubleRight size={64} />}
icon={<PiCaretDoubleRightBold size={64} />}
variant="unstyled"
onClick={handleLoadMoreImages}
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 { loraRemoved, loraWeightChanged } from 'features/lora/store/loraSlice';
import { memo, useCallback } from 'react';
import { FaTrashCan } from 'react-icons/fa6';
import { PiTrashSimpleBold } from 'react-icons/pi';
type LoRACardProps = {
lora: LoRA;
@ -43,7 +43,7 @@ export const LoRACard = memo((props: LoRACardProps) => {
variant="ghost"
size="sm"
onClick={handleRemoveLora}
icon={<FaTrashCan />}
icon={<PiTrashSimpleBold />}
/>
</InvCardHeader>
<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 { memo, useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { FaTimes } from 'react-icons/fa';
import { PiXBold } from 'react-icons/pi';
import AdvancedAddCheckpoint from './AdvancedAddCheckpoint';
import AdvancedAddDiffusers from './AdvancedAddDiffusers';
@ -94,7 +94,7 @@ const ScanAdvancedAddModels = () => {
: 'Add Diffusers Model'}
</InvText>
<InvIconButton
icon={<FaTimes />}
icon={<PiXBold />}
aria-label={t('modelManager.closeAdvanced')}
onClick={handleClickSetAdvanced}
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 { memo, useCallback } from 'react';
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';
type SearchFolderForm = {
@ -93,7 +93,7 @@ function SearchFolderForm() {
<InvIconButton
aria-label={t('modelManager.findModels')}
tooltip={t('modelManager.findModels')}
icon={<FaSearch />}
icon={<PiMagnifyingGlassBold />}
fontSize={18}
size="sm"
type="submit"
@ -102,7 +102,7 @@ function SearchFolderForm() {
<InvIconButton
aria-label={t('modelManager.scanAgain')}
tooltip={t('modelManager.scanAgain')}
icon={<FaSync />}
icon={<PiArrowsCounterClockwiseBold />}
onClick={scanAgainHandler}
fontSize={18}
size="sm"
@ -112,7 +112,7 @@ function SearchFolderForm() {
<InvIconButton
aria-label={t('modelManager.clearCheckpointFolder')}
tooltip={t('modelManager.clearCheckpointFolder')}
icon={<FaTrash />}
icon={<PiTrashSimpleBold />}
size="sm"
onClick={handleClickClearCheckpointFolder}
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 { memo } from 'react';
import { useTranslation } from 'react-i18next';
import { FaFlask } from 'react-icons/fa';
import { FaHammer } from 'react-icons/fa6';
import { PiFlaskBold, PiHammerBold } from 'react-icons/pi'
interface Props {
nodeId: string;
@ -56,11 +55,11 @@ ClassificationTooltipContent.displayName = 'ClassificationTooltipContent';
const getIcon = (classification: Classification) => {
if (classification === 'beta') {
return FaHammer;
return PiHammerBold;
}
if (classification === 'prototype') {
return FaFlask;
return PiFlaskBold;
}
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 { memo, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { FaInfoCircle } from 'react-icons/fa';
import { PiInfoBold } from 'react-icons/pi'
interface Props {
nodeId: string;
@ -24,7 +24,7 @@ const InvocationNodeInfoIcon = ({ nodeId }: Props) => {
shouldWrapChildren
>
<Icon
as={FaInfoCircle}
as={PiInfoBold}
display="block"
boxSize={4}
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 { memo, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { FaCheck, FaEllipsisH, FaExclamation } from 'react-icons/fa';
import { PiCheckBold, PiDotsThreeOutlineFill, PiWarningBold } from 'react-icons/pi'
type Props = {
nodeId: string;
@ -122,7 +122,7 @@ type StatusIconProps = {
const StatusIcon = memo((props: StatusIconProps) => {
const { progress, status } = props.nodeExecutionState;
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) {
return progress === null ? (
@ -144,10 +144,10 @@ const StatusIcon = memo((props: StatusIconProps) => {
);
}
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) {
return <Icon as={FaExclamation} boxSize={iconBoxSize} color="error.300" />;
return <Icon as={PiWarningBold} boxSize={iconBoxSize} color="error.300" />;
}
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 { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { FaMinus, FaPlus } from 'react-icons/fa';
import { PiMinusBold, PiPlusBold } from 'react-icons/pi';
type Props = {
nodeId: string;
@ -65,7 +65,7 @@ const FieldContextMenu = ({ nodeId, fieldName, kind, children }: Props) => {
menuItems.push(
<InvMenuItem
key={`${nodeId}.${fieldName}.expose-field`}
icon={<FaPlus />}
icon={<PiPlusBold />}
onClick={handleExposeField}
>
{t('nodes.addLinearView')}
@ -76,7 +76,7 @@ const FieldContextMenu = ({ nodeId, fieldName, kind, children }: Props) => {
menuItems.push(
<InvMenuItem
key={`${nodeId}.${fieldName}.unexpose-field`}
icon={<FaMinus />}
icon={<PiMinusBold />}
onClick={handleUnexposeField}
>
{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 { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { FaInfoCircle, FaTrash } from 'react-icons/fa';
import { PiInfoBold, PiTrashSimpleBold } from 'react-icons/pi';
import EditableFieldTitle from './EditableFieldTitle';
import FieldTooltipContent from './FieldTooltipContent';
@ -58,7 +58,7 @@ const LinearViewField = ({ nodeId, fieldName }: Props) => {
placement="top"
>
<Flex h="full" alignItems="center">
<Icon fontSize="sm" color="base.300" as={FaInfoCircle} />
<Icon fontSize="sm" color="base.300" as={PiInfoBold} />
</Flex>
</InvTooltip>
<InvIconButton
@ -67,7 +67,7 @@ const LinearViewField = ({ nodeId, fieldName }: Props) => {
variant="ghost"
size="sm"
onClick={handleRemoveField}
icon={<FaTrash />}
icon={<PiTrashSimpleBold />}
/>
</Flex>
<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';
import { memo, useCallback, useEffect, useMemo } from 'react';
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 type { PostUploadAction } from 'services/api/types';
@ -95,7 +95,7 @@ const ImageFieldInputComponent = (
>
<IAIDndImageIcon
onClick={handleReset}
icon={imageDTO ? <FaUndo /> : undefined}
icon={imageDTO ? <PiArrowCounterClockwiseBold /> : undefined}
tooltip="Reset Image"
/>
</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 { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { FaExclamationTriangle } from 'react-icons/fa';
import { PiWarningBold } from 'react-icons/pi';
const UpdateNodesButton = () => {
const dispatch = useAppDispatch();
@ -20,7 +20,7 @@ const UpdateNodesButton = () => {
return (
<InvButton
leftIcon={<FaExclamationTriangle />}
leftIcon={<PiWarningBold />}
onClick={handleClickUpdateNodes}
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 { memo, useCallback, useMemo } from 'react';
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 { COLUMN_WIDTHS } from './constants';
@ -63,7 +63,7 @@ const QueueItemComponent = ({ index, item, context }: InnerItemProps) => {
[item.status]
);
const icon = useMemo(() => <FaTimes />, []);
const icon = useMemo(() => <PiXBold />, []);
return (
<Flex
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 { memo, useMemo } from 'react';
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 type { SessionQueueItemDTO } from 'services/api/types';
@ -81,7 +81,7 @@ const QueueItemComponent = ({ queueItemDTO }: Props) => {
: true
}
aria-label={t('queue.cancelItem')}
leftIcon={<FaTimes />}
leftIcon={<PiXBold />}
colorScheme="error"
>
{t('queue.cancelItem')}
@ -91,7 +91,7 @@ const QueueItemComponent = ({ queueItemDTO }: Props) => {
isLoading={isLoadingCancelBatch}
isDisabled={isCanceled}
aria-label={t('queue.cancelBatch')}
leftIcon={<FaTimes />}
leftIcon={<PiXBold />}
colorScheme="error"
>
{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 { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { FaLink, FaUnlink } from 'react-icons/fa';
import { PiLinkSimpleBold,PiLinkSimpleBreakBold } from 'react-icons/pi';
export const SDXLConcatButton = memo(() => {
const shouldConcatSDXLStylePrompt = useAppSelector(
@ -31,7 +31,7 @@ export const SDXLConcatButton = memo(() => {
<InvIconButton
aria-label={label}
onClick={handleShouldConcatPromptChange}
icon={shouldConcatSDXLStylePrompt ? <FaLink /> : <FaUnlink />}
icon={shouldConcatSDXLStylePrompt ? <PiLinkSimpleBold size={14} /> : <PiLinkSimpleBreakBold size={14} />}
variant="promptOverlay"
fontSize={12}
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 { memo } from 'react';
import { useTranslation } from 'react-i18next';
import { FaExclamationTriangle } from 'react-icons/fa';
import { PiWarningBold } from 'react-icons/pi';
const StatusIndicator = () => {
const isConnected = useAppSelector((s) => s.system.isConnected);
@ -17,7 +17,7 @@ const StatusIndicator = () => {
shouldWrapChildren
gutter={10}
>
<Icon as={FaExclamationTriangle} color="error.300" />
<Icon as={PiWarningBold} color="error.300" />
</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 { memo, useCallback, useMemo } from 'react';
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';
const PAGES_TO_DISPLAY = 7;
@ -60,7 +60,7 @@ const WorkflowLibraryPagination = ({ page, setPage, data }: Props) => {
onClick={handlePrevPage}
isDisabled={page === 0}
aria-label={t('common.prevPage')}
icon={<FaChevronLeft />}
icon={<PiCaretLeftBold />}
/>
{pages.map((p) => (
<InvButton
@ -79,7 +79,7 @@ const WorkflowLibraryPagination = ({ page, setPage, data }: Props) => {
onClick={handleNextPage}
isDisabled={page === data.pages - 1}
aria-label={t('common.nextPage')}
icon={<FaChevronRight />}
icon={<PiCaretRightBold />}
/>
</InvButtonGroup>
);