null
/
Pipeline
1
0
Fork 0
Code Issues 15 Pull Requests Packages Projects Releases Wiki Activity

fix(metric-card): update action button rendering and styling for better UX

This commit is contained in:
null 2026-05-22 21:35:30 -05:00
parent 7a29aaac14
commit 463a75fdb7
1 changed files with 20 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/components/git/ForgejoIssueMetricCards.tsx
View File

@ -264,27 +264,6 @@ function MetricCardLink({ card }: { card: MetricCard }) {
</p>
</div>
<div className="flex shrink-0 items-center gap-1.5 pointer-events-auto">
{card.action ? (
<button
type="button"
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
card.action?.onClick();
}}
disabled={card.action.isLoading}
className={cn(
"rounded-lg border p-2 transition hover:scale-105 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--accent)] disabled:cursor-not-allowed disabled:opacity-70",
toneIconClasses[card.tone],
)}
title={card.action.label}
aria-label={card.action.label}
>
<RefreshCw
className={cn("h-4 w-4", card.action.isLoading && "animate-spin")}
/>
</button>
) : null}
<div
className={cn(
"rounded-lg border p-2 transition-transform duration-200 group-hover:scale-110",
@ -297,7 +276,26 @@ function MetricCardLink({ card }: { card: MetricCard }) {
</div>
<div className="relative z-10 mt-4 flex items-center justify-between gap-3 pointer-events-none">
<p className="min-w-0 text-sm text-muted">{card.caption}</p>
<ArrowUpRight className="h-4 w-4 shrink-0 text-muted transition group-hover:text-[color:var(--accent)]" />
{card.action ? (
<button
type="button"
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
card.action?.onClick();
}}
disabled={card.action.isLoading}
className="pointer-events-auto -m-1 rounded-md p-1 text-muted transition hover:text-[color:var(--accent)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--accent)] disabled:cursor-not-allowed disabled:opacity-70"
title={card.action.label}
aria-label={card.action.label}
>
<RefreshCw
className={cn("h-4 w-4 shrink-0", card.action.isLoading && "animate-spin")}
/>
</button>
) : (
<ArrowUpRight className="h-4 w-4 shrink-0 text-muted transition group-hover:text-[color:var(--accent)]" />
)}
</div>
</div>
);