ui: pwa prompt

components/PWAPrompt.client.vue

@@ -15,25 +15,29 @@ const { close, needRefresh, updateServiceWorker } = usePWA()
     z11
     fixed
     bottom-14 md:bottom-0 right-0
-    m-2 p-4
+    m-2 p-4 w-100
     bg-base border="~ base"
     rounded
     text-left
     shadow
+    flex="~ gap-4"
   >
-    <h2 id="pwa-toast-title" sr-only>
-      {{ $t('pwa.title') }}
-    </h2>
-    <div id="pwa-toast-message">
-      {{ $t('pwa.message') }}
-    </div>
-    <div m-t4 flex="~ colum" gap-x="4">
-      <button type="button" btn-solid text-sm px-2 py-1 text-center @click="updateServiceWorker()">
-        {{ $t('pwa.reload') }}
-      </button>
-      <button type="button" btn-outline px-2 py-1 text-sm text-center @click="close">
-        {{ $t('pwa.close') }}
-      </button>
+    <img src="/logo.svg" w-12 h-12 height="10" width="10" ma alt="logo">
+    <div>
+      <h2 id="pwa-toast-title" sr-only>
+        {{ $t('pwa.title') }}
+      </h2>
+      <div id="pwa-toast-message">
+        {{ $t('pwa.message') }}
+      </div>
+      <div mt2 flex="~ gap-4">
+        <button type="button" btn-solid px-4 py-1 text-center text-sm @click="updateServiceWorker()">
+          {{ $t('pwa.reload') }}
+        </button>
+        <button type="button" btn-outline filter-saturate-0 px-4 py-1 text-center text-sm @click="close">
+          {{ $t('pwa.dismiss') }}
+        </button>
+      </div>
     </div>
   </div>
 </template>

locales/en-US.json

@@ -191,10 +191,10 @@
     "the_thread": "the thread"
   },
   "pwa": {
-    "close": "Close",
-    "message": "@:pwa.title{','} click on @:pwa.reload button to update.",
+    "dismiss": "Dismiss",
+    "message": "@:pwa.title{','} click on the @:pwa.reload button to update.",
     "reload": "Reload",
-    "title": "New Elk version available"
+    "title": "New Elk update available"
   },
   "search": {
     "search_desc": "Search for people & hashtags"

locales/es-ES.json

@@ -188,7 +188,6 @@
     "the_thread": "el hilo"
   },
   "pwa": {
-    "close": "Cerrar",
     "message": "@:pwa.title{','} haz click en el botón @:pwa.reload para actualizar.",
     "reload": "Recargar",
     "title": "Nueva versión de Elk disponible"