calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-05-17 14:34:42 +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 now = Date.now();
const remainingMs = trialExpiresAt - 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 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 // Inverted: full bar at start, drains to empty as trial ends
const displayPct = 100 - progressPct; const displayPct = 100 - progressPct;
@@ -47,7 +53,7 @@ export default function ShowTrialCard({
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Link <Link
href={billingHref} 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" /> <ClockIcon className="h-4 w-4 flex-none" />
</Link> </Link>
@@ -56,7 +62,9 @@ export default function ShowTrialCard({
<p> <p>
{remainingDays === 0 {remainingDays === 0
? t("trialExpired") ? t("trialExpired")
: t("trialDaysLeftShort", { days: remainingDays })} : t("trialDaysLeftShort", {
days: remainingDays
})}
</p> </p>
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
@@ -69,16 +77,13 @@ export default function ShowTrialCard({
href={billingHref} href={billingHref}
className={cn( className={cn(
"group cursor-pointer block", "group cursor-pointer block",
"rounded-md border bg-secondary p-2 py-3 w-full flex flex-col gap-2 text-sm", "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"
)} )}
> >
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<ClockIcon className="flex-none size-4 text-muted-foreground" /> <ClockIcon className="flex-none size-4 text-muted-foreground" />
<p className="font-medium flex-1 leading-tight"> <p className="font-medium flex-1 leading-tight">
{remainingDays === 0 {remainingDays === 0 ? t("trialExpired") : t("trialActive")}
? t("trialExpired")
: t("trialActive")}
</p> </p>
</div> </div>
<div className="flex flex-col gap-1.5"> <div className="flex flex-col gap-1.5">
@@ -88,7 +93,7 @@ export default function ShowTrialCard({
? t("trialHasEnded") ? t("trialHasEnded")
: t("trialDaysRemaining", { count: remainingDays })} : t("trialDaysRemaining", { count: remainingDays })}
</small> </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> <span>{t("trialGoToBilling")}</span>
<ArrowRight className="flex-none size-3" /> <ArrowRight className="flex-none size-3" />
</div> </div>