From 653917649dc0ab66a403ceb5d63df66f09bf2c0c Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Tue, 19 Mar 2024 16:43:24 +0800
Subject: [PATCH] add beta tag and fix some style

---
 .../components/app/create-app-dialog/appForm.tsx  | 15 +++------------
 .../components/app/create-app-dialog/index.tsx    |  7 +++++--
 web/hooks/use-tab-searchparams.ts                 |  3 ++-
 3 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/web/app/components/app/create-app-dialog/appForm.tsx b/web/app/components/app/create-app-dialog/appForm.tsx
index eee0d0648d..2cb5dcc9f8 100644
--- a/web/app/components/app/create-app-dialog/appForm.tsx
+++ b/web/app/components/app/create-app-dialog/appForm.tsx
@@ -16,8 +16,7 @@ import AppIcon from '@/app/components/base/app-icon'
 import EmojiPicker from '@/app/components/base/emoji-picker'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { AiText, ChatBot, CuteRobot } from '@/app/components/base/icons/src/vender/line/communication'
-// import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
-import { HelpCircle, InfoCircle } from '@/app/components/base/icons/src/vender/line/general'
+import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
 import { Route } from '@/app/components/base/icons/src/vender/line/mapsAndTravel'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
 import { getRedirection } from '@/utils/app-redirection'
@@ -115,11 +114,6 @@ const AppForm = ({
             popupContent={
               <div className='flex flex-col max-w-[320px] leading-[18px] text-xs'>
                 <div className='text-gray-700'>{t('app.newApp.completionDescription')}</div>
-                {/* <div className='w-[298px] h-[0.5px] my-2 bg-[rgba(0,0,0,0.05)]'></div>
-                <div className='flex items-center text-[#dc6803]'>
-                  <AlertTriangle className='w-3 h-3 mr-1'/>
-                  <div>{t('app.newApp.completionWarning')}</div>
-                </div> */}
               </div>
             }
           >
@@ -162,11 +156,6 @@ const AppForm = ({
             popupContent={
               <div className='flex flex-col max-w-[320px] leading-[18px] text-xs'>
                 <div className='text-gray-700'>{t('app.newApp.workflowDescription')}</div>
-                <div className='w-[298px] h-[0.5px] my-2 bg-[rgba(0,0,0,0.05)]'></div>
-                <div className='flex items-center text-indigo-600'>
-                  <InfoCircle className='w-3 h-3 mr-1'/>
-                  <div>{t('app.newApp.workflowWarning')}</div>
-                </div>
               </div>
             }
           >
@@ -182,6 +171,7 @@ const AppForm = ({
             >
               <Route className='w-6 h-6' />
               <div className='h-5 text-sm font-medium leading-5'>{t('app.types.workflow')}</div>
+              <span className='absolute top-[-3px] right-[-3px] px-1 rounded-[5px] bg-white border border-black/8 text-gray-500 text-[10px] leading-[18px] font-medium'>BETA</span>
             </div>
           </TooltipPlus>
         </div>
@@ -223,6 +213,7 @@ const AppForm = ({
               >
                 <HelpCircle className='w-[14px] h-[14px] text-gray-400 hover:text-gray-500' />
               </div>
+              <span className='absolute top-[-11px] left-[8px] px-1 rounded-[5px] bg-white border border-black/8 text-gray-500 text-[10px] leading-[18px] font-medium'>BETA</span>
             </div>
           </div>
         </div>
diff --git a/web/app/components/app/create-app-dialog/index.tsx b/web/app/components/app/create-app-dialog/index.tsx
index 0c9932dd04..2cc4b0b919 100644
--- a/web/app/components/app/create-app-dialog/index.tsx
+++ b/web/app/components/app/create-app-dialog/index.tsx
@@ -56,14 +56,17 @@ const CreateAppDialog = ({ show, onSuccess, onClose }: CreateAppDialogProps) =>
           <>
             <div className={cn('w-full h-[256px] bg-center bg-no-repeat bg-contain', s.advancedPic)}/>
             <div className='px-4 pb-2'>
-              <div className='text-gray-700 text-md leading-6 font-semibold'>{t('app.newApp.advanced')}</div>
+              <div className='flex items-center gap-1 text-gray-700 text-md leading-6 font-semibold'>
+                {t('app.newApp.advanced')}
+                <span className='px-1 rounded-[5px] bg-white border border-black/8 text-gray-500 text-[10px] leading-[18px] font-medium'>BETA</span>
+              </div>
               <div className='text-orange-500 text-xs leading-[18px] font-medium'>{t('app.newApp.advancedFor')}</div>
               <div className='mt-1 text-gray-500 text-sm leading-5'>{t('app.newApp.advancedDescription')}</div>
             </div>
           </>
         )}
       </div>
-      <div className='absolute top-6 left-[505px] w-8 h-8 p-1 bg-white border-2 border-gray-200 rounded-2xl text-xs leading-[20px] font-medium text-gray-500 cursor-default z-20'>OR</div>
+      <div className='absolute top-6 left-[505px] w-8 h-8 p-1 bg-white border-2 border-gray-200 rounded-2xl text-xs leading-[20px] font-medium text-primary-600 cursor-default z-20'>OR</div>
       <div className='absolute right-6 top-6 p-2 cursor-pointer z-20' onClick={onClose}>
         <XClose className='w-4 h-4 text-gray-500' />
       </div>
diff --git a/web/hooks/use-tab-searchparams.ts b/web/hooks/use-tab-searchparams.ts
index ea4854e848..6a665bca5a 100644
--- a/web/hooks/use-tab-searchparams.ts
+++ b/web/hooks/use-tab-searchparams.ts
@@ -34,8 +34,9 @@ export const useTabSearchParams = ({
   )
 
   const setActiveTab = (newActiveTab: string) => {
+    setTab(newActiveTab)
     if (disableSearchParams)
-      return setTab(newActiveTab)
+      return
     router[routingBehavior](`${pathName}?${searchParamName}=${newActiveTab}`)
   }