From a0da6da320242e557455f396426d77c0d08da5a3 Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Sat, 15 Feb 2025 12:51:48 +0100
Subject: [PATCH] Refactor button hover styles and enhance animation effects in
 ZenWelcome component for improved UI responsiveness

---
 src/browser/base/content/zen-styles/zen-theme.css   | 4 ++--
 src/browser/base/content/zen-styles/zen-welcome.css | 1 +
 src/browser/base/zen-components/ZenWelcome.mjs      | 8 ++++----
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/browser/base/content/zen-styles/zen-theme.css b/src/browser/base/content/zen-styles/zen-theme.css
index e325f12d5..c93d10cd3 100644
--- a/src/browser/base/content/zen-styles/zen-theme.css
+++ b/src/browser/base/content/zen-styles/zen-theme.css
@@ -72,7 +72,7 @@
   /* This is like the secondary button */
   --in-content-button-background: transparent !important;
   --in-content-button-text-color: var(--zen-secondary-btn-color) !important;
-  --in-content-button-background-hover: color-mix(in srgb, var(--zen-primary-color) 5%, var(--zen-branding-bg) 60%) !important;
+  --in-content-button-background-hover: color-mix(in srgb, currentColor 3%, transparent 97%) !important;
   --button-bgcolor: var(--in-content-button-background) !important;
   --button-hover-bgcolor: var(--in-content-button-background-hover) !important;
   --button-hover-color: var(--in-content-button-text-color-hover) !important;
@@ -88,7 +88,7 @@
 
   --button-background-color: var(--in-content-button-background) !important;
   --button-background-color-hover: var(--in-content-button-background-hover) !important;
-  --button-background-color-active: var(--in-content-primary-button-background-active) !important;
+  --button-background-color-active: color-mix(in srgb, currentColor 5%, transparent 95%) !important;
 
   --color-accent-primary: var(--button-primary-bgcolor) !important;
   --color-accent-primary-hover: var(--button-primary-hover-bgcolor) !important;
diff --git a/src/browser/base/content/zen-styles/zen-welcome.css b/src/browser/base/content/zen-styles/zen-welcome.css
index decc012a1..cb5d7f395 100644
--- a/src/browser/base/content/zen-styles/zen-welcome.css
+++ b/src/browser/base/content/zen-styles/zen-welcome.css
@@ -118,6 +118,7 @@
       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));
+      align-items: center;
 
       &:hover {
         scale: 1.015;
diff --git a/src/browser/base/zen-components/ZenWelcome.mjs b/src/browser/base/zen-components/ZenWelcome.mjs
index 3ab6a3a04..c493c8fe8 100644
--- a/src/browser/base/zen-components/ZenWelcome.mjs
+++ b/src/browser/base/zen-components/ZenWelcome.mjs
@@ -62,7 +62,7 @@
         + (description2 ? `<html:p>${description2}</html:p>` : '');
       await animate(
         '#zen-welcome-page-sidebar-content > *',
-        { opacity: [0, 1], x: [50, 0], filter: ['blur(2px)', 'blur(0px)'] },
+        { opacity: [0, 1], x: [100, 0], filter: ['blur(2px)', 'blur(0px)'] },
         {
           delay: getMotion().stagger(0.05, { startDelay: 0.3 }),
           type: 'spring',
@@ -91,7 +91,7 @@
       }
       await animate(
         '#zen-welcome-page-sidebar-buttons button',
-        { opacity: [0, 1], x: [50, 0], filter: ['blur(2px)', 'blur(0px)'] },
+        { opacity: [0, 1], x: [100, 0], filter: ['blur(2px)', 'blur(0px)'] },
         {
           delay: getMotion().stagger(0.1, { startDelay: 0.4 }),
           type: 'spring',
@@ -115,7 +115,7 @@
     async fadeOutButtons() {
       await animate(
         '#zen-welcome-page-sidebar-buttons button',
-        { opacity: [1, 0], x: [0, -50], filter: ['blur(0px)', 'blur(2px)'] },
+        { opacity: [1, 0], x: [0, -100], filter: ['blur(0px)', 'blur(2px)'] },
         {
           type: 'spring',
           bounce: 0,
@@ -129,7 +129,7 @@
     async fadeOutTitles() {
       await animate(
         '#zen-welcome-page-sidebar-content > *',
-        { opacity: [1, 0], x: [0, -50], filter: ['blur(0px)', 'blur(2px)'] },
+        { opacity: [1, 0], x: [0, -100], filter: ['blur(0px)', 'blur(2px)'] },
         {
           delay: getMotion().stagger(0.05, { startDelay: 0.3 }),
           type: 'spring',