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'
-      />
+      <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,7 +180,19 @@ export default function AccountSetting({
             }
           </div>
         </div>
-        <div ref={scrollRef} className='relative w-[824px] pb-4 bg-components-panel-bg overflow-y-auto'>
+        <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 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>
               {
@@ -209,6 +223,7 @@ export default function AccountSetting({
             </div>
           </div>
         </div>
+      </div>
     </MenuDialog>
   )
 }

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>