From 9144014803581f4f4aa71bfa17c42e2d52305113 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Sun, 19 Oct 2025 23:29:13 +0800
Subject: [PATCH] refine: improve UI consistency and spacing in header and
 provider cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Reduce header spacing (gap-4 → gap-2, gap-1.5 → gap-1) for more compact layout
- Unify provider link colors with main title (blue-500/blue-400)
- Standardize action button styles to use size="icon" for consistent hover effects
- Add proper hover backgrounds to provider action buttons matching header buttons
---
 src/App.tsx                                  |  6 +++---
 src/components/providers/ProviderActions.tsx | 13 +++++--------
 src/components/providers/ProviderCard.tsx    |  2 +-
 3 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 3a549c8..e72469b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -112,8 +112,8 @@ function App() {
   return (
     <div className="flex h-screen flex-col bg-gray-50 dark:bg-gray-950">
       <header className="flex-shrink-0 border-b border-gray-200 bg-white px-6 py-4 dark:border-gray-800 dark:bg-gray-900">
-        <div className="flex flex-wrap items-center justify-between gap-4">
-          <div className="flex items-center gap-1.5">
+        <div className="flex flex-wrap items-center justify-between gap-2">
+          <div className="flex items-center gap-1">
             <a
               href="https://github.com/farion1231/cc-switch"
               target="_blank"
@@ -149,7 +149,7 @@ function App() {
             <UpdateBadge onClick={() => setIsSettingsOpen(true)} />
           </div>
 
-          <div className="flex flex-wrap items-center gap-3">
+          <div className="flex flex-wrap items-center gap-2">
             <AppSwitcher activeApp={activeApp} onSwitch={setActiveApp} />
             <Button
               variant="mcp"
diff --git a/src/components/providers/ProviderActions.tsx b/src/components/providers/ProviderActions.tsx
index 025a8e7..b544422 100644
--- a/src/components/providers/ProviderActions.tsx
+++ b/src/components/providers/ProviderActions.tsx
@@ -45,35 +45,32 @@ export function ProviderActions({
         )}
       </Button>
 
-      <div className="flex items-center gap-0">
+      <div className="flex items-center gap-1">
         <Button
-          size="sm"
+          size="icon"
           variant="ghost"
           onClick={onEdit}
           title={t("common.edit")}
-          className="px-2 hover:bg-muted"
         >
           <Edit className="h-4 w-4" />
         </Button>
 
         <Button
-          size="sm"
+          size="icon"
           variant="ghost"
           onClick={onConfigureUsage}
           title={t("provider.configureUsage")}
-          className="px-2 hover:bg-muted"
         >
           <BarChart3 className="h-4 w-4" />
         </Button>
 
         <Button
-          size="sm"
+          size="icon"
           variant="ghost"
           onClick={isCurrent ? undefined : onDelete}
           title={t("common.delete")}
           className={cn(
-            "px-2",
-            !isCurrent && "hover:bg-muted hover:text-red-500 dark:hover:text-red-400",
+            !isCurrent && "hover:text-red-500 dark:hover:text-red-400",
             isCurrent && "opacity-40 cursor-not-allowed text-muted-foreground",
           )}
         >
diff --git a/src/components/providers/ProviderCard.tsx b/src/components/providers/ProviderCard.tsx
index c800129..a457742 100644
--- a/src/components/providers/ProviderCard.tsx
+++ b/src/components/providers/ProviderCard.tsx
@@ -132,7 +132,7 @@ export function ProviderCard({
               <button
                 type="button"
                 onClick={handleOpenWebsite}
-                className="inline-flex items-center text-sm text-blue-400 transition-colors hover:underline dark:text-blue-300"
+                className="inline-flex items-center text-sm text-blue-500 transition-colors hover:underline dark:text-blue-400"
                 title={displayUrl}
               >
                 <span className="truncate">{displayUrl}</span>