From cca027b5eb5b0d93ba1faaa379f1be647d10053a Mon Sep 17 00:00:00 2001 From: gorkem-bwl Date: Sun, 26 Apr 2026 00:42:11 -0400 Subject: [PATCH] fix(client): subtle tinted selection on toggle button group Selected segment uses a 6% primary alpha rather than the previous green tint, and the per-button border override is gone so adjacent segments share one clean divider line. --- client/src/Components/inputs/ToggleButton.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/client/src/Components/inputs/ToggleButton.tsx b/client/src/Components/inputs/ToggleButton.tsx index 40b4309b8..e0a6f0ea2 100644 --- a/client/src/Components/inputs/ToggleButton.tsx +++ b/client/src/Components/inputs/ToggleButton.tsx @@ -3,8 +3,10 @@ import ToggleButtonGroup from "@mui/material/ToggleButtonGroup"; import type { ToggleButtonProps } from "@mui/material/ToggleButton"; import type { ToggleButtonGroupProps } from "@mui/material/ToggleButtonGroup"; import { useTheme } from "@mui/material/styles"; +import { alpha } from "@mui/material/styles"; export const ToggleButtonInput = ({ sx, ...props }: ToggleButtonProps) => { + const theme = useTheme(); return ( { textOverflow: "ellipsis", overflow: "hidden", boxShadow: "none", + color: theme.palette.text.secondary, "&:hover": { boxShadow: "none", + backgroundColor: theme.palette.action.hover, + }, + "&.Mui-selected": { + backgroundColor: alpha(theme.palette.primary.main, 0.06), + color: theme.palette.text.primary, + fontWeight: 500, + "&:hover": { + backgroundColor: alpha(theme.palette.primary.main, 0.1), + }, }, ...sx, }} @@ -34,7 +46,6 @@ export const ToggleButtonGroupInput = ({ sx, ...props }: ToggleButtonGroupProps) sx={{ "& .MuiToggleButtonGroup-grouped": { borderColor: theme.palette.divider, - borderRadius: 0, "&:first-of-type": { borderTopLeftRadius: 2,