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.
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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")}
|
||||
|
||||
Reference in New Issue
Block a user