From ca11631531e7f7d77bb6b3508db332c8aba2d7f3 Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Sat, 15 Feb 2025 00:36:57 +0100
Subject: [PATCH] Enhance ZenWelcome component with improved layout and
 animation for radio buttons

---
 l10n                                          |  2 +-
 .../base/content/zen-styles/zen-welcome.css   | 23 +++++++++++++++
 .../base/zen-components/ZenWelcome.mjs        | 28 +++++++++++--------
 3 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/l10n b/l10n
index 146e85615..83464a5d3 160000
--- a/l10n
+++ b/l10n
@@ -1 +1 @@
-Subproject commit 146e85615a6752039c3e578795ccf457bcda11b2
+Subproject commit 83464a5d3596558a8d15c7fd7f495f61726a0f05
diff --git a/src/browser/base/content/zen-styles/zen-welcome.css b/src/browser/base/content/zen-styles/zen-welcome.css
index 38217c8ca..91984e761 100644
--- a/src/browser/base/content/zen-styles/zen-welcome.css
+++ b/src/browser/base/content/zen-styles/zen-welcome.css
@@ -103,5 +103,28 @@
     overflow: hidden;
     justify-content: center;
     align-items: center;
+    display: flex;
+    flex-direction: column;
+    gap: 1.1rem;
+
+    & label {
+      opacity: 0;
+      transition: scale 0.2s;
+      padding: 1.1rem 1.3rem;
+      border-radius: .6rem;
+      width: 50%;
+      border: 2px solid var(--zen-colors-border);
+      box-shadow: var(--zen-big-shadow);
+      background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
+
+      &:hover {
+        scale: 1.015;
+      }
+
+      &:has(:checked) {
+        border: 2px solid var(--zen-primary-color);
+        scale: 1.03;
+      }
+    }
   }
 }
diff --git a/src/browser/base/zen-components/ZenWelcome.mjs b/src/browser/base/zen-components/ZenWelcome.mjs
index ff51d5da1..8e38ee806 100644
--- a/src/browser/base/zen-components/ZenWelcome.mjs
+++ b/src/browser/base/zen-components/ZenWelcome.mjs
@@ -100,9 +100,7 @@
       );
     }
 
-    async fadeInContent(page) {
-      const contentElement = document.getElementById('zen-welcome-page-content');
-      contentElement.innerHTML = page.content;
+    async fadeInContent() {
       await animate(
         '#zen-welcome-page-content > *',
         { opacity: [0, 1], scale: [0.9, 1], filter: ['blur(2px)', 'blur(0px)'] },
@@ -157,8 +155,8 @@
       }
       await this.fadeInTitles(currentPage);
       await this.fadeInButtons(currentPage);
-      await this.fadeInContent(currentPage);
       currentPage.fadeIn();
+      await this.fadeInContent();
     }
 
     finish() {
@@ -197,14 +195,20 @@
             },
           },
         ],
-        content: `
-          <checkbox
-            class="clearingItemCheckbox"
-            data-l10n-id="item-history-form-data-downloads"
-            id="zen-welcome-set-default-browser"
-          />
-        `,
-        fadeIn() {},
+        fadeIn() {
+          const xul = `
+            <html:label for="zen-welcome-set-default-browser">
+              <html:input type="radio" id="zen-welcome-set-default-browser" name="zen-welcome-set-default-browser"></html:input>
+              <html:span data-l10n-id="zen-welcome-set-default-browser"></html:span>
+            </html:label>
+            <html:label for="zen-welcome-dont-set-default-browser">
+              <html:input checked="true" type="radio" id="zen-welcome-dont-set-default-browser" name="zen-welcome-set-default-browser"></html:input>
+              <html:span data-l10n-id="zen-welcome-dont-set-default-browser"></html:span>
+            </html:label>
+          `;
+          const fragment = window.MozXULElement.parseXULToFragment(xul);
+          document.getElementById('zen-welcome-page-content').appendChild(fragment);
+        },
         fadeOut() {},
       },
     ];