From 73d1ccb257d5bb9fe8c60d240e1a8044b62e2cf5 Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Sat, 15 Feb 2025 13:01:28 +0100
Subject: [PATCH] Refactor ZenWelcome component for improved code readability
 and consistency

---
 .../base/content/zen-styles/zen-welcome.css   |  2 +-
 .../base/zen-components/ZenWelcome.mjs        | 24 +++++++------------
 2 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/src/browser/base/content/zen-styles/zen-welcome.css b/src/browser/base/content/zen-styles/zen-welcome.css
index cb5d7f395..8478bb72b 100644
--- a/src/browser/base/content/zen-styles/zen-welcome.css
+++ b/src/browser/base/content/zen-styles/zen-welcome.css
@@ -111,7 +111,7 @@
       opacity: 0;
       transition: scale 0.1s;
       padding: 1.5rem 1.1rem;
-      border-radius: .6rem;
+      border-radius: 0.6rem;
       width: 50%;
       gap: 0.8rem;
       display: flex;
diff --git a/src/browser/base/zen-components/ZenWelcome.mjs b/src/browser/base/zen-components/ZenWelcome.mjs
index e5cbf653d..16a998682 100644
--- a/src/browser/base/zen-components/ZenWelcome.mjs
+++ b/src/browser/base/zen-components/ZenWelcome.mjs
@@ -1,4 +1,3 @@
-
 {
   function clearBrowserElements() {
     for (const element of document.getElementById('browser').children) {
@@ -58,8 +57,9 @@
     async fadeInTitles(page) {
       const [title1, description1, description2] = await document.l10n.formatValues(page.text);
       const titleElement = document.getElementById('zen-welcome-page-sidebar-content');
-      titleElement.innerHTML = `<html:h1>${title1}</html:h1><html:p>${description1}</html:p>`
-        + (description2 ? `<html:p>${description2}</html:p>` : '');
+      titleElement.innerHTML =
+        `<html:h1>${title1}</html:h1><html:p>${description1}</html:p>` +
+        (description2 ? `<html:p>${description2}</html:p>` : '');
       await animate(
         '#zen-welcome-page-sidebar-content > *',
         { opacity: [0, 1], x: [100, 0], filter: ['blur(2px)', 'blur(0px)'] },
@@ -146,7 +146,7 @@
           delay: getMotion().stagger(0.05, { startDelay: 0.3 }),
           type: 'spring',
           bounce: 0,
-          duration: 0.2
+          duration: 0.2,
         }
       );
     }
@@ -154,11 +154,7 @@
     async next() {
       if (this._currentPage !== -1) {
         const previousPage = this._pages[this._currentPage];
-        await Promise.all([
-            this.fadeOutTitles(),
-          this.fadeOutButtons(),
-          this.fadeOutContent(),
-        ]);
+        await Promise.all([this.fadeOutTitles(), this.fadeOutButtons(), this.fadeOutContent()]);
         document.getElementById('zen-welcome-page-content').innerHTML = '';
         previousPage.fadeOut();
       }
@@ -168,10 +164,7 @@
         this.finish();
         return;
       }
-      await Promise.all([
-        this.fadeInTitles(currentPage),
-        this.fadeInButtons(currentPage),
-      ]);
+      await Promise.all([this.fadeInTitles(currentPage), this.fadeInButtons(currentPage)]);
       currentPage.fadeIn();
       await this.fadeInContent();
     }
@@ -193,7 +186,7 @@
           },
           {
             id: 'zen-welcome-import-description-2',
-          }
+          },
         ],
         buttons: [
           {
@@ -245,8 +238,7 @@
             },
           },
         ],
-        fadeIn() {
-        },
+        fadeIn() {},
         fadeOut() {},
       },
     ];