From af7c9bc1b136d4d0c54a2959f3d90ff0d5a083b9 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 6 Mar 2023 16:01:33 +0800
Subject: [PATCH] Differentiate clickable vs static toasts

---
 src/app.css             | 26 ++++++++++++++++++--------
 src/utils/show-toast.js |  6 +++---
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/app.css b/src/app.css
index 77c03e4c..04128217 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1219,35 +1219,45 @@ meter.donut:is(.danger, .explode):after {
 
 /* SHINY PILL */
 
-.shiny-pill {
+:is(.shiny-pill, :root .toastify.shiny-pill) {
+  pointer-events: auto;
   color: var(--button-text-color);
   text-shadow: 0 calc(var(--hairline-width) * -1) var(--drop-shadow-color);
   background-color: var(--button-bg-color);
   background-image: linear-gradient(
     160deg,
     rgba(255, 255, 255, 0.5),
-    rgba(255, 255, 255, 0) 50%
+    rgba(0, 0, 0, 0.1)
   );
   box-shadow: 0 3px 8px -1px var(--drop-shadow-color),
     0 10px 36px -4px var(--button-bg-blur-color),
     inset var(--hairline-width) var(--hairline-width) rgba(255, 255, 255, 0.5);
+  transition: filter 0.3s;
+}
+:is(.shiny-pill, :root .toastify.shiny-pill):hover {
+  filter: brightness(1.2);
+}
+:is(.shiny-pill, :root .toastify.shiny-pill):active {
+  transition: none;
+  filter: brightness(0.9);
 }
 
 /* TOAST */
 
 :root .toastify {
+  user-select: none;
   padding: 8px 16px;
   border-radius: 999px;
+  pointer-events: none;
+  color: var(--button-text-color);
+  text-shadow: 0 calc(var(--hairline-width) * -1) var(--drop-shadow-color);
+  background-color: var(--button-bg-blur-color);
+  background-image: none;
+  backdrop-filter: blur(16px);
 }
 .toastify-bottom {
   margin-bottom: env(safe-area-inset-bottom);
 }
-:root .toastify:hover {
-  filter: brightness(1.2);
-}
-:root .toastify:active {
-  filter: brightness(0.8);
-}
 
 /* AVATARS STACK */
 
diff --git a/src/utils/show-toast.js b/src/utils/show-toast.js
index 8cb02521..f9469ce2 100644
--- a/src/utils/show-toast.js
+++ b/src/utils/show-toast.js
@@ -4,14 +4,14 @@ function showToast(props) {
   if (typeof props === 'string') {
     props = { text: props };
   }
-  const { onClick = () => {}, delay, ...rest } = props;
+  const { onClick, delay, ...rest } = props;
   const toast = Toastify({
-    className: 'shiny-pill',
+    className: `${onClick || props.destination ? 'shiny-pill' : ''}`,
     gravity: 'bottom',
     position: 'center',
     ...rest,
     onClick: () => {
-      onClick(toast); // Pass in the object itself!
+      onClick?.(toast); // Pass in the object itself!
     },
   });
   if (delay) {