From 9e65ea302450aef19bcbfa3d1cf7fd271cbcaa60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Hatcher?= <nicolas@theuniverse.today>
Date: Tue, 18 Mar 2025 23:10:24 +0100
Subject: [PATCH] FIX: Add 'title' to ColorPicker

---
 webapp/IronCalc/src/components/BorderPicker/BorderPicker.tsx | 1 +
 webapp/IronCalc/src/components/ColorPicker/ColorPicker.tsx   | 4 +++-
 webapp/IronCalc/src/components/SheetTabBar/SheetTab.tsx      | 3 +++
 webapp/IronCalc/src/components/Toolbar/Toolbar.tsx           | 2 ++
 4 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/webapp/IronCalc/src/components/BorderPicker/BorderPicker.tsx b/webapp/IronCalc/src/components/BorderPicker/BorderPicker.tsx
index 43a8470..1adf0ff 100644
--- a/webapp/IronCalc/src/components/BorderPicker/BorderPicker.tsx
+++ b/webapp/IronCalc/src/components/BorderPicker/BorderPicker.tsx
@@ -262,6 +262,7 @@ const BorderPicker = (properties: BorderPickerProps) => {
         </BorderPickerDialog>
         <ColorPicker
           color={borderColor}
+          title={t("color_picker.no_fill")}
           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 29ac63b..7bc4a94 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;
+  title: string;
   onChange: (color: string) => void;
   onClose: () => void;
   anchorEl: React.RefObject<HTMLElement | null>;
@@ -22,6 +23,7 @@ const colorPickerWidth = 240;
 // Main Component
 const ColorPicker = ({
   color,
+  title,
   onChange,
   onClose,
   anchorEl,
@@ -177,7 +179,7 @@ const ColorPicker = ({
         >
           <MenuItemWrapper onClick={() => handleColorSelect(color)}>
             <MenuItemSquare style={{ backgroundColor: color }} />
-            <MenuItemText>{t("color_picker.default")}</MenuItemText>
+            <MenuItemText>{title}</MenuItemText>
           </MenuItemWrapper>
           <HorizontalDivider />
           <ColorsWrapper>
diff --git a/webapp/IronCalc/src/components/SheetTabBar/SheetTab.tsx b/webapp/IronCalc/src/components/SheetTabBar/SheetTab.tsx
index f4307c0..c5ecce3 100644
--- a/webapp/IronCalc/src/components/SheetTabBar/SheetTab.tsx
+++ b/webapp/IronCalc/src/components/SheetTabBar/SheetTab.tsx
@@ -2,6 +2,7 @@ import { Button, Menu, MenuItem, styled } from "@mui/material";
 import type { MenuItemProps } from "@mui/material";
 import { ChevronDown } from "lucide-react";
 import { useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { theme } from "../../theme";
 import ColorPicker from "../ColorPicker/ColorPicker";
 import { isInReferenceMode } from "../Editor/util";
@@ -28,6 +29,7 @@ function SheetTab(props: SheetTabProps) {
   const [colorPickerOpen, setColorPickerOpen] = useState(false);
   const colorButton = useRef<HTMLDivElement>(null);
   const open = Boolean(anchorEl);
+  const { t } = useTranslation();
   const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
   };
@@ -136,6 +138,7 @@ function SheetTab(props: SheetTabProps) {
       />
       <ColorPicker
         color={color}
+        title={t("color_picker.no_fill")}
         onChange={(color): void => {
           props.onColorChanged(color);
           setColorPickerOpen(false);
diff --git a/webapp/IronCalc/src/components/Toolbar/Toolbar.tsx b/webapp/IronCalc/src/components/Toolbar/Toolbar.tsx
index 4701802..a3990bc 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}
+        title={t("color_picker.default")}
         onChange={(color): void => {
           properties.onTextColorPicked(color);
           setFontColorPickerOpen(false);
@@ -455,6 +456,7 @@ function Toolbar(properties: ToolbarProperties) {
       />
       <ColorPicker
         color={properties.fillColor}
+        title={t("color_picker.default")}
         onChange={(color): void => {
           if (color !== null) {
             properties.onFillColorPicked(color);