From ed83f5f1ca88f30021de3e2651d9fbe67bd933a5 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Tue, 11 Mar 2025 14:58:06 +0800
Subject: [PATCH] EDU badge

---
 web/app/account/account-page/index.tsx        | 13 ++-
 web/app/account/avatar.tsx                    | 14 ++-
 web/app/account/header.tsx                    |  2 +-
 .../components/base/premium-badge/index.css   |  2 +-
 .../billing/header-billing-btn/index.tsx      | 60 ------------
 .../header/account-dropdown/index.tsx         | 98 ++++++++++---------
 .../workplace-selector/index.tsx              |  4 +
 web/app/components/header/index.tsx           |  8 +-
 .../components/header/plan-badge/index.tsx    | 12 ++-
 9 files changed, 91 insertions(+), 122 deletions(-)
 delete mode 100644 web/app/components/billing/header-billing-btn/index.tsx

diff --git a/web/app/account/account-page/index.tsx b/web/app/account/account-page/index.tsx
index 16d826a7c2..30b781c606 100644
--- a/web/app/account/account-page/index.tsx
+++ b/web/app/account/account-page/index.tsx
@@ -1,7 +1,9 @@
 'use client'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-
+import {
+  RiGraduationCapFill,
+} from '@remixicon/react'
 import { useContext } from 'use-context-selector'
 import DeleteAccount from '../delete-account'
 import s from './index.module.css'
@@ -16,6 +18,7 @@ import { ToastContext } from '@/app/components/base/toast'
 import AppIcon from '@/app/components/base/app-icon'
 import { IS_CE_EDITION } from '@/config'
 import Input from '@/app/components/base/input'
+import PremiumBadge from '@/app/components/base/premium-badge'
 
 const titleClassName = `
   system-sm-semibold text-text-secondary
@@ -135,7 +138,13 @@ export default function AccountPage() {
       <div className='mb-8 p-6 rounded-xl flex items-center bg-gradient-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1'>
         <AvatarWithEdit avatar={userProfile.avatar_url} name={userProfile.name} onSave={ mutateUserProfile } size={64} />
         <div className='ml-4'>
-          <p className='system-xl-semibold text-text-primary'>{userProfile.name}</p>
+          <p className='system-xl-semibold text-text-primary'>
+            {userProfile.name}
+            <PremiumBadge size='s' color='blue' className='ml-1 !px-2'>
+              <RiGraduationCapFill className='w-3 h-3 mr-1' />
+              <span className='system-2xs-medium'>EDU</span>
+            </PremiumBadge>
+          </p>
           <p className='system-xs-regular text-text-tertiary'>{userProfile.email}</p>
         </div>
       </div>
diff --git a/web/app/account/avatar.tsx b/web/app/account/avatar.tsx
index bd9cbec4c4..c3568a66a5 100644
--- a/web/app/account/avatar.tsx
+++ b/web/app/account/avatar.tsx
@@ -2,13 +2,17 @@
 import { useTranslation } from 'react-i18next'
 import { Fragment } from 'react'
 import { useRouter } from 'next/navigation'
+import {
+  RiGraduationCapFill,
+} from '@remixicon/react'
 import { Menu, Transition } from '@headlessui/react'
 import Avatar from '@/app/components/base/avatar'
 import { logout } from '@/service/common'
 import { useAppContext } from '@/context/app-context'
 import { LogOut01 } from '@/app/components/base/icons/src/vender/line/general'
+import PremiumBadge from '@/app/components/base/premium-badge'
 
-export interface IAppSelector {
+export type IAppSelector = {
   isMobile: boolean
 }
 
@@ -68,7 +72,13 @@ export default function AppSelector() {
                   <div className='p-1'>
                     <div className='flex flex-nowrap items-center px-3 py-2'>
                       <div className='grow'>
-                        <div className='system-md-medium text-text-primary break-all'>{userProfile.name}</div>
+                        <div className='system-md-medium text-text-primary break-all'>
+                          {userProfile.name}
+                          <PremiumBadge size='s' color='blue' className='ml-1 !px-2'>
+                            <RiGraduationCapFill className='w-3 h-3 mr-1' />
+                            <span className='system-2xs-medium'>EDU</span>
+                          </PremiumBadge>
+                        </div>
                         <div className='system-xs-regular text-text-tertiary break-all'>{userProfile.email}</div>
                       </div>
                       <Avatar avatar={userProfile.avatar_url} name={userProfile.name} size={32} />
diff --git a/web/app/account/header.tsx b/web/app/account/header.tsx
index 694533e5ab..006e82372b 100644
--- a/web/app/account/header.tsx
+++ b/web/app/account/header.tsx
@@ -22,7 +22,7 @@ const Header = () => {
         <div className='w-[1px] h-4 bg-divider-regular' />
         <p className='text-text-primary title-3xl-semi-bold'>{t('common.account.account')}</p>
       </div>
-      <div className='flex items-center flex-shrink-0 gap-3'>
+      <div className='flex items-center shrink-0 gap-3'>
         <Button className='gap-2 py-2 px-3 system-sm-medium' onClick={back}>
           <RiRobot2Line className='w-4 h-4' />
           <p>{t('common.account.studio')}</p>
diff --git a/web/app/components/base/premium-badge/index.css b/web/app/components/base/premium-badge/index.css
index be8f9e6ae6..a2ee1c262d 100644
--- a/web/app/components/base/premium-badge/index.css
+++ b/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-[6px] border box-border border-[rgba(255,255,255,0.8)] text-white
   }
 
   /* m is for the regular button */
diff --git a/web/app/components/billing/header-billing-btn/index.tsx b/web/app/components/billing/header-billing-btn/index.tsx
deleted file mode 100644
index a5bc310d9b..0000000000
--- a/web/app/components/billing/header-billing-btn/index.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import React from 'react'
-import UpgradeBtn from '../upgrade-btn'
-import { Plan } from '../type'
-import cn from '@/utils/classnames'
-import { useProviderContext } from '@/context/provider-context'
-
-type Props = {
-  onClick?: () => void
-  isDisplayOnly?: boolean
-}
-
-const HeaderBillingBtn: FC<Props> = ({
-  onClick,
-  isDisplayOnly = false,
-}) => {
-  const { plan, enableBilling, isFetchedPlan } = useProviderContext()
-  const {
-    type,
-  } = plan
-
-  const name = (() => {
-    if (type === Plan.professional)
-      return 'pro'
-    return type
-  })()
-  const classNames = (() => {
-    if (type === Plan.professional)
-      return `border-[#E0F2FE] ${!isDisplayOnly ? 'hover:border-[#B9E6FE]' : ''} bg-[#E0F2FE] text-[#026AA2]`
-    if (type === Plan.team)
-      return `border-[#E0EAFF] ${!isDisplayOnly ? 'hover:border-[#C7D7FE]' : ''} bg-[#E0EAFF] text-[#3538CD]`
-    return ''
-  })()
-
-  if (!enableBilling || !isFetchedPlan)
-    return null
-
-  if (type === Plan.sandbox)
-    return <UpgradeBtn onClick={isDisplayOnly ? undefined : onClick} isShort />
-
-  const handleClick = () => {
-    if (!isDisplayOnly && onClick)
-      onClick()
-  }
-
-  return (
-    <div
-      onClick={handleClick}
-      className={cn(
-        classNames,
-        'flex items-center h-[22px] px-2 rounded-md border text-xs font-semibold uppercase',
-        isDisplayOnly ? 'cursor-default' : 'cursor-pointer',
-      )}
-    >
-      {name}
-    </div>
-  )
-}
-export default React.memo(HeaderBillingBtn)
diff --git a/web/app/components/header/account-dropdown/index.tsx b/web/app/components/header/account-dropdown/index.tsx
index bae936ede3..7e993085ca 100644
--- a/web/app/components/header/account-dropdown/index.tsx
+++ b/web/app/components/header/account-dropdown/index.tsx
@@ -3,7 +3,18 @@ import { useTranslation } from 'react-i18next'
 import { Fragment, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { useContext, useContextSelector } from 'use-context-selector'
-import { RiAccountCircleLine, RiArrowDownSLine, RiArrowRightUpLine, RiBookOpenLine, RiGithubLine, RiInformation2Line, RiLogoutBoxRLine, RiMap2Line, RiSettings3Line, RiStarLine } from '@remixicon/react'
+import {
+  RiAccountCircleLine,
+  RiArrowRightUpLine,
+  RiBookOpenLine,
+  RiGithubLine,
+  RiGraduationCapFill,
+  RiInformation2Line,
+  RiLogoutBoxRLine,
+  RiMap2Line,
+  RiSettings3Line,
+  RiStarLine,
+} from '@remixicon/react'
 import Link from 'next/link'
 import { Menu, Transition } from '@headlessui/react'
 import Indicator from '../indicator'
@@ -11,7 +22,7 @@ import AccountAbout from '../account-about'
 import GithubStar from '../github-star'
 import Support from './support'
 import Compliance from './compliance'
-import classNames from '@/utils/classnames'
+import PremiumBadge from '@/app/components/base/premium-badge'
 import I18n from '@/context/i18n'
 import Avatar from '@/app/components/base/avatar'
 import { logout } from '@/service/common'
@@ -20,12 +31,9 @@ import { useModalContext } from '@/context/modal-context'
 import { LanguagesSupported } from '@/i18n/language'
 import { LicenseStatus } from '@/types/feature'
 import { IS_CLOUD_EDITION } from '@/config'
+import cn from '@/utils/classnames'
 
-export type IAppSelector = {
-  isMobile: boolean
-}
-
-export default function AppSelector({ isMobile }: IAppSelector) {
+export default function AppSelector() {
   const itemClassName = `
     flex items-center w-full h-9 pl-3 pr-2 text-text-secondary system-md-regular
     rounded-lg hover:bg-state-base-hover cursor-pointer gap-1
@@ -58,20 +66,8 @@ export default function AppSelector({ isMobile }: IAppSelector) {
         {
           ({ open }) => (
             <>
-              <Menu.Button
-                className={`
-                    inline-flex items-center
-                    rounded-[20px] py-1 pr-2.5 pl-1 text-sm
-                  text-text-secondary hover:bg-state-base-hover
-                    mobile:px-1
-                    ${open && 'bg-state-base-hover'}
-                  `}
-              >
-                <Avatar avatar={userProfile.avatar_url} name={userProfile.name} className='sm:mr-2 mr-0' size={32} />
-                {!isMobile && <>
-                  {userProfile.name}
-                  <RiArrowDownSLine className="w-3 h-3 ml-1 text-text-tertiary" />
-                </>}
+              <Menu.Button className={cn('inline-flex items-center rounded-[20px] p-0.5 hover:bg-background-default-dodge', open && 'bg-background-default-dodge')}>
+                <Avatar avatar={userProfile.avatar_url} name={userProfile.name} size={36} />
               </Menu.Button>
               <Transition
                 as={Fragment}
@@ -92,7 +88,13 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                   <Menu.Item disabled>
                     <div className='flex flex-nowrap items-center pl-3 pr-2 py-[13px]'>
                       <div className='grow'>
-                        <div className='system-md-medium text-text-primary break-all'>{userProfile.name}</div>
+                        <div className='system-md-medium text-text-primary break-all'>
+                          {userProfile.name}
+                          <PremiumBadge size='s' color='blue' className='ml-1 !px-2'>
+                            <RiGraduationCapFill className='w-3 h-3 mr-1' />
+                            <span className='system-2xs-medium'>EDU</span>
+                          </PremiumBadge>
+                        </div>
                         <div className='system-xs-regular text-text-tertiary break-all'>{userProfile.email}</div>
                       </div>
                       <Avatar avatar={userProfile.avatar_url} name={userProfile.name} size={36} className='mr-3' />
@@ -101,38 +103,38 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                   <div className="px-1 py-1">
                     <Menu.Item>
                       {({ active }) => <Link
-                        className={classNames(itemClassName, 'group',
+                        className={cn(itemClassName, 'group',
                           active && 'bg-state-base-hover',
                         )}
                         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 }) => <div className={cn(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>
                   <div className='p-1'>
                     <Menu.Item>
                       {({ active }) => <Link
-                        className={classNames(itemClassName, 'group justify-between',
+                        className={cn(itemClassName, 'group justify-between',
                           active && 'bg-state-base-hover',
                         )}
                         href={
                           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 />
@@ -141,27 +143,27 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                   <div className='p-1'>
                     <Menu.Item>
                       {({ active }) => <Link
-                        className={classNames(itemClassName, 'group justify-between',
+                        className={cn(itemClassName, 'group justify-between',
                           active && 'bg-state-base-hover',
                         )}
                         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>
                       {({ active }) => <Link
-                        className={classNames(itemClassName, 'group justify-between',
+                        className={cn(itemClassName, 'group justify-between',
                           active && 'bg-state-base-hover',
                         )}
                         href='https://github.com/langgenius/dify/stargazers'
                         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>}
@@ -169,12 +171,12 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                     {
                       document?.body?.getAttribute('data-public-site-about') !== 'hide' && (
                         <Menu.Item>
-                          {({ active }) => <div className={classNames(itemClassName, 'justify-between',
+                          {({ active }) => <div className={cn(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>
@@ -186,12 +188,12 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                   <Menu.Item>
                     {({ active }) => <div className='p-1' onClick={() => handleLogout()}>
                       <div
-                        className={classNames(itemClassName, 'group justify-between',
+                        className={cn(itemClassName, 'group justify-between',
                           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 070190267a..70296a435f 100644
--- a/web/app/components/header/account-dropdown/workplace-selector/index.tsx
+++ b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
@@ -4,14 +4,17 @@ import { useTranslation } from 'react-i18next'
 import { Menu, Transition } from '@headlessui/react'
 import { RiArrowDownSLine } from '@remixicon/react'
 import cn from '@/utils/classnames'
+import PlanBadge from '@/app/components/header/plan-badge'
 import { switchWorkspace } from '@/service/common'
 import { useWorkspacesContext } from '@/context/workspace-context'
+import { useProviderContext } from '@/context/provider-context'
 import { ToastContext } from '@/app/components/base/toast'
 
 const WorkplaceSelector = () => {
   const { t } = useTranslation()
   const { notify } = useContext(ToastContext)
   const { workspaces } = useWorkspacesContext()
+  const { enableBilling } = useProviderContext()
   const currentWorkspace = workspaces.find(v => v.current)
 
   const handleSwitchWorkspace = async (tenant_id: string) => {
@@ -69,6 +72,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>
+                        {enableBilling && <PlanBadge size='s' plan={workspace.plan as any} />}
                       </div>
                     ))
                   }
diff --git a/web/app/components/header/index.tsx b/web/app/components/header/index.tsx
index 2170a73eba..c2568f9219 100644
--- a/web/app/components/header/index.tsx
+++ b/web/app/components/header/index.tsx
@@ -68,7 +68,7 @@ const Header = () => {
               <WorkspaceProvider>
                 <WorkplaceSelector />
               </WorkspaceProvider>
-              {enableBilling ? <PlanBadge allowHover sandboxAsUpgrade plan={plan.type} onClick={handlePlanClick} /> : <LicenseNav />}
+              {enableBilling ? <PlanBadge size='s' allowHover sandboxAsUpgrade plan={plan.type} onClick={handlePlanClick} /> : <LicenseNav />}
             </div>
           </div>
         }
@@ -79,7 +79,7 @@ const Header = () => {
             <LogoSite />
           </Link>
           <div className='font-light text-divider-deep'>/</div>
-          {enableBilling ? <PlanBadge allowHover sandboxAsUpgrade plan={plan.type} onClick={handlePlanClick} /> : <LicenseNav />}
+          {enableBilling ? <PlanBadge size='s' allowHover sandboxAsUpgrade plan={plan.type} onClick={handlePlanClick} /> : <LicenseNav />}
         </div >
       )}
       {
@@ -94,10 +94,10 @@ const Header = () => {
       }
       <div className='flex items-center shrink-0'>
         <EnvNav />
-        <div className='mr-3'>
+        <div className='mr-2'>
           <PluginsNav />
         </div>
-        <AccountDropdown isMobile={isMobile} />
+        <AccountDropdown />
       </div>
       {
         (isMobile && isShowNavMenu) && (
diff --git a/web/app/components/header/plan-badge/index.tsx b/web/app/components/header/plan-badge/index.tsx
index 5068e2da95..57381dd30b 100644
--- a/web/app/components/header/plan-badge/index.tsx
+++ b/web/app/components/header/plan-badge/index.tsx
@@ -2,6 +2,9 @@ import { useProviderContext } from '@/context/provider-context'
 import classNames from '@/utils/classnames'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
+// import {
+//   RiGraduationCapFill,
+// } from '@remixicon/react'
 import { SparklesSoft } from '../../base/icons/src/public/common'
 import PremiumBadge from '../../base/premium-badge'
 import { Plan } from '../../billing/type'
@@ -20,7 +23,7 @@ const PlanBadge: FC<PlanBadgeProps> = ({ plan, allowHover, size = 'm', sandboxAs
 
   if (!isFetchedPlan) return null
   if (plan === Plan.sandbox && sandboxAsUpgrade) {
-    return <div className='select-none'>
+    return <div className='flex 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'>
@@ -32,7 +35,7 @@ const PlanBadge: FC<PlanBadgeProps> = ({ plan, allowHover, size = 'm', sandboxAs
     </div>
   }
   if (plan === Plan.sandbox) {
-    return <div className='select-none'>
+    return <div className='flex 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'>
@@ -43,8 +46,9 @@ const PlanBadge: FC<PlanBadgeProps> = ({ plan, allowHover, size = 'm', sandboxAs
     </div>
   }
   if (plan === Plan.professional) {
-    return <div className='select-none'>
+    return <div className='flex select-none'>
       <PremiumBadge size={size} color='blue' allowHover={allowHover} onClick={onClick}>
+        {/* <RiGraduationCapFill className='w-3 h-3' /> */}
         <div className={classNames(size === 's' ? 'system-2xs-medium-uppercase' : 'system-xs-medium-uppercase')}>
           <span className='p-1'>
             pro
@@ -54,7 +58,7 @@ const PlanBadge: FC<PlanBadgeProps> = ({ plan, allowHover, size = 'm', sandboxAs
     </div>
   }
   if (plan === Plan.team) {
-    return <div className='select-none'>
+    return <div className='flex 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'>