update: in Type and Bucket buttons, use a colored div instead of a border

webapp/IronCalc/src/components/Toolbar/Toolbar.tsx

@@ -278,6 +278,7 @@ function Toolbar(properties: ToolbarProperties) {
         onClick={() => setFontColorPickerOpen(true)}
       >
         <Type />
+        <ColorLine color={properties.fontColor} />
       </StyledButton>
       <StyledButton
         type="button"
@@ -289,6 +290,7 @@ function Toolbar(properties: ToolbarProperties) {
         onClick={() => setFillColorPickerOpen(true)}
       >
         <PaintBucket />
+        <ColorLine color={properties.fillColor} />
       </StyledButton>
       <StyledButton
         type="button"
@@ -500,8 +502,10 @@ const ToolbarContainer = styled("div")`
 `;
 
 type TypeButtonProperties = { $pressed: boolean; $underlinedColor?: string };
-export const StyledButton = styled("button")<TypeButtonProperties>(
+export const StyledButton = styled("button", {
-  ({ disabled, $pressed, $underlinedColor }) => {
+  shouldForwardProp: (prop) =>
+    prop !== "$pressed" && prop !== "$underlinedColor",
+})<TypeButtonProperties>(({ disabled, $pressed }) => {
   const result = {
     width: "24px",
     minWidth: "24px",
@@ -517,6 +521,7 @@ export const StyledButton = styled("button")<TypeButtonProperties>(
     cursor: "pointer",
     backgroundColor: "white",
     padding: "0px",
+    position: "relative" as const,
     svg: {
       width: "16px",
       height: "16px",
@@ -531,10 +536,6 @@ export const StyledButton = styled("button")<TypeButtonProperties>(
   }
   return {
     ...result,
-      borderTop: $underlinedColor
-        ? `3px solid ${theme.palette.common.white}`
-        : "none",
-      borderBottom: $underlinedColor ? `3px solid ${$underlinedColor}` : "none",
     color: theme.palette.grey["900"],
     backgroundColor: $pressed
       ? theme.palette.grey["300"]
@@ -542,15 +543,23 @@ export const StyledButton = styled("button")<TypeButtonProperties>(
     "&:hover": {
       transition: "all 0.2s",
       outline: `1px solid ${theme.palette.grey["200"]}`,
-        borderTopColor: theme.palette.common.white,
     },
     "&:active": {
       backgroundColor: theme.palette.grey["300"],
       outline: `1px solid ${theme.palette.grey["300"]}`,
     },
   };
-  },
+});
-);
+
+const ColorLine = styled("div")<{ color: string }>(({ color }) => ({
+  height: "3px",
+  width: "16px",
+  position: "absolute",
+  bottom: "0px",
+  left: "50%",
+  transform: "translateX(-50%)",
+  backgroundColor: color,
+}));
 
 const Divider = styled("div")({
   width: "0px",