pjandro/OmniRoute
1
0
Fork 0
mirror of https://github.com/diegosouzapw/OmniRoute.git synced 2026-07-31 04:12:10 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix(dashboard): make provider card hover visible (was ~invisible 1% opacity) (#4214)

Browse Source 
Integrated into release/v3.8.29 (round 8)
This commit is contained in:
Diego Rodrigues de Sa e Souza
2026-06-18 20:50:14 -03:00
committed by GitHub
parent fe548212a4
commit d055b5b8fc
3 changed files with 44 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/(dashboard)/dashboard/media-providers/[kind]/page.tsx
View File

@@ -71,7 +71,7 @@ export default async function MediaProviderKindPage({ params }: PageProps) {
href={`/dashboard/media-providers/${validKind}/${p.id}`}
className="group"
>
<div className="rounded-xl border border-border bg-bg-card p-3 hover:bg-black/[0.01] dark:hover:bg-white/[0.01] transition-colors cursor-pointer h-full flex flex-col gap-2">
<div className="rounded-xl border border-border bg-bg-card p-3 hover:bg-black/5 dark:hover:bg-white/5 hover:border-primary/40 transition-colors cursor-pointer h-full flex flex-col gap-2">
<div className="flex items-center gap-2">
<div
className="size-7 rounded-lg flex items-center justify-center shrink-0"

2
src/app/(dashboard)/dashboard/providers/components/ProviderCard.tsx
View File

@@ -231,7 +231,7 @@ export default function ProviderCard({
<Link href={`/dashboard/providers/${providerId}`} className="group flex-1 flex flex-col">
<Card
padding="xs"
className={`h-full flex flex-col hover:bg-black/[0.01] dark:hover:bg-white/[0.01] transition-colors cursor-pointer ${allDisabled ? "opacity-50" : ""} ${provider.deprecated ? "opacity-60" : ""}`}
className={`h-full flex flex-col hover:bg-black/5 dark:hover:bg-white/5 hover:border-primary/40 transition-colors cursor-pointer ${allDisabled ? "opacity-50" : ""} ${provider.deprecated ? "opacity-60" : ""}`}
>
<div className="flex flex-col gap-2 h-full">
{/* Row 1 — Identity: icon + full name + risk/category indicators */}

42
tests/unit/card-hover-visible.test.ts Normal file
View File

@@ -0,0 +1,42 @@
import test from "node:test";
import assert from "node:assert/strict";
import { readFileSync } from "node:fs";
import { fileURLToPath } from "node:url";
// Regression guard: provider cards must have a *visible* hover state.
//
// Reported bug: hovering a provider card made it go "transparent / not
// highlighted". Root cause was a 1%-opacity hover (`hover:bg-black/[0.01]` /
// `hover:bg-white/[0.01]`) — effectively invisible. The fix switches both card
// surfaces to the dashboard's dominant, visible hover (`hover:bg-*/5`) plus a
// `hover:border-primary/40` highlight. This pins it so the near-invisible hover
// can't silently come back.
const ROOT = fileURLToPath(new URL("../../", import.meta.url));
const CARD_FILES = [
"src/app/(dashboard)/dashboard/providers/components/ProviderCard.tsx",
"src/app/(dashboard)/dashboard/media-providers/[kind]/page.tsx",
];
for (const rel of CARD_FILES) {
test(`${rel}: card hover is visible, not near-transparent`, () => {
const src = readFileSync(ROOT + rel, "utf8");
assert.ok(
!src.includes("hover:bg-black/[0.01]"),
`${rel} still uses the near-invisible 1% hover (light)`
);
assert.ok(
!src.includes("hover:bg-white/[0.01]"),
`${rel} still uses the near-invisible 1% hover (dark)`
);
assert.ok(
src.includes("hover:bg-black/5") && src.includes("hover:bg-white/5"),
`${rel} should use a visible hover background (hover:bg-*/5)`
);
assert.ok(
src.includes("hover:border-primary/40"),
`${rel} should add a visible hover border highlight`
);
});
}