From ae616fbaf3d18dbb6ef792a55fe9bbf78fe2d6db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 18 Jan 2026 14:12:20 -0600
Subject: [PATCH] feat: cleaner popup

---
 packages/i18n/strings/en.json                      |  3 ++-
 .../src/components/AvatarCard/index.module.css     |  2 +-
 .../website-ue/src/components/AvatarCard/index.tsx | 14 +++++++++++++-
 .../Button/{index.css => index.module.css}         |  1 +
 .../website-ue/src/components/Button/index.tsx     |  4 ++--
 .../src/components/Dialog/index.module.css         |  5 ++++-
 packages/website-ue/src/components/Footer.astro    |  3 +--
 7 files changed, 24 insertions(+), 8 deletions(-)
 rename packages/website-ue/src/components/Button/{index.css => index.module.css} (95%)

diff --git a/packages/i18n/strings/en.json b/packages/i18n/strings/en.json
index 708cc87a1..8dfac0b41 100644
--- a/packages/i18n/strings/en.json
+++ b/packages/i18n/strings/en.json
@@ -50,7 +50,8 @@
 
   "avatars": {
     "search": "Search avatars...",
-    "no_description": "Avatar has no description."
+    "no_description": "Avatar has no description.",
+    "download": "Download"
   },
 
   "grades": {
diff --git a/packages/website-ue/src/components/AvatarCard/index.module.css b/packages/website-ue/src/components/AvatarCard/index.module.css
index e8492fd97..8318d6475 100644
--- a/packages/website-ue/src/components/AvatarCard/index.module.css
+++ b/packages/website-ue/src/components/AvatarCard/index.module.css
@@ -50,7 +50,7 @@
 
 .details {
   display: flex;
-  gap: var(--space-4);
+  gap: var(--space-5);
   align-items: center;
 
   .preview {
diff --git a/packages/website-ue/src/components/AvatarCard/index.tsx b/packages/website-ue/src/components/AvatarCard/index.tsx
index 426e393e5..d691b85c1 100644
--- a/packages/website-ue/src/components/AvatarCard/index.tsx
+++ b/packages/website-ue/src/components/AvatarCard/index.tsx
@@ -1,14 +1,16 @@
 import { literals } from "@blitzkit/i18n";
 import { Grade } from "@protos/auto_items";
-import { StarFilledIcon } from "@radix-ui/react-icons";
+import { DownloadIcon, StarFilledIcon } from "@radix-ui/react-icons";
 import type { Color } from "../../core/ui/color";
 import { useGameStrings } from "../../hooks/useGameStrings";
 import { useStrings } from "../../hooks/useStrings";
 import type { Avatar } from "../../protos/avatar";
 import type { PropsWithSkeleton } from "../../types/propsWithSkeleton";
 import { Badge } from "../Badge";
+import { Button } from "../Button";
 import { Dialog } from "../Dialog";
 import { InlineSkeleton } from "../InlineSkeleton";
+import { Link } from "../Link";
 import { Skeleton } from "../Skeleton";
 import { Text } from "../Text";
 import styles from "./index.module.css";
@@ -97,6 +99,16 @@ function Details({ avatars }: DetailsProps) {
               strings.avatars.no_description
             )}
           </Text>
+
+          <Link
+            underline="never"
+            href={`/api/avatars/${avatar.name}.webp`}
+            download
+          >
+            <Button>
+              <DownloadIcon /> {strings.avatars.download}
+            </Button>
+          </Link>
         </div>
       </div>
     );
diff --git a/packages/website-ue/src/components/Button/index.css b/packages/website-ue/src/components/Button/index.module.css
similarity index 95%
rename from packages/website-ue/src/components/Button/index.css
rename to packages/website-ue/src/components/Button/index.module.css
index 64526cc88..b6bedc3e6 100644
--- a/packages/website-ue/src/components/Button/index.css
+++ b/packages/website-ue/src/components/Button/index.module.css
@@ -2,6 +2,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: var(--space-2);
 
   border-radius: var(--max-size);
   padding: var(--space-3) var(--space-4);
diff --git a/packages/website-ue/src/components/Button/index.tsx b/packages/website-ue/src/components/Button/index.tsx
index 8f9a60ec4..77c8d7195 100644
--- a/packages/website-ue/src/components/Button/index.tsx
+++ b/packages/website-ue/src/components/Button/index.tsx
@@ -1,7 +1,7 @@
 import type { ComponentProps } from "react";
 import { classNames } from "../../core/ui/classNames";
 import type { Color } from "../../core/ui/color";
-import "./index.css";
+import styles from "./index.module.css";
 
 export interface ButtonProps extends ComponentProps<"button"> {
   color?: Color;
@@ -25,7 +25,7 @@ export function Button({
 }: ButtonProps) {
   return (
     <button
-      className={classNames("button", className)}
+      className={classNames(styles.button, className)}
       data-color={color}
       data-variant={variant}
       data-light-text={color ? LIGHT_TEXT_COLORS.has(color) : undefined}
diff --git a/packages/website-ue/src/components/Dialog/index.module.css b/packages/website-ue/src/components/Dialog/index.module.css
index 7e9c05624..d7c9c9299 100644
--- a/packages/website-ue/src/components/Dialog/index.module.css
+++ b/packages/website-ue/src/components/Dialog/index.module.css
@@ -9,6 +9,7 @@
   left: 0;
   width: 100vw;
   height: 100dvh;
+  overflow-y: scroll;
 
   background-color: var(--black-a9);
   z-index: 1;
@@ -16,12 +17,14 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--space-4);
+  box-sizing: border-box;
 
   .content {
     display: flex;
     flex-direction: column;
     gap: var(--space-4);
+    margin: var(--space-4);
+    box-sizing: border-box;
 
     min-width: 25rem;
 
diff --git a/packages/website-ue/src/components/Footer.astro b/packages/website-ue/src/components/Footer.astro
index 112f69834..5d0d9b0da 100644
--- a/packages/website-ue/src/components/Footer.astro
+++ b/packages/website-ue/src/components/Footer.astro
@@ -31,7 +31,7 @@ const strings = await api.strings(locale);
       .logo {
         display: flex;
         align-items: center;
-        justify-content: space-between;
+        gap: var(--space-4);
 
         .icon {
           width: var(--space-6);
@@ -41,7 +41,6 @@ const strings = await api.strings(locale);
         .info {
           display: flex;
           flex-direction: column;
-          align-items: end;
           gap: var(--space-1);
         }
       }