chore: update the esc button and the upgrade button

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

@@ -53,7 +53,7 @@ const PremiumBadge: React.FC<PremiumBadgeProps> = ({
     <div
       className={classNames(
         PremiumBadgeVariants({ size, color, allowHover, className }),
-        'relative',
+        'relative text-nowrap',
       )}
       style={styleCss}
       {...props}

web/app/components/billing/upgrade-btn/index.tsx

@@ -2,9 +2,8 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { GoldCoin } from '../../base/icons/src/vender/solid/FinanceAndECommerce'
-import { Sparkles } from '../../base/icons/src/public/billing'
-import s from './style.module.css'
+import PremiumBadge from '../../base/premium-badge'
+import { SparklesSoft } from '@/app/components/base/icons/src/public/common'
 import cn from '@/utils/classnames'
 import { useModalContext } from '@/context/modal-context'
 
@@ -36,9 +35,7 @@ const PlainBtn = ({ className, onClick }: { className?: string; onClick: () => v
 const UpgradeBtn: FC<Props> = ({
   className,
   isPlain = false,
-  isFull = false,
   isShort = false,
-  size = 'md',
   onClick: _onClick,
   loc,
 }) => {
@@ -63,22 +60,19 @@ const UpgradeBtn: FC<Props> = ({
     return <PlainBtn onClick={onClick} className={className} />
 
   return (
-    <div
-      className={cn(
-        s.upgradeBtn,
-        className,
-        isFull ? 'justify-center' : 'px-3',
-        size === 'lg' ? 'h-10' : 'h-9',
-        'relative flex items-center cursor-pointer border rounded-[20px] border-[#0096EA] text-white',
-      )}
+    <PremiumBadge
+      size="m"
+      color="blue"
+      allowHover={true}
       onClick={onClick}
     >
-      <GoldCoin className='mr-1 w-3.5 h-3.5' />
-      <div className='text-xs font-normal text-nowrap'>{t(`billing.upgradeBtn.${isShort ? 'encourageShort' : 'encourage'}`)}</div>
-      <Sparkles
-        className='absolute -right-1 -top-2  w-4 h-5 bg-cover'
-      />
-    </div>
+      <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.${isShort ? 'encourageShort' : 'encourage'}`)}
+        </span>
+      </div>
+    </PremiumBadge>
   )
 }
 export default React.memo(UpgradeBtn)

web/app/components/header/account-setting/index.tsx

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from 'react'
 import {
   RiBrain2Fill,
   RiBrain2Line,
+  RiCloseLine,
   RiColorFilterFill,
   RiColorFilterLine,
   RiDatabase2Fill,
@@ -16,6 +17,7 @@ import {
   RiPuzzle2Line,
   RiTranslate2,
 } from '@remixicon/react'
+import Button from '../../base/button'
 import MembersPage from './members-page'
 import LanguagePage from './language-page'
 import ApiBasedExtensionPage from './api-based-extension-page'
@@ -178,34 +180,47 @@ export default function AccountSetting({
             }
           </div>
         </div>
-        <div ref={scrollRef} className='relative w-[824px] pb-4 bg-components-panel-bg overflow-y-auto'>
-          <div className={cn('sticky top-0 mx-8 pt-[27px] pb-2 mb-[18px] flex items-center bg-components-panel-bg z-20', scrolled && 'border-b')}>
-            <div className='shrink-0 text-text-primary title-2xl-semi-bold'>{activeItem?.name}</div>
-            {
-              activeItem?.description && (
-                <div className='shrink-0 ml-2 text-xs text-gray-600'>{activeItem?.description}</div>
-              )
-            }
-            {activeItem?.key === 'provider' && (
-              <div className='grow flex justify-end'>
-                <Input
-                  showLeftIcon
-                  wrapperClassName='!w-[200px]'
-                  className='!h-8 !text-[13px]'
-                  onChange={e => setSearchValue(e.target.value)}
-                  value={searchValue}
-                />
-              </div>
-            )}
+        <div className='relative flex w-[824px]'>
+          <div className='absolute top-6 -right-11 flex flex-col items-center z-[9999]'>
+            <Button
+              variant='tertiary'
+              size='large'
+              className='px-2'
+              onClick={onCancel}
+            >
+              <RiCloseLine className='w-5 h-5' />
+            </Button>
+            <div className='mt-1 text-text-tertiary system-2xs-medium-uppercase'>ESC</div>
           </div>
-          <div className='px-4 sm:px-8 pt-2'>
-            {activeMenu === 'provider' && <ModelProviderPage searchText={searchValue} />}
-            {activeMenu === 'members' && <MembersPage />}
-            {activeMenu === 'billing' && <BillingPage />}
-            {activeMenu === 'data-source' && <DataSourcePage />}
-            {activeMenu === 'api-based-extension' && <ApiBasedExtensionPage />}
-            {activeMenu === 'custom' && <CustomPage />}
-            {activeMenu === 'language' && <LanguagePage />}
+          <div ref={scrollRef} className='w-full pb-4 bg-components-panel-bg overflow-y-auto'>
+            <div className={cn('sticky top-0 mx-8 pt-[27px] pb-2 mb-[18px] flex items-center bg-components-panel-bg z-20', scrolled && 'border-b')}>
+              <div className='shrink-0 text-text-primary title-2xl-semi-bold'>{activeItem?.name}</div>
+              {
+                activeItem?.description && (
+                  <div className='shrink-0 ml-2 text-xs text-gray-600'>{activeItem?.description}</div>
+                )
+              }
+              {activeItem?.key === 'provider' && (
+                <div className='grow flex justify-end'>
+                  <Input
+                    showLeftIcon
+                    wrapperClassName='!w-[200px]'
+                    className='!h-8 !text-[13px]'
+                    onChange={e => setSearchValue(e.target.value)}
+                    value={searchValue}
+                  />
+                </div>
+              )}
+            </div>
+            <div className='px-4 sm:px-8 pt-2'>
+              {activeMenu === 'provider' && <ModelProviderPage searchText={searchValue} />}
+              {activeMenu === 'members' && <MembersPage />}
+              {activeMenu === 'billing' && <BillingPage />}
+              {activeMenu === 'data-source' && <DataSourcePage />}
+              {activeMenu === 'api-based-extension' && <ApiBasedExtensionPage />}
+              {activeMenu === 'custom' && <CustomPage />}
+              {activeMenu === 'language' && <LanguagePage />}
+            </div>
           </div>
         </div>
       </div>

web/app/components/header/account-setting/menu-dialog.tsx

@@ -1,8 +1,6 @@
 import { Fragment, useCallback, useEffect } from 'react'
 import type { ReactNode } from 'react'
-import { RiCloseLine } from '@remixicon/react'
 import { Dialog, Transition } from '@headlessui/react'
-import Button from '@/app/components/base/button'
 import cn from '@/utils/classnames'
 
 type DialogProps = {
@@ -47,18 +45,6 @@ const MenuDialog = ({
               leaveTo="opacity-0 scale-95"
             >
               <Dialog.Panel className={cn('grow relative w-full h-full p-0 overflow-hidden text-left align-middle transition-all transform bg-background-sidenav-bg backdrop-blur-md', className)}>
-                <div className='absolute right-0 top-0 h-full w-1/2 bg-components-panel-bg'/>
-                <div className='absolute top-6 right-6 flex flex-col items-center'>
-                  <Button
-                    variant='tertiary'
-                    size='large'
-                    className='px-2'
-                    onClick={close}
-                  >
-                    <RiCloseLine className='w-5 h-5' />
-                  </Button>
-                  <div className='mt-1 text-text-tertiary system-2xs-medium-uppercase'>ESC</div>
-                </div>
                 {children}
               </Dialog.Panel>
             </Transition.Child>

web/app/components/header/index.tsx

@@ -21,6 +21,7 @@ import WorkplaceSelector from '@/app/components/header/account-dropdown/workplac
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { useProviderContext } from '@/context/provider-context'
 import { useModalContext } from '@/context/modal-context'
+import { useTranslation } from 'react-i18next'
 
 const navClassName = `
   flex items-center relative mr-0 sm:mr-3 px-3 h-8 rounded-xl
@@ -30,6 +31,7 @@ const navClassName = `
 
 const Header = () => {
   const { isCurrentWorkspaceEditor, isCurrentWorkspaceDatasetOperator } = useAppContext()
+  const { t } = useTranslation()
 
   const selectedSegment = useSelectedLayoutSegment()
   const media = useBreakpoints()
@@ -74,7 +76,7 @@ const Header = () => {
                   <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'>
-                      Upgrade
+                      {t('billing.upgradeBtn.encourage')}
                     </span>
                   </div>
                 </PremiumBadge>
@@ -96,7 +98,7 @@ const Header = () => {
                 <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'>
-                    Upgrade
+                    {t('billing.upgradeBtn.encourage')}
                   </span>
                 </div>
               </PremiumBadge>