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): new logo!

Browse Source
This commit is contained in:
psychedelicious 2024-01-03 12:31:52 +11:00
parent db17ec7a4b
commit 46d830b9fa
4 changed files with 18 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
View File

@ -39,7 +39,6 @@ interface Props extends PropsWithChildren {
customStarUi?: CustomStarUi; customStarUi?: CustomStarUi;
socketOptions?: Partial<ManagerOptions & SocketOptions>; socketOptions?: Partial<ManagerOptions & SocketOptions>;
isDebugging?: boolean; isDebugging?: boolean;
useNewLogo?: boolean;
} }
const InvokeAIUI = ({ const InvokeAIUI = ({
@ -54,7 +53,6 @@ const InvokeAIUI = ({
customStarUi, customStarUi,
socketOptions, socketOptions,
isDebugging = false, isDebugging = false,
useNewLogo = false,
}: Props) => { }: Props) => {
useEffect(() => { useEffect(() => {
// configure API client token // configure API client token
@ -157,7 +155,7 @@ const InvokeAIUI = ({
return ( return (
<React.StrictMode> <React.StrictMode>
<Provider store={store}> <Provider store={store}>
<React.Suspense fallback={<Loading useNewLogo={!!useNewLogo} />}> <React.Suspense fallback={<Loading />}>
<ThemeLocaleProvider> <ThemeLocaleProvider>
<AppDndContext> <AppDndContext>
<App config={config} selectedImage={selectedImage} /> <App config={config} selectedImage={selectedImage} />

3
invokeai/frontend/web/src/assets/images/invoke-key-ylw-sm.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M29.1951 10.6667H42V2H2V10.6667H14.8049L29.1951 33.3333H42V42H2V33.3333H14.8049" stroke="#E6FD13" stroke-width="2.8"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 231 B

11
invokeai/frontend/web/src/common/components/Loading/Loading.tsx
View File

@ -1,11 +1,10 @@
import { Flex, Image, Spinner } from '@chakra-ui/react'; import { Flex, Image, Spinner } from '@chakra-ui/react';
import InvokeAILogoNew from 'assets/images/invoke-key-wht-lrg.svg'; import InvokeLogoWhite from 'assets/images/invoke-key-wht-lrg.svg';
import InvokeAILogoImage from 'assets/images/logo.png';
import { memo } from 'react'; import { memo } from 'react';
// This component loads before the theme so we cannot use theme tokens here // This component loads before the theme so we cannot use theme tokens here
const Loading = ({ useNewLogo }: { useNewLogo: boolean }) => { const Loading = () => {
return ( return (
<Flex <Flex
position="relative" position="relative"
@ -15,11 +14,7 @@ const Loading = ({ useNewLogo }: { useNewLogo: boolean }) => {
justifyContent="center" justifyContent="center"
bg="#151519" bg="#151519"
> >
<Image <Image src={InvokeLogoWhite} w="8rem" h="8rem" />
src={useNewLogo ? InvokeAILogoNew : InvokeAILogoImage}
w="8rem"
h="8rem"
/>
<Spinner <Spinner
label="Loading" label="Loading"
color="grey" color="grey"

34
invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx
View File

@ -1,6 +1,6 @@
/* eslint-disable i18next/no-literal-string */ /* eslint-disable i18next/no-literal-string */
import { Flex, Image } from '@chakra-ui/react'; import { Flex, Image } from '@chakra-ui/react';
import InvokeAILogoImage from 'assets/images/logo.png'; import InvokeLogoYellow from 'assets/images/invoke-key-ylw-sm.svg';
import { InvText } from 'common/components/InvText/wrapper'; import { InvText } from 'common/components/InvText/wrapper';
import type { AnimationProps } from 'framer-motion'; import type { AnimationProps } from 'framer-motion';
import { AnimatePresence, motion } from 'framer-motion'; import { AnimatePresence, motion } from 'framer-motion';
@ -8,11 +8,7 @@ import { memo, useRef } from 'react';
import { useHoverDirty } from 'react-use'; import { useHoverDirty } from 'react-use';
import { useGetAppVersionQuery } from 'services/api/endpoints/appInfo'; import { useGetAppVersionQuery } from 'services/api/endpoints/appInfo';
interface Props { const InvokeAILogoComponent = () => {
showVersion?: boolean;
}
const InvokeAILogoComponent = ({ showVersion = true }: Props) => {
const { data: appVersion } = useGetAppVersionQuery(); const { data: appVersion } = useGetAppVersionQuery();
const ref = useRef(null); const ref = useRef(null);
const isHovered = useHoverDirty(ref); const isHovered = useHoverDirty(ref);
@ -20,33 +16,25 @@ const InvokeAILogoComponent = ({ showVersion = true }: Props) => {
return ( return (
<Flex alignItems="center" gap={5} ps={1} ref={ref}> <Flex alignItems="center" gap={5} ps={1} ref={ref}>
<Image <Image
src={InvokeAILogoImage} src={InvokeLogoYellow}
alt="invoke-ai-logo" alt="invoke-logo"
w="32px" w="24px"
h="32px" h="24px"
minW="32px" minW="24px"
minH="32px" minH="24px"
userSelect="none" userSelect="none"
/> />
<Flex gap={3} alignItems="center"> <Flex gap={3} alignItems="center">
<InvText fontSize="xl" userSelect="none">
invoke <strong>ai</strong>
</InvText>
<AnimatePresence> <AnimatePresence>
{showVersion && isHovered && appVersion && ( {isHovered && appVersion && (
<motion.div <motion.div
key="statusText" key="statusText"
initial={initial} initial={initial}
animate={animate} animate={animate}
exit={exit} exit={exit}
> >
<InvText <InvText fontWeight="semibold" marginTop={1} color="base.300">
fontWeight="semibold" v{appVersion.version}
marginTop={1}
color="base.300"
fontSize={14}
>
{appVersion.version}
</InvText> </InvText>
</motion.div> </motion.div>
)} )}