From 08eed46919ed378ff5ddf5297f8af017c442870f Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Sat, 18 Oct 2025 17:16:13 +0800
Subject: [PATCH] refactor: standardize dialog components to use consistent
 DialogFooter styling

Remove custom styling from DialogFooter components across the application
to ensure consistent appearance and behavior. All dialogs now follow the
unified layout pattern defined in the base Dialog component.

Changes:
- Remove custom className overrides from DialogFooter in:
  - EndpointSpeedTest.tsx
  - CodexQuickWizardModal.tsx
  - CodexCommonConfigModal.tsx
  - ClaudeConfigEditor.tsx
- Fix McpWizardModal content area padding (remove -mx-6 negative margin)
- Fix McpPanel to use DialogFooter component instead of custom div

All dialogs now consistently use:
- DialogHeader: px-6 pt-6 pb-4 with border and background (built-in)
- Content area: flex-1 overflow-y-auto px-6 py-4
- DialogFooter: px-6 pb-6 pt-4 with border and background (built-in)

This ensures proper spacing, alignment, and visual consistency across
all modal dialogs in the application.
---
 src/components/mcp/McpPanel.tsx                           | 8 ++++----
 src/components/mcp/McpWizardModal.tsx                     | 2 +-
 src/components/providers/forms/ClaudeConfigEditor.tsx     | 2 +-
 src/components/providers/forms/CodexCommonConfigModal.tsx | 2 +-
 src/components/providers/forms/CodexQuickWizardModal.tsx  | 2 +-
 src/components/providers/forms/EndpointSpeedTest.tsx      | 2 +-
 6 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/mcp/McpPanel.tsx b/src/components/mcp/McpPanel.tsx
index 4ad2d8e4a..20ff91cfb 100644
--- a/src/components/mcp/McpPanel.tsx
+++ b/src/components/mcp/McpPanel.tsx
@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
@@ -130,7 +131,7 @@ const McpPanel: React.FC<McpPanelProps> = ({ open, onOpenChange, appType }) => {
           </DialogHeader>
 
           {/* Info Section */}
-          <div className="flex-shrink-0 -mt-2">
+          <div className="flex-shrink-0 px-6">
             <div className="text-sm text-gray-500 dark:text-gray-400">
               {t("mcp.serverCount", { count: Object.keys(servers).length })} ·{" "}
               {t("mcp.enabledCount", { count: enabledCount })}
@@ -186,8 +187,7 @@ const McpPanel: React.FC<McpPanelProps> = ({ open, onOpenChange, appType }) => {
             )}
           </div>
 
-          {/* Footer */}
-          <div className="flex-shrink-0 flex items-center justify-end pt-4 border-t border-gray-200 dark:border-gray-800">
+          <DialogFooter>
             <Button
               type="button"
               variant="mcp"
@@ -197,7 +197,7 @@ const McpPanel: React.FC<McpPanelProps> = ({ open, onOpenChange, appType }) => {
               <Check size={16} />
               {t("common.done")}
             </Button>
-          </div>
+          </DialogFooter>
         </DialogContent>
       </Dialog>
 
diff --git a/src/components/mcp/McpWizardModal.tsx b/src/components/mcp/McpWizardModal.tsx
index 43f8e753a..f1e07e31f 100644
--- a/src/components/mcp/McpWizardModal.tsx
+++ b/src/components/mcp/McpWizardModal.tsx
@@ -228,7 +228,7 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
         </DialogHeader>
 
         {/* Content */}
-        <div className="flex-1 overflow-y-auto -mx-6 px-6 space-y-4">
+        <div className="flex-1 overflow-y-auto px-6 py-4 space-y-4">
           {/* Hint */}
           <div className="rounded-lg border border-blue-200 bg-blue-50 p-3 dark:border-blue-800 dark:bg-blue-900/20">
             <p className="text-sm text-blue-800 dark:text-blue-200">
diff --git a/src/components/providers/forms/ClaudeConfigEditor.tsx b/src/components/providers/forms/ClaudeConfigEditor.tsx
index 5fb705e89..fa330e542 100644
--- a/src/components/providers/forms/ClaudeConfigEditor.tsx
+++ b/src/components/providers/forms/ClaudeConfigEditor.tsx
@@ -151,7 +151,7 @@ const ClaudeConfigEditor: React.FC<ClaudeConfigEditorProps> = ({
             )}
           </div>
 
-          <DialogFooter className="px-6 pb-6 pt-4 border-t border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-800 m-0">
+          <DialogFooter>
             <Button type="button" variant="outline" onClick={closeModal}>
               {t("common.cancel")}
             </Button>
diff --git a/src/components/providers/forms/CodexCommonConfigModal.tsx b/src/components/providers/forms/CodexCommonConfigModal.tsx
index 95b68c999..fb1c04107 100644
--- a/src/components/providers/forms/CodexCommonConfigModal.tsx
+++ b/src/components/providers/forms/CodexCommonConfigModal.tsx
@@ -70,7 +70,7 @@ export const CodexCommonConfigModal: React.FC<CodexCommonConfigModalProps> = ({
           )}
         </div>
 
-        <DialogFooter className="px-6 pb-6 pt-4 border-t border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-800 m-0">
+        <DialogFooter>
           <Button type="button" variant="outline" onClick={onClose}>
             {t("common.cancel")}
           </Button>
diff --git a/src/components/providers/forms/CodexQuickWizardModal.tsx b/src/components/providers/forms/CodexQuickWizardModal.tsx
index 9f74a9152..7b3f00fce 100644
--- a/src/components/providers/forms/CodexQuickWizardModal.tsx
+++ b/src/components/providers/forms/CodexQuickWizardModal.tsx
@@ -275,7 +275,7 @@ export const CodexQuickWizardModal: React.FC<CodexQuickWizardModalProps> = ({
           )}
         </div>
 
-        <DialogFooter className="px-6 pb-6 pt-4 border-t border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-800 m-0">
+        <DialogFooter>
           <Button type="button" variant="outline" onClick={handleClose}>
             {t("common.cancel")}
           </Button>
diff --git a/src/components/providers/forms/EndpointSpeedTest.tsx b/src/components/providers/forms/EndpointSpeedTest.tsx
index a0695df07..7f3eaa9a1 100644
--- a/src/components/providers/forms/EndpointSpeedTest.tsx
+++ b/src/components/providers/forms/EndpointSpeedTest.tsx
@@ -609,7 +609,7 @@ const EndpointSpeedTest: React.FC<EndpointSpeedTestProps> = ({
           )}
         </div>
 
-        <DialogFooter className="px-6 pb-6 pt-4 border-t border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-800 m-0">
+        <DialogFooter>
           <Button type="button" onClick={onClose} className="gap-2">
             <Save className="w-4 h-4" />
             {t("common.save")}