From 589cf463bdcb2208689345280c2ddf02d5c23753 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Fri, 23 Dec 2022 19:05:48 +0100
Subject: [PATCH] ui: improve pwa prompt

---
 app.vue                         |  1 -
 components/PWAPrompt.client.vue | 40 ++++++++++++---------------------
 error.vue                       |  1 -
 layouts/default.vue             |  1 +
 locales/en-US.json              |  3 ++-
 5 files changed, 17 insertions(+), 29 deletions(-)

diff --git a/app.vue b/app.vue
index 3b501b74..3f261dcb 100644
--- a/app.vue
+++ b/app.vue
@@ -13,5 +13,4 @@ const key = computed(() => `${currentUser.value?.server ?? currentServer.value}:
     <NuxtPage v-if="isMastoInitialised" />
   </NuxtLayout>
   <AriaAnnouncer />
-  <PWAPrompt />
 </template>
diff --git a/components/PWAPrompt.client.vue b/components/PWAPrompt.client.vue
index efd4dd69..903e3c74 100644
--- a/components/PWAPrompt.client.vue
+++ b/components/PWAPrompt.client.vue
@@ -11,33 +11,21 @@ const { close, needRefresh, updateServiceWorker } = usePWA()
     role="alertdialog"
     aria-labelledby="pwa-toast-title"
     aria-describedby="pwa-toast-description"
-    animate animate-back-in-up md:animate-back-in-right
-    z11
-    fixed
-    bottom-14 md:bottom-0 right-0
-    m-2 p-4 w-100 max-w-fit
-    bg-base border="~ base"
-    rounded
-    text-left
-    shadow
-    flex="~ gap-4"
+    m-2 p5 bg="fade" relative
+    rounded-lg of-hidden
+    flex="~ col gap-3"
   >
-    <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>
+    <h2 id="pwa-toast-title" flex="~ gap-2" items-center>
+      {{ $t('pwa.title') }}
+    </h2>
+    <div flex="~ gap-1">
+      <button type="button" btn-solid px-4 py-1 text-center text-sm @click="updateServiceWorker()">
+        {{ $t('pwa.update') }}
+      </button>
+      <button type="button" btn-text filter-saturate-0 px-4 py-1 text-center text-sm @click="close()">
+        {{ $t('pwa.dismiss') }}
+      </button>
     </div>
+    <div i-ri-arrow-down-circle-line absolute text-8em bottom--10 right--10 text-primary op10 />
   </div>
 </template>
diff --git a/error.vue b/error.vue
index 7a83fc3e..0a6ca0c0 100644
--- a/error.vue
+++ b/error.vue
@@ -56,5 +56,4 @@ const reload = async () => {
     </MainContent>
   </NuxtLayout>
   <AriaAnnouncer />
-  <PWAPrompt />
 </template>
diff --git a/layouts/default.vue b/layouts/default.vue
index 6a855c6f..affa1395 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -53,6 +53,7 @@
           <slot name="right">
             <SearchWidget />
             <div flex-auto />
+            <PWAPrompt />
             <NavFooter />
           </slot>
         </div>
diff --git a/locales/en-US.json b/locales/en-US.json
index db65b6d9..1eec13fa 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -209,7 +209,8 @@
     "dismiss": "Dismiss",
     "message": "@:pwa.title{','} click on the @:pwa.reload button to update.",
     "reload": "Reload",
-    "title": "New Elk update available"
+    "title": "New Elk update available!",
+    "update": "Update"
   },
   "search": {
     "search_desc": "Search for people & hashtags"