From 2268515bb1cf7db879976a92a47e0792fdf55e0f Mon Sep 17 00:00:00 2001
From: Mauro Balades <mauro.balades@tutanota.com>
Date: Fri, 5 Jul 2024 10:04:23 +0200
Subject: [PATCH] Update dot size and color in welcome.css and add color
 preview in welcome.html

---
 .../components/zen-welcome/welcome.css        | 19 +++++++++++++++----
 .../components/zen-welcome/welcome.html       |  1 +
 src/browser/components/zen-welcome/welcome.js |  5 ++++-
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/browser/components/zen-welcome/welcome.css b/src/browser/components/zen-welcome/welcome.css
index d232a567f..8b015b611 100644
--- a/src/browser/components/zen-welcome/welcome.css
+++ b/src/browser/components/zen-welcome/welcome.css
@@ -190,16 +190,16 @@ input[type='checkbox'] {
 }
 
 .dot {
-  width: 7px;
-  height: 7px;
+  width: 8px;
+  height: 8px;
   border-radius: 50%;
-  background: var(--in-content-primary-button-background);
   transition: all .1s;
+  background: light-dark(#000, #fff);
   cursor: pointer;
 }
 
 .dot.active {
-  background: light-dark(#000, #fff);
+  background: var(--zen-primary-color);
 }
 
 #colorList {
@@ -224,3 +224,14 @@ input[type='checkbox'] {
   width: 500px;
   height: 20px;
 }
+
+#colorPreview {
+  margin-left: 10px;
+  border-radius: 5px;
+  width: 25px;
+  height: 25px;
+  position: absolute;
+  top: 50%;
+  right: -60px;
+  transform: translateY(-50%);
+}
diff --git a/src/browser/components/zen-welcome/welcome.html b/src/browser/components/zen-welcome/welcome.html
index 77afed094..0fc53e03f 100644
--- a/src/browser/components/zen-welcome/welcome.html
+++ b/src/browser/components/zen-welcome/welcome.html
@@ -77,6 +77,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
         <div id="colorListWrapper">
           <canvas id="colorList" class="cardGroup"></canvas>
           <div id="dragBall"></div>
+          <div id="colorPreview"></div>
         </div>
         <button
           id="themeNext"
diff --git a/src/browser/components/zen-welcome/welcome.js b/src/browser/components/zen-welcome/welcome.js
index 2c468614d..48ea273dc 100644
--- a/src/browser/components/zen-welcome/welcome.js
+++ b/src/browser/components/zen-welcome/welcome.js
@@ -196,12 +196,15 @@ class Themes extends Page {
           x = rect.width - 17 - (17/2);
         }  
         const data = ctx.getImageData(x - 17, 1, 1, 1).data;
-        Services.prefs.setStringPref('zen.theme.accent-color', `#${data[0].toString(16)}${data[1].toString(16)}${data[2].toString(16)}`);
+        let color = `#${data[0].toString(16)}${data[1].toString(16)}${data[2].toString(16)}`;
+        document.getElementById("colorPreview").style.backgroundColor = color;
+        Services.prefs.setStringPref('zen.theme.accent-color', color);
       }
 
       const onMouseUp = () => {
         document.removeEventListener('mousemove', onMouseMove);
         document.removeEventListener('mouseup', onMouseUp);
+        document.getElementById("colorPreview").style.backgroundColor = '';
       }
       
       document.addEventListener('mousemove', onMouseMove);