fix: remove size prop in PlanBadge component because UpgradeBtn size … (#15544)

This commit is contained in:
NFish 2025-03-12 09:49:15 +08:00 committed by GitHub
parent 5d8b32a249
commit eb9b256ee8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 28 additions and 30 deletions

View File

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

View File

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

View File

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