pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-02-08 05:56:38 +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

47
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,31 +332,33 @@ function NewVersionAvailable({
return ( return (
<Transition show={open}> <Transition show={open}>
<div {version && (
<a
href={version.pangolin.releaseNotes}
target="_blank"
rel="noopener noreferrer"
className={cn( className={cn(
"relative z-2", "relative z-2 group cursor-pointer block",
"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"
)} )}
> >
{version && (
<>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="rounded-md bg-muted-foreground/20 p-2"> <RocketIcon className="flex-none size-4 text-primary" />
<RocketIcon className="flex-none size-4" />
</div>
<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) => {
e.preventDefault();
e.stopPropagation();
setOpen(false); setOpen(false);
onDimiss(); onDimiss();
}} }}
> >
<XIcon className="size-4 flex-none" /> <XIcon className="size-3 flex-none opacity-50" />
</button> </button>
</div> </div>
<div className="flex flex-col gap-0.5"> <div className="flex flex-col gap-0.5">
@@ -367,20 +367,15 @@ function NewVersionAvailable({
version: version.pangolin.latestVersion version: version.pangolin.latestVersion
})} })}
</small> </small>
<a <div className="inline-flex items-center gap-1 text-xs">
href={version.pangolin.releaseNotes}
target="_blank"
className="inline-flex items-center gap-1 text-xs font-medium"
>
<span> <span>
{t("pangolinUpdateAvailableReleaseNotes")} {t("pangolinUpdateAvailableReleaseNotes")}
</span> </span>
<ArrowRight className="flex-none size-3" /> <ArrowRight className="flex-none size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-1" />
</div>
</div>
</a> </a>
</div>
</>
)} )}
</div>
</Transition> </Transition>
); );
} }