From ab127daa354cd5d9e296f40899137a8a6c7f1a63 Mon Sep 17 00:00:00 2001
From: "mr. m" <mr.m@tuta.com>
Date: Wed, 5 Mar 2025 12:34:42 +0100
Subject: [PATCH] Small fixes to the welcome page

---
 .../base/content/zen-styles/zen-tabs/vertical-tabs.css   | 2 +-
 src/browser/base/content/zen-styles/zen-welcome.css      | 9 +++++++--
 src/browser/base/zen-components/ZenWelcome.mjs           | 7 ++++---
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
index a28b4fdab..84ff008d0 100644
--- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -109,7 +109,7 @@
   }
 
   & #zen-sidebar-top-buttons {
-    margin: 4px 0;
+    margin: var(--zen-element-separation) 0 var(--zen-toolbox-padding) 0;
   }
 
   & #PanelUI-menu-button {
diff --git a/src/browser/base/content/zen-styles/zen-welcome.css b/src/browser/base/content/zen-styles/zen-welcome.css
index 69020b6f4..f67fa8eb2 100644
--- a/src/browser/base/content/zen-styles/zen-welcome.css
+++ b/src/browser/base/content/zen-styles/zen-welcome.css
@@ -58,6 +58,7 @@
   width: 60%;
   height: 60%;
   box-shadow: var(--zen-big-shadow);
+  overflow: hidden;
 
   /* Small screens */
   @media (max-width: 1400px) {
@@ -96,6 +97,10 @@
       background-repeat: no-repeat;
       background-position: center;
     }
+
+    &[animate-heart] {
+      overflow: hidden;
+    }
   }
 
   #zen-welcome-page-sidebar-buttons {
@@ -129,6 +134,7 @@
   #zen-welcome-page-content {
     background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
     width: 60%;
+    max-width: 80rem;
     height: 100%;
     position: relative;
     overflow: hidden;
@@ -205,7 +211,7 @@
         #zen-welcome-initial-essentials-browser-sidebar-essentials {
           display: grid;
           grid-template-columns: repeat(3, 1fr);
-          gap: 0.8rem;
+          gap: 0.4rem 1.2rem;
           visibility: visible;
 
           & * {
@@ -247,7 +253,6 @@
               transform: scale(1.04);
 
               & .tab-background {
-                --zen-essential-bg-margin: 3px;
                 box-shadow: var(--zen-big-shadow);
               }
             }
diff --git a/src/browser/base/zen-components/ZenWelcome.mjs b/src/browser/base/zen-components/ZenWelcome.mjs
index 730296af6..a7a285f56 100644
--- a/src/browser/base/zen-components/ZenWelcome.mjs
+++ b/src/browser/base/zen-components/ZenWelcome.mjs
@@ -226,6 +226,7 @@
       const sidebar = document.getElementById('zen-welcome-page-sidebar');
       sidebar.style.width = '100%';
       sidebar.appendChild(heart);
+      sidebar.setAttribute('animate-heart', 'true');
       await animate(
         '#zen-welcome-heart',
         { opacity: [0, 1, 1, 1, 0], scale: [0.5, 1, 1.2, 1, 1.2] },
@@ -349,12 +350,12 @@
                       <html:div class="tab-background"></html:div>
                     </stack>
                   </html:div>
-                  <html:div class="tabbrowser-tab" fadein="" data-url="https://slack.com/" style="--zen-tab-icon: url('https://a.slack-edge.com/80588/marketing/img/meta/favicon-32.png');">
+                  <html:div class="tabbrowser-tab" fadein="" visuallyselected="" data-url="https://slack.com/" style="--zen-tab-icon: url('https://a.slack-edge.com/80588/marketing/img/meta/favicon-32.png');">
                     <stack class="tab-stack">
                       <html:div class="tab-background"></html:div>
                     </stack>
                   </html:div>
-                  <html:div class="tabbrowser-tab" fadein="" visuallyselected="" data-url="https://google.com" style="--zen-tab-icon: url('https://www.google.com/s2/favicons?domain=google.com');">
+                  <html:div class="tabbrowser-tab" fadein="" visuallyselected="" data-url="https://github.com" style="--zen-tab-icon: url('https://github.githubassets.com/favicons/favicon-dark.png');">
                     <stack class="tab-stack">
                       <html:div class="tab-background"></html:div>
                     </stack>
@@ -364,7 +365,7 @@
                       <html:div class="tab-background"></html:div>
                     </stack>
                   </html:div>
-                  <html:div class="tabbrowser-tab" fadein="" data-url="https://notion.com" style="--zen-tab-icon: url('https://www.notion.so/front-static/favicon.ico');">
+                  <html:div class="tabbrowser-tab" fadein="" visuallyselected="" data-url="https://notion.com" style="--zen-tab-icon: url('https://www.notion.so/front-static/favicon.ico');">
                     <stack class="tab-stack">
                       <html:div class="tab-background"></html:div>
                     </stack>