feat(ui): new logo!

invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx

@@ -1,6 +1,6 @@
 /* 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';
@@ -8,11 +8,7 @@ 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);
@@ -20,33 +16,25 @@ const InvokeAILogoComponent = ({ showVersion = true }: Props) => {
   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>
           )}