feat: more promotion

packages/i18n/strings/en.json

@@ -841,9 +841,9 @@
         "title": "Install the BlitzKit App",
         "new": "NEW",
         "checking": "Checking compatibility...",
-        "incompatible": "Incompatible device.",
-        "incompatible_help": "Try manually.",
-        "install": "Install"
+        "instructions": "Instructions for Apple devices.",
+        "install": "Install",
+        "dismiss": "Dismiss"
       },
 
       "discord": {

packages/website/src/components/BlitzKitTheme/index.tsx

@@ -1,5 +1,5 @@
-import { Theme, type ThemeProps } from '@radix-ui/themes';
-import type { ReactNode } from 'react';
+import { Theme, type ThemeProps } from "@radix-ui/themes";
+import type { ReactNode } from "react";
 
 interface BlitzKitThemeProps extends ThemeProps {
   children: ReactNode;
@@ -13,13 +13,13 @@ export function BlitzKitTheme({
 }: BlitzKitThemeProps) {
   return (
     <Theme
-      style={{ minHeight: 'unset', display: 'contents', ...style }}
+      style={{ minHeight: "unset", display: "contents", ...style }}
       className={`blitzkit-theme ${className}`}
       grayColor="mauve"
       appearance="dark"
       panelBackground="solid"
       radius="full"
-      accentColor="amber"
+      accentColor="indigo"
       suppressHydrationWarning
       suppressContentEditableWarning
       {...props}

packages/website/src/components/PWAPrompter.astro

@@ -1,5 +1,5 @@
 ---
-import { DownloadIcon } from "@radix-ui/react-icons";
+import { Cross1Icon, Cross2Icon, DownloadIcon } from "@radix-ui/react-icons";
 import {
   Badge,
   Box,
@@ -14,13 +14,26 @@ import {
 import { getStrings } from "../core/i18n/getStrings";
 import type { LocaleAcceptorProps } from "../hooks/useLocale";
 
-type Props = LocaleAcceptorProps;
+type Props = LocaleAcceptorProps & {
+  floating?: boolean;
+};
 
-const { locale } = Astro.props;
+const { locale, floating } = Astro.props;
 const strings = getStrings(locale);
 ---
 
 <style>
+  #pwa-prompter[data-floating="true"] {
+    position: fixed;
+    bottom: var(--space-6);
+    right: var(--space-6);
+    z-index: 1;
+  }
+
+  #pwa-prompter[data-floating="true"] .card {
+    box-shadow: var(--shadow-6);
+  }
+
   .pwa-logo {
     width: 6rem;
     height: 6rem;
@@ -35,28 +48,42 @@ const strings = getStrings(locale);
   }
 
   #pwa-install,
-  #pwa-incompatible {
+  #pwa-incompatible,
+  #pwa-prompter[data-floating="true"],
+  #pwa-dismiss {
     display: none;
   }
 
   html.pwa-enabled #pwa-install,
-  html.pwa-disabled #pwa-incompatible {
+  html.pwa-disabled #pwa-incompatible,
+  html.pwa-enabled #pwa-prompter[data-floating="true"],
+  #pwa-prompter[data-floating="true"] #pwa-dismiss {
     display: unset;
   }
+
+  .pwa-actions button {
+    flex: 1;
+  }
 </style>
 
 <script>
   import { pwaInstallHandler } from "pwa-install-handler";
 
   const pwaInstallButton = document.getElementById("pwa-install");
+  const pwaDismissButton = document.getElementById("pwa-dismiss");
+  const pwaPrompter = document.getElementById("pwa-prompter");
 
   pwaInstallButton?.addEventListener("click", () => {
     pwaInstallHandler.install();
   });
+
+  pwaDismissButton?.addEventListener("click", () => {
+    pwaPrompter?.remove();
+  });
 </script>
 
-<Flex justify="center" mt="4">
-  <Card variant="classic">
+<Flex id="pwa-prompter" justify="center" mt="4" data-floating={floating}>
+  <Card variant="classic" className="card">
     <Inset>
       <Flex align="center">
         <Box className="pwa-logo" />
@@ -78,23 +105,30 @@ const strings = getStrings(locale);
             </Text>
           </Flex>
 
-          <Text color="tomato" id="pwa-incompatible">
-            {strings.website.home.pwa.incompatible}{" "}
-            <Link
-              underline="always"
-              target="_blank"
-              href="https://www.cdc.gov/niosh/mining/tools/installpwa.html"
-            >
-              {strings.website.home.pwa.incompatible_help}
-            </Link>
-          </Text>
+          <Link
+            id="pwa-incompatible"
+            trim="end"
+            underline="always"
+            target="_blank"
+            href="https://www.cdc.gov/niosh/mining/tools/installpwa.html"
+          >
+            {strings.website.home.pwa.instructions}
+          </Link>
 
-          <Button id="pwa-install" color="jade">
-            <Flex align="center" gap="1" justify="center">
-              <DownloadIcon />
-              {strings.website.home.pwa.install}
-            </Flex>
-          </Button>
+          <Flex className="pwa-actions" gap="2">
+            <Button id="pwa-dismiss" color="tomato" variant="outline">
+              <Flex align="center" gap="1" justify="center">
+                <Cross2Icon />
+                {strings.website.home.pwa.dismiss}
+              </Flex>
+            </Button>
+            <Button id="pwa-install" color="jade">
+              <Flex align="center" gap="1" justify="center">
+                <DownloadIcon />
+                {strings.website.home.pwa.install}
+              </Flex>
+            </Button>
+          </Flex>
         </Flex>
       </Flex>
     </Inset>

packages/website/src/layouts/BaseLayout.astro

@@ -10,6 +10,7 @@ import LocaleRedirector from "../components/LocaleRedirector.astro";
 import Meta from "../components/Meta.astro";
 import Navbar from "../components/Navbar.astro";
 import PWA from "../components/PWA.astro";
+import PWAPrompter from "../components/PWAPrompter.astro";
 import Servicing from "../components/Servicing.astro";
 import "./base.css";
 
@@ -38,6 +39,12 @@ const locale = Astro.params.locale;
 
   <body class={noNavbar ? "no-navbar" : ""}>
     <BlitzKitTheme>
+      {
+        Astro.routePattern !== "/[...locale]" && (
+          <PWAPrompter {locale} floating />
+        )
+      }
+
       <Flex direction="column" minHeight="100vh">
         <Navbar {integrated} />