fix: displan badge based on workspace plan (#15489)

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

@@ -2,7 +2,7 @@
 
 @layer components {
   .premium-badge {
-    @apply inline-flex justify-center items-center rounded-full border box-border border-[rgba(255,255,255,0.8)] text-white
+    @apply inline-flex justify-center items-center rounded-md border box-border border-white/95 text-white
   }
 
   /* m is for the regular button */

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

@@ -62,7 +62,7 @@ const PremiumBadge: React.FC<PremiumBadgeProps> = ({
       <Highlight
         className={classNames(
           'absolute top-0 opacity-50 hover:opacity-80',
-          size === 's' ? 'h-4.5 w-12' : 'h-6 w-12',
+          size === 's' ? 'h-[18px] w-12' : 'h-6 w-12',
         )}
         style={{
           right: '50%',

web/app/components/header/account-dropdown/workplace-selector/index.tsx

@@ -7,6 +7,8 @@ import cn from '@/utils/classnames'
 import { switchWorkspace } from '@/service/common'
 import { useWorkspacesContext } from '@/context/workspace-context'
 import { ToastContext } from '@/app/components/base/toast'
+import PlanBadge from '../../plan-badge'
+import type { Plan } from '@/app/components/billing/type'
 
 const WorkplaceSelector = () => {
   const { t } = useTranslation()
@@ -69,6 +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} />
                       </div>
                     ))
                   }

web/app/components/header/plan-badge/index.tsx

@@ -20,49 +20,41 @@ const PlanBadge: FC<PlanBadgeProps> = ({ plan, allowHover, size = 'm', sandboxAs
 
   if (!isFetchedPlan) return null
   if (plan === Plan.sandbox && sandboxAsUpgrade) {
-    return <div className='select-none'>
-      <PremiumBadge color='blue' allowHover={allowHover} onClick={onClick}>
-        <SparklesSoft className='flex items-center py-[1px] pl-[3px] w-3.5 h-3.5 text-components-premium-badge-indigo-text-stop-0' />
-        <div className='system-xs-medium'>
-          <span className='p-1'>
-            {t('billing.upgradeBtn.encourageShort')}
-          </span>
-        </div>
-      </PremiumBadge>
-    </div>
+    return <PremiumBadge className='select-none' color='blue' allowHover={allowHover} onClick={onClick}>
+      <SparklesSoft className='flex items-center py-[1px] pl-[3px] w-3.5 h-3.5 text-components-premium-badge-indigo-text-stop-0' />
+      <div className='system-xs-medium'>
+        <span className='p-1'>
+          {t('billing.upgradeBtn.encourageShort')}
+        </span>
+      </div>
+    </PremiumBadge>
   }
   if (plan === Plan.sandbox) {
-    return <div className='select-none'>
-      <PremiumBadge size={size} color='gray' allowHover={allowHover} onClick={onClick}>
-        <div className={classNames(size === 's' ? 'system-2xs-medium-uppercase' : 'system-xs-medium-uppercase')}>
-          <span className='p-1'>
-            {plan}
-          </span>
-        </div>
-      </PremiumBadge>
-    </div>
+    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')}>
+        <span className='p-1'>
+          {plan}
+        </span>
+      </div>
+    </PremiumBadge>
   }
   if (plan === Plan.professional) {
-    return <div className='select-none'>
-      <PremiumBadge size={size} color='blue' allowHover={allowHover} onClick={onClick}>
-        <div className={classNames(size === 's' ? 'system-2xs-medium-uppercase' : 'system-xs-medium-uppercase')}>
-          <span className='p-1'>
-            pro
-          </span>
-        </div>
-      </PremiumBadge>
-    </div>
+    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')}>
+        <span className='p-1'>
+          pro
+        </span>
+      </div>
+    </PremiumBadge>
   }
   if (plan === Plan.team) {
-    return <div className='select-none'>
-      <PremiumBadge size={size} color='indigo' allowHover={allowHover} onClick={onClick}>
-        <div className={classNames(size === 's' ? 'system-2xs-medium-uppercase' : 'system-xs-medium-uppercase')}>
-          <span className='p-1'>
-            {plan}
-          </span>
-        </div>
-      </PremiumBadge>
-    </div>
+    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')}>
+        <span className='p-1'>
+          {plan}
+        </span>
+      </div>
+    </PremiumBadge>
   }
   return null
 }