feat(ui): optimize design of PWA update notification (#2757)

_data/locales/ar.yml

@@ -46,7 +46,7 @@ not_found:
   statement: عذرا, الرابط التالي غير صالح أو انه يشير إلى صفحة غير موجودة.
 
 notification:
-  update_found: يتوفر اصدار جديد للمحتوى.
+  update_found: يتوفر محتوى جديد
   update: تحديث
 
 theme:

_data/locales/bg-BG.yml

@@ -46,7 +46,7 @@ not_found:
   statement: Съжалявам, но на този URL адрес няма налично съдържание.
 
 notification:
-  update_found: Налична е нова версия на съдържанието.
+  update_found: Има ново съдържание
   update: Обнови
 
 theme:

_data/locales/ca-ES.yml

@@ -46,7 +46,7 @@ not_found:
   statement: Ho sentim, hem perdut aquesta URL o apunta a alguna cosa que no existeix.
 
 notification:
-  update_found: Hi ha una nova versió de contingut disponible.
+  update_found: Hi ha contingut nou disponible
   update: Actualitzar
 
 theme:

_data/locales/cs-CZ.yml

@@ -46,7 +46,7 @@ not_found:
   statement: Omlouváme se, adresu URL jsme špatně umístili nebo odkazuje na něco, co neexistuje.
 
 notification:
-  update_found: Je k dispozici nová verze obsahu.
+  update_found: Je tu nový obsah
   update: Aktualizace
 
 theme:

_data/locales/da-DK.yml

@@ -46,7 +46,7 @@ not_found:
   statement: Beklager, vi har malpaceret denne URL, eller den peger på et sted, som ikke findes.
 
 notification:
-  update_found: En ny version af indholdet er fundet!
+  update_found: Der er nyt indhold
   update: Opdater
 
 theme:

_data/locales/de-DE.yml

@@ -45,7 +45,7 @@ not_found:
   statement: Entschuldigung, dieser Link verweist auf keine vorhandene Ressource.
 
 notification:
-  update_found: Eine neue Version ist verfügbar.
+  update_found: Neue Inhalte verfügbar
   update: Neue Version
 
 theme:

_data/locales/dv‑MV.yml

@@ -46,7 +46,7 @@ not_found:
   statement: ސޯރީ، މި ޔޫ.އާރއެލް މަށެވެއްނެ ނުވަތަ އެކަމެއް ނުވެއެވެ.
 
 notification:
-  update_found: ޔޫ ވާރޝަން ހުރިހާ.
+  update_found: އައު ކޮންޓެންޓެއް ފެނިއްޖެ
   update: އޮޕްޑޭޓް
 
 theme:

_data/locales/el-GR.yml

@@ -46,7 +46,7 @@ not_found:
   statement: Συγνώμη, έχουμε τοποθετήσει λάθος αυτήν την διεύθυνση URL ή υποδεικνύει κάτι που δεν υπάρχει.
 
 notification:
-  update_found: Υπάρχει διαθέσιμη μια νέα έκδοση του περιεχομένου.
+  update_found: Νέο περιεχόμενο διαθέσιμο
   update: Ενημέρωση
 
 theme:

_data/locales/en.yml

@@ -46,7 +46,7 @@ not_found:
   statement: Sorry, we've misplaced that URL or it's pointing to something that doesn't exist.
 
 notification:
-  update_found: A new version of content is available.
+  update_found: New content available
   update: Update
 
 theme:

_data/locales/es-ES.yml

@@ -46,7 +46,7 @@ not_found:
   statement: Lo sentimos, hemos perdido esa URL o apunta a algo que no existe.
 
 notification:
-  update_found: Hay una nueva versión de contenido disponible.
+  update_found: Hay contenido nuevo
   update: Actualizar
 
 theme:

_data/locales/fa-IR.yml

@@ -46,7 +46,7 @@ not_found:
   statement: متأسفیم، لینک زیر معتبر نیست یا به صفحه‌ای که وجود ندارد اشاره می‌کند.
 
 notification:
-  update_found: نسخه جدیدی از محتوا موجود است.
+  update_found: محتوای جدیدی پیدا شد
   update: به‌روزرسانی
 
 theme:

_data/locales/fi-FI.yml

@@ -45,7 +45,7 @@ not_found:
   statement: Valitettavasti tällä URL-osoitteella ei ole saatavilla sisältöä.
 
 notification:
-  update_found: Uusi versio sisällöstä on saatavilla.
+  update_found: Uutta sisältöä löytyi
   update: Päivitä
 
 theme:

_data/locales/fr-FR.yml

@@ -46,7 +46,7 @@ not_found:
   statement: Désolé, nous avons égaré cette URL ou elle pointe vers quelque chose qui n'existe pas.
 
 notification:
-  update_found: Une nouvelle version du contenu est disponible.
+  update_found: Nouveau contenu trouvé
   update: Mise à jour
 
 theme:

_data/locales/hu-HU.yml

@@ -47,7 +47,7 @@ not_found:
   statement: Sajnáljuk, az URL-t rosszul helyeztük el, vagy valami nem létezőre mutat.
 
 notification:
-  update_found: Elérhető a tartalom új verziója.
+  update_found: Új tartalom található
   update: Frissítés
 
 theme:

_data/locales/id-ID.yml

@@ -46,7 +46,7 @@ not_found:
   statement: Maaf, kami gagal menemukan URL itu atau memang mengarah ke sesuatu yang tidak ada.
 
 notification:
-  update_found: Versi konten baru tersedia.
+  update_found: Konten baru tersedia
   update: Perbarui
 
 theme:

_data/locales/it-IT.yml

@@ -45,7 +45,7 @@ not_found:
   statement: Ci scusiamo, non è stato possibile trovare l'URL in questione. Potrebbe puntare ad una pagina non esistente.
 
 notification:
-  update_found: Nuova versione del contenuto disponibile.
+  update_found: Nuovi contenuti trovati
   update: Aggiornamento
 
 theme:

_data/locales/ja-JP.yml

@@ -46,7 +46,7 @@ not_found:
   statement: このURLは存在しないものを指し示しています。
 
 notification:
-  update_found: 新しいバージョンが利用可能です。
+  update_found: 新しいコンテンツがあります
   update: 更新
 
 theme:

_data/locales/ko-KR.yml

@@ -46,7 +46,7 @@ not_found:
   statement: 해당 URL은 존재하지 않습니다.
 
 notification:
-  update_found: 새 버전의 콘텐츠를 사용할 수 있습니다.
+  update_found: 새 콘텐츠가 있습니다
   update: 업데이트
 
 theme:

_data/locales/ku-IQ.yml

@@ -46,7 +46,7 @@ not_found:
   statement: ببوورە، ئەم بەستەرە نادۆزرێتەوە یان ئاماژە بە شتێک دەکات کە بوونی نییە.
 
 notification:
-  update_found: وەشانێکی نوێی ناوەڕۆک بەردەستە.
+  update_found: ناوەڕۆکی نوێ بەردەستە
   update: نوێکردنەوە
 
 theme:

_data/locales/my-MM.yml

@@ -46,7 +46,7 @@ not_found:
   statement: ဝမ်းနည်းပါသည်၊ ကျွန်ုပ်တို့သည် အဆိုပါ URL ကို မှားယွင်းစွာ နေရာချထားခြင်း သို့မဟုတ် ၎င်းသည် မရှိသောအရာကို ညွှန်ပြနေပါသည်။
 
 notification:
-  update_found: အကြောင်းအရာဗားရှင်းအသစ်ကို ရနိုင်ပါပြီ။
+  update_found: အကြောင်းအရာအသစ် တွေ့ရှိပါသည်
   update: အပ်ဒိတ်
 
 theme:

_data/locales/nl-NL.yml

@@ -46,7 +46,7 @@ not_found:
   statement: Sorry, we hebben de URL verkeerd geplaatst of hij verwijst naar iets dat niet bestaat.
 
 notification:
-  update_found: Nieuwe versie van inhoud beschikbaar.
+  update_found: Nieuwe inhoud gevonden
   update: Update
 
 theme:

_data/locales/ps‑AF.yml

@@ -46,7 +46,7 @@ not_found:
   statement: بښنه غواړو، دغه URL ناسم دی یا هغه څه ته اشاره کوي چې شتون نه لري.
 
 notification:
-  update_found: نوې نسخه شتون لري.
+  update_found: نوې منځپانګه شتون لري
   update: تازه
 
 theme:

_data/locales/pt-BR.yml

@@ -46,7 +46,7 @@ not_found:
   statement: Desculpe, a página não foi encontrada.
 
 notification:
-  update_found: Uma nova versão do conteúdo está disponível.
+  update_found: Novo conteúdo encontrado
   update: atualização
 
 theme:

_data/locales/ru-RU.yml

@@ -45,7 +45,7 @@ not_found:
   statement: Извините, мы перепутали URL-адрес или он указывает на что-то несуществующее.
 
 notification:
-  update_found: Доступна новая версия контента.
+  update_found: Найден новый контент
   update: Обновить
 
 theme:

_data/locales/sl-SI.yml

@@ -46,7 +46,7 @@ not_found:
   statement: Oprostite, hiperpovezava je neustrezna ali vsebina ne obstajata. #Sorry, we've misplaced that URL or it's pointing to something that doesn't exist.
 
 notification:
-  update_found: Novejša različica vsebine je na voljo. #A new version of content is available.
+  update_found: Nova vsebina je na voljo
   update: Posodobi #Update
 
 theme:

_data/locales/sv-SE.yml

@@ -46,7 +46,7 @@ not_found:
   statement: Ursäkta, vi har tappat bort den här webbadressen eller så pekar den på något som inte längre finns.
 
 notification:
-  update_found: Det finns en ny version av innehållet.
+  update_found: Nytt innehåll hittades
   update: Uppdatera sidan
 
 theme:

_data/locales/th.yml

@@ -46,7 +46,7 @@ not_found:
   statement: ขออภัย เราวาง URL นั้นไว้ผิดที่ หรือมันชี้ไปยังสิ่งที่ไม่มีอยู่
 
 notification:
-  update_found: มีเวอร์ชันใหม่ของเนื้อหา
+  update_found: พบเนื้อหาใหม่
   update: อัปเดต
 
 theme:

_data/locales/tr-TR.yml

@@ -46,7 +46,7 @@ not_found:
   statement: Üzgünüz, bu linki yanlış yerleştirdik veya var olmayan bir şeye işaret ediyor.
 
 notification:
-  update_found: İçeriğin yeni bir sürümü mevcut.
+  update_found: Yeni içerik bulundu
   update: Güncelle
 
 theme:

_data/locales/uk-UA.yml

@@ -46,7 +46,7 @@ not_found:
   statement: Вибачте, це посилання вказує на ресурс, що не існує.
 
 notification:
-  update_found: Доступна нова версія вмісту.
+  update_found: Знайдено новий вміст
   update: Оновлення
 
 theme:

_data/locales/ur-PK.yml

@@ -46,7 +46,7 @@ not_found:
   statement: معذرت، یہ URL غلط ہے یا جس چیز کی طرف اشارہ کر رہا ہے وہ موجود نہیں۔
 
 notification:
-  update_found: نیا مواد دستیاب ہے۔
+  update_found: نیا مواد مل گیا
   update: اپ ڈیٹ
 
 theme:

_data/locales/vi-VN.yml

@@ -45,7 +45,7 @@ not_found:
   statement: Xin lỗi, chúng tôi đã đặt nhầm URL hoặc đường dẫn trỏ đến một trang nào đó không tồn tại.
 
 notification:
-  update_found: Đã có phiên bản mới của nội dung.
+  update_found: Đã tìm thấy nội dung mới
   update: Cập nhật
 
 theme:

_data/locales/zh-CN.yml

@@ -45,7 +45,7 @@ not_found:
   statement: 抱歉，我们放错了该 URL，或者它指向了不存在的内容。
 
 notification:
-  update_found: 发现新版本的内容。
+  update_found: 发现新内容
   update: 更新
 
 theme:

_data/locales/zh-TW.yml

@@ -45,7 +45,7 @@ not_found:
   statement: 抱歉，您可能正在存取一個已被移動的 URL，或者它從未存在。
 
 notification:
-  update_found: 發現新版本更新。
+  update_found: 發現新內容
   update: 更新
 
 theme:

_includes/notification.html

@@ -1,24 +1,28 @@
 <aside
   id="notification"
-  class="toast"
+  class="toast w-auto rounded-5 text-nowrap"
   role="alert"
   aria-live="assertive"
   aria-atomic="true"
   data-bs-animation="true"
   data-bs-autohide="false"
 >
-  <div class="toast-header">
+  <div class="d-flex align-items-center">
+    <div class="toast-body ps-3">
+      {{- site.data.locales[include.lang].notification.update_found -}}
+    </div>
     <button
       type="button"
-      class="btn-close ms-auto"
+      class="btn btn-primary btn-sm rounded-2 py-0"
+      aria-label="Update"
+    >
+      {{- site.data.locales[include.lang].notification.update -}}
+    </button>
+    <button
+      type="button"
+      class="btn-close mx-3 ms-2"
       data-bs-dismiss="toast"
       aria-label="Close"
     ></button>
   </div>
-  <div class="toast-body text-center pt-0">
-    <p class="px-2 mb-3">{{ site.data.locales[include.lang].notification.update_found }}</p>
-    <button type="button" class="btn btn-primary" aria-label="Update">
-      {{ site.data.locales[include.lang].notification.update }}
-    </button>
-  </div>
 </aside>

_javascript/pwa/app.js

@@ -8,9 +8,9 @@ if ('serviceWorker' in navigator) {
 
   if (register) {
     const swUrl = `${baseUrl}/sw.min.js`;
-    const notification = document.getElementById('notification');
+    const $notification = document.getElementById('notification');
-    const btnRefresh = notification.querySelector('.toast-body>button');
+    const $btnUpdate = $notification.querySelector('[aria-label="Update"]');
-    const popupWindow = Toast.getOrCreateInstance(notification);
+    const popupWindow = Toast.getOrCreateInstance($notification);
 
     navigator.serviceWorker.register(swUrl).then((registration) => {
       // Restore the update window that was last manually closed by the user
@@ -28,7 +28,7 @@ if ('serviceWorker' in navigator) {
         });
       });
 
-      btnRefresh.addEventListener('click', () => {
+      $btnUpdate.addEventListener('click', () => {
         if (registration.waiting) {
           registration.waiting.postMessage('SKIP_WAITING');
         }

_sass/components/_popups.scss

@@ -7,49 +7,41 @@
   @-webkit-keyframes popup {
     from {
       opacity: 0;
-      bottom: 0;
+      bottom: 10%;
     }
   }
 
   @keyframes popup {
     from {
       opacity: 0;
-      bottom: 0;
+      bottom: 10%;
-    }
-  }
-
-  .toast-header {
-    background: none;
-    border-bottom: none;
-    color: inherit;
-  }
-
-  .toast-body {
-    font-family: Lato, sans-serif;
-    line-height: 1.25rem;
-
-    button {
-      font-size: 90%;
-      min-width: 4rem;
     }
   }
 
   &.toast {
     &.show {
-      display: block;
-      min-width: 20rem;
-      border-radius: 0.5rem;
       -webkit-backdrop-filter: blur(10px);
       backdrop-filter: blur(10px);
-      background-color: rgb(255 255 255 / 50%);
-      color: #1b1b1eba;
       position: fixed;
       left: 50%;
-      bottom: 20%;
+      bottom: 30%;
       transform: translateX(-50%);
       -webkit-animation: popup 0.8s;
       animation: popup 0.8s;
     }
+
+    .toast-body {
+      line-height: 1.25rem;
+      font-family: v.$font-family-heading;
+    }
+
+    button[aria-label='Update'] {
+      font-size: 0.8rem;
+    }
+
+    .btn-close {
+      font-size: 0.625rem;
+    }
   }
 }