From d414617f9df6087687bbebc0d12aa42a37ca1fef Mon Sep 17 00:00:00 2001
From: miloschwartz <mschwartz10612@gmail.com>
Date: Fri, 19 Dec 2025 10:45:45 -0500
Subject: [PATCH] add color to product updates

---
 src/components/ProductUpdates.tsx | 99 +++++++++++++++----------------
 1 file changed, 47 insertions(+), 52 deletions(-)

diff --git a/src/components/ProductUpdates.tsx b/src/components/ProductUpdates.tsx
index 9a06de19..630d0800 100644
--- a/src/components/ProductUpdates.tsx
+++ b/src/components/ProductUpdates.tsx
@@ -184,22 +184,20 @@ function ProductUpdatesListPopup({
                 <PopoverTrigger asChild>
                     <div
                         className={cn(
-                            "relative z-1 cursor-pointer block",
-                            "rounded-md border bg-muted p-2 py-3 w-full flex flex-col gap-2 text-sm",
+                            "relative z-1 cursor-pointer block group",
+                            "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",
                             "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">
-                                <BellIcon className="flex-none size-4" />
-                            </div>
+                            <BellIcon className="flex-none size-4 text-primary" />
                             <div className="flex justify-between items-center flex-1">
                                 <p className="font-medium text-start">
                                     {t("productUpdateWhatsNew")}
                                 </p>
                                 <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>
@@ -334,53 +332,50 @@ function NewVersionAvailable({
 
     return (
         <Transition show={open}>
-            <div
-                className={cn(
-                    "relative z-2",
-                    "rounded-md border bg-muted p-2 py-3 w-full flex flex-col gap-2 text-sm",
-                    "transition duration-300 ease-in-out",
-                    "data-closed:opacity-0 data-closed:translate-y-full"
-                )}
-            >
-                {version && (
-                    <>
-                        <div className="flex items-center gap-2">
-                            <div className="rounded-md bg-muted-foreground/20 p-2">
-                                <RocketIcon className="flex-none size-4" />
-                            </div>
-                            <p className="font-medium flex-1">
-                                {t("pangolinUpdateAvailable")}
-                            </p>
-                            <button
-                                className="p-1 cursor-pointer"
-                                onClick={() => {
-                                    setOpen(false);
-                                    onDimiss();
-                                }}
-                            >
-                                <XIcon className="size-4 flex-none" />
-                            </button>
+            {version && (
+                <a
+                    href={version.pangolin.releaseNotes}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    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",
+                        "transition duration-300 ease-in-out",
+                        "data-closed:opacity-0 data-closed:translate-y-full"
+                    )}
+                >
+                    <div className="flex items-center gap-2">
+                        <RocketIcon className="flex-none size-4 text-primary" />
+                        <p className="font-medium flex-1">
+                            {t("pangolinUpdateAvailable")}
+                        </p>
+                        <button
+                            className="p-1 cursor-pointer z-10"
+                            onClick={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                setOpen(false);
+                                onDimiss();
+                            }}
+                        >
+                            <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 className="flex flex-col gap-0.5">
-                            <small className="text-muted-foreground">
-                                {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>
+                    </div>
+                </a>
+            )}
         </Transition>
     );
 }