Refresh PWA icons and splash assets

2026-04-23 14:05:51 -05:00
parent 51ac5b2060
commit 7023199981
12 changed files with 112 additions and 18 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3,7 +3,28 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#132238" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <meta name="apple-mobile-web-app-title" content="Walkup" />
+    <link rel="icon" href="/favicon.ico" sizes="any" />
    <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <link
+      rel="apple-touch-startup-image"
+      href="/apple-splash-1125x2436.png"
+      media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/apple-splash-1170x2532.png"
+      media="screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/apple-splash-1290x2796.png"
+      media="screen and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3)"
+    />
    <title>Walkup</title>
  </head>
  <body>
--- a/frontend/public/apple-splash-1125x2436.png
+++ b/frontend/public/apple-splash-1125x2436.png
--- a/frontend/public/apple-splash-1170x2532.png
+++ b/frontend/public/apple-splash-1170x2532.png
--- a/frontend/public/apple-splash-1290x2796.png
+++ b/frontend/public/apple-splash-1290x2796.png
--- a/frontend/public/apple-touch-icon.png
+++ b/frontend/public/apple-touch-icon.png
--- a/frontend/public/favicon.ico
+++ b/frontend/public/favicon.ico
--- a/frontend/public/icon-192.png
+++ b/frontend/public/icon-192.png
--- a/frontend/public/icon-512.png
+++ b/frontend/public/icon-512.png
--- a/frontend/public/icon.svg
+++ b/frontend/public/icon.svg
@@ -1,8 +1,7 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="none">
  <rect width="256" height="256" rx="48" fill="#132238" />
-  <circle cx="128" cy="128" r="80" fill="#F4EDE2"/>
  <path
+    fill="#f4ede2"
    d="M144 70a14 14 0 1 1-28 0a14 14 0 0 1 28 0m-18.8 26.6a9 9 0 0 1 8.6-6.6h15a9 9 0 0 1 7.4 3.9l15.2 22.7a9 9 0 1 1-15 10.1l-10.1-15.1l-4.7 21.6l20.8 18.1a9 9 0 0 1-11.8 13.6L132 148.4l-12.4 20.7V192a9 9 0 1 1-18 0v-25.4a9 9 0 0 1 1.3-4.6l14.1-23.5l4.4-20.3l-8 9.8a9 9 0 0 1-7 3.3H87a9 9 0 1 1 0-18h15.2z"
-    fill="#D94F04"
  />
 </svg>
--- a/frontend/public/splash-art.svg
+++ b/frontend/public/splash-art.svg
@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1290 2796" fill="none">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1290" y2="2796" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#132238" />
+      <stop offset="0.55" stop-color="#18324b" />
+      <stop offset="1" stop-color="#0f1a2a" />
+    </linearGradient>
+    <radialGradient id="glow" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(645 940) rotate(90) scale(600 520)">
+      <stop offset="0" stop-color="#f4ede2" stop-opacity="0.18" />
+      <stop offset="1" stop-color="#f4ede2" stop-opacity="0" />
+    </radialGradient>
+    <filter id="shadow" x="0" y="0" width="1290" height="2796" filterUnits="userSpaceOnUse">
+      <feDropShadow dx="0" dy="42" stdDeviation="46" flood-color="#09111b" flood-opacity="0.42" />
+    </filter>
+  </defs>
+  <rect width="1290" height="2796" fill="url(#bg)" />
+  <circle cx="645" cy="940" r="560" fill="url(#glow)" />
+  <circle cx="200" cy="430" r="220" fill="#d94f04" fill-opacity="0.08" />
+  <circle cx="1090" cy="2260" r="260" fill="#f4ede2" fill-opacity="0.06" />
+  <g filter="url(#shadow)">
+    <rect x="220" y="662" width="850" height="850" rx="170" fill="#f4ede2" />
+    <path
+      transform="translate(397 839) scale(27.5)"
+      fill="#132238"
+      d="M5.25 0a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3Zm-1.91 2.252a.75.75 0 0 0-.69.448l-.5 1.25A.75.75 0 1 0 3.55 4.45l.27-.672l.54.616l-.156 1.501a.75.75 0 0 0 .173.577l1.33 1.52a.75.75 0 1 0 1.13-.988L5.83 6.15l.235-2.25a.75.75 0 0 0-.735-.828H4.43a.75.75 0 0 0-.637.352l-.453.67l.144-1.086a.75.75 0 0 0-.145-.58a.75.75 0 0 0-.571-.226Zm3.875 5.493a.75.75 0 0 0-.207.042a.75.75 0 0 0-.418.965l.44 1.1l.96.96a.75.75 0 1 0 1.06-1.06l-.86-.86l-.413-1.03a.75.75 0 0 0-.562-.117Zm3.69-2.245a.75.75 0 0 0-.53 1.28h.86l-.288-.288l.66.661a.75.75 0 0 0 1.06-1.06l-.98-.98H11.7a.75.75 0 0 0-.487.187Z"
+    />
+  </g>
+  <text x="645" y="1848" text-anchor="middle" fill="#f4ede2" font-size="108" font-weight="700" letter-spacing="0.02em" font-family="Arial, Helvetica, sans-serif">
+    Walkup
+  </text>
+  <text x="645" y="1920" text-anchor="middle" fill="#b9c6d3" font-size="40" font-weight="500" letter-spacing="0.04em" font-family="Arial, Helvetica, sans-serif">
+    Offline clip cache for the dugout
+  </text>
+</svg>
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,5 +1,5 @@
 import { Component, useEffect, useState, type ErrorInfo, type ReactElement, type ReactNode } from "react";
-import { NavLink, Navigate, Route, Routes, useLocation } from "react-router-dom";
+import { Navigate, Route, Routes, useLocation, useNavigate } from "react-router-dom";

 import { WalkupProvider, useWalkupContext } from "./hooks/useWalkupContext";
 import { useSession } from "./hooks/useSession";
@@ -228,6 +228,7 @@ function ShellLayout() {
  const [navOpen, setNavOpen] = useState(false);
  const walkup = useWalkupContext();
  const location = useLocation();
+  const navigate = useNavigate();
  const isOnline = useOnlineStatus();
  const currentPageLabel = getNavbarPageLabel(location.pathname);
  const showNavbar = walkup.sessionQuery.data?.authenticated === true;
@@ -250,12 +251,17 @@ function ShellLayout() {
    };
  }, [showTeamSelectionModal]);

+  function goTo(pathname: string) {
+    setNavOpen(false);
+    navigate(pathname);
+  }
+
  return (
    <div className={shellClassName}>
      {showNavbar ? (
        <nav className="navbar navbar-expand-lg navbar-dark bg-dark shadow-sm sticky-top px-3 py-2" aria-label="Primary">
          <div className="container-fluid">
-            <NavLink to="/" className="navbar-brand d-flex align-items-center gap-3 mb-0">
+            <button type="button" className="navbar-brand d-flex align-items-center gap-3 mb-0 btn btn-link p-0 text-decoration-none" onClick={() => goTo("/")}>
              <span className="site-brand-mark" aria-hidden="true">
                <i className="bi bi-person-walking" />
              </span>
@@ -265,7 +271,7 @@ function ShellLayout() {
                  <span className="navbar-text d-lg-none small lh-1 text-white-50">{currentPageLabel}</span>
                ) : null}
              </span>
-            </NavLink>
+            </button>
            <button
              type="button"
              className="navbar-toggler ms-auto"
@@ -279,24 +285,40 @@ function ShellLayout() {
            <div id="primary-nav" className={`navbar-collapse collapse${navOpen ? " show" : ""}`}>
              <ul className="navbar-nav ms-auto gap-2">
                <li className="nav-item">
-                  <NavLink to="/" className={({ isActive }) => `nav-link${isActive ? " active" : ""}`}>
+                  <button
+                    type="button"
+                    className={`nav-link btn btn-link${location.pathname === "/" ? " active" : ""}`}
+                    onClick={() => goTo("/")}
+                  >
                    Home
-                  </NavLink>
+                  </button>
                </li>
                <li className="nav-item">
-                  <NavLink to="/library" className={({ isActive }) => `nav-link${isActive ? " active" : ""}`}>
+                  <button
+                    type="button"
+                    className={`nav-link btn btn-link${location.pathname === "/library" ? " active" : ""}`}
+                    onClick={() => goTo("/library")}
+                  >
                    Walkup Clips
-                  </NavLink>
+                  </button>
                </li>
                <li className="nav-item">
-                  <NavLink to="/gameday" className={({ isActive }) => `nav-link${isActive ? " active" : ""}`}>
+                  <button
+                    type="button"
+                    className={`nav-link btn btn-link${location.pathname === "/gameday" ? " active" : ""}`}
+                    onClick={() => goTo("/gameday")}
+                  >
                    Gameday
-                  </NavLink>
+                  </button>
                </li>
                <li className="nav-item">
-                  <NavLink to="/profile" className={({ isActive }) => `nav-link${isActive ? " active" : ""}`}>
+                  <button
+                    type="button"
+                    className={`nav-link btn btn-link${location.pathname === "/profile" ? " active" : ""}`}
+                    onClick={() => goTo("/profile")}
+                  >
                    Profile
-                  </NavLink>
+                  </button>
                </li>
              </ul>
            </div>
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -11,7 +11,16 @@ export default defineConfig(({ mode }) => {
      react(),
      VitePWA({
        registerType: "autoUpdate",
-        includeAssets: ["icon.svg"],
+        includeAssets: [
+          "icon.svg",
+          "favicon.ico",
+          "apple-touch-icon.png",
+          "icon-192.png",
+          "icon-512.png",
+          "apple-splash-1125x2436.png",
+          "apple-splash-1170x2532.png",
+          "apple-splash-1290x2796.png",
+        ],
        workbox: {
          runtimeCaching: [
            {
@@ -31,18 +40,27 @@ export default defineConfig(({ mode }) => {
          ],
        },
        manifest: {
+          id: "/",
          name: "Walkup",
          short_name: "Walkup",
          description: "Collaborative baseball walk-up songs.",
          theme_color: "#132238",
          background_color: "#f4ede2",
          display: "standalone",
+          display_override: ["standalone", "minimal-ui"],
+          scope: "/",
          start_url: "/",
          icons: [
            {
-              src: "/icon.svg",
-              sizes: "any",
-              type: "image/svg+xml",
+              src: "/icon-192.png",
+              sizes: "192x192",
+              type: "image/png",
+              purpose: "any maskable",
+            },
+            {
+              src: "/icon-512.png",
+              sizes: "512x512",
+              type: "image/png",
              purpose: "any maskable"
            }
          ]