refine: improve MCP panel spacing and add icon consistency

Enhance visual consistency across MCP dialogs with better spacing
and appropriate icons for add/edit actions.

Changes:
- McpFormModal: Use Plus icon for "Add" button, Save icon for "Edit" button
- McpPanel: Balance spacing around server info line (py-4 for info section,
  pb-4 for content area) to create equal visual weight between header and
  server list

The MCP panel now has consistent vertical rhythm with 1rem spacing above
and below the server count info line.
This commit is contained in:
Jason
2025-10-19 10:27:03 +08:00
parent 9fc5555ecf
commit 5253e7ec37
2 changed files with 4 additions and 3 deletions

View File

@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
import { toast } from "sonner";
import {
Save,
Plus,
AlertCircle,
ChevronDown,
ChevronUp,
@@ -663,7 +664,7 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
disabled={saving || (!isEditing && !!idError)}
variant="mcp"
>
<Save size={16} />
{isEditing ? <Save size={16} /> : <Plus size={16} />}
{saving
? t("common.saving")
: isEditing

View File

@@ -131,7 +131,7 @@ const McpPanel: React.FC<McpPanelProps> = ({ open, onOpenChange, appType }) => {
</DialogHeader>
{/* Info Section */}
<div className="flex-shrink-0 px-6">
<div className="flex-shrink-0 px-6 py-4">
<div className="text-sm text-gray-500 dark:text-gray-400">
{t("mcp.serverCount", { count: Object.keys(servers).length })} ·{" "}
{t("mcp.enabledCount", { count: enabledCount })}
@@ -139,7 +139,7 @@ const McpPanel: React.FC<McpPanelProps> = ({ open, onOpenChange, appType }) => {
</div>
{/* Content - Scrollable */}
<div className="flex-1 overflow-y-auto px-6 py-4">
<div className="flex-1 overflow-y-auto px-6 pb-4">
{loading ? (
<div className="text-center py-12 text-gray-500 dark:text-gray-400">
{t("mcp.loading")}