Feat: Adjust the style of the mcp dialog #10703 (#10719)

### What problem does this PR solve?

Feat: Adjust the style of the mcp dialog #10703

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/collapse.tsx

@@ -51,8 +51,8 @@ export function Collapse({
       onOpenChange={handleOpenChange}
       disabled={disabled}
     >
-      <CollapsibleTrigger className="w-full">
-        <section className="flex justify-between items-center pb-2">
+      <CollapsibleTrigger className={'w-full'}>
+        <section className="flex justify-between items-center">
           <div className="flex items-center gap-1">
             <IconFontFill
               name={`more`}
@@ -60,12 +60,18 @@ export function Collapse({
                 'rotate-90': !currentOpen,
               })}
             ></IconFontFill>
-            {title}
+            <div
+              className={cn('text-text-secondary', {
+                'text-text-primary': open,
+              })}
+            >
+              {title}
+            </div>
           </div>
           <div>{rightContent}</div>
         </section>
       </CollapsibleTrigger>
-      <CollapsibleContent>{children}</CollapsibleContent>
+      <CollapsibleContent className="pt-2">{children}</CollapsibleContent>
     </Collapsible>
   );
 }

web/src/components/confirm-delete-dialog.tsx

@@ -56,13 +56,13 @@ export function ConfirmDeleteDialog({
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogCancel onClick={onCancel}>
-            {t('common.cancel')}
+            {t('common.no')}
           </AlertDialogCancel>
           <AlertDialogAction
             className="bg-state-error text-text-primary"
             onClick={onOk}
           >
-            {t('common.ok')}
+            {t('common.yes')}
           </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>

web/src/components/ui/dialog.tsx

@@ -73,7 +73,7 @@ const DialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-4',
       className,
     )}
     {...props}

web/src/components/ui/label.tsx

@@ -7,7 +7,7 @@ import * as React from 'react';
 import { cn } from '@/lib/utils';
 
 const labelVariants = cva(
-  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-text-secondary',
 );
 
 const Label = React.forwardRef<