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:
Jason
2025-10-19 21:46:16 +08:00
parent a0cb29d3b2
commit 43ed1c7533
2 changed files with 37 additions and 29 deletions

View File

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