diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx index bb472ca0ae91a..ee7522c05a323 100644 --- a/site/src/AppRouter.tsx +++ b/site/src/AppRouter.tsx @@ -18,7 +18,7 @@ import { Route, Routes } from "react-router-dom" import { selectPermissions } from "xServices/auth/authSelectors" import { selectFeatureVisibility } from "xServices/entitlements/entitlementsSelectors" import { XServiceContext } from "xServices/StateContext" -import { NavbarLayout } from "./components/NavbarLayout/NavbarLayout" +import { DashboardLayout } from "./components/DashboardLayout/DashboardLayout" import { RequireAuth } from "./components/RequireAuth/RequireAuth" import { SettingsLayout } from "./components/SettingsLayout/SettingsLayout" import { DeploySettingsLayout } from "components/DeploySettingsLayout/DeploySettingsLayout" @@ -134,132 +134,79 @@ export const AppRouter: FC = () => { } /> } /> - {/* Authenticated routes */} + {/* Dashboard routes */} }> - } /> + }> + } /> - } /> - } /> + } /> + } /> - - - - } - /> + } /> - - - - - } - /> - - - - - } - /> - - - - - - - } - /> - - } /> + + } /> + } /> + - - + + } /> + } /> + + - - } - /> - + } + /> + - - } - /> - } /> - } /> - - - - } /> + } /> + } /> + + } /> + - - - + + - - } - /> - } /> - + } + /> + } /> + - - + + - - } - /> - } /> - - - - } - /> - } /> - + } + /> + } /> + } /> + } /> + - - + + { > - - } - /> - + } + /> + - - + + { - - } - /> - + } + /> + { - - } - /> - + } + /> + { - - } - /> - + } + /> + { - - } - /> - + } + /> + { - - } - /> - + } + /> + { - - } - /> - + } + /> + - - + + - - } - /> - + } + /> + - - } - /> - - - - - - } - /> - - - - - - - } /> - - } /> - - } /> - - - + + + } /> + - } - /> + + + } /> + } /> + } /> + } + /> + } + /> + diff --git a/site/src/components/CreateUserForm/CreateUserForm.tsx b/site/src/components/CreateUserForm/CreateUserForm.tsx index e991c80fe1f41..dd14e5fbed95f 100644 --- a/site/src/components/CreateUserForm/CreateUserForm.tsx +++ b/site/src/components/CreateUserForm/CreateUserForm.tsx @@ -62,7 +62,7 @@ export const CreateUserForm: FC< ) return ( - +
= ({ children }) => { +export const DashboardLayout: FC = () => { const styles = useStyles() const xServices = useContext(XServiceContext) const [authState] = useActor(xServices.authXService) @@ -38,7 +39,9 @@ export const NavbarLayout: FC = ({ children }) => { )}
- }>{children} + }> + +
) diff --git a/site/src/components/FullPageForm/FullPageForm.stories.tsx b/site/src/components/FullPageForm/FullPageForm.stories.tsx index 65a5f19bf1cea..bd92ea6cc974e 100644 --- a/site/src/components/FullPageForm/FullPageForm.stories.tsx +++ b/site/src/components/FullPageForm/FullPageForm.stories.tsx @@ -30,5 +30,4 @@ export const Example = Template.bind({}) Example.args = { title: "My Form", detail: "Lorem ipsum dolor", - onCancel: action("cancel"), } diff --git a/site/src/components/FullPageForm/FullPageForm.tsx b/site/src/components/FullPageForm/FullPageForm.tsx index 0887a5fe54495..8604172948117 100644 --- a/site/src/components/FullPageForm/FullPageForm.tsx +++ b/site/src/components/FullPageForm/FullPageForm.tsx @@ -1,39 +1,38 @@ -import { makeStyles } from "@material-ui/core/styles" +import { Margins } from "components/Margins/Margins" import { FC, ReactNode } from "react" -import { FormCloseButton } from "../FormCloseButton/FormCloseButton" -import { FormTitle } from "../FormTitle/FormTitle" -import { Margins } from "../Margins/Margins" +import { + PageHeader, + PageHeaderTitle, + PageHeaderSubtitle, +} from "components/PageHeader/PageHeader" +import { makeStyles } from "@material-ui/core/styles" export interface FullPageFormProps { title: string detail?: ReactNode - onCancel: () => void } -const useStyles = makeStyles(() => ({ - root: { - width: "100%", - display: "flex", - flexDirection: "column", - alignItems: "center", - }, -})) - export const FullPageForm: FC> = ({ title, detail, - onCancel, children, }) => { const styles = useStyles() + return ( -
- - - + + + {title} + {detail && {detail}} + - {children} - -
+
{children}
+ ) } + +const useStyles = makeStyles((theme) => ({ + pageHeader: { + paddingBottom: theme.spacing(2), + }, +})) diff --git a/site/src/components/FullPageForm/FullPageHorizontalForm.tsx b/site/src/components/FullPageForm/FullPageHorizontalForm.tsx index 704796f8e49d8..15c6b5ed78430 100644 --- a/site/src/components/FullPageForm/FullPageHorizontalForm.tsx +++ b/site/src/components/FullPageForm/FullPageHorizontalForm.tsx @@ -1,13 +1,12 @@ -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 -} +import { + PageHeader, + PageHeaderTitle, + PageHeaderSubtitle, +} from "components/PageHeader/PageHeader" +import Button from "@material-ui/core/Button" +import { makeStyles } from "@material-ui/core/styles" export interface FullPageHorizontalFormProps { title: string @@ -21,35 +20,25 @@ export const FullPageHorizontalForm: FC< const styles = useStyles() return ( - <> -
- - {title} - {detail && {detail}} - -
- - - -
- {children} -
- + + + Cancel + + } + > + {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), + form: { + marginTop: theme.spacing(1), }, })) diff --git a/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx b/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx index 56884e54cda94..d41d1b9035a3f 100644 --- a/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx +++ b/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx @@ -280,7 +280,7 @@ export const WorkspaceScheduleForm: FC< } return ( - + {Boolean(submitScheduleError) && ( diff --git a/site/src/pages/GroupsPage/CreateGroupPageView.tsx b/site/src/pages/GroupsPage/CreateGroupPageView.tsx index e025d6263e2d8..ee0c0af65b8c2 100644 --- a/site/src/pages/GroupsPage/CreateGroupPageView.tsx +++ b/site/src/pages/GroupsPage/CreateGroupPageView.tsx @@ -39,7 +39,7 @@ export const CreateGroupPageView: FC = ({ return ( - + + = ({ } return ( - + {Boolean(errors.getTemplateError) && ( diff --git a/site/src/pages/WorkspaceChangeVersionPage/WorkspaceChangeVersionPageView.tsx b/site/src/pages/WorkspaceChangeVersionPage/WorkspaceChangeVersionPageView.tsx index 0d0511d67be5a..c555fea7640c9 100644 --- a/site/src/pages/WorkspaceChangeVersionPage/WorkspaceChangeVersionPageView.tsx +++ b/site/src/pages/WorkspaceChangeVersionPage/WorkspaceChangeVersionPageView.tsx @@ -21,7 +21,7 @@ export const WorkspaceChangeVersionPageView: FC< const { workspace, templateVersions, template, error } = context return ( - navigate(-1)}> +