gorkem-bwl
9c21d71c44
- Button.tsx: contained variant's hover now uses HOVER.DARKEN=0.06 instead of MUI's default 16%, which was visibly heavy on the green primary buttons across the app. Also fixes a subtle bug where the earlier hover sx merge order silently dropped the boxShadow:'none' reset. Added a HOVER token group to constants.ts so the darken value has a single source of truth. - TextInput.tsx: forward the caller's sx to the wrapper Stack when a fieldLabel is present (previously it was applied to the inner TextField, so flex:1 etc. didn't propagate to the visible width). Inner sx now also explicitly width:100% so wrapped inputs don't collapse to content width when their parent is a flex row. - FieldLabel.tsx: drop the hardcoded fontSize:'14px' and use variant=body1 (=13px from theme) to match the rest of the app's body typography.
60 lines
1.4 KiB
TypeScript
60 lines
1.4 KiB
TypeScript
import Button from "@mui/material/Button";
|
|
import type { ButtonProps } from "@mui/material/Button";
|
|
import { useTheme, darken } from "@mui/material/styles";
|
|
import { HOVER } from "@/Utils/Theme/constants";
|
|
|
|
const PALETTE_COLORS = [
|
|
"primary",
|
|
"secondary",
|
|
"error",
|
|
"warning",
|
|
"info",
|
|
"success",
|
|
] as const;
|
|
type PaletteColor = (typeof PALETTE_COLORS)[number];
|
|
|
|
export const ButtonInput = ({ sx, ...props }: ButtonProps) => {
|
|
const theme = useTheme();
|
|
|
|
const hoverOverrides: Record<string, unknown> = { boxShadow: "none" };
|
|
|
|
if (props.variant === "outlined") {
|
|
hoverOverrides.borderColor = theme.palette.text.secondary;
|
|
}
|
|
|
|
if (props.variant === "contained") {
|
|
const colorKey = (props.color ?? "primary") as PaletteColor;
|
|
const palette = theme.palette[colorKey];
|
|
if (palette && typeof palette === "object" && "main" in palette) {
|
|
hoverOverrides.backgroundColor = darken(palette.main, HOVER.DARKEN);
|
|
}
|
|
}
|
|
|
|
const variantSx =
|
|
props.variant === "outlined"
|
|
? {
|
|
color: theme.palette.text.primary,
|
|
borderColor: theme.palette.divider,
|
|
}
|
|
: {};
|
|
|
|
return (
|
|
<Button
|
|
{...props}
|
|
sx={{
|
|
textTransform: "none",
|
|
height: 34,
|
|
fontWeight: 400,
|
|
borderRadius: 2,
|
|
whiteSpace: "nowrap",
|
|
textOverflow: "ellipsis",
|
|
overflow: "hidden",
|
|
boxShadow: "none",
|
|
"&:hover": hoverOverrides,
|
|
...variantSx,
|
|
...sx,
|
|
}}
|
|
/>
|
|
);
|
|
};
|