From 475c3e9d49f3f90df5f5ee30de3c697cbf0fdb52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Hatcher?= <nicolas@theuniverse.today>
Date: Tue, 18 Mar 2025 23:22:44 +0100
Subject: [PATCH] FIX: Add defaultColor to color picker

NB: Dani will have to pass the color from the theme
---
 .../IronCalc/src/components/BorderPicker/BorderPicker.tsx   | 3 ++-
 webapp/IronCalc/src/components/ColorPicker/ColorPicker.tsx  | 6 ++++--
 webapp/IronCalc/src/components/SheetTabBar/SheetTab.tsx     | 1 +
 webapp/IronCalc/src/components/Toolbar/Toolbar.tsx          | 2 ++
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/webapp/IronCalc/src/components/BorderPicker/BorderPicker.tsx b/webapp/IronCalc/src/components/BorderPicker/BorderPicker.tsx
index 1adf0ff..e02574c 100644
--- a/webapp/IronCalc/src/components/BorderPicker/BorderPicker.tsx
+++ b/webapp/IronCalc/src/components/BorderPicker/BorderPicker.tsx
@@ -262,7 +262,8 @@ const BorderPicker = (properties: BorderPickerProps) => {
         </BorderPickerDialog>
         <ColorPicker
           color={borderColor}
-          title={t("color_picker.no_fill")}
+          defaultColor="#000000"
+          title={t("color_picker.default")}
           onChange={(color): void => {
             setBorderColor(color);
             setColorPickerOpen(false);
diff --git a/webapp/IronCalc/src/components/ColorPicker/ColorPicker.tsx b/webapp/IronCalc/src/components/ColorPicker/ColorPicker.tsx
index 7bc4a94..9a9f4c9 100644
--- a/webapp/IronCalc/src/components/ColorPicker/ColorPicker.tsx
+++ b/webapp/IronCalc/src/components/ColorPicker/ColorPicker.tsx
@@ -9,6 +9,7 @@ import { theme } from "../../theme";
 // Types
 type ColorPickerProps = {
   color: string;
+  defaultColor: string;
   title: string;
   onChange: (color: string) => void;
   onClose: () => void;
@@ -23,6 +24,7 @@ const colorPickerWidth = 240;
 // Main Component
 const ColorPicker = ({
   color,
+  defaultColor,
   title,
   onChange,
   onClose,
@@ -177,8 +179,8 @@ const ColorPicker = ({
           open={isMenuOpen}
           onClose={handleClose}
         >
-          <MenuItemWrapper onClick={() => handleColorSelect(color)}>
-            <MenuItemSquare style={{ backgroundColor: color }} />
+          <MenuItemWrapper onClick={() => handleColorSelect(defaultColor)}>
+            <MenuItemSquare style={{ backgroundColor: defaultColor }} />
             <MenuItemText>{title}</MenuItemText>
           </MenuItemWrapper>
           <HorizontalDivider />
diff --git a/webapp/IronCalc/src/components/SheetTabBar/SheetTab.tsx b/webapp/IronCalc/src/components/SheetTabBar/SheetTab.tsx
index c5ecce3..41d32ae 100644
--- a/webapp/IronCalc/src/components/SheetTabBar/SheetTab.tsx
+++ b/webapp/IronCalc/src/components/SheetTabBar/SheetTab.tsx
@@ -138,6 +138,7 @@ function SheetTab(props: SheetTabProps) {
       />
       <ColorPicker
         color={color}
+        defaultColor="#FFFFFF"
         title={t("color_picker.no_fill")}
         onChange={(color): void => {
           props.onColorChanged(color);
diff --git a/webapp/IronCalc/src/components/Toolbar/Toolbar.tsx b/webapp/IronCalc/src/components/Toolbar/Toolbar.tsx
index a3990bc..105e147 100644
--- a/webapp/IronCalc/src/components/Toolbar/Toolbar.tsx
+++ b/webapp/IronCalc/src/components/Toolbar/Toolbar.tsx
@@ -443,6 +443,7 @@ function Toolbar(properties: ToolbarProperties) {
 
       <ColorPicker
         color={properties.fontColor}
+        defaultColor="#000000"
         title={t("color_picker.default")}
         onChange={(color): void => {
           properties.onTextColorPicked(color);
@@ -456,6 +457,7 @@ function Toolbar(properties: ToolbarProperties) {
       />
       <ColorPicker
         color={properties.fillColor}
+        defaultColor="#FFFFFF"
         title={t("color_picker.default")}
         onChange={(color): void => {
           if (color !== null) {