feat: cleaner popup

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": {

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 {

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>
     );

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);

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}

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;
 

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);
         }
       }