refine: improve UI consistency and spacing in header and provider cards
- 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
This commit is contained in:
@@ -112,8 +112,8 @@ function App() {
|
|||||||
return (
|
return (
|
||||||
<div className="flex h-screen flex-col bg-gray-50 dark:bg-gray-950">
|
<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">
|
<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 flex-wrap items-center justify-between gap-2">
|
||||||
<div className="flex items-center gap-1.5">
|
<div className="flex items-center gap-1">
|
||||||
<a
|
<a
|
||||||
href="https://github.com/farion1231/cc-switch"
|
href="https://github.com/farion1231/cc-switch"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
@@ -149,7 +149,7 @@ function App() {
|
|||||||
<UpdateBadge onClick={() => setIsSettingsOpen(true)} />
|
<UpdateBadge onClick={() => setIsSettingsOpen(true)} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-wrap items-center gap-3">
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
<AppSwitcher activeApp={activeApp} onSwitch={setActiveApp} />
|
<AppSwitcher activeApp={activeApp} onSwitch={setActiveApp} />
|
||||||
<Button
|
<Button
|
||||||
variant="mcp"
|
variant="mcp"
|
||||||
|
|||||||
@@ -45,35 +45,32 @@ export function ProviderActions({
|
|||||||
)}
|
)}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
<div className="flex items-center gap-0">
|
<div className="flex items-center gap-1">
|
||||||
<Button
|
<Button
|
||||||
size="sm"
|
size="icon"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
onClick={onEdit}
|
onClick={onEdit}
|
||||||
title={t("common.edit")}
|
title={t("common.edit")}
|
||||||
className="px-2 hover:bg-muted"
|
|
||||||
>
|
>
|
||||||
<Edit className="h-4 w-4" />
|
<Edit className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
size="sm"
|
size="icon"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
onClick={onConfigureUsage}
|
onClick={onConfigureUsage}
|
||||||
title={t("provider.configureUsage")}
|
title={t("provider.configureUsage")}
|
||||||
className="px-2 hover:bg-muted"
|
|
||||||
>
|
>
|
||||||
<BarChart3 className="h-4 w-4" />
|
<BarChart3 className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
size="sm"
|
size="icon"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
onClick={isCurrent ? undefined : onDelete}
|
onClick={isCurrent ? undefined : onDelete}
|
||||||
title={t("common.delete")}
|
title={t("common.delete")}
|
||||||
className={cn(
|
className={cn(
|
||||||
"px-2",
|
!isCurrent && "hover:text-red-500 dark:hover:text-red-400",
|
||||||
!isCurrent && "hover:bg-muted hover:text-red-500 dark:hover:text-red-400",
|
|
||||||
isCurrent && "opacity-40 cursor-not-allowed text-muted-foreground",
|
isCurrent && "opacity-40 cursor-not-allowed text-muted-foreground",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -132,7 +132,7 @@ export function ProviderCard({
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={handleOpenWebsite}
|
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}
|
title={displayUrl}
|
||||||
>
|
>
|
||||||
<span className="truncate">{displayUrl}</span>
|
<span className="truncate">{displayUrl}</span>
|
||||||
|
|||||||
Reference in New Issue
Block a user