feat(ui): new logo!

Author: psychedelicious

invokeai/frontend/web/src/app/components/InvokeAIUI.tsx

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

invokeai/frontend/web/src/assets/images/invoke-key-ylw-sm.svg

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

invokeai/frontend/web/src/common/components/Loading/Loading.tsx

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