From 3f55d2dda89b1960060d125d6939ad29815a53e0 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sun, 19 Sep 2021 16:22:05 +0200
Subject: [PATCH] service worker update notification

---
 content/projects.yml  |  3 +++
 gatsby-browser.js     | 13 ++++++-------
 src/styles/_toast.css | 41 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 50 insertions(+), 7 deletions(-)
 create mode 100644 src/styles/_toast.css

diff --git a/content/projects.yml b/content/projects.yml
index e3bf4cd..56da6e4 100644
--- a/content/projects.yml
+++ b/content/projects.yml
@@ -27,6 +27,9 @@
     - React
     - Ethereum
     - Web3
+    - 3Box
+    - Polygon
+    - Binance Smart Chain
 
 - title: 'Ocean Protocol - IPFS Integration'
   slug: '/oceanprotocol-ipfs/'
diff --git a/gatsby-browser.js b/gatsby-browser.js
index 0559d3f..d72a0f8 100644
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@@ -2,6 +2,7 @@ import wrapPageElementWithLayout from './src/helpers/wrapPageElement'
 
 // Global styles
 import './src/styles/global.css'
+import './src/styles/_toast.css'
 
 // IntersectionObserver polyfill for gatsby-image (Safari, IE)
 if (typeof window !== 'undefined' && !window.IntersectionObserver) {
@@ -27,11 +28,9 @@ export const shouldUpdateScroll = ({
 // Display a message when a service worker updates
 // https://www.gatsbyjs.org/docs/add-offline-support-with-a-service-worker/#displaying-a-message-when-a-service-worker-updates
 export const onServiceWorkerUpdateReady = () => {
-  const answer = window.confirm(
-    'This application has been updated. ' +
-      'Reload to display the latest version?'
-  )
-  if (answer === true) {
-    window.location.reload()
-  }
+  const div = document.createElement('div')
+  div.id = 'toast'
+  div.classList.add('alert', 'alert-info')
+  div.innerHTML = `<button onClick="window.location.reload()">Updates are available. <span>Click to Reload</span>.</button>`
+  document.body.append(div)
 }
diff --git a/src/styles/_toast.css b/src/styles/_toast.css
new file mode 100644
index 0000000..649aba8
--- /dev/null
+++ b/src/styles/_toast.css
@@ -0,0 +1,41 @@
+#toast {
+  position: sticky;
+  z-index: 10;
+  bottom: var(--spacer);
+  left: calc(var(--spacer) / 2);
+  right: calc(var(--spacer) / 2);
+  margin: 0 auto;
+  width: fit-content;
+  font-size: var(--font-size-small);
+  padding: 0;
+  animation: animation 0.2s ease-out backwards;
+  background: var(--body-background-color);
+  border-radius: var(--border-radius);
+  border: var(--stroke-width) solid transparent;
+  box-shadow: var(--box-shadow);
+}
+
+#toast button {
+  font-family: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  color: inherit;
+  background: inherit;
+  border: none;
+  cursor: pointer;
+  margin: 0;
+  padding: calc(var(--spacer) / 3) var(--spacer);
+}
+
+#toast button span {
+  color: var(--link-color);
+}
+
+@keyframes animation {
+  0% {
+    transform: translateY(-3rem);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}