From 732244b4b3a2e95aad23ebccc7f7650fd9c8e8f4 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 23 Feb 2023 15:56:58 +0800
Subject: [PATCH] Shiny pill style

---
 src/app.css                 | 26 ++++++++++++--------------
 src/app.jsx                 |  1 +
 src/components/timeline.jsx |  2 +-
 src/pages/notifications.jsx |  2 +-
 4 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/app.css b/src/app.css
index 1e5e7a29..83c01e3c 100644
--- a/src/app.css
+++ b/src/app.css
@@ -745,14 +745,6 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   margin-top: 16px;
   transform: translate(-50%, 0);
   font-size: 90%;
-  background-color: var(--button-bg-color);
-  background-image: linear-gradient(
-    160deg,
-    rgba(255, 255, 255, 0.5),
-    rgba(255, 255, 255, 0) 50%
-  );
-  box-shadow: 0 3px 8px -1px var(--drop-shadow-color),
-    0 10px 36px -4px var(--button-bg-blur-color);
 }
 .updates-button .icon {
   vertical-align: top;
@@ -1161,20 +1153,26 @@ meter.donut:is(.danger, .explode):after {
   color: var(--red-color);
 }
 
-/* TOAST */
+/* SHINY PILL */
 
-:root .toastify {
+.shiny-pill {
+  color: var(--button-text-color);
+  text-shadow: 0 -1px 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%
   );
-  color: var(--button-text-color);
-  border-radius: 10em;
-  padding: 8px 16px;
   box-shadow: 0 3px 8px -1px var(--drop-shadow-color),
-    0 10px 36px -4px var(--button-bg-blur-color);
+    0 10px 36px -4px var(--button-bg-blur-color),
+    inset var(--hairline-width) var(--hairline-width) rgba(255, 255, 255, 0.5);
+}
+
+/* TOAST */
+
+:root .toastify {
+  padding: 8px 16px;
 }
 .toastify-bottom {
   margin-bottom: env(safe-area-inset-bottom);
diff --git a/src/app.jsx b/src/app.jsx
index 1a3b6606..038a33c7 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -325,6 +325,7 @@ function App() {
                 states.reloadStatusPage++;
                 setTimeout(() => {
                   const toast = Toastify({
+                    className: 'shiny-pill',
                     text: 'Status posted. Check it out.',
                     duration: 10_000, // 10 seconds
                     gravity: 'bottom',
diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx
index 78cb035b..e0c4ccbc 100644
--- a/src/components/timeline.jsx
+++ b/src/components/timeline.jsx
@@ -275,7 +275,7 @@ function Timeline({
             !hiddenUI &&
             showNew && (
               <button
-                class="updates-button"
+                class="updates-button shiny-pill"
                 type="button"
                 onClick={() => {
                   loadItems(true);
diff --git a/src/pages/notifications.jsx b/src/pages/notifications.jsx
index 80bfd8d9..059fa421 100644
--- a/src/pages/notifications.jsx
+++ b/src/pages/notifications.jsx
@@ -165,7 +165,7 @@ function Notifications() {
           </div>
           {snapStates.notificationsShowNew && uiState !== 'loading' && (
             <button
-              class="updates-button"
+              class="updates-button shiny-pill"
               type="button"
               onClick={() => {
                 loadNotifications(true);