FIX: Add defaultColor to color picker

NB: Dani will have to pass the color from the theme

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);

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)}>
+          <MenuItemWrapper onClick={() => handleColorSelect(defaultColor)}>
-            <MenuItemSquare style={{ backgroundColor: color }} />
+            <MenuItemSquare style={{ backgroundColor: defaultColor }} />
             <MenuItemText>{title}</MenuItemText>
           </MenuItemWrapper>
           <HorizontalDivider />

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);

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) {