From c5e7d240c6314b738939dc999e2588217812cadc Mon Sep 17 00:00:00 2001
From: nite-knite <nkCoding@gmail.com>
Date: Wed, 14 May 2025 18:08:12 +0800
Subject: [PATCH] feat: update logo

---
 web/app/account/header.tsx                    |  14 +++---
 .../chat/chat-with-history/sidebar/index.tsx  |   6 +--
 .../chat/embedded-chatbot/header/index.tsx    |   6 +--
 .../base/chat/embedded-chatbot/index.tsx      |   4 +-
 web/app/components/base/logo/dify-logo.tsx    |  45 ++++++++++++++++++
 web/app/components/base/logo/logo-site.tsx    |  22 ---------
 .../custom/custom-web-app-brand/index.tsx     |   6 +--
 .../components/header/account-about/index.tsx |  22 ++++-----
 web/app/components/header/index.tsx           |   8 ++--
 .../share/text-generation/index.tsx           |   6 +--
 .../education-apply/education-apply-page.tsx  |   9 ++--
 web/app/signin/_header.tsx                    |   4 +-
 web/public/logo/logo-monochrome-white.png     | Bin 0 -> 1090 bytes
 web/public/logo/logo-monochrome-white.svg     |  12 +++++
 web/public/logo/logo.png                      | Bin 6249 -> 0 bytes
 web/public/logo/logo.svg                      |  12 +++++
 16 files changed, 111 insertions(+), 65 deletions(-)
 create mode 100644 web/app/components/base/logo/dify-logo.tsx
 delete mode 100644 web/app/components/base/logo/logo-site.tsx
 create mode 100644 web/public/logo/logo-monochrome-white.png
 create mode 100644 web/public/logo/logo-monochrome-white.svg
 delete mode 100644 web/public/logo/logo.png
 create mode 100644 web/public/logo/logo.svg

diff --git a/web/app/account/header.tsx b/web/app/account/header.tsx
index 2bb89552c8..11b6beec08 100644
--- a/web/app/account/header.tsx
+++ b/web/app/account/header.tsx
@@ -4,23 +4,25 @@ import { RiArrowRightUpLine, RiRobot2Line } from '@remixicon/react'
 import { useRouter } from 'next/navigation'
 import Button from '../components/base/button'
 import Avatar from './avatar'
-import LogoSite from '@/app/components/base/logo/logo-site'
+import DifyLogo from '@/app/components/base/logo/dify-logo'
+import { useCallback } from 'react'
 
 const Header = () => {
   const { t } = useTranslation()
   const router = useRouter()
 
-  const back = () => {
+  const back = useCallback(() => {
     router.back()
-  }
+  }, [router])
+
   return (
     <div className='flex flex-1 items-center justify-between px-4'>
       <div className='flex items-center gap-3'>
         <div className='flex cursor-pointer items-center' onClick={back}>
-          <LogoSite className='object-contain' />
+          <DifyLogo />
         </div>
-        <div className='h-4 w-[1px] bg-divider-regular' />
-        <p className='title-3xl-semi-bold text-text-primary'>{t('common.account.account')}</p>
+        <div className='h-4 w-[1px] origin-center rotate-[11.31deg] bg-divider-regular' />
+        <p className='title-3xl-semi-bold relative mt-[-2px] text-text-primary'>{t('common.account.account')}</p>
       </div>
       <div className='flex shrink-0 items-center gap-3'>
         <Button className='system-sm-medium gap-2 px-3 py-2' onClick={back}>
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/index.tsx b/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
index c563b5dec3..dc4e864728 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
@@ -16,7 +16,7 @@ import List from '@/app/components/base/chat/chat-with-history/sidebar/list'
 import MenuDropdown from '@/app/components/share/text-generation/menu-dropdown'
 import Confirm from '@/app/components/base/confirm'
 import RenameModal from '@/app/components/base/chat/chat-with-history/sidebar/rename-modal'
-import LogoSite from '@/app/components/base/logo/logo-site'
+import DifyLogo from '@/app/components/base/logo/dify-logo'
 import type { ConversationItem } from '@/models/share'
 import cn from '@/utils/classnames'
 
@@ -141,14 +141,14 @@ const Sidebar = ({ isPanel }: Props) => {
         <div className='shrink-0'>
           {!appData?.custom_config?.remove_webapp_brand && (
             <div className={cn(
-              'flex shrink-0 items-center gap-1.5 px-2',
+              'flex shrink-0 items-center gap-1.5 px-1',
             )}>
               <div className='system-2xs-medium-uppercase text-text-tertiary'>{t('share.chat.poweredBy')}</div>
               {appData?.custom_config?.replace_webapp_logo && (
                 <img src={appData?.custom_config?.replace_webapp_logo} alt='logo' className='block h-5 w-auto' />
               )}
               {!appData?.custom_config?.replace_webapp_logo && (
-                <LogoSite className='!h-5' />
+                <DifyLogo size='small' />
               )}
             </div>
           )}
diff --git a/web/app/components/base/chat/embedded-chatbot/header/index.tsx b/web/app/components/base/chat/embedded-chatbot/header/index.tsx
index 49444d2d73..c6c02a4d44 100644
--- a/web/app/components/base/chat/embedded-chatbot/header/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/header/index.tsx
@@ -11,7 +11,7 @@ import Tooltip from '@/app/components/base/tooltip'
 import ActionButton from '@/app/components/base/action-button'
 import Divider from '@/app/components/base/divider'
 import ViewFormDropdown from '@/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown'
-import LogoSite from '@/app/components/base/logo/logo-site'
+import DifyLogo from '@/app/components/base/logo/dify-logo'
 import cn from '@/utils/classnames'
 
 export type IHeaderProps = {
@@ -89,7 +89,7 @@ const Header: FC<IHeaderProps> = ({
                   <img src={appData?.custom_config?.replace_webapp_logo} alt='logo' className='block h-5 w-auto' />
                 )}
                 {!appData?.custom_config?.replace_webapp_logo && (
-                  <LogoSite className='!h-5' />
+                  <DifyLogo size='small' />
                 )}
               </div>
             )}
@@ -132,7 +132,7 @@ const Header: FC<IHeaderProps> = ({
   return (
     <div
       className={cn('flex h-14 shrink-0 items-center justify-between rounded-t-2xl px-3')}
-      style={Object.assign({}, CssTransform(theme?.backgroundHeaderColorStyle ?? ''), CssTransform(theme?.headerBorderBottomStyle ?? '')) }
+      style={Object.assign({}, CssTransform(theme?.backgroundHeaderColorStyle ?? ''), CssTransform(theme?.headerBorderBottomStyle ?? ''))}
     >
       <div className="flex grow items-center space-x-3">
         {customerIcon}
diff --git a/web/app/components/base/chat/embedded-chatbot/index.tsx b/web/app/components/base/chat/embedded-chatbot/index.tsx
index 96dff67bf4..59c358a7a6 100644
--- a/web/app/components/base/chat/embedded-chatbot/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/index.tsx
@@ -19,7 +19,7 @@ import Loading from '@/app/components/base/loading'
 import LogoHeader from '@/app/components/base/logo/logo-embedded-chat-header'
 import Header from '@/app/components/base/chat/embedded-chatbot/header'
 import ChatWrapper from '@/app/components/base/chat/embedded-chatbot/chat-wrapper'
-import LogoSite from '@/app/components/base/logo/logo-site'
+import DifyLogo from '@/app/components/base/logo/dify-logo'
 import cn from '@/utils/classnames'
 
 const Chatbot = () => {
@@ -118,7 +118,7 @@ const Chatbot = () => {
                 <img src={appData?.custom_config?.replace_webapp_logo} alt='logo' className='block h-5 w-auto' />
               )}
               {!appData?.custom_config?.replace_webapp_logo && (
-                <LogoSite className='!h-5' />
+                <DifyLogo size='small' />
               )}
             </div>
           )}
diff --git a/web/app/components/base/logo/dify-logo.tsx b/web/app/components/base/logo/dify-logo.tsx
new file mode 100644
index 0000000000..ce59ba7900
--- /dev/null
+++ b/web/app/components/base/logo/dify-logo.tsx
@@ -0,0 +1,45 @@
+'use client'
+import type { FC } from 'react'
+import { WEB_PREFIX } from '@/config'
+import classNames from '@/utils/classnames'
+import useTheme from '@/hooks/use-theme'
+
+export type LogoStyle = 'default' | 'monochromeWhite'
+
+export const logoPathMap: Record<LogoStyle, string> = {
+  default: '/logo/logo.svg',
+  monochromeWhite: '/logo/logo-monochrome-white.svg',
+}
+
+export type LogoSize = 'large' | 'medium' | 'small'
+
+export const logoSizeMap: Record<LogoSize, string> = {
+  large: 'w-16 h-7',
+  medium: 'w-12 h-[22px]',
+  small: 'w-9 h-4',
+}
+
+type DifyLogoProps = {
+  style?: LogoStyle
+  size?: LogoSize
+  className?: string
+}
+
+const DifyLogo: FC<DifyLogoProps> = ({
+  style = 'default',
+  size = 'medium',
+  className,
+}) => {
+  const { theme } = useTheme()
+  const themedStyle = (theme === 'dark' && style === 'default') ? 'monochromeWhite' : style
+
+  return (
+    <img
+      src={`${WEB_PREFIX}${logoPathMap[themedStyle]}`}
+      className={classNames('block object-contain', logoSizeMap[size], className)}
+      alt='Dify logo'
+    />
+  )
+}
+
+export default DifyLogo
diff --git a/web/app/components/base/logo/logo-site.tsx b/web/app/components/base/logo/logo-site.tsx
deleted file mode 100644
index 3a0141cbc6..0000000000
--- a/web/app/components/base/logo/logo-site.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import { WEB_PREFIX } from '@/config'
-import classNames from '@/utils/classnames'
-
-type LogoSiteProps = {
-  className?: string
-}
-
-const LogoSite: FC<LogoSiteProps> = ({
-  className,
-}) => {
-  return (
-    <img
-      src={`${WEB_PREFIX}/logo/logo.png`}
-      className={classNames('block w-[22.651px] h-[24.5px]', className)}
-      alt='logo'
-    />
-  )
-}
-
-export default LogoSite
diff --git a/web/app/components/custom/custom-web-app-brand/index.tsx b/web/app/components/custom/custom-web-app-brand/index.tsx
index b95016fec5..444df98f24 100644
--- a/web/app/components/custom/custom-web-app-brand/index.tsx
+++ b/web/app/components/custom/custom-web-app-brand/index.tsx
@@ -10,7 +10,7 @@ import {
   RiLoader2Line,
   RiPlayLargeLine,
 } from '@remixicon/react'
-import LogoSite from '@/app/components/base/logo/logo-site'
+import DifyLogo from '@/app/components/base/logo/dify-logo'
 import Switch from '@/app/components/base/switch'
 import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
@@ -246,7 +246,7 @@ const CustomWebAppBrand = () => {
                     <div className='system-2xs-medium-uppercase text-text-tertiary'>POWERED BY</div>
                     {webappLogo
                       ? <img src={`${webappLogo}?hash=${imgKey}`} alt='logo' className='block h-5 w-auto' />
-                      : <LogoSite className='!h-5' />
+                      : <DifyLogo size='small' />
                     }
                   </>
                 )}
@@ -305,7 +305,7 @@ const CustomWebAppBrand = () => {
                 <div className='system-2xs-medium-uppercase text-text-tertiary'>POWERED BY</div>
                 {webappLogo
                   ? <img src={`${webappLogo}?hash=${imgKey}`} alt='logo' className='block h-5 w-auto' />
-                  : <LogoSite className='!h-5' />
+                  : <DifyLogo size='small' />
                 }
               </>
             )}
diff --git a/web/app/components/header/account-about/index.tsx b/web/app/components/header/account-about/index.tsx
index 16dd63ea7a..6129b48dce 100644
--- a/web/app/components/header/account-about/index.tsx
+++ b/web/app/components/header/account-about/index.tsx
@@ -7,7 +7,7 @@ import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import type { LangGeniusVersionResponse } from '@/models/common'
 import { IS_CE_EDITION } from '@/config'
-import LogoSite from '@/app/components/base/logo/logo-site'
+import DifyLogo from '@/app/components/base/logo/dify-logo'
 import { noop } from 'lodash-es'
 
 type IAccountSettingProps = {
@@ -28,21 +28,21 @@ export default function AccountAbout({
       onClose={noop}
       className='!w-[480px] !max-w-[480px] !px-6 !py-4'
     >
-      <div className='relative pt-4'>
-        <div className='absolute -right-4 -top-2 flex h-8 w-8 cursor-pointer items-center justify-center' onClick={onCancel}>
+      <div>
+        <div className='absolute right-4 top-4 flex h-8 w-8 cursor-pointer items-center justify-center' onClick={onCancel}>
           <RiCloseLine className='h-4 w-4 text-text-tertiary' />
         </div>
-        <div>
-          <LogoSite className='mx-auto mb-2' />
-          <div className='mb-3 text-center text-xs font-normal text-text-tertiary'>Version {langeniusVersionInfo?.current_version}</div>
-          <div className='mb-4 text-center text-xs font-normal text-text-secondary'>
+        <div className='flex flex-col items-center gap-4 py-8'>
+          <DifyLogo size='large' className='mx-auto' />
+          <div className='text-center text-xs font-normal text-text-tertiary'>Version {langeniusVersionInfo?.current_version}</div>
+          <div className='flex flex-col items-center gap-2 text-center text-xs font-normal text-text-secondary'>
             <div>© {dayjs().year()} LangGenius, Inc., Contributors.</div>
             <div className='text-text-accent'>
               {
                 IS_CE_EDITION
                   ? <Link href={'https://github.com/langgenius/dify/blob/main/LICENSE'} target='_blank' rel='noopener noreferrer'>Open Source License</Link>
                   : <>
-                    <Link href='https://dify.ai/privacy' target='_blank' rel='noopener noreferrer'>Privacy Policy</Link>,<span> </span>
+                    <Link href='https://dify.ai/privacy' target='_blank' rel='noopener noreferrer'>Privacy Policy</Link>,&nbsp;
                     <Link href='https://dify.ai/terms' target='_blank' rel='noopener noreferrer'>Terms of Service</Link>
                   </>
               }
@@ -51,7 +51,7 @@ export default function AccountAbout({
         </div>
         <div className='-mx-8 mb-4 h-[0.5px] bg-divider-regular' />
         <div className='flex items-center justify-between'>
-          <div className='text-xs font-medium text-text-primary'>
+          <div className='text-xs font-medium text-text-tertiary'>
             {
               isLatest
                 ? t('common.about.latestAvailable', { version: langeniusVersionInfo.latest_version })
@@ -59,7 +59,7 @@ export default function AccountAbout({
             }
           </div>
           <div className='flex items-center'>
-            <Button className='mr-2'>
+            <Button className='mr-2' size='small'>
               <Link
                 href={'https://github.com/langgenius/dify/releases'}
                 target='_blank' rel='noopener noreferrer'
@@ -69,7 +69,7 @@ export default function AccountAbout({
             </Button>
             {
               !isLatest && !IS_CE_EDITION && (
-                <Button variant='primary'>
+                <Button variant='primary' size='small'>
                   <Link
                     href={langeniusVersionInfo.release_notes}
                     target='_blank' rel='noopener noreferrer'
diff --git a/web/app/components/header/index.tsx b/web/app/components/header/index.tsx
index a31b304768..c2345fbdaa 100644
--- a/web/app/components/header/index.tsx
+++ b/web/app/components/header/index.tsx
@@ -13,7 +13,7 @@ import ExploreNav from './explore-nav'
 import ToolsNav from './tools-nav'
 import { WorkspaceProvider } from '@/context/workspace-context'
 import { useAppContext } from '@/context/app-context'
-import LogoSite from '@/app/components/base/logo/logo-site'
+import DifyLogo from '@/app/components/base/logo/dify-logo'
 import WorkplaceSelector from '@/app/components/header/account-dropdown/workplace-selector'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { useProviderContext } from '@/context/provider-context'
@@ -60,8 +60,8 @@ const Header = () => {
         {
           !isMobile
           && <div className='flex shrink-0 items-center gap-1.5 self-stretch pl-3'>
-            <Link href="/apps" className='flex h-8 w-8 shrink-0 items-center justify-center gap-2'>
-              <LogoSite className='object-contain' />
+            <Link href="/apps" className='flex h-8 w-[52px] shrink-0 items-center justify-center gap-2'>
+              <DifyLogo />
             </Link>
             <div className='font-light text-divider-deep'>/</div>
             <div className='flex items-center gap-0.5'>
@@ -76,7 +76,7 @@ const Header = () => {
       {isMobile && (
         <div className='flex'>
           <Link href="/apps" className='mr-4 flex items-center'>
-            <LogoSite />
+            <DifyLogo />
           </Link>
           <div className='font-light text-divider-deep'>/</div>
           {enableBilling ? <PlanBadge allowHover sandboxAsUpgrade plan={plan.type} onClick={handlePlanClick} /> : <LicenseNav />}
diff --git a/web/app/components/share/text-generation/index.tsx b/web/app/components/share/text-generation/index.tsx
index 75a1937b7f..5751092494 100644
--- a/web/app/components/share/text-generation/index.tsx
+++ b/web/app/components/share/text-generation/index.tsx
@@ -36,7 +36,7 @@ import Toast from '@/app/components/base/toast'
 import type { VisionFile, VisionSettings } from '@/types/app'
 import { Resolution, TransferMethod } from '@/types/app'
 import { useAppFavicon } from '@/hooks/use-app-favicon'
-import LogoSite from '@/app/components/base/logo/logo-site'
+import DifyLogo from '@/app/components/base/logo/dify-logo'
 import cn from '@/utils/classnames'
 
 const GROUP_SIZE = 5 // to avoid RPM(Request per minute) limit. The group task finished then the next group.
@@ -635,7 +635,7 @@ const TextGeneration: FC<IMainProps> = ({
               <img src={customConfig?.replace_webapp_logo} alt='logo' className='block h-5 w-auto' />
             )}
             {!customConfig?.replace_webapp_logo && (
-              <LogoSite className='!h-5' />
+              <DifyLogo size='small' />
             )}
           </div>
         )}
@@ -664,7 +664,7 @@ const TextGeneration: FC<IMainProps> = ({
                 showResultPanel()
             }}
           >
-            <div className='h-1 w-8 cursor-grab rounded bg-divider-solid'/>
+            <div className='h-1 w-8 cursor-grab rounded bg-divider-solid' />
           </div>
         )}
         {renderResWrap}
diff --git a/web/app/education-apply/education-apply-page.tsx b/web/app/education-apply/education-apply-page.tsx
index f99cca2670..980e36eb93 100644
--- a/web/app/education-apply/education-apply-page.tsx
+++ b/web/app/education-apply/education-apply-page.tsx
@@ -25,6 +25,7 @@ import { useToastContext } from '@/app/components/base/toast'
 import { EDUCATION_VERIFYING_LOCALSTORAGE_ITEM } from '@/app/education-apply/constants'
 import { getLocaleOnClient } from '@/i18n'
 import { noop } from 'lodash-es'
+import DifyLogo from '../components/base/logo/dify-logo'
 
 const EducationApplyAge = () => {
   const { t } = useTranslation()
@@ -93,12 +94,8 @@ const EducationApplyAge = () => {
           }}
         >
         </div>
-        <div className='mt-[-349px] flex h-[88px] items-center justify-between px-8 py-6'>
-          <img
-            src='/logo/logo-site-dark.png'
-            alt='dify logo'
-            className='h-10'
-          />
+        <div className='mt-[-349px] box-content flex h-7 items-center justify-between p-6'>
+          <DifyLogo size='large' style='monochromeWhite' />
         </div>
         <div className='mx-auto max-w-[720px] px-8 pb-[180px]'>
           <div className='mb-2 flex h-[192px] flex-col justify-end pb-4 pt-3 text-text-primary-on-surface'>
diff --git a/web/app/signin/_header.tsx b/web/app/signin/_header.tsx
index d2e3236d1d..6100d1320e 100644
--- a/web/app/signin/_header.tsx
+++ b/web/app/signin/_header.tsx
@@ -7,14 +7,14 @@ import Divider from '@/app/components/base/divider'
 import { languages } from '@/i18n/language'
 import type { Locale } from '@/i18n'
 import I18n from '@/context/i18n'
-import LogoSite from '@/app/components/base/logo/logo-site'
+import DifyLogo from '@/app/components/base/logo/dify-logo'
 
 const Header = () => {
   const { locale, setLocaleOnClient } = useContext(I18n)
 
   return (
     <div className='flex w-full items-center justify-between p-6'>
-      <LogoSite />
+      <DifyLogo size='large' />
       <div className='flex items-center gap-1'>
         <Select
           value={locale}
diff --git a/web/public/logo/logo-monochrome-white.png b/web/public/logo/logo-monochrome-white.png
new file mode 100644
index 0000000000000000000000000000000000000000..3b71226313d9eacd2db1dfe13d1210a83b7cf689
GIT binary patch
literal 1090
zcmb7@`7@jc9LB$|cdh$K;x1xK49UikG?BK*%dW7Rk<Hp@8LYFdIHGh|74pg=O<Y@X
zB(}r464nqg&M3Qa6<ha^#!)2VE{!;XqWdrOnR%Yi%=4Y^kI#L&i=&dfjywP;(VVCZ
z2}KgS$)b|1vIz>7;3EAh(?P<c|F8G{UH?ixkNwDSafJdO1L3qPw$8=FE$9Q)8C`C%
zV*sdtMzv$I$47ZnImHI5iM%^V+WP}mlzG$+m0_^tJFdMPF|51)@c2!O!llx@pNv~7
z^BXsI%bDY4=EVg9ra^0Zx&}{*)3$!p)ih~(Rg4V#L#TV`qM`PVPFB_Uoz~?5;QH=&
za~DXVln^mV8IO2z895bMLDn-k2Gm7uTJBc<kkA_TbkxPmbskw6`#@J2i6eN+$MJel
zei{*(oB}6{08(5xl6oQ}(6_R~S?bTWir~Q^v$_S5E2Y)s>%?=fPO6~%yY?ft<)xFn
za<U3OjH{Lj9nS{0+wGt;V{fhNO8%bS_CKJx#}je4o!#VlitLlf&x0V#R8Hd>EAz+_
z&MCMctoeHop2nI-*<v|gTRbB7!3Tsch;gz~KeVc3^)6HdaY;q|YXV+VnGZbjV0@X!
z*!nmowtt-cU9>W$-BF{8v%a{Z)G4chB_9%?J4z~)oaQNIVLfLA{P>nA?i+;uTscM?
zAEqqrnGucgB%UE)%QdB*jR0Ctm3e9y9uqc2?Ue5B95n(FWw+Pv3<|L{DY!JWU6dqa
z3E>gNT3Dm(TI}_H>2IFfd6^i3x%14;hPvVmUsS8B5Pcg-56KC2XclVl|Dm5BS(#R#
zvrTI2eUDNQKf^(3tpQYa1K6ZjFmVMbQUs5{q|3s_NAO8V00ZRAn0mHqr)rF_vij`V
z*ZT62nGg`1(0`Yc{HE3f6Z}#4QmAx5F(lyG^_c?26Hq+Jp(5RW{E5OF;8U{XrDeb}
z+tq=Ozn^XcedmTe4pF&&4hAXfc41GSfyt#CzYs(Y(+M2FEfHs3k+3rdqHnFTy|kdA
zQkD_}I^KR_gnw_W%`QO!H}9z>gYL7E4|J=;%mMA|u*tO<a8zUWod)`gv4ZavHAU?y
zVaJJ>iVdkF_4X+C6*|)v?Kecmx!#nQoMD(P>$y#w=@S&}NAQ2uL@|}ZRjc?}nx6l%
z$NB9P;$E%{rZO9}?sT*PiTaFoR`YM_V561{pANMEqKlz$aj*{-Nf)-?tv4fslrvDh
zc6cDUY^np#rf^PDJyxn-{eiQ#PGDoHCZ%}~Ojr6d@Y+4^q`%zLOLymbP4iq<CT`h3
zd3e?;;q{z2(66{DATxG?@a@o2>%bD9h!?suWq$rFO#op<7npsad`(d;&q9jqx|IQ8
mrRAH%>XQ5UECSoJ{z!%_&N0q;XVfm4G|(Jes8#kpcmD(bOZztf

literal 0
HcmV?d00001

diff --git a/web/public/logo/logo-monochrome-white.svg b/web/public/logo/logo-monochrome-white.svg
new file mode 100644
index 0000000000..9a166ba6d8
--- /dev/null
+++ b/web/public/logo/logo-monochrome-white.svg
@@ -0,0 +1,12 @@
+<svg width="48" height="22" viewBox="0 0 48 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="White=True">
+<g id="if">
+<path d="M21.2002 4.0695C22.5633 4.0695 23.0666 3.23413 23.0666 2.20309C23.0666 1.17204 22.5623 0.33667 21.2002 0.33667C19.838 0.33667 19.3337 1.17204 19.3337 2.20309C19.3337 3.23413 19.838 4.0695 21.2002 4.0695Z" fill="white"/>
+<path d="M27.7336 4.46931V5.66969H24.6668V8.33667H27.7336V15.0037H22.6668V5.67063H15.9998V8.33761H19.7336V15.0046H15.3337V17.6716H35.3337V15.0046H30.6668V8.33761H35.3337V5.67063H30.6668V3.00365H35.3337V0.33667H31.8671C29.5877 0.33667 27.7336 2.19086 27.7336 4.47025V4.46931Z" fill="white"/>
+</g>
+<g id="Dy">
+<path d="M5.66698 0.335902H0V17.6689H5.66698C12.667 17.6689 14.667 13.6689 14.667 9.00194C14.667 4.33496 12.667 0.334961 5.66698 0.334961V0.335902ZM5.73377 15.0029H3.20038V3.00288H5.73377C9.75823 3.00288 11.4666 4.97842 11.4666 9.00288C11.4666 13.0273 9.75823 15.0029 5.73377 15.0029Z" fill="white"/>
+<path d="M44.8335 5.66986L42.1665 14.3368L39.4995 5.66986H36.333L40.2013 16.8815C40.604 18.049 39.9229 19.0029 38.6886 19.0029H37.333V21.6699H39.3255C41.063 21.6699 42.6265 20.5711 43.2145 18.9361L48 5.66986H44.8335Z" fill="white"/>
+</g>
+</g>
+</svg>
diff --git a/web/public/logo/logo.png b/web/public/logo/logo.png
deleted file mode 100644
index 0e77ae481423960a9199a093bf49f65ee9abc35a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6249
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
T*BNv-00000NkvXXu0mjf=atdo

diff --git a/web/public/logo/logo.svg b/web/public/logo/logo.svg
new file mode 100644
index 0000000000..52ed710f52
--- /dev/null
+++ b/web/public/logo/logo.svg
@@ -0,0 +1,12 @@
+<svg width="48" height="22" viewBox="0 0 48 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="White=False">
+<g id="if">
+<path d="M21.2002 3.73454C22.5633 3.73454 23.0666 2.89917 23.0666 1.86812C23.0666 0.837081 22.5623 0.00170898 21.2002 0.00170898C19.838 0.00170898 19.3337 0.837081 19.3337 1.86812C19.3337 2.89917 19.838 3.73454 21.2002 3.73454Z" fill="#0033FF"/>
+<path d="M27.7336 4.13435V5.33473H24.6668V8.00171H27.7336V14.6687H22.6668V5.33567H15.9998V8.00265H19.7336V14.6696H15.3337V17.3366H35.3337V14.6696H30.6668V8.00265H35.3337V5.33567H30.6668V2.66869H35.3337V0.00170898H31.8671C29.5877 0.00170898 27.7336 1.8559 27.7336 4.13529V4.13435Z" fill="#0033FF"/>
+</g>
+<g id="Dy">
+<path d="M5.66698 0.000940576H0V17.334H5.66698C12.667 17.334 14.667 13.334 14.667 8.66698C14.667 4 12.667 0 5.66698 0V0.000940576ZM5.73377 14.6679H3.20038V2.66792H5.73377C9.75823 2.66792 11.4666 4.64346 11.4666 8.66792C11.4666 12.6924 9.75823 14.6679 5.73377 14.6679Z" fill="black"/>
+<path d="M44.8335 5.3349L42.1665 14.0019L39.4995 5.3349H36.333L40.2013 16.5466C40.604 17.714 39.9229 18.6679 38.6886 18.6679H37.333V21.3349H39.3255C41.063 21.3349 42.6265 20.2361 43.2145 18.6011L48 5.3349H44.8335Z" fill="black"/>
+</g>
+</g>
+</svg>