diff --git a/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx b/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx index 0a5edddcad..3a2ec0a8c7 100644 --- a/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx +++ b/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx @@ -4,7 +4,11 @@ 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 { PiArrowCounterClockwiseBold,PiArrowSquareOutBold, PiCopyBold } from 'react-icons/pi' +import { + PiArrowCounterClockwiseBold, + PiArrowSquareOutBold, + PiCopyBold, +} from 'react-icons/pi'; import { serializeError } from 'serialize-error'; type Props = { diff --git a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx index 45d5d55542..e554306442 100644 --- a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx +++ b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx @@ -22,7 +22,7 @@ import type { SyntheticEvent, } from 'react'; import { memo, useCallback, useMemo, useState } from 'react'; -import { PiImageBold, PiUploadSimpleBold } from 'react-icons/pi' +import { PiImageBold, PiUploadSimpleBold } from 'react-icons/pi'; import type { ImageDTO, PostUploadAction } from 'services/api/types'; import IAIDraggable from './IAIDraggable'; diff --git a/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx b/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx index 8a663d4fab..ef1dd1296f 100644 --- a/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx +++ b/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx @@ -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 { PiImageBold } from 'react-icons/pi' +import { PiImageBold } from 'react-icons/pi'; import type { ImageDTO } from 'services/api/types'; import { InvText } from './InvText/wrapper'; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx index 945de982a6..e407ea4cc0 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx @@ -25,7 +25,11 @@ import { import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { memo, useCallback, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { PiArrowCounterClockwiseBold,PiFloppyDiskBold, PiRulerBold } from 'react-icons/pi' +import { + PiArrowCounterClockwiseBold, + PiFloppyDiskBold, + PiRulerBold, +} from 'react-icons/pi'; import { useAddImageToBoardMutation, useChangeImageIsIntermediateMutation, @@ -210,7 +214,9 @@ const ControlAdapterImagePreview = ({ isSmall, id }: Props) => { <> : undefined} + icon={ + controlImage ? : undefined + } tooltip={t('controlnet.resetControlImage')} /> { return ( <> - } onClick={handleDelete}> + } + onClick={handleDelete} + > {t('boards.deleteBoard')} diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx index 62ab0977a5..fffa3d98e0 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx @@ -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 { PiImageBold, PiWarningCircleBold } from 'react-icons/pi' +import { PiImageBold, PiWarningCircleBold } from 'react-icons/pi'; import type { GridComponents, ItemContent, diff --git a/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx b/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx index d27facb81f..6163e595c9 100644 --- a/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx @@ -5,7 +5,11 @@ import { useGalleryImages } from 'features/gallery/hooks/useGalleryImages'; import { useGalleryNavigation } from 'features/gallery/hooks/useGalleryNavigation'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; -import { PiCaretDoubleRightBold,PiCaretLeftBold, PiCaretRightBold } from 'react-icons/pi' +import { + PiCaretDoubleRightBold, + PiCaretLeftBold, + PiCaretRightBold, +} from 'react-icons/pi'; const nextPrevButtonStyles: ChakraProps['sx'] = { color: 'base.100', diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx index 2671024812..a44e0ea8a0 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx @@ -11,7 +11,11 @@ import { import type { CSSProperties } from 'react'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; -import { PiArrowsCounterClockwiseBold, PiMagnifyingGlassBold, PiTrashSimpleBold } from 'react-icons/pi'; +import { + PiArrowsCounterClockwiseBold, + PiMagnifyingGlassBold, + PiTrashSimpleBold, +} from 'react-icons/pi'; import { useGetModelsInFolderQuery } from 'services/api/endpoints/models'; type SearchFolderForm = { diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon.tsx index 10953a7fda..8dc0d239ee 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon.tsx @@ -4,7 +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 { PiFlaskBold, PiHammerBold } from 'react-icons/pi' +import { PiFlaskBold, PiHammerBold } from 'react-icons/pi'; interface Props { nodeId: string; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx index a3e8eef61c..6f4761fb2a 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx @@ -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 { PiInfoBold } from 'react-icons/pi' +import { PiInfoBold } from 'react-icons/pi'; interface Props { nodeId: string; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx index 27494341eb..1c45d86baa 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx @@ -10,7 +10,11 @@ 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 { PiCheckBold, PiDotsThreeOutlineFill, PiWarningBold } from 'react-icons/pi' +import { + PiCheckBold, + PiDotsThreeOutlineFill, + PiWarningBold, +} from 'react-icons/pi'; type Props = { nodeId: string; @@ -122,7 +126,13 @@ type StatusIconProps = { const StatusIcon = memo((props: StatusIconProps) => { const { progress, status } = props.nodeExecutionState; if (status === zNodeStatus.enum.PENDING) { - return ; + return ( + + ); } if (status === zNodeStatus.enum.IN_PROGRESS) { return progress === null ? ( diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLConcatButton.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLConcatButton.tsx index ec237a0989..85ed88e7ad 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLConcatButton.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLConcatButton.tsx @@ -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 { PiLinkSimpleBold,PiLinkSimpleBreakBold } from 'react-icons/pi'; +import { PiLinkSimpleBold, PiLinkSimpleBreakBold } from 'react-icons/pi'; export const SDXLConcatButton = memo(() => { const shouldConcatSDXLStylePrompt = useAppSelector( @@ -31,7 +31,13 @@ export const SDXLConcatButton = memo(() => { : } + icon={ + shouldConcatSDXLStylePrompt ? ( + + ) : ( + + ) + } variant="promptOverlay" fontSize={12} px={0.5}