From 7fecebf7db1a96c11a0daa7865298d034feb0296 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 21 Sep 2023 09:25:06 +1000
Subject: [PATCH] feat(ui): add greyscale invoke logo to invoke button when as
 icon

---
 .../components/GreyscaleInvokeAIIcon.tsx      | 22 +++++++++++++++++++
 .../queue/components/QueueBackButton.tsx      |  4 +++-
 2 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 invokeai/frontend/web/src/common/components/GreyscaleInvokeAIIcon.tsx

diff --git a/invokeai/frontend/web/src/common/components/GreyscaleInvokeAIIcon.tsx b/invokeai/frontend/web/src/common/components/GreyscaleInvokeAIIcon.tsx
new file mode 100644
index 0000000000..a6c6cdca18
--- /dev/null
+++ b/invokeai/frontend/web/src/common/components/GreyscaleInvokeAIIcon.tsx
@@ -0,0 +1,22 @@
+import { Box, Image } from '@chakra-ui/react';
+import InvokeAILogoImage from 'assets/images/logo.png';
+import { memo } from 'react';
+
+const GreyscaleInvokeAIIcon = () => (
+  <Box pos="relative" w={4} h={4}>
+    <Image
+      src={InvokeAILogoImage}
+      alt="invoke-ai-logo"
+      pos="absolute"
+      top={-0.5}
+      insetInlineStart={-0.5}
+      w={5}
+      h={5}
+      minW={5}
+      minH={5}
+      filter="saturate(0)"
+    />
+  </Box>
+);
+
+export default memo(GreyscaleInvokeAIIcon);
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueBackButton.tsx b/invokeai/frontend/web/src/features/queue/components/QueueBackButton.tsx
index 6e5c1b52a9..fda54db26b 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueBackButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueBackButton.tsx
@@ -1,9 +1,10 @@
+import { ChakraProps } from '@chakra-ui/react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQueueBack } from '../hooks/useQueueBack';
 import EnqueueButtonTooltip from './QueueButtonTooltip';
 import QueueButton from './common/QueueButton';
-import { ChakraProps } from '@chakra-ui/react';
+import GreyscaleInvokeAIIcon from 'common/components/GreyscaleInvokeAIIcon';
 
 type Props = {
   asIconButton?: boolean;
@@ -23,6 +24,7 @@ const QueueBackButton = ({ asIconButton, sx }: Props) => {
       onClick={queueBack}
       tooltip={<EnqueueButtonTooltip />}
       sx={sx}
+      icon={asIconButton ? <GreyscaleInvokeAIIcon /> : undefined}
     />
   );
 };