Oct 16, 2023 · Oct 13, 2023 · Oct 13, 2023 · Oct 13, 2023 · Oct 13, 2023 · Oct 13, 2023
diff --git a/site/src/components/Dashboard/Navbar/UserDropdown/BorderedMenu.tsx b/site/src/components/Dashboard/Navbar/UserDropdown/BorderedMenu.tsx
 import { css } from "@emotion/css";
 import { useTheme } from "@emotion/react";
 import Popover, { PopoverProps } from "@mui/material/Popover";
 import Popover, {typePopoverProps } from "@mui/material/Popover";
 import type { FC, PropsWithChildren } from "react";

 type BorderedMenuVariant = "user-dropdown";

  const paper = css`
    width: 260px;
    border-radius: ${theme.shape.borderRadius};
    border-radius: ${theme.shape.borderRadius}px;
    box-shadow: ${theme.shadows[6]};
  `;

diff --git a/site/src/components/DeploySettingsLayout/Sidebar.tsx b/site/src/components/DeploySettingsLayout/Sidebar.tsx
        font-size: 14px;
        text-decoration: none;
        padding: ${theme.spacing(1.5, 1.5, 1.5, 2)};
        border-radius: ${theme.shape.borderRadius / 2};
        border-radius: ${theme.shape.borderRadius / 2}px;
        transition: background-color 0.15s ease-in-out;
        margin-bottom: 1;
        position: relative;
diff --git a/site/src/components/ErrorBoundary/RuntimeErrorState.tsx b/site/src/components/ErrorBoundary/RuntimeErrorState.tsx
 import Button from "@mui/material/Button";
 import Link from "@mui/material/Link";
 import { makeStyles } from "@mui/styles";
 import RefreshOutlined from "@mui/icons-material/RefreshOutlined";
 import { BuildInfoResponse } from "api/typesGenerated";
 import { type FC, useEffect, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { css } from "@emotion/css";
 import { useTheme, type Interpolation, type Theme } from "@emotion/react";
 import type { BuildInfoResponse } from "api/typesGenerated";
 import { CopyButton } from "components/CopyButton/CopyButton";
 import { CoderIcon } from "components/Icons/CoderIcon";
 import { FullScreenLoader } from "components/Loader/FullScreenLoader";
 import { Stack } from "components/Stack/Stack";
 import { FC, useEffect, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { Margins } from "components/Margins/Margins";

 const fetchDynamicallyImportedModuleError =
 export type RuntimeErrorStateProps = { error: Error };

 export const RuntimeErrorState: FC<RuntimeErrorStateProps> = ({ error }) => {
  conststyles =useStyles();
  consttheme =useTheme();
  const [checkingError, setCheckingError] = useState(true);
  const [staticBuildInfo, setStaticBuildInfo] = useState<BuildInfoResponse>();
  const coderVersion = staticBuildInfo?.version;
        <title>Something went wrong...</title>
      </Helmet>
      {!checkingError ? (
        <MarginsclassName={styles.root}>
          <divclassName={styles.innerRoot}>
            <CoderIconclassName={styles.logo} />
            <h1className={styles.title}>Something went wrong...</h1>
            <pclassName={styles.text}>
        <Marginscss={styles.root}>
          <divcss={{ width: "100%" }}>
            <CoderIconcss={styles.logo} />
            <h1css={styles.title}>Something went wrong...</h1>
            <pcss={styles.text}>
              Please try reloading the page, if that doesn&lsquo;t work, you can
              ask for help in the{" "}
              <Link href="https://discord.gg/coder">
              </Button>
            </Stack>
            {error.stack && (
              <divclassName={styles.stack}>
                <divclassName={styles.stackHeader}>
              <divcss={styles.stack}>
                <divcss={styles.stackHeader}>
                  Stacktrace
                  <CopyButton
                    buttonClassName={styles.copyButton}
                    buttonClassName={css`
                      background-color: transparent;
                      border: 0;
                      border-radius: 999px;
                      min-height: ${theme.spacing(4)};
                      min-width: ${theme.spacing(4)};
                      height: ${theme.spacing(4)};
                      width: ${theme.spacing(4)};

                      & svg {
                        width: 16px;
                        height: 16px;
                      }
                    `}
                    text={error.stack}
                    tooltipTitle="Copy stacktrace"
                  />
                </div>
                <preclassName={styles.stackCode}>{error.stack}</pre>
                <precss={styles.stackCode}>{error.stack}</pre>
              </div>
            )}
            {coderVersion && (
              <divclassName={styles.version}>Version: {coderVersion}</div>
              <divcss={styles.version}>Version: {coderVersion}</div>
            )}
          </div>
        </Margins>
  }
 };

 constuseStyles =makeStyles((theme) => ({
  root: {
 conststyles = {
  root:(theme) => ({
    paddingTop: theme.spacing(4),
    paddingBottom: theme.spacing(4),
    textAlign: "center",
    justifyContent: "center",
    minHeight: "100%",
    maxWidth: theme.spacing(75),
  },
  }),

  innerRoot: { width: "100%" },

  logo: {
  logo: (theme) => ({
    fontSize: theme.spacing(8),
  },
  }),

  title: {
  title:(theme) => ({
    fontSize: theme.spacing(4),
    fontWeight: 400,
  },
  }),

  text: {
  text:(theme) => ({
    fontSize: 16,
    color: theme.palette.text.secondary,
    lineHeight: "160%",
    marginBottom: theme.spacing(4),
  },
  }),

  stack: {
  stack:(theme) => ({
    backgroundColor: theme.palette.background.paper,
    border: `1px solid ${theme.palette.divider}`,
    borderRadius: 4,
    marginTop: theme.spacing(8),
    display: "block",
    textAlign: "left",
  },
  }),

  stackHeader: {
  stackHeader:(theme) => ({
    fontSize: 10,
    textTransform: "uppercase",
    fontWeight: 600,
    flexAlign: "center",
    justifyContent: "space-between",
    alignItems: "center",
  },
  }),

  stackCode: {
  stackCode:(theme) => ({
    padding: theme.spacing(2),
    margin: 0,
    wordWrap: "break-word",
    whiteSpace: "break-spaces",
  },

  copyButton: {
    backgroundColor: "transparent",
    border: 0,
    borderRadius: 999,
    minHeight: theme.spacing(4),
    minWidth: theme.spacing(4),
    height: theme.spacing(4),
    width: theme.spacing(4),

    "& svg": {
      width: 16,
      height: 16,
    },
  },

  version: {
  }),

  version: (theme) => ({
    marginTop: theme.spacing(4),
    fontSize: 12,
    color: theme.palette.text.secondary,
  },
 }));
  }),
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/components/FileUpload/FileUpload.tsx b/site/src/components/FileUpload/FileUpload.tsx
 import { makeStyles } from "@mui/styles";
 import { Stack } from "components/Stack/Stack";
 import { FC, DragEvent, useRef, ReactNode } from "react";
 import {typeFC,typeDragEvent, useRef, type ReactNode } from "react";
 import UploadIcon from "@mui/icons-material/CloudUploadOutlined";
 import { useClickable } from "hooks/useClickable";
 import CircularProgress from "@mui/material/CircularProgress";
 import { combineClasses } from "utils/combineClasses";
 import IconButton from "@mui/material/IconButton";
 import RemoveIcon from "@mui/icons-material/DeleteOutline";
 import FileIcon from "@mui/icons-material/FolderOutlined";
 import { css, type Interpolation, type Theme } from "@emotion/react";

 const useFileDrop = (
  callback: (file: File) => void,
  extension,
  fileTypeRequired,
 }) => {
  const styles = useStyles();
  const inputRef = useRef<HTMLInputElement>(null);
  const tarDrop = useFileDrop(onUpload, fileTypeRequired);

  if (!isUploading && file) {
    return (
      <Stack
 className={styles.file}
 css={styles.file}
        direction="row"
        justifyContent="space-between"
        alignItems="center"
  return (
    <>
      <div
        className={combineClasses({
          [styles.root]: true,
          [styles.disabled]: isUploading,
        })}
        css={[styles.root, isUploading && styles.disabled]}
        {...clickable}
        {...tarDrop}
      >
        <Stack alignItems="center" spacing={1}>
          {isUploading ? (
            <CircularProgress size={32} />
          ) : (
            <UploadIconclassName={styles.icon} />
            <UploadIconcss={styles.icon} />
          )}

          <Stack alignItems="center" spacing={0.5}>
            <spanclassName={styles.title}>{title}</span>
            <spanclassName={styles.description}>{description}</span>
            <spancss={styles.title}>{title}</span>
            <spancss={styles.description}>{description}</span>
          </Stack>
        </Stack>
      </div>
        type="file"
        data-testid="file-upload"
        ref={inputRef}
 className={styles.input}
 css={styles.input}
        accept={extension}
        onChange={(event) => {
          const file = event.currentTarget.files?.[0];
  );
 };

 constuseStyles =makeStyles((theme) => ({
  root:{
    display:"flex",
 alignItems: "center",
 justifyContent: "center",
 borderRadius:theme.shape.borderRadius,
    border:`2px dashed ${theme.palette.divider}`,
    padding: theme.spacing(6),
    cursor:"pointer",

 "&:hover": {
 backgroundColor:theme.palette.background.paper,
    },
 },
 conststyles = {
  root:(theme) => css`
    display: flex;
 align-items:center;
 justify-content:center;
 border-radius: ${theme.shape.borderRadius}px;
    border: 2px dashed ${theme.palette.divider};
    padding:${theme.spacing(6)};
    cursor: pointer;

    &:hover {
 background-color: ${theme.palette.background.paper};
    }
 `,

  disabled: {
    pointerEvents: "none",
    opacity: 0.75,
  },

  icon: {
  icon:(theme) => ({
    fontSize: theme.spacing(8),
  },
  }),

  title: {
  title:(theme) => ({
    fontSize: theme.spacing(2),
  },
  }),

  description: {
  description:(theme) => ({
    color: theme.palette.text.secondary,
    textAlign: "center",
    maxWidth: theme.spacing(50),
  },
  }),

  input: {
    display: "none",
  },

  file: {
  file:(theme) => ({
    borderRadius: theme.shape.borderRadius,
    border: `1px solid ${theme.palette.divider}`,
    padding: theme.spacing(2),
    background: theme.palette.background.paper,
  },
 }));
  }),
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/components/FullPageForm/FullPageForm.tsx b/site/src/components/FullPageForm/FullPageForm.tsx
 import { Margins } from "components/Margins/Margins";
 import { FC, ReactNode } from "react";
 import {typeFC, type ReactNode } from "react";
 import {
  PageHeader,
  PageHeaderTitle,
  PageHeaderSubtitle,
 } from "components/PageHeader/PageHeader";
 import {makeStyles } from "@mui/styles";
 import {useTheme } from "@emotion/react";

 export interface FullPageFormProps {
  title: string;
  detail,
  children,
 }) => {
  conststyles =useStyles();
  consttheme =useTheme();

  return (
    <Margins size="small">
      <PageHeaderclassName={styles.pageHeader}>
      <PageHeadercss={{ paddingBottom: theme.spacing(3) }}>
        <PageHeaderTitle>{title}</PageHeaderTitle>
        {detail && <PageHeaderSubtitle>{detail}</PageHeaderSubtitle>}
      </PageHeader>
    </Margins>
  );
 };

 const useStyles = makeStyles((theme) => ({
  pageHeader: {
    paddingBottom: theme.spacing(3),
  },
 }));
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,6 @@
		import { css } from "@emotion/css";
		import { useTheme } from "@emotion/react";
		import Popover, { PopoverProps } from "@mui/material/Popover";
		import Popover, {typePopoverProps } from "@mui/material/Popover";
		import type { FC, PropsWithChildren } from "react";

		type BorderedMenuVariant = "user-dropdown";
Expand All		@@ -18,7 +18,7 @@ export const BorderedMenu: FC<PropsWithChildren<BorderedMenuProps>> = ({

		const paper = css`
		width: 260px;
		border-radius: ${theme.shape.borderRadius};
		border-radius: ${theme.shape.borderRadius}px;
		box-shadow: ${theme.shadows[6]};
		`;

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -47,7 +47,7 @@ const SidebarNavItem: FC<
		font-size: 14px;
		text-decoration: none;
		padding: ${theme.spacing(1.5, 1.5, 1.5, 2)};
		border-radius: ${theme.shape.borderRadius / 2};
		border-radius: ${theme.shape.borderRadius / 2}px;
		transition: background-color 0.15s ease-in-out;
		margin-bottom: 1;
		position: relative;
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,14 +1,15 @@
		import Button from "@mui/material/Button";
		import Link from "@mui/material/Link";
		import { makeStyles } from "@mui/styles";
		import RefreshOutlined from "@mui/icons-material/RefreshOutlined";
		import { BuildInfoResponse } from "api/typesGenerated";
		import { type FC, useEffect, useState } from "react";
		import { Helmet } from "react-helmet-async";
		import { css } from "@emotion/css";
		import { useTheme, type Interpolation, type Theme } from "@emotion/react";
		import type { BuildInfoResponse } from "api/typesGenerated";
		import { CopyButton } from "components/CopyButton/CopyButton";
		import { CoderIcon } from "components/Icons/CoderIcon";
		import { FullScreenLoader } from "components/Loader/FullScreenLoader";
		import { Stack } from "components/Stack/Stack";
		import { FC, useEffect, useState } from "react";
		import { Helmet } from "react-helmet-async";
		import { Margins } from "components/Margins/Margins";

		const fetchDynamicallyImportedModuleError =
Expand All		@@ -17,7 +18,7 @@ const fetchDynamicallyImportedModuleError =
		export type RuntimeErrorStateProps = { error: Error };

		export const RuntimeErrorState: FC<RuntimeErrorStateProps> = ({ error }) => {
		conststyles =useStyles();
		consttheme =useTheme();
		const [checkingError, setCheckingError] = useState(true);
		const [staticBuildInfo, setStaticBuildInfo] = useState<BuildInfoResponse>();
		const coderVersion = staticBuildInfo?.version;
Expand DownExpand Up		@@ -52,11 +53,11 @@ export const RuntimeErrorState: FC<RuntimeErrorStateProps> = ({ error }) => {
		<title>Something went wrong...</title>
		</Helmet>
		{!checkingError ? (
		<MarginsclassName={styles.root}>
		<divclassName={styles.innerRoot}>
		<CoderIconclassName={styles.logo} />
		<h1className={styles.title}>Something went wrong...</h1>
		<pclassName={styles.text}>
		<Marginscss={styles.root}>
		<divcss={{ width: "100%" }}>
		<CoderIconcss={styles.logo} />
		<h1css={styles.title}>Something went wrong...</h1>
		<pcss={styles.text}>
		Please try reloading the page, if that doesn‘t work, you can
		ask for help in the{" "}
		<Link href="https://discord.gg/coder">
Expand DownExpand Up		@@ -93,20 +94,33 @@ export const RuntimeErrorState: FC<RuntimeErrorStateProps> = ({ error }) => {
		</Button>
		</Stack>
		{error.stack && (
		<divclassName={styles.stack}>
		<divclassName={styles.stackHeader}>
		<divcss={styles.stack}>
		<divcss={styles.stackHeader}>
		Stacktrace
		<CopyButton
		buttonClassName={styles.copyButton}
		buttonClassName={css`
Copy link Member ParkreinerOct 16, 2023• edited Loading Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. I think there's some nuance that I'm missing. Is there anything stopping this style from being defined outside the component, and being defined via the interpolation function syntax that some of the other styles are using? I don't expect it to matter much performance-wise – just curious
		background-color: transparent;
		border: 0;
		border-radius: 999px;
		min-height: ${theme.spacing(4)};
		min-width: ${theme.spacing(4)};
		height: ${theme.spacing(4)};
		width: ${theme.spacing(4)};

		& svg {
		width: 16px;
		height: 16px;
		}
		`}
		text={error.stack}
		tooltipTitle="Copy stacktrace"
		/>
		</div>
		<preclassName={styles.stackCode}>{error.stack}</pre>
		<precss={styles.stackCode}>{error.stack}</pre>
		</div>
		)}
		{coderVersion && (
		<divclassName={styles.version}>Version: {coderVersion}</div>
		<divcss={styles.version}>Version: {coderVersion}</div>
		)}
		</div>
		</Margins>
Expand All		@@ -132,8 +146,8 @@ const getStaticBuildInfo = () => {
		}
		};

		constuseStyles =makeStyles((theme) => ({
		root: {
		conststyles = {
		root:(theme) => ({
		paddingTop: theme.spacing(4),
		paddingBottom: theme.spacing(4),
		textAlign: "center",
Expand All		@@ -142,36 +156,34 @@ const useStyles = makeStyles((theme) => ({
		justifyContent: "center",
		minHeight: "100%",
		maxWidth: theme.spacing(75),
		},
		}),

		innerRoot: { width: "100%" },

		logo: {
		logo: (theme) => ({
		fontSize: theme.spacing(8),
		},
		}),

		title: {
		title:(theme) => ({
		fontSize: theme.spacing(4),
		fontWeight: 400,
		},
		}),

		text: {
		text:(theme) => ({
		fontSize: 16,
		color: theme.palette.text.secondary,
		lineHeight: "160%",
		marginBottom: theme.spacing(4),
		},
		}),

		stack: {
		stack:(theme) => ({
		backgroundColor: theme.palette.background.paper,
		border: `1px solid ${theme.palette.divider}`,
		borderRadius: 4,
		marginTop: theme.spacing(8),
		display: "block",
		textAlign: "left",
		},
		}),

		stackHeader: {
		stackHeader:(theme) => ({
		fontSize: 10,
		textTransform: "uppercase",
		fontWeight: 600,
Expand All		@@ -184,33 +196,18 @@ const useStyles = makeStyles((theme) => ({
		flexAlign: "center",
		justifyContent: "space-between",
		alignItems: "center",
		},
		}),

		stackCode: {
		stackCode:(theme) => ({
		padding: theme.spacing(2),
		margin: 0,
		wordWrap: "break-word",
		whiteSpace: "break-spaces",
		},

		copyButton: {
		backgroundColor: "transparent",
		border: 0,
		borderRadius: 999,
		minHeight: theme.spacing(4),
		minWidth: theme.spacing(4),
		height: theme.spacing(4),
		width: theme.spacing(4),

		"& svg": {
		width: 16,
		height: 16,
		},
		},

		version: {
		}),

		version: (theme) => ({
		marginTop: theme.spacing(4),
		fontSize: 12,
		color: theme.palette.text.secondary,
		},
		}));
		}),
		} satisfies Record<string, Interpolation<Theme>>;
Original file line number	Diff line number	Diff line change
		@@ -1,13 +1,12 @@
		import { makeStyles } from "@mui/styles";
		import { Stack } from "components/Stack/Stack";
		import { FC, DragEvent, useRef, ReactNode } from "react";
		import {typeFC,typeDragEvent, useRef, type ReactNode } from "react";
		import UploadIcon from "@mui/icons-material/CloudUploadOutlined";
		import { useClickable } from "hooks/useClickable";
		import CircularProgress from "@mui/material/CircularProgress";
		import { combineClasses } from "utils/combineClasses";
		import IconButton from "@mui/material/IconButton";
		import RemoveIcon from "@mui/icons-material/DeleteOutline";
		import FileIcon from "@mui/icons-material/FolderOutlined";
		import { css, type Interpolation, type Theme } from "@emotion/react";

		const useFileDrop = (
		callback: (file: File) => void,
Expand DownExpand Up		@@ -62,7 +61,6 @@ export const FileUpload: FC<FileUploadProps> = ({
		extension,
		fileTypeRequired,
		}) => {
		const styles = useStyles();
		const inputRef = useRef<HTMLInputElement>(null);
		const tarDrop = useFileDrop(onUpload, fileTypeRequired);

Expand All		@@ -75,7 +73,7 @@ export const FileUpload: FC<FileUploadProps> = ({
		if (!isUploading && file) {
		return (
		<Stack
		className={styles.file}
		css={styles.file}
		direction="row"
		justifyContent="space-between"
		alignItems="center"
Expand All		@@ -95,23 +93,20 @@ export const FileUpload: FC<FileUploadProps> = ({
		return (
		<>
		<div
		className={combineClasses({
		[styles.root]: true,
		[styles.disabled]: isUploading,
		})}
		css={[styles.root, isUploading && styles.disabled]}
		{...clickable}
		{...tarDrop}
		>
		<Stack alignItems="center" spacing={1}>
		{isUploading ? (
		<CircularProgress size={32} />
		) : (
		<UploadIconclassName={styles.icon} />
		<UploadIconcss={styles.icon} />
		)}

		<Stack alignItems="center" spacing={0.5}>
		<spanclassName={styles.title}>{title}</span>
		<spanclassName={styles.description}>{description}</span>
		<spancss={styles.title}>{title}</span>
		<spancss={styles.description}>{description}</span>
		</Stack>
		</Stack>
		</div>
Expand All		@@ -120,7 +115,7 @@ export const FileUpload: FC<FileUploadProps> = ({
		type="file"
		data-testid="file-upload"
		ref={inputRef}
		className={styles.input}
		css={styles.input}
		accept={extension}
		onChange={(event) => {
		const file = event.currentTarget.files?.[0];
Expand All		@@ -133,48 +128,48 @@ export const FileUpload: FC<FileUploadProps> = ({
		);
		};

		constuseStyles =makeStyles((theme) => ({
		root:{
		display:"flex",
		alignItems: "center",
		justifyContent: "center",
		borderRadius:theme.shape.borderRadius,
		border:`2px dashed ${theme.palette.divider}`,
		padding: theme.spacing(6),
		cursor:"pointer",

		"&:hover": {
		backgroundColor:theme.palette.background.paper,
		},
		},
		conststyles = {
		root:(theme) => css`
Copy link Member ParkreinerOct 16, 2023 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Just a question for my own understanding: is there a difference between an interpolation function returning an object, vs a tagged css template literal? Is the main use case to enable the`&` selectors, or would something like this still be possible via object syntax? conststyles={"&:hover":(theme)=>({ background-color:${theme.palette.background.paper};})};
		display: flex;
		align-items:center;
		justify-content:center;
		border-radius: ${theme.shape.borderRadius}px;
		border: 2px dashed ${theme.palette.divider};
		padding:${theme.spacing(6)};
		cursor: pointer;

		&:hover {
		background-color: ${theme.palette.background.paper};
		}
		`,

		disabled: {
		pointerEvents: "none",
		opacity: 0.75,
		},

		icon: {
		icon:(theme) => ({
		fontSize: theme.spacing(8),
		},
		}),

		title: {
		title:(theme) => ({
		fontSize: theme.spacing(2),
		},
		}),

		description: {
		description:(theme) => ({
		color: theme.palette.text.secondary,
		textAlign: "center",
		maxWidth: theme.spacing(50),
		},
		}),

		input: {
		display: "none",
		},

		file: {
		file:(theme) => ({
		borderRadius: theme.shape.borderRadius,
		border: `1px solid ${theme.palette.divider}`,
		padding: theme.spacing(2),
		background: theme.palette.background.paper,
		},
		}));
		}),
		} satisfies Record<string, Interpolation<Theme>>;
Original file line number	Diff line number	Diff line change
		@@ -1,11 +1,11 @@
		import { Margins } from "components/Margins/Margins";
		import { FC, ReactNode } from "react";
		import {typeFC, type ReactNode } from "react";
		import {
		PageHeader,
		PageHeaderTitle,
		PageHeaderSubtitle,
		} from "components/PageHeader/PageHeader";
		import {makeStyles } from "@mui/styles";
		import {useTheme } from "@emotion/react";

		export interface FullPageFormProps {
		title: string;
Expand All		@@ -17,11 +17,11 @@ export const FullPageForm: FC<React.PropsWithChildren<FullPageFormProps>> = ({
		detail,
		children,
		}) => {
		conststyles =useStyles();
		consttheme =useTheme();

		return (
		<Margins size="small">
		<PageHeaderclassName={styles.pageHeader}>
		<PageHeadercss={{ paddingBottom: theme.spacing(3) }}>
		<PageHeaderTitle>{title}</PageHeaderTitle>
		{detail && <PageHeaderSubtitle>{detail}</PageHeaderSubtitle>}
		</PageHeader>
Expand All		@@ -30,9 +30,3 @@ export const FullPageForm: FC<React.PropsWithChildren<FullPageFormProps>> = ({
		</Margins>
		);
		};

		const useStyles = makeStyles((theme) => ({
		pageHeader: {
		paddingBottom: theme.spacing(3),
		},
		}));