diff --git a/site/src/components/FormCloseButton/FormCloseButton.tsx b/site/src/components/FormCloseButton/FormCloseButton.tsx index fd72f57298a8b..39755b286ba7e 100644 --- a/site/src/components/FormCloseButton/FormCloseButton.tsx +++ b/site/src/components/FormCloseButton/FormCloseButton.tsx @@ -47,6 +47,11 @@ const useStyles = makeStyles((theme) => ({ "&:hover": { opacity: 1, }, + + [theme.breakpoints.down("sm")]: { + top: theme.spacing(1), + right: theme.spacing(1), + }, }, label: { position: "absolute", diff --git a/site/src/components/FormFooter/FormFooter.tsx b/site/src/components/FormFooter/FormFooter.tsx index 598237a742bcc..804f3ef791546 100644 --- a/site/src/components/FormFooter/FormFooter.tsx +++ b/site/src/components/FormFooter/FormFooter.tsx @@ -1,5 +1,6 @@ import Button from "@material-ui/core/Button" import { makeStyles } from "@material-ui/core/styles" +import { ClassNameMap } from "@material-ui/core/styles/withStyles" import { FC } from "react" import { LoadingButton } from "../LoadingButton/LoadingButton" @@ -8,36 +9,22 @@ export const Language = { defaultSubmitLabel: "Submit", } +type FormFooterStyles = ClassNameMap<"footer" | "button"> export interface FormFooterProps { onCancel: () => void isLoading: boolean + styles?: FormFooterStyles submitLabel?: string submitDisabled?: boolean } -const useStyles = makeStyles((theme) => ({ - footer: { - display: "flex", - flex: "0", - // The first button is the submit so it is the first element to be focused - // on tab so we use row-reverse to display it on the right - flexDirection: "row-reverse", - gap: theme.spacing(1.5), - alignItems: "center", - marginTop: theme.spacing(3), - }, - button: { - width: "100%", - }, -})) - -export const FormFooter: FC> = ({ +export const FormFooter: FC = ({ onCancel, isLoading, - submitLabel = Language.defaultSubmitLabel, submitDisabled, + submitLabel = Language.defaultSubmitLabel, + styles = defaultStyles(), }) => { - const styles = useStyles() return (
> = ({
) } + +const defaultStyles = makeStyles((theme) => ({ + footer: { + display: "flex", + flex: "0", + // The first button is the submit so it is the first element to be focused + // on tab so we use row-reverse to display it on the right + flexDirection: "row-reverse", + gap: theme.spacing(1.5), + alignItems: "center", + marginTop: theme.spacing(3), + }, + button: { + width: "100%", + }, +})) diff --git a/site/src/components/FullPageForm/FullPageHorizontalForm.tsx b/site/src/components/FullPageForm/FullPageHorizontalForm.tsx new file mode 100644 index 0000000000000..704796f8e49d8 --- /dev/null +++ b/site/src/components/FullPageForm/FullPageHorizontalForm.tsx @@ -0,0 +1,55 @@ +import { FormCloseButton } from "../FormCloseButton/FormCloseButton" +import { makeStyles } from "@material-ui/core/styles" +import Typography from "@material-ui/core/Typography" +import { Margins } from "components/Margins/Margins" +import { FC, ReactNode } from "react" + +export interface FormTitleProps { + title: string + detail?: ReactNode +} + +export interface FullPageHorizontalFormProps { + title: string + detail?: ReactNode + onCancel: () => void +} + +export const FullPageHorizontalForm: FC< + React.PropsWithChildren +> = ({ title, detail, onCancel, children }) => { + const styles = useStyles() + + return ( + <> +
+ + {title} + {detail && {detail}} + +
+ + + +
+ {children} +
+ + ) +} + +const useStyles = makeStyles((theme) => ({ + title: { + paddingTop: theme.spacing(6), + paddingBottom: theme.spacing(8), + + [theme.breakpoints.down("sm")]: { + paddingTop: theme.spacing(4), + paddingBottom: theme.spacing(4), + }, + }, + + main: { + paddingBottom: theme.spacing(10), + }, +})) diff --git a/site/src/components/Margins/Margins.tsx b/site/src/components/Margins/Margins.tsx index 310d22a2c7e44..7f079cd27d4d3 100644 --- a/site/src/components/Margins/Margins.tsx +++ b/site/src/components/Margins/Margins.tsx @@ -1,12 +1,16 @@ import { makeStyles } from "@material-ui/core/styles" import { FC } from "react" -import { containerWidth, sidePadding } from "../../theme/constants" +import { + containerWidth, + containerWidthMedium, + sidePadding, +} from "../../theme/constants" type Size = "regular" | "medium" | "small" const widthBySize: Record = { regular: containerWidth, - medium: containerWidth / 2, + medium: containerWidthMedium, small: containerWidth / 3, } diff --git a/site/src/components/ParameterInput/ParameterInput.tsx b/site/src/components/ParameterInput/ParameterInput.tsx index f5692985d3ce9..5dd0ac3c123c2 100644 --- a/site/src/components/ParameterInput/ParameterInput.tsx +++ b/site/src/components/ParameterInput/ParameterInput.tsx @@ -7,7 +7,6 @@ import TextField from "@material-ui/core/TextField" import { Stack } from "components/Stack/Stack" import { FC } from "react" import { ParameterSchema } from "../../api/typesGenerated" -import { MONOSPACE_FONT_FAMILY } from "../../theme/constants" const isBoolean = (schema: ParameterSchema) => { return schema.validation_value_type === "bool" @@ -16,12 +15,18 @@ const isBoolean = (schema: ParameterSchema) => { const ParameterLabel: React.FC<{ schema: ParameterSchema }> = ({ schema }) => { const styles = useStyles() - return ( -