Refactor Zen welcome component: update styles, enhance animations, and improve localization handling

src/browser/base/content/zen-styles/zen-buttons.css

@@ -31,6 +31,13 @@ xul|button:is(.expander-down) {
   border-radius: 6px !important;
 }
 
+.footer-button {
+  transition: scale 0.2s;
+  &:active {
+    scale: scale(0.98);
+  }
+}
+
 @media (-moz-bool-pref: 'zen.theme.pill-button') {
   :host(:is(.anonymous-content-host, notification-message)),
   :root {

src/browser/base/content/zen-styles/zen-welcome.css

@@ -50,12 +50,11 @@
   display: none;
 
   #zen-welcome-page-sidebar {
-    background: rgba(255, 255, 255, 0.1);
-    box-shadow: var(--zen-big-shadow);
+    background: rgba(255, 255, 255, 0.07);
     flex-direction: column;
     justify-content: space-between;
-    padding: 3%;
-    width: 33%;
+    padding: 3.5rem;
+    width: 40%;
     height: 100%;
     backdrop-filter: blur(10px);
     overflow: hidden;
@@ -68,19 +67,24 @@
 
   #zen-welcome-page-sidebar-content {
     & h1 {
-      font-size: 2rem;
+      font-size: 2.2rem;
       font-weight: 600;
       margin-bottom: 1rem;
     }
 
     & p {
-      font-size: 1.2rem;
-      margin: 0;
+      font-size: 1.1rem;
+      margin: 0 0 1.1rem 0;
       opacity: .6;
     }
+
+    & > * {
+      opacity: 0;
+    }
   }
 
   & button {
     justify-content: center;
+    opacity: 0;
   }
 }

src/browser/base/zen-components/ZenWelcome.mjs

@@ -55,18 +55,17 @@
     }
 
     async fadeInTitles(page) {
-      const [title1, description1] = await document.l10n.formatValues(page.content);
+      const [title1, description1, description2] = await document.l10n.formatValues(page.content);
       const titleElement = document.getElementById('zen-welcome-page-sidebar-content');
-      titleElement.innerHTML = `<html:h1>${title1}</html:h1><html:p>${description1}</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: [50, 0], filter: ['blur(2px)', 'blur(0px)'] },
         {
-          delay: getMotion().stagger(0.6, { startDelay: 0.2 }),
+          delay: getMotion().stagger(0.1, { startDelay: 0.3 }),
           type: 'spring',
-          stiffness: 300,
-          damping: 20,
-          mass: 1.7,
+          bounce: 0.3,
         }
       );
     }
@@ -93,11 +92,9 @@
         '#zen-welcome-page-sidebar-buttons button',
         { opacity: [0, 1], x: [50, 0], filter: ['blur(2px)', 'blur(0px)'] },
         {
-          delay: getMotion().stagger(0.2),
+          delay: getMotion().stagger(0.1),
           type: 'spring',
-          stiffness: 300,
-          damping: 20,
-          mass: 1.7,
+          bounce: 0.3,
         }
       );
     }
@@ -137,7 +134,7 @@
         previousPage.fadeOut();
       }
       this._currentPage++;
-      const currentPage = this._pages.shift();
+      const currentPage = this._pages[this._currentPage];
       if (!currentPage) {
         this.finish();
         return;
@@ -160,14 +157,19 @@
             id: 'zen-welcome-import-title',
           },
           {
-            id: 'zen-welcome-import-description',
+            id: 'zen-welcome-import-description-1',
           },
+          {
+            id: 'zen-welcome-import-description-2',
+          }
         ],
         buttons: [
           {
             l10n: 'zen-welcome-import-button',
             onclick: async () => {
-              // Import bookmarks
+              MigrationUtils.showMigrationWizard(window, {
+                zenBlocking: true,
+              });
               return false;
             },
           },