feat: update branding (#19719)

Co-authored-by: twwu <twwu@dify.ai>

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}>

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>
           )}

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>
             )}

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>
           )}

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

web/app/components/base/logo/logo-site.tsx

@@ -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

web/app/components/base/premium-badge/index.css

@@ -2,7 +2,7 @@
 
 @layer components {
   .premium-badge {
-    @apply shrink-0 relative inline-flex justify-center items-center rounded-md box-border border border-transparent text-white shadow-xs hover:shadow-lg bg-origin-border overflow-hidden;
+    @apply shrink-0 relative inline-flex justify-center items-center rounded-md box-border border border-transparent text-white shadow-xs hover:shadow-lg bg-origin-border overflow-hidden transition-all duration-100 ease-out;
     background-clip: padding-box, border-box;
   }
   .allowHover {

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' />
                 }
               </>
             )}

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'

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 />}

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>
         )}

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'>

web/app/signin/_header.tsx

@@ -2,19 +2,28 @@
 import React from 'react'
 import { useContext } from 'use-context-selector'
 import Select from '@/app/components/base/select/locale'
-import ThemeSelector from '@/app/components/base/theme-selector'
 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 dynamic from 'next/dynamic'
+
+// Avoid rendering the logo and theme selector on the server
+const DifyLogo = dynamic(() => import('@/app/components/base/logo/dify-logo'), {
+  ssr: false,
+  loading: () => <div className='h-7 w-16 bg-transparent' />,
+})
+const ThemeSelector = dynamic(() => import('@/app/components/base/theme-selector'), {
+  ssr: false,
+  loading: () => <div className='size-8 bg-transparent' />,
+})
 
 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}

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>

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>