gorkem-bwl
17822b7cf6
Review feedback from @malenacaroline on #3915: the theme pass carried too many comments, and they explain decisions rather than code. Remove 64 lines of rationale prose across 12 files. Everything taken out described *why* a value was chosen - which palette entry MUI derives what from, why a weight stays put, why a gradient lifts off `main`. That belongs in the PR description and commit history, not in an `sx` block where it goes stale the moment the palette moves. Two comments deliberately stay: - `StatusBox`: alpha() *replaces* the alpha channel rather than multiplying, so the faint grid depends on `divider` being an opaque hex. That is a live trap, not a design note. - `Table`: the `isRowSelected` JSDoc documents a real limitation of the prop (desktop table only), which a caller needs to know. Section labels (// Blues, // Hooks) are untouched. Also name the last bare number beside CONTROL_HEIGHT: the header icon links were `width: 36` next to `height: CONTROL_HEIGHT`. Now ICON_CONTROL_WIDTH. The other two `width: 36` sites are a switch track and a logo tile - same number, unrelated concepts, left alone. Gates: tsc clean, build ✓, format-check clean, lint unchanged from develop (12 errors, all pre-existing in untouched files).
71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
import ToggleButton from "@mui/material/ToggleButton";
|
|
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";
|
|
import { CONTROL_HEIGHT } from "@/Utils/Theme/constants";
|
|
|
|
export const ToggleButtonInput = ({ sx, ...props }: ToggleButtonProps) => {
|
|
const theme = useTheme();
|
|
const isDark = theme.palette.mode === "dark";
|
|
const selectedBg = isDark
|
|
? alpha(theme.palette.primary.main, 0.22)
|
|
: alpha(theme.palette.primary.main, 0.06);
|
|
const selectedHoverBg = isDark
|
|
? alpha(theme.palette.primary.main, 0.3)
|
|
: alpha(theme.palette.primary.main, 0.1);
|
|
return (
|
|
<ToggleButton
|
|
{...props}
|
|
sx={{
|
|
px: 8,
|
|
textTransform: "none",
|
|
height: CONTROL_HEIGHT,
|
|
fontWeight: 400,
|
|
whiteSpace: "nowrap",
|
|
textOverflow: "ellipsis",
|
|
overflow: "hidden",
|
|
boxShadow: "none",
|
|
color: theme.palette.text.secondary,
|
|
"&:hover": {
|
|
boxShadow: "none",
|
|
backgroundColor: theme.palette.action.hover,
|
|
},
|
|
"&.Mui-selected": {
|
|
backgroundColor: selectedBg,
|
|
color: theme.palette.text.primary,
|
|
"&:hover": {
|
|
backgroundColor: selectedHoverBg,
|
|
},
|
|
},
|
|
...sx,
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export const ToggleButtonGroupInput = ({ sx, ...props }: ToggleButtonGroupProps) => {
|
|
const theme = useTheme();
|
|
return (
|
|
<ToggleButtonGroup
|
|
{...props}
|
|
sx={{
|
|
"& .MuiToggleButtonGroup-grouped": {
|
|
borderColor: theme.palette.divider,
|
|
borderRadius: 0,
|
|
"&:first-of-type": {
|
|
borderTopLeftRadius: 2,
|
|
borderBottomLeftRadius: 2,
|
|
},
|
|
"&:last-of-type": {
|
|
borderTopRightRadius: 2,
|
|
borderBottomRightRadius: 2,
|
|
},
|
|
},
|
|
...sx,
|
|
}}
|
|
/>
|
|
);
|
|
};
|