72 lines
2.0 KiB
TypeScript
72 lines
2.0 KiB
TypeScript
import { mdiMessageTextFast } from "@mdi/js";
|
|
import Icon from "@mdi/react";
|
|
import { Typography } from "@mui/material";
|
|
import MuiCard from "@mui/material/Card";
|
|
import Stack from "@mui/material/Stack";
|
|
import { styled } from "@mui/material/styles";
|
|
import { Outlet } from "react-router";
|
|
|
|
const Card = styled(MuiCard)(({ theme }) => ({
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignSelf: "center",
|
|
width: "100%",
|
|
padding: theme.spacing(4),
|
|
gap: theme.spacing(2),
|
|
margin: "auto",
|
|
[theme.breakpoints.up("sm")]: {
|
|
maxWidth: "450px",
|
|
},
|
|
boxShadow:
|
|
"hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px",
|
|
...theme.applyStyles("dark", {
|
|
boxShadow:
|
|
"hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px",
|
|
}),
|
|
}));
|
|
|
|
const SignInContainer = styled(Stack)(({ theme }) => ({
|
|
height: "calc((1 - var(--template-frame-height, 0)) * 100dvh)",
|
|
minHeight: "100%",
|
|
padding: theme.spacing(2),
|
|
[theme.breakpoints.up("sm")]: {
|
|
padding: theme.spacing(4),
|
|
},
|
|
"&::before": {
|
|
content: '""',
|
|
display: "block",
|
|
position: "absolute",
|
|
zIndex: -1,
|
|
inset: 0,
|
|
backgroundImage:
|
|
"radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))",
|
|
backgroundRepeat: "no-repeat",
|
|
...theme.applyStyles("dark", {
|
|
backgroundImage:
|
|
"radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))",
|
|
}),
|
|
},
|
|
}));
|
|
|
|
export function BaseLoginPage(): React.ReactElement {
|
|
return (
|
|
<SignInContainer direction="column" justifyContent="space-between">
|
|
<Card variant="outlined">
|
|
<Typography
|
|
component="h1"
|
|
variant="h4"
|
|
sx={{ width: "100%", fontSize: "clamp(2rem, 10vw, 2.15rem)" }}
|
|
>
|
|
<Icon
|
|
path={mdiMessageTextFast}
|
|
size={"1em"}
|
|
style={{ display: "inline-table" }}
|
|
/>{" "}
|
|
MatrixGW
|
|
</Typography>
|
|
<Outlet />
|
|
</Card>
|
|
</SignInContainer>
|
|
);
|
|
}
|