From eb9b256ee812b31d2534fda9965ce9c115c330d6 Mon Sep 17 00:00:00 2001
From: NFish <douxc512@gmail.com>
Date: Wed, 12 Mar 2025 09:49:15 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20remove=20size=20prop=20in=20PlanBadge=20?=
 =?UTF-8?q?component=20because=20UpgradeBtn=20size=20=E2=80=A6=20(#15544)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../header/account-dropdown/index.tsx         | 40 +++++++++----------
 .../workplace-selector/index.tsx              |  2 +-
 .../components/header/plan-badge/index.tsx    | 16 ++++----
 3 files changed, 28 insertions(+), 30 deletions(-)

diff --git a/web/app/components/header/account-dropdown/index.tsx b/web/app/components/header/account-dropdown/index.tsx
index bae936ede3..a8cd48ca91 100644
--- a/web/app/components/header/account-dropdown/index.tsx
+++ b/web/app/components/header/account-dropdown/index.tsx
@@ -106,17 +106,17 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                         )}
                         href='/account'
                         target='_self' rel='noopener noreferrer'>
-                        <RiAccountCircleLine className='size-4 flex-shrink-0 text-text-tertiary' />
-                        <div className='flex-grow system-md-regular text-text-secondary px-1'>{t('common.account.account')}</div>
-                        <RiArrowRightUpLine className='size-[14px] flex-shrink-0 text-text-tertiary' />
+                        <RiAccountCircleLine className='size-4 shrink-0 text-text-tertiary' />
+                        <div className='grow system-md-regular text-text-secondary px-1'>{t('common.account.account')}</div>
+                        <RiArrowRightUpLine className='size-[14px] shrink-0 text-text-tertiary' />
                       </Link>}
                     </Menu.Item>
                     <Menu.Item>
                       {({ active }) => <div className={classNames(itemClassName,
                         active && 'bg-state-base-hover',
                       )} onClick={() => setShowAccountSettingModal({ payload: 'members' })}>
-                        <RiSettings3Line className='size-4 flex-shrink-0 text-text-tertiary' />
-                        <div className='flex-grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.settings')}</div>
+                        <RiSettings3Line className='size-4 shrink-0 text-text-tertiary' />
+                        <div className='grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.settings')}</div>
                       </div>}
                     </Menu.Item>
                   </div>
@@ -130,9 +130,9 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                           locale !== LanguagesSupported[1] ? 'https://docs.dify.ai/' : `https://docs.dify.ai/v/${locale.toLowerCase()}/`
                         }
                         target='_blank' rel='noopener noreferrer'>
-                        <RiBookOpenLine className='flex-shrink-0 size-4 text-text-tertiary' />
-                        <div className='flex-grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.helpCenter')}</div>
-                        <RiArrowRightUpLine className='flex-shrink-0 size-[14px] text-text-tertiary' />
+                        <RiBookOpenLine className='shrink-0 size-4 text-text-tertiary' />
+                        <div className='grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.helpCenter')}</div>
+                        <RiArrowRightUpLine className='shrink-0 size-[14px] text-text-tertiary' />
                       </Link>}
                     </Menu.Item>
                     <Support />
@@ -146,9 +146,9 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                         )}
                         href='https://roadmap.dify.ai'
                         target='_blank' rel='noopener noreferrer'>
-                        <RiMap2Line className='flex-shrink-0 size-4 text-text-tertiary' />
-                        <div className='flex-grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.roadmap')}</div>
-                        <RiArrowRightUpLine className='flex-shrink-0 size-[14px] text-text-tertiary' />
+                        <RiMap2Line className='shrink-0 size-4 text-text-tertiary' />
+                        <div className='grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.roadmap')}</div>
+                        <RiArrowRightUpLine className='shrink-0 size-[14px] text-text-tertiary' />
                       </Link>}
                     </Menu.Item>
                     {systemFeatures.license.status === LicenseStatus.NONE && <Menu.Item>
@@ -156,12 +156,12 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                         className={classNames(itemClassName, 'group justify-between',
                           active && 'bg-state-base-hover',
                         )}
-                        href='https://github.com/langgenius/dify/stargazers'
+                        href='https://github.com/langgenius/dify'
                         target='_blank' rel='noopener noreferrer'>
-                        <RiGithubLine className='flex-shrink-0 size-4 text-text-tertiary' />
-                        <div className='flex-grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.github')}</div>
+                        <RiGithubLine className='shrink-0 size-4 text-text-tertiary' />
+                        <div className='grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.github')}</div>
                         <div className='flex items-center gap-0.5 px-[5px] py-[3px] border border-divider-deep rounded-[5px] bg-components-badge-bg-dimm'>
-                          <RiStarLine className='flex-shrink-0 size-3 text-text-tertiary' />
+                          <RiStarLine className='shrink-0 size-3 text-text-tertiary' />
                           <GithubStar className='system-2xs-medium-uppercase text-text-tertiary' />
                         </div>
                       </Link>}
@@ -172,9 +172,9 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                           {({ active }) => <div className={classNames(itemClassName, 'justify-between',
                             active && 'bg-state-base-hover',
                           )} onClick={() => setAboutVisible(true)}>
-                            <RiInformation2Line className='flex-shrink-0 size-4 text-text-tertiary' />
-                            <div className='flex-grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.about')}</div>
-                            <div className='flex-shrink-0 flex items-center'>
+                            <RiInformation2Line className='shrink-0 size-4 text-text-tertiary' />
+                            <div className='grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.about')}</div>
+                            <div className='shrink-0 flex items-center'>
                               <div className='mr-2 system-xs-regular text-text-tertiary'>{langeniusVersionInfo.current_version}</div>
                               <Indicator color={langeniusVersionInfo.current_version === langeniusVersionInfo.latest_version ? 'green' : 'orange'} />
                             </div>
@@ -190,8 +190,8 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                           active && 'bg-state-base-hover',
                         )}
                       >
-                        <RiLogoutBoxRLine className='flex-shrink-0 size-4 text-text-tertiary' />
-                        <div className='flex-grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.logout')}</div>
+                        <RiLogoutBoxRLine className='shrink-0 size-4 text-text-tertiary' />
+                        <div className='grow system-md-regular text-text-secondary px-1'>{t('common.userProfile.logout')}</div>
                       </div>
                     </div>}
                   </Menu.Item>
diff --git a/web/app/components/header/account-dropdown/workplace-selector/index.tsx b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
index 5fbf59b9c2..fde48a292b 100644
--- a/web/app/components/header/account-dropdown/workplace-selector/index.tsx
+++ b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
@@ -71,7 +71,7 @@ const WorkplaceSelector = () => {
                       <div className='flex py-1 pl-3 pr-2 items-center gap-2 self-stretch hover:bg-state-base-hover rounded-lg' key={workspace.id} onClick={() => handleSwitchWorkspace(workspace.id)}>
                         <div className='flex items-center justify-center w-6 h-6 bg-[#EFF4FF] rounded-md text-xs font-medium text-primary-600'>{workspace.name[0].toLocaleUpperCase()}</div>
                         <div className='line-clamp-1 grow overflow-hidden text-text-secondary text-ellipsis system-md-regular cursor-pointer'>{workspace.name}</div>
-                        <PlanBadge size='s' plan={workspace.plan as Plan} />
+                        <PlanBadge plan={workspace.plan as Plan} />
                       </div>
                     ))
                   }
diff --git a/web/app/components/header/plan-badge/index.tsx b/web/app/components/header/plan-badge/index.tsx
index bbf90bd3e9..07f798a9af 100644
--- a/web/app/components/header/plan-badge/index.tsx
+++ b/web/app/components/header/plan-badge/index.tsx
@@ -1,5 +1,4 @@
 import { useProviderContext } from '@/context/provider-context'
-import classNames from '@/utils/classnames'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { SparklesSoft } from '../../base/icons/src/public/common'
@@ -8,13 +7,12 @@ import { Plan } from '../../billing/type'
 
 type PlanBadgeProps = {
   plan: Plan
-  size?: 's' | 'm'
   allowHover?: boolean
   sandboxAsUpgrade?: boolean
   onClick?: () => void
 }
 
-const PlanBadge: FC<PlanBadgeProps> = ({ plan, allowHover, size = 'm', sandboxAsUpgrade = false, onClick }) => {
+const PlanBadge: FC<PlanBadgeProps> = ({ plan, allowHover, sandboxAsUpgrade = false, onClick }) => {
   const { isFetchedPlan } = useProviderContext()
   const { t } = useTranslation()
 
@@ -30,8 +28,8 @@ const PlanBadge: FC<PlanBadgeProps> = ({ plan, allowHover, size = 'm', sandboxAs
     </PremiumBadge>
   }
   if (plan === Plan.sandbox) {
-    return <PremiumBadge className='select-none' size={size} color='gray' allowHover={allowHover} onClick={onClick}>
-      <div className={classNames(size === 's' ? 'system-2xs-medium-uppercase' : 'system-xs-medium-uppercase')}>
+    return <PremiumBadge className='select-none' size='s' color='gray' allowHover={allowHover} onClick={onClick}>
+      <div className='system-2xs-medium-uppercase'>
         <span className='p-1'>
           {plan}
         </span>
@@ -39,8 +37,8 @@ const PlanBadge: FC<PlanBadgeProps> = ({ plan, allowHover, size = 'm', sandboxAs
     </PremiumBadge>
   }
   if (plan === Plan.professional) {
-    return <PremiumBadge className='select-none' size={size} color='blue' allowHover={allowHover} onClick={onClick}>
-      <div className={classNames(size === 's' ? 'system-2xs-medium-uppercase' : 'system-xs-medium-uppercase')}>
+    return <PremiumBadge className='select-none' size='s' color='blue' allowHover={allowHover} onClick={onClick}>
+      <div className='system-2xs-medium-uppercase'>
         <span className='p-1'>
           pro
         </span>
@@ -48,8 +46,8 @@ const PlanBadge: FC<PlanBadgeProps> = ({ plan, allowHover, size = 'm', sandboxAs
     </PremiumBadge>
   }
   if (plan === Plan.team) {
-    return <PremiumBadge className='select-none' size={size} color='indigo' allowHover={allowHover} onClick={onClick}>
-      <div className={classNames(size === 's' ? 'system-2xs-medium-uppercase' : 'system-xs-medium-uppercase')}>
+    return <PremiumBadge className='select-none' size='s' color='indigo' allowHover={allowHover} onClick={onClick}>
+      <div className='system-2xs-medium-uppercase'>
         <span className='p-1'>
           {plan}
         </span>