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(ui): add greyscale invoke logo to invoke button when as icon

Browse Source
This commit is contained in:
psychedelicious 2023-09-21 09:25:06 +10:00 committed by Kent Keirsey
parent b915d74127
commit 7fecebf7db
2 changed files with 25 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
invokeai/frontend/web/src/common/components/GreyscaleInvokeAIIcon.tsx Normal file
View File

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

4
invokeai/frontend/web/src/features/queue/components/QueueBackButton.tsx
View File

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