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.
41 lines
785 B
TypeScript
41 lines
785 B
TypeScript
import Typography from "@mui/material/Typography";
|
|
import { useTheme } from "@mui/material/styles";
|
|
|
|
interface FieldLabelProps {
|
|
children: React.ReactNode;
|
|
required?: boolean;
|
|
htmlFor?: string;
|
|
}
|
|
|
|
export const FieldLabel = ({ children, required = false, htmlFor }: FieldLabelProps) => {
|
|
const theme = useTheme();
|
|
if (children === " ") {
|
|
children = "\u00A0";
|
|
}
|
|
return (
|
|
<Typography
|
|
component="label"
|
|
variant="body1"
|
|
htmlFor={htmlFor}
|
|
sx={{
|
|
fontWeight: 500,
|
|
color: theme.palette.text.secondary,
|
|
marginBottom: theme.spacing(2),
|
|
display: "block",
|
|
}}
|
|
>
|
|
{children}
|
|
{required && (
|
|
<span
|
|
style={{
|
|
color: theme.palette.error.main,
|
|
marginLeft: theme.spacing(2),
|
|
}}
|
|
>
|
|
*
|
|
</span>
|
|
)}
|
|
</Typography>
|
|
);
|
|
};
|