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;
},
},