FIX: Add 'title' to ColorPicker

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

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>

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

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