feat(ui): add greyscale invoke logo to invoke button when as icon

Author: psychedelicious

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);

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}
     />
   );
 };