From 46d830b9faa901f5c95ad204b5059abca6462e98 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 3 Jan 2024 12:31:52 +1100
Subject: [PATCH] feat(ui): new logo!

---
 .../web/src/app/components/InvokeAIUI.tsx     |  4 +--
 .../src/assets/images/invoke-key-ylw-sm.svg   |  3 ++
 .../src/common/components/Loading/Loading.tsx | 11 ++----
 .../components/InvokeAILogoComponent.tsx      | 34 ++++++-------------
 4 files changed, 18 insertions(+), 34 deletions(-)
 create mode 100644 invokeai/frontend/web/src/assets/images/invoke-key-ylw-sm.svg

diff --git a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
index 19eecef881..e1fa294654 100644
--- a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
+++ b/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} />
diff --git a/invokeai/frontend/web/src/assets/images/invoke-key-ylw-sm.svg b/invokeai/frontend/web/src/assets/images/invoke-key-ylw-sm.svg
new file mode 100644
index 0000000000..898f20bd6f
--- /dev/null
+++ b/invokeai/frontend/web/src/assets/images/invoke-key-ylw-sm.svg
@@ -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>
diff --git a/invokeai/frontend/web/src/common/components/Loading/Loading.tsx b/invokeai/frontend/web/src/common/components/Loading/Loading.tsx
index a2d6e5680e..4c93d9ef01 100644
--- a/invokeai/frontend/web/src/common/components/Loading/Loading.tsx
+++ b/invokeai/frontend/web/src/common/components/Loading/Loading.tsx
@@ -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"
diff --git a/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx b/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx
index 62a246144d..d1abbe7aae 100644
--- a/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx
+++ b/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>
           )}