calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-01-28 22:00:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

add color to product updates

Browse Source
This commit is contained in:
miloschwartz
2025-12-19 10:45:45 -05:00
parent 1d7e55bf98
commit d414617f9d
1 changed files with 47 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/components/ProductUpdates.tsx
View File

@@ -184,22 +184,20 @@ function ProductUpdatesListPopup({
<PopoverTrigger asChild> <PopoverTrigger asChild>
<div <div
className={cn( className={cn(
"relative z-1 cursor-pointer block", "relative z-1 cursor-pointer block group",
"rounded-md border bg-muted p-2 py-3 w-full flex flex-col gap-2 text-sm", "rounded-md border border-primary/30 bg-gradient-to-br dark:from-primary/20 from-primary/20 via-background to-background p-2 py-3 w-full flex flex-col gap-2 text-sm",
"transition duration-300 ease-in-out", "transition duration-300 ease-in-out",
"data-closed:opacity-0 data-closed:translate-y-full" "data-closed:opacity-0 data-closed:translate-y-full"
)} )}
> >
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="rounded-md bg-muted-foreground/20 p-2"> <BellIcon className="flex-none size-4 text-primary" />
<BellIcon className="flex-none size-4" />
</div>
<div className="flex justify-between items-center flex-1"> <div className="flex justify-between items-center flex-1">
<p className="font-medium text-start"> <p className="font-medium text-start">
{t("productUpdateWhatsNew")} {t("productUpdateWhatsNew")}
</p> </p>
<div className="p-1 cursor-pointer"> <div className="p-1 cursor-pointer">
<ChevronRightIcon className="size-4 flex-none opacity-50" /> <ChevronRightIcon className="size-3.5 flex-none opacity-50 transition-transform duration-300 ease-in-out group-hover:translate-x-1" />
</div> </div>
</div> </div>
</div> </div>
@@ -334,53 +332,50 @@ function NewVersionAvailable({
return ( return (
<Transition show={open}> <Transition show={open}>
<div {version && (
className={cn( <a
"relative z-2", href={version.pangolin.releaseNotes}
"rounded-md border bg-muted p-2 py-3 w-full flex flex-col gap-2 text-sm", target="_blank"
"transition duration-300 ease-in-out", rel="noopener noreferrer"
"data-closed:opacity-0 data-closed:translate-y-full" className={cn(
)} "relative z-2 group cursor-pointer block",
> "rounded-md border border-primary/30 bg-gradient-to-br dark:from-primary/20 from-primary/20 via-background to-background p-2 py-3 w-full flex flex-col gap-2 text-sm",
{version && ( "transition duration-300 ease-in-out",
<> "data-closed:opacity-0 data-closed:translate-y-full"
<div className="flex items-center gap-2"> )}
<div className="rounded-md bg-muted-foreground/20 p-2"> >
<RocketIcon className="flex-none size-4" /> <div className="flex items-center gap-2">
</div> <RocketIcon className="flex-none size-4 text-primary" />
<p className="font-medium flex-1"> <p className="font-medium flex-1">
{t("pangolinUpdateAvailable")} {t("pangolinUpdateAvailable")}
</p> </p>
<button <button
className="p-1 cursor-pointer" className="p-1 cursor-pointer z-10"
onClick={() => { onClick={(e) => {
setOpen(false); e.preventDefault();
onDimiss(); e.stopPropagation();
}} setOpen(false);
> onDimiss();
<XIcon className="size-4 flex-none" /> }}
</button> >
<XIcon className="size-3 flex-none opacity-50" />
</button>
</div>
<div className="flex flex-col gap-0.5">
<small className="text-muted-foreground">
{t("pangolinUpdateAvailableInfo", {
version: version.pangolin.latestVersion
})}
</small>
<div className="inline-flex items-center gap-1 text-xs">
<span>
{t("pangolinUpdateAvailableReleaseNotes")}
</span>
<ArrowRight className="flex-none size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-1" />
</div> </div>
<div className="flex flex-col gap-0.5"> </div>
<small className="text-muted-foreground"> </a>
{t("pangolinUpdateAvailableInfo", { )}
version: version.pangolin.latestVersion
})}
</small>
<a
href={version.pangolin.releaseNotes}
target="_blank"
className="inline-flex items-center gap-1 text-xs font-medium"
>
<span>
{t("pangolinUpdateAvailableReleaseNotes")}
</span>
<ArrowRight className="flex-none size-3" />
</a>
</div>
</>
)}
</div>
</Transition> </Transition>
); );
} }