login UI

client/src/Components/v2/design-elements/BasePage.tsx

@@ -205,12 +205,17 @@ export const MonitorBasePageWithStates = ({
 	);
 };
 
-interface BaseAuthPageProps extends React.PropsWithChildren {
+interface BaseAuthPageProps extends React.PropsWithChildren, StackProps {
 	title: string;
 	subtitle: string;
 }
 
-export const BaseAuthPage = ({ title, subtitle, children }: BaseAuthPageProps) => {
+export const BaseAuthPage = ({
+	title,
+	subtitle,
+	children,
+	...props
+}: BaseAuthPageProps) => {
 	const theme = useTheme();
 	return (
 		<BasePage
@@ -220,6 +225,7 @@ export const BaseAuthPage = ({ title, subtitle, children }: BaseAuthPageProps) =
 			justifyContent={"center"}
 			minHeight="100vh"
 			position={"relative"}
+			{...props}
 		>
 			<HeaderAuthControls
 				hideLogo
@@ -243,7 +249,16 @@ export const BaseAuthPage = ({ title, subtitle, children }: BaseAuthPageProps) =
 				</Typography>
 				<Typography variant="h1">{subtitle}</Typography>
 			</Stack>
-			{children}
+			<Stack
+				gap={theme.spacing(8)}
+				width={{
+					xs: "80%",
+					md: "25%",
+					lg: "15%",
+				}}
+			>
+				{children}
+			</Stack>
 		</BasePage>
 	);
 };

client/src/Components/v2/design-elements/TextLink.tsx

@@ -0,0 +1,42 @@
+import Typography from "@mui/material/Typography";
+import Stack from "@mui/material/Stack";
+import type { StackProps } from "@mui/material/Stack";
+import Link from "@mui/material/Link";
+import { Link as RouterLink } from "react-router-dom";
+
+import { useTheme } from "@mui/material/styles";
+
+interface TextLinkProps extends StackProps {
+	text: string;
+	linkText: string;
+	href: string;
+	target?: string;
+}
+
+export const TextLink = ({
+	text,
+	linkText,
+	href,
+	target = "_self",
+	...props
+}: TextLinkProps) => {
+	const theme = useTheme();
+
+	return (
+		<Stack
+			direction="row"
+			gap={theme.spacing(4)}
+			{...props}
+		>
+			<Typography>{text}</Typography>
+			<Link
+				color="primary"
+				to={href}
+				component={RouterLink}
+				target={target}
+			>
+				{linkText}
+			</Link>
+		</Stack>
+	);
+};

client/src/Components/v2/design-elements/index.tsx

@@ -18,3 +18,4 @@ export * from "./BaseChart";
 export * from "./Gauge";
 export * from "./Tabs";
 export * from "./SplitBox";
+export * from "./TextLink";