From 2ba0b8ccdf60030d6a0f824ed42135a4070745e6 Mon Sep 17 00:00:00 2001
From: "mr. m" <mr.m@tuta.com>
Date: Tue, 14 Oct 2025 03:22:53 +0200
Subject: [PATCH] feat: Improved UI and spacings for toasts, b=no-bug, c=common

---
 locales/en-US/browser/browser/zen-general.ftl |  2 +-
 .../content/zen-tabbrowser-elements.inc.xhtml |  2 +-
 src/browser/themes/shared/zen-icons/icons.css |  6 ++--
 src/zen/common/styles/zen-popup.css           | 31 ++++++++++++-------
 4 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/locales/en-US/browser/browser/zen-general.ftl b/locales/en-US/browser/browser/zen-general.ftl
index 3cf66bfa5..9e568170c 100644
--- a/locales/en-US/browser/browser/zen-general.ftl
+++ b/locales/en-US/browser/browser/zen-general.ftl
@@ -31,7 +31,7 @@ pictureinpicture-minimize-btn =
 zen-panel-ui-gradient-generator-custom-color = Custom Color
 zen-panel-ui-gradient-generator-saved-message = Successfully saved the gradient!
 
-zen-copy-current-url-confirmation = The URL has been copied to the clipboard.
+zen-copy-current-url-confirmation = Copied Current URL!
 
 zen-general-cancel-label =
     .label = Cancel
diff --git a/src/browser/base/content/zen-tabbrowser-elements.inc.xhtml b/src/browser/base/content/zen-tabbrowser-elements.inc.xhtml
index 187791740..887db5f26 100644
--- a/src/browser/base/content/zen-tabbrowser-elements.inc.xhtml
+++ b/src/browser/base/content/zen-tabbrowser-elements.inc.xhtml
@@ -2,7 +2,7 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-<vbox id="zen-toast-container"></vbox>
+<vbox id="zen-toast-container" />
 
 #include ../../../zen/split-view/zen-splitview-overlay.inc.xhtml
 #include ../../../zen/glance/zen-glance.inc.xhtml
\ No newline at end of file
diff --git a/src/browser/themes/shared/zen-icons/icons.css b/src/browser/themes/shared/zen-icons/icons.css
index 93ecaabdd..dc87060f3 100644
--- a/src/browser/themes/shared/zen-icons/icons.css
+++ b/src/browser/themes/shared/zen-icons/icons.css
@@ -133,7 +133,8 @@
 
 #sync-button,
 .urlbarView-row[source='tabs'] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon,
-#urlbar-engine-one-off-item-tabs {
+#urlbar-engine-one-off-item-tabs,
+#zen-open-background-tab-button {
   list-style-image: url('tab.svg') !important;
 }
 
@@ -177,8 +178,7 @@
   list-style-image: url('search-page.svg') !important;
 }
 
-#open-file-button,
-#zen-open-background-tab-button {
+#open-file-button {
   list-style-image: url('open.svg') !important;
 }
 
diff --git a/src/zen/common/styles/zen-popup.css b/src/zen/common/styles/zen-popup.css
index a7d95c9b0..de9cdb051 100644
--- a/src/zen/common/styles/zen-popup.css
+++ b/src/zen/common/styles/zen-popup.css
@@ -345,20 +345,20 @@ menuseparator {
     --zen-toast-padding: 6px;
     --zen-toast-max-height: 46px;
     @media (-moz-platform: macos) {
-      --zen-toast-padding: 10px;
-      --zen-toast-max-height: 52px;
+      --zen-toast-padding: 8px;
+      --zen-toast-max-height: 48px;
     }
 
-    gap: 10px;
+    gap: 8px;
     z-index: 1000;
     padding: var(--zen-toast-padding);
-    border-radius: calc(var(--zen-native-inner-radius) + 6px);
+    border-radius: 10px;
     background: linear-gradient(
-      170deg,
+      to bottom,
       var(--zen-primary-color) -40%,
-      color-mix(in srgb, var(--zen-primary-color) 85%, #0f0f0f 15%)
+      color-mix(in srgb, var(--zen-primary-color), #0f0f0f 20%)
     );
-    box-shadow: 0 0 14px 3px rgba(0, 0, 0, 0.05);
+    box-shadow: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4)) 0px 0px 22px 2px;
     border: none;
     display: flex;
     font-weight: 600;
@@ -382,14 +382,18 @@ menuseparator {
 
     & button {
       width: min-content;
-      padding: 0 10px !important;
+      padding: 0px 8px !important;
       min-width: unset !important;
+      min-height: 28px;
       margin: 0px !important;
-      border-radius: calc(var(--zen-native-inner-radius) + 2px) !important;
-      background: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05)) !important;
-      border: 1px solid light-dark(rgba(0, 0, 0, 0.01), rgba(255, 255, 255, 0.01)) !important;
+      border-radius: 6px !important;
+      background: light-dark(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1)) !important;
+      border-top: 2px solid light-dark(transparent, rgba(255, 255, 255, 0.1));
       color: light-dark(rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.8)) !important;
 
+      outline: 0.5px solid light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.02));
+      outline-offset: -0.5px;
+
       :root[zen-right-side='true'] & {
         order: -1;
       }
@@ -397,6 +401,11 @@ menuseparator {
       & .button-text {
         display: none;
       }
+
+      & .button-icon {
+        width: 14px;
+        opacity: 0.6;
+      }
     }
   }
 }