From 5a6cb0d8872eb5a42dd9ad1a435e1aeca2fe316b Mon Sep 17 00:00:00 2001
From: lyzno1 <yuanyouhuilyz@gmail.com>
Date: Thu, 18 Sep 2025 12:42:17 +0800
Subject: [PATCH] feat: enhance API key modal step indicator with active dots
 and improved styling

---
 .../subscription-list/create/common-modal.tsx       | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx
index 9e7e112c0a..a086bb21cf 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx
@@ -31,18 +31,22 @@ enum ApiKeyStep {
 }
 
 const StatusStep = ({ isActive, text }: { isActive: boolean, text: string }) => {
-  return <div className={`system-2xs-semibold-uppercase ${isActive
+  return <div className={`system-2xs-semibold-uppercase flex items-center gap-1 ${isActive
     ? 'text-state-accent-solid'
     : 'text-text-tertiary'}`}>
+    {/* Active indicator dot */}
+    {isActive && (
+      <div className='h-1 w-1 rounded-full bg-state-accent-solid'></div>
+    )}
     {text}
   </div>
 }
 
 const MultiSteps = ({ currentStep }: { currentStep: ApiKeyStep }) => {
   const { t } = useTranslation()
-  return <div className='mb-2 flex w-1/3 items-center gap-2'>
+  return <div className='mb-6 flex w-1/3 items-center gap-2'>
     <StatusStep isActive={currentStep === ApiKeyStep.Verify} text={t('pluginTrigger.modal.steps.verify')} />
-    <div className='h-px w-3 bg-divider-subtle'></div>
+    <div className='h-px w-3 shrink-0 bg-divider-deep'></div>
     <StatusStep isActive={currentStep === ApiKeyStep.Configuration} text={t('pluginTrigger.modal.steps.configuration')} />
   </div>
 }
@@ -213,6 +217,7 @@ export const CommonCreateModal = ({ onClose, createType }: Props) => {
               <BaseForm
                 formSchemas={credentialsSchema}
                 ref={credentialsFormRef}
+                labelClassName='system-sm-medium mb-2 block text-text-primary'
               />
             </div>
           )}
@@ -258,6 +263,7 @@ export const CommonCreateModal = ({ onClose, createType }: Props) => {
           <BaseForm
             formSchemas={parametersSchema}
             ref={parametersFormRef}
+            labelClassName='system-sm-medium mb-2 block text-text-primary'
           />
         )}
         {createType === SupportedCreationMethods.MANUAL && <>
@@ -266,6 +272,7 @@ export const CommonCreateModal = ({ onClose, createType }: Props) => {
               <BaseForm
                 formSchemas={propertiesSchema}
                 ref={propertiesFormRef}
+                labelClassName='system-sm-medium mb-2 block text-text-primary'
               />
             </div>
           )}