Mercurial

diff mrjunejune/src/public/pwa-register.js @ 258:60a876c4587a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add semantic primitive ownership Build a layered Zenbu token and sizing system, make authored controls use native-underneath primitives, migrate mrjunejune without imposing visual surfaces, and document/enforce HTML ownership in the catalog and wiki. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Wed, 05 Aug 2026 05:25:40 -0700
parents 30c2196d03d4
children e02e2036ef84
line wrap: on
line diff
--- a/mrjunejune/src/public/pwa-register.js	Tue Aug 04 16:49:11 2026 -0700
+++ b/mrjunejune/src/public/pwa-register.js	Wed Aug 05 05:25:40 2026 -0700
@@ -57,7 +57,11 @@
   const installBtn = document.createElement('button');
   installBtn.classList.add('with-icon');
   installBtn.id = 'pwa-install-btn';
-  installBtn.textContent = 'Install as App';
+  const installIcon = document.createElement('zen-icon');
+  installIcon.setAttribute('name', 'download');
+  const installLabel = document.createElement('span');
+  installLabel.textContent = 'Install as App';
+  installBtn.append(installIcon, installLabel);
 
   installBtn.addEventListener('click', async () => {
     if (!deferredPrompt) return;
@@ -70,12 +74,16 @@
     installBtn.remove();
   });
 
-  document.body.appendChild(installBtn);
+  const wrapper = document.createElement('zen-button');
+  wrapper.setAttribute('appearance', 'plain');
+  wrapper.setAttribute('size', 'md');
+  wrapper.append(installBtn);
+  document.body.appendChild(wrapper);
 
   setTimeout(() => {
     installBtn.style.opacity = '0';
     installBtn.style.transition = 'opacity 0.3s';
-    setTimeout(() => installBtn.remove(), 300);
+    setTimeout(() => wrapper.remove(), 300);
   }, 5000);
 }
 
@@ -84,5 +92,5 @@
   deferredPrompt = null;
 
   const installBtn = document.getElementById('pwa-install-btn');
-  if (installBtn) installBtn.remove();
+  if (installBtn) installBtn.closest('zen-button')?.remove();
 });