From 92f3db66335dde101dc72472aa7b219e3b9068d4 Mon Sep 17 00:00:00 2001
From: Mauro Balades <mauro.balades@tutanota.com>
Date: Wed, 14 Aug 2024 14:06:53 +0200
Subject: [PATCH] chore: Update Zen theme CSS to improve dialog dimensions and
 browser gradient

---
 src/browser/base/content/zen-styles/zen-popup.css  | 6 ++++++
 src/browser/base/content/zen-styles/zen-theme.css  | 6 +++++-
 src/browser/components/preferences/zen-settings.js | 4 ++--
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/browser/base/content/zen-styles/zen-popup.css b/src/browser/base/content/zen-styles/zen-popup.css
index ddd511563..2cac3f5ba 100644
--- a/src/browser/base/content/zen-styles/zen-popup.css
+++ b/src/browser/base/content/zen-styles/zen-popup.css
@@ -282,3 +282,9 @@ menu, menuitem {
     color: var(--button-hover-color);
   }
 }
+
+/* Zen Welcome idalog override */
+#window-modal-dialog[zen-dialog-welcome-element="true"] {
+  min-width: 90vw;
+  min-height: 90vh;
+}
diff --git a/src/browser/base/content/zen-styles/zen-theme.css b/src/browser/base/content/zen-styles/zen-theme.css
index 56f6ea438..c1e1b78f2 100644
--- a/src/browser/base/content/zen-styles/zen-theme.css
+++ b/src/browser/base/content/zen-styles/zen-theme.css
@@ -81,6 +81,8 @@
 
   /* XUL */
   --zen-main-browser-background: light-dark(rgb(235, 235, 235), #1b1b1b);
+  --zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 50%, white 50%);
+
   --zen-appcontent-border: 1px solid var(--zen-colors-border);
   --zen-panel-radius: var(--zen-border-radius);
   --zen-browser-border-radius: var(--zen-panel-radius);
@@ -126,7 +128,9 @@
     --zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 80%, black 20%);
   
     --zen-dialog-background: color-mix(in srgb, var(--zen-primary-color) 10%, black 90%);
-    --zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 8%, black 92%); 
+    --zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 8%, black 92%);
+
+    --zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 30%, black 70%);
   }
 }
 
diff --git a/src/browser/components/preferences/zen-settings.js b/src/browser/components/preferences/zen-settings.js
index 7cd264027..20403c19f 100644
--- a/src/browser/components/preferences/zen-settings.js
+++ b/src/browser/components/preferences/zen-settings.js
@@ -109,8 +109,8 @@ var gZenCKSSettings = {
       const group = data[2];
       let fragment = window.MozXULElement.parseXULToFragment(`
         <hbox class="zenCKSOption">
-          <label class="zenCKSOption-label"></label>
-          <html:input readonly="1" class="zenCKSOption-input"/>
+          <label class="zenCKSOption-label" for="zenCKSOption-${key}"></label>
+          <html:input readonly="1" class="zenCKSOption-input" id="zenCKSOption-${key}" />
         </hbox>
       `);
       document.l10n.setAttributes(fragment.querySelector(".zenCKSOption-label"), l10nId);