calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-05-07 04:47:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove the hover effect

Browse Source
This commit is contained in:
Owen
2026-05-05 20:10:14 -07:00
parent 7d67fb9984
commit 62e19a2f4e
1 changed files with 15 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/ShowTrialCard.tsx
View File

@@ -32,9 +32,15 @@ export default function ShowTrialCard({
const now = Date.now();
const remainingMs = trialExpiresAt - now;
const remainingDays = Math.max(0, Math.ceil(remainingMs / (1000 * 60 * 60 * 24)));
const remainingDays = Math.max(
0,
Math.ceil(remainingMs / (1000 * 60 * 60 * 24))
);
const totalMs = TRIAL_DURATION_DAYS * 24 * 60 * 60 * 1000;
const progressPct = Math.min(100, Math.max(0, ((now - (trialExpiresAt - totalMs)) / totalMs) * 100));
const progressPct = Math.min(
100,
Math.max(0, ((now - (trialExpiresAt - totalMs)) / totalMs) * 100)
);
// Inverted: full bar at start, drains to empty as trial ends
const displayPct = 100 - progressPct;
@@ -47,7 +53,7 @@ export default function ShowTrialCard({
<TooltipTrigger asChild>
<Link
href={billingHref}
className="flex items-center justify-center rounded-md p-2 text-muted-foreground hover:text-foreground hover:bg-secondary/80 dark:hover:bg-secondary/50 transition-colors"
className="flex items-center justify-center rounded-md p-2 text-muted-foreground"
>
<ClockIcon className="h-4 w-4 flex-none" />
</Link>
@@ -56,7 +62,9 @@ export default function ShowTrialCard({
<p>
{remainingDays === 0
? t("trialExpired")
: t("trialDaysLeftShort", { days: remainingDays })}
: t("trialDaysLeftShort", {
days: remainingDays
})}
</p>
</TooltipContent>
</Tooltip>
@@ -69,16 +77,13 @@ export default function ShowTrialCard({
href={billingHref}
className={cn(
"group cursor-pointer block",
"rounded-md border bg-secondary p-2 py-3 w-full flex flex-col gap-2 text-sm",
"transition duration-200 ease-in-out hover:bg-secondary/80 dark:hover:bg-secondary/60"
"rounded-md border bg-secondary p-2 py-3 w-full flex flex-col gap-2 text-sm"
)}
>
<div className="flex items-center gap-2">
<ClockIcon className="flex-none size-4 text-muted-foreground" />
<p className="font-medium flex-1 leading-tight">
{remainingDays === 0
? t("trialExpired")
: t("trialActive")}
{remainingDays === 0 ? t("trialExpired") : t("trialActive")}
</p>
</div>
<div className="flex flex-col gap-1.5">
@@ -88,7 +93,7 @@ export default function ShowTrialCard({
? t("trialHasEnded")
: t("trialDaysRemaining", { count: remainingDays })}
</small>
<div className="inline-flex items-center gap-1 text-xs text-muted-foreground group-hover:text-foreground transition-colors">
<div className="inline-flex items-center gap-1 text-xs text-muted-foreground">
<span>{t("trialGoToBilling")}</span>
<ArrowRight className="flex-none size-3" />
</div>