gorkem-bwl
4fd9b2ecf5
- Introduce a reusable eyebrow Typography variant in the theme (13px, 500 weight, uppercase, 0.08em tracking) for section headings - Apply it to ConfigBox titles in /settings and to "Job queue" / "Failed jobs" in /logs - Drop the page header weight from 600 to 400 with tighter tracking so titles read lighter and more refined
80 lines
1.8 KiB
TypeScript
80 lines
1.8 KiB
TypeScript
import Stack from "@mui/material/Stack";
|
|
import Box from "@mui/material/Box";
|
|
import Typography from "@mui/material/Typography";
|
|
import { useTheme } from "@mui/material/styles";
|
|
import useMediaQuery from "@mui/material/useMediaQuery";
|
|
import { LAYOUT } from "@/Utils/Theme/constants";
|
|
export const SplitBox = ({
|
|
left,
|
|
right,
|
|
}: {
|
|
left: React.ReactNode;
|
|
right: React.ReactNode;
|
|
}) => {
|
|
const theme = useTheme();
|
|
const isSmall = useMediaQuery(theme.breakpoints.down("md"));
|
|
return (
|
|
<Stack
|
|
direction={isSmall ? "column" : "row"}
|
|
bgcolor={theme.palette.background.paper}
|
|
border={1}
|
|
borderColor={theme.palette.divider}
|
|
borderRadius={theme.shape.borderRadius}
|
|
>
|
|
<Box
|
|
padding={theme.spacing(LAYOUT.XXL)}
|
|
borderRight={isSmall ? 0 : 1}
|
|
borderBottom={isSmall ? 1 : 0}
|
|
borderColor={theme.palette.divider}
|
|
flex={0.7}
|
|
sx={{
|
|
background:
|
|
theme.palette.mode === "dark"
|
|
? "linear-gradient(135deg, rgba(255, 255, 255, 0.01) 0%, rgba(255, 255, 255, 0.02) 100%)"
|
|
: "linear-gradient(135deg, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.02) 100%)",
|
|
}}
|
|
>
|
|
{left}
|
|
</Box>
|
|
<Box
|
|
flex={1}
|
|
padding={theme.spacing(LAYOUT.XXL)}
|
|
>
|
|
{right}
|
|
</Box>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export const ConfigBox = ({
|
|
title,
|
|
subtitle,
|
|
leftContent,
|
|
rightContent,
|
|
}: {
|
|
title: string;
|
|
subtitle: string;
|
|
leftContent?: React.ReactNode;
|
|
rightContent: React.ReactNode;
|
|
}) => {
|
|
const theme = useTheme();
|
|
return (
|
|
<SplitBox
|
|
left={
|
|
<Stack spacing={theme.spacing(LAYOUT.XS)}>
|
|
<Typography
|
|
component="h2"
|
|
variant="eyebrow"
|
|
color="text.secondary"
|
|
>
|
|
{title}
|
|
</Typography>
|
|
<Typography component="p">{subtitle}</Typography>
|
|
{leftContent}
|
|
</Stack>
|
|
}
|
|
right={rightContent}
|
|
/>
|
|
);
|
|
};
|