refine: improve provider card UI with compact action buttons and simplified link styling
- Convert edit and usage buttons to icon-only ghost variant for cleaner appearance - Reduce action button padding (px-2) and group spacing (gap-0) for more compact layout - Add red hover effect to delete icon for better visual feedback - Vertically center action buttons with provider info on desktop view - Simplify provider URL link by removing icon and using soft blue color (blue-400/300) - Reduce enable button width from 96px to 80px for better proportions
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { BarChart3, Check, Play, Trash2 } from "lucide-react";
|
||||
import { BarChart3, Check, Edit, Play, Trash2 } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
@@ -28,7 +28,7 @@ export function ProviderActions({
|
||||
onClick={onSwitch}
|
||||
disabled={isCurrent}
|
||||
className={cn(
|
||||
"w-[96px]",
|
||||
"w-20",
|
||||
isCurrent && "text-muted-foreground hover:text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
@@ -45,32 +45,41 @@ export function ProviderActions({
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<Button size="sm" variant="outline" onClick={onEdit}>
|
||||
{t("common.edit")}
|
||||
</Button>
|
||||
<div className="flex items-center gap-0">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={onEdit}
|
||||
title={t("common.edit")}
|
||||
className="px-2 hover:bg-muted"
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={onConfigureUsage}
|
||||
title={t("provider.configureUsage")}
|
||||
>
|
||||
<BarChart3 className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={onConfigureUsage}
|
||||
title={t("provider.configureUsage")}
|
||||
className="px-2 hover:bg-muted"
|
||||
>
|
||||
<BarChart3 className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={onDelete}
|
||||
disabled={isCurrent}
|
||||
className={cn(
|
||||
"hover:text-red-500 hover:bg-red-100 dark:hover:text-red-400 dark:hover:bg-red-500/10",
|
||||
isCurrent &&
|
||||
"text-muted-foreground hover:text-muted-foreground hover:bg-transparent",
|
||||
)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={onDelete}
|
||||
disabled={isCurrent}
|
||||
title={t("common.delete")}
|
||||
className={cn(
|
||||
"px-2 hover:bg-muted hover:text-red-500 dark:hover:text-red-400",
|
||||
isCurrent && "text-muted-foreground hover:text-muted-foreground hover:bg-transparent",
|
||||
)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -96,7 +96,7 @@ export function ProviderCard({
|
||||
"cursor-grabbing border-primary/60 shadow-lg",
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="flex flex-1 items-start gap-3">
|
||||
<button
|
||||
type="button"
|
||||
@@ -127,10 +127,9 @@ export function ProviderCard({
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleOpenWebsite}
|
||||
className="inline-flex items-center gap-1 text-sm text-primary transition-colors hover:underline"
|
||||
className="inline-flex items-center text-sm text-blue-400 transition-colors hover:underline dark:text-blue-300"
|
||||
title={displayUrl}
|
||||
>
|
||||
<Link className="h-3.5 w-3.5" />
|
||||
<span className="truncate">{displayUrl}</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user