feat(website): improve download button with icon and platform title

apps/website/src/assets/boxicons/bx-arrow-in-down-square-half.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><!--Boxicons v3.0 https://boxicons.com | License  https://docs.boxicons.com/free--><path d="M11 3v7H7l5 6 5-6h-4V3z"/><path d="M19 19H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2z"/></svg>

apps/website/src/components/Button.css

@@ -6,4 +6,5 @@ a.button {
     color: var(--brand-foreground-color);
     text-decoration: none;
     text-align: center;    
+    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
 }

apps/website/src/components/Button.tsx

@@ -7,12 +7,13 @@ interface ButtonProps {
     iconSvg?: string;
     text: ComponentChildren;
     openExternally?: boolean;
+    className?: string;
 }
 
-export default function Button({ href, iconSvg, openExternally, text }: ButtonProps) {
+export default function Button({ href, iconSvg, openExternally, text, className }: ButtonProps) {
     return (
         <a
-            className="button"
+            className={`button ${className}`}
             href={href}
             target={openExternally ? "_blank" : undefined}
         >

apps/website/src/components/DownloadButton.css

@@ -1,10 +1,4 @@
 .download-button {
-    text-decoration: none;
-    background: var(--brand-1);
-    padding: 0.5em 1em;
-    border-radius: 6px;
-    color: white;
-    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
     display: none;
 }
 

apps/website/src/components/DownloadButton.tsx

@@ -1,17 +1,24 @@
 import { getRecommendedDownload } from "../download-helper";
 import "./DownloadButton.css";
+import Button from "./Button";
+import downloadIcon from "../assets/boxicons/bx-arrow-in-down-square-half.svg?raw";
 
 interface DownloadButtonProps {
     big?: boolean;
 }
 
-const { architecture, platform, url } = getRecommendedDownload();
+const { name, url } = getRecommendedDownload();
 
 export default function DownloadButton({ big }: DownloadButtonProps) {
     return (
-        <a className={`download-button ${big ? "big" : ""}`} href={url}>
+        <Button
+           className={`download-button ${big ? "big" : ""}`}
+           href={url}
+           iconSvg={downloadIcon}
+           text={<>
                 Download now{" "}
-            <span class="platform">{platform} {architecture}</span>
+                <span class="platform">for {name}</span>
-        </a>
+           </>}
+        />
     )
 }

apps/website/src/download-helper.ts

@@ -187,9 +187,13 @@ export function getRecommendedDownload() {
     const format = recommendedDownload?.[0];
     const url = buildDownloadUrl("desktop", platform, format || 'zip', architecture);
 
+    const platformTitle = downloadMatrix.desktop[platform].title;
+    const name = typeof platformTitle === "string" ? platformTitle : platformTitle[architecture];
+
     return {
         architecture,
         platform,
-        url
+        url,
+        name
     }
 }