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}