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:
Jason
2025-10-19 23:29:13 +08:00
parent 0de818b8b1
commit 9144014803
3 changed files with 9 additions and 12 deletions

View File

@@ -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"

View File

@@ -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",
)} )}
> >

View File

@@ -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>