diff --git a/l10n b/l10n index 3405bce73..d753ec021 160000 --- a/l10n +++ b/l10n @@ -1 +1 @@ -Subproject commit 3405bce73e3a15dd0ef5686e90f9a9bb55495a02 +Subproject commit d753ec021b0ff60fdb64a76454898e02eabe7ccb diff --git a/src/browser/base/content/zen-styles/zen-buttons.css b/src/browser/base/content/zen-styles/zen-buttons.css index 986dfcff5..bf811de99 100644 --- a/src/browser/base/content/zen-styles/zen-buttons.css +++ b/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 { diff --git a/src/browser/base/content/zen-styles/zen-welcome.css b/src/browser/base/content/zen-styles/zen-welcome.css index 0fbe9d75c..ac6323692 100644 --- a/src/browser/base/content/zen-styles/zen-welcome.css +++ b/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; } } diff --git a/src/browser/base/zen-components/ZenWelcome.mjs b/src/browser/base/zen-components/ZenWelcome.mjs index 0e70e3688..bb5274bdf 100644 --- a/src/browser/base/zen-components/ZenWelcome.mjs +++ b/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 = `${title1}${description1}`; + titleElement.innerHTML = `${title1}${description1}` + + (description2 ? `${description2}` : ''); 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; }, },