diff --git a/site/src/components/FullPageForm/FullPageForm.tsx b/site/src/components/FullPageForm/FullPageForm.tsx index 83f9c345da611..cc131e1280385 100644 --- a/site/src/components/FullPageForm/FullPageForm.tsx +++ b/site/src/components/FullPageForm/FullPageForm.tsx @@ -2,6 +2,7 @@ import { makeStyles } from "@material-ui/core/styles" import React from "react" import { FormCloseButton } from "../FormCloseButton/FormCloseButton" import { FormTitle } from "../FormTitle/FormTitle" +import { Margins } from "../Margins/Margins" export interface FullPageFormProps { title: string @@ -11,7 +12,6 @@ export interface FullPageFormProps { const useStyles = makeStyles(() => ({ root: { - maxWidth: "1380px", width: "100%", display: "flex", flexDirection: "column", @@ -23,10 +23,12 @@ export const FullPageForm: React.FC = ({ title, detail, onCan const styles = useStyles() return (
- - + + + - {children} + {children} +
) } diff --git a/site/src/components/Header/Header.tsx b/site/src/components/Header/Header.tsx index f0f8e8af9df86..fb79e0487f836 100644 --- a/site/src/components/Header/Header.tsx +++ b/site/src/components/Header/Header.tsx @@ -2,6 +2,7 @@ import Box from "@material-ui/core/Box" import { makeStyles } from "@material-ui/core/styles" import Typography from "@material-ui/core/Typography" import React from "react" +import { maxWidth, sidePadding } from "../../theme/constants" import { HeaderButton } from "../HeaderButton/HeaderButton" export interface HeaderAction { @@ -66,18 +67,19 @@ const useStyles = makeStyles((theme) => ({ position: "relative", display: "flex", alignItems: "center", - height: 150, + height: 126, background: theme.palette.hero.main, boxShadow: theme.shadows[3], }, topInner: { display: "flex", alignItems: "center", - maxWidth: "1380px", + maxWidth, margin: "0 auto", flex: 1, height: 68, minWidth: 0, + padding: `0 ${sidePadding}`, }, title: { display: "flex", diff --git a/site/src/components/Margins/Margins.stories.tsx b/site/src/components/Margins/Margins.stories.tsx new file mode 100644 index 0000000000000..031c9f1495227 --- /dev/null +++ b/site/src/components/Margins/Margins.stories.tsx @@ -0,0 +1,16 @@ +import { ComponentMeta, Story } from "@storybook/react" +import React from "react" +import { Margins } from "./Margins" + +export default { + title: "components/Margins", + component: Margins, +} as ComponentMeta + +const Template: Story = (args) => ( + +
Here is some content that will not get too wide!
+ +) + +export const Example = Template.bind({}) diff --git a/site/src/components/Margins/Margins.tsx b/site/src/components/Margins/Margins.tsx new file mode 100644 index 0000000000000..e59692a214c54 --- /dev/null +++ b/site/src/components/Margins/Margins.tsx @@ -0,0 +1,21 @@ +import { makeStyles } from "@material-ui/core/styles" +import React from "react" +import { maxWidth, sidePadding } from "../../theme/constants" + +const useStyles = makeStyles(() => ({ + margins: { + margin: "0 auto", + maxWidth, + padding: `0 ${sidePadding}`, + flex: 1, + }, +})) + +export const Margins: React.FC = ({ children }) => { + const styles = useStyles() + return ( +
+
{children}
+
+ ) +} diff --git a/site/src/components/PreferencesLayout/PreferencesLayout.tsx b/site/src/components/PreferencesLayout/PreferencesLayout.tsx index bfd58426c91d7..c0fb69df6dc93 100644 --- a/site/src/components/PreferencesLayout/PreferencesLayout.tsx +++ b/site/src/components/PreferencesLayout/PreferencesLayout.tsx @@ -2,6 +2,7 @@ import Box from "@material-ui/core/Box" import React from "react" import { Outlet } from "react-router-dom" import { AuthAndFrame } from "../AuthAndFrame/AuthAndFrame" +import { Margins } from "../Margins/Margins" import { TabPanel } from "../TabPanel/TabPanel" export const Language = { @@ -23,11 +24,11 @@ export const PreferencesLayout: React.FC = () => { return ( - + - + ) diff --git a/site/src/forms/CreateTemplateForm.tsx b/site/src/forms/CreateTemplateForm.tsx index 2944a3a2ef149..34b5568ccdb38 100644 --- a/site/src/forms/CreateTemplateForm.tsx +++ b/site/src/forms/CreateTemplateForm.tsx @@ -10,6 +10,7 @@ import { FormSection } from "../components/FormSection/FormSection" import { FormTextField } from "../components/FormTextField/FormTextField" import { FormTitle } from "../components/FormTitle/FormTitle" import { LoadingButton } from "../components/LoadingButton/LoadingButton" +import { maxWidth } from "../theme/constants" export interface CreateTemplateFormProps { provisioners: Provisioner[] @@ -121,7 +122,7 @@ export const CreateTemplateForm: React.FC = ({ const useStyles = makeStyles(() => ({ root: { - maxWidth: "1380px", + maxWidth, width: "100%", display: "flex", flexDirection: "column", diff --git a/site/src/forms/CreateWorkspaceForm.tsx b/site/src/forms/CreateWorkspaceForm.tsx index 60757038611ee..0fd40c1418ce5 100644 --- a/site/src/forms/CreateWorkspaceForm.tsx +++ b/site/src/forms/CreateWorkspaceForm.tsx @@ -9,6 +9,7 @@ import { FormSection } from "../components/FormSection/FormSection" import { FormTextField } from "../components/FormTextField/FormTextField" import { FormTitle } from "../components/FormTitle/FormTitle" import { LoadingButton } from "../components/LoadingButton/LoadingButton" +import { maxWidth } from "../theme/constants" export interface CreateWorkspaceForm { template: Template @@ -82,7 +83,7 @@ export const CreateWorkspaceForm: React.FC = ({ template, o const useStyles = makeStyles(() => ({ root: { - maxWidth: "1380px", + maxWidth, width: "100%", display: "flex", flexDirection: "column", diff --git a/site/src/pages/TemplatesPages/OrganizationPage/TemplatePage/TemplatePage.tsx b/site/src/pages/TemplatesPages/OrganizationPage/TemplatePage/TemplatePage.tsx index fa3347fb65819..a7e6a865b5dee 100644 --- a/site/src/pages/TemplatesPages/OrganizationPage/TemplatePage/TemplatePage.tsx +++ b/site/src/pages/TemplatesPages/OrganizationPage/TemplatePage/TemplatePage.tsx @@ -1,5 +1,3 @@ -import Paper from "@material-ui/core/Paper" -import { makeStyles } from "@material-ui/core/styles" import React from "react" import { Link, useNavigate, useParams } from "react-router-dom" import useSWR from "swr" @@ -8,12 +6,13 @@ import { EmptyState } from "../../../../components/EmptyState/EmptyState" import { ErrorSummary } from "../../../../components/ErrorSummary/ErrorSummary" import { Header } from "../../../../components/Header/Header" import { FullScreenLoader } from "../../../../components/Loader/FullScreenLoader" +import { Margins } from "../../../../components/Margins/Margins" +import { Stack } from "../../../../components/Stack/Stack" import { Column, Table } from "../../../../components/Table/Table" import { unsafeSWRArgument } from "../../../../util" import { firstOrItem } from "../../../../util/array" export const TemplatePage: React.FC = () => { - const styles = useStyles() const navigate = useNavigate() const { template: templateName, organization: organizationName } = useParams() @@ -82,7 +81,7 @@ export const TemplatePage: React.FC = () => { } return ( -
+
{ }} /> - + - - + + ) } - -const useStyles = makeStyles((theme) => ({ - root: { - display: "flex", - flexDirection: "column", - }, - header: { - display: "flex", - flexDirection: "row-reverse", - justifyContent: "space-between", - margin: "1em auto", - maxWidth: "1380px", - padding: theme.spacing(2, 6.25, 0), - width: "100%", - }, -})) diff --git a/site/src/pages/TemplatesPages/TemplatesPage.tsx b/site/src/pages/TemplatesPages/TemplatesPage.tsx index 1a15f3dc00680..9f3aa0f87a0cc 100644 --- a/site/src/pages/TemplatesPages/TemplatesPage.tsx +++ b/site/src/pages/TemplatesPages/TemplatesPage.tsx @@ -1,4 +1,3 @@ -import Paper from "@material-ui/core/Paper" import { makeStyles } from "@material-ui/core/styles" import React from "react" import { Link } from "react-router-dom" @@ -9,6 +8,8 @@ import { EmptyState } from "../../components/EmptyState/EmptyState" import { ErrorSummary } from "../../components/ErrorSummary/ErrorSummary" import { Header } from "../../components/Header/Header" import { FullScreenLoader } from "../../components/Loader/FullScreenLoader" +import { Margins } from "../../components/Margins/Margins" +import { Stack } from "../../components/Stack/Stack" import { Column, Table } from "../../components/Table/Table" export const TemplatesPage: React.FC = () => { @@ -68,20 +69,16 @@ export const TemplatesPage: React.FC = () => { const subTitle = `${templates.length} total` return ( -
+
- +
- - + + ) } const useStyles = makeStyles((theme) => ({ - root: { - display: "flex", - flexDirection: "column", - }, descriptionLabel: { marginBottom: theme.spacing(1), }, diff --git a/site/src/pages/UsersPage/CreateUserPage/CreateUserPage.tsx b/site/src/pages/UsersPage/CreateUserPage/CreateUserPage.tsx index c8f36498c37a1..3df9fa93fcd74 100644 --- a/site/src/pages/UsersPage/CreateUserPage/CreateUserPage.tsx +++ b/site/src/pages/UsersPage/CreateUserPage/CreateUserPage.tsx @@ -3,6 +3,7 @@ import React, { useContext } from "react" import { useNavigate } from "react-router" import { CreateUserRequest } from "../../../api/types" import { CreateUserForm } from "../../../components/CreateUserForm/CreateUserForm" +import { Margins } from "../../../components/Margins/Margins" import { selectOrgId } from "../../../xServices/auth/authSelectors" import { XServiceContext } from "../../../xServices/StateContext" @@ -21,13 +22,15 @@ export const CreateUserPage: React.FC = () => { createUserError || createUserFormErrors?.organization_id || !myOrgId ? Language.unknownError : undefined return ( - usersSend({ type: "CREATE", user })} - onCancel={() => navigate("/users")} - isLoading={usersState.hasTag("loading")} - error={genericError} - myOrgId={myOrgId ?? ""} - /> + + usersSend({ type: "CREATE", user })} + onCancel={() => navigate("/users")} + isLoading={usersState.hasTag("loading")} + error={genericError} + myOrgId={myOrgId ?? ""} + /> + ) } diff --git a/site/src/pages/UsersPage/UsersPageView.tsx b/site/src/pages/UsersPage/UsersPageView.tsx index 5ee853989f702..24e5b96f44f5d 100644 --- a/site/src/pages/UsersPage/UsersPageView.tsx +++ b/site/src/pages/UsersPage/UsersPageView.tsx @@ -1,8 +1,8 @@ -import Paper from "@material-ui/core/Paper" -import { makeStyles } from "@material-ui/core/styles" import React from "react" import { UserResponse } from "../../api/types" import { Header } from "../../components/Header/Header" +import { Margins } from "../../components/Margins/Margins" +import { Stack } from "../../components/Stack/Stack" import { UsersTable } from "../../components/UsersTable/UsersTable" export const Language = { @@ -16,21 +16,12 @@ export interface UsersPageViewProps { } export const UsersPageView: React.FC = ({ users, openUserCreationDialog }) => { - const styles = useStyles() - return ( -
+
- + - -
+ + ) } - -const useStyles = makeStyles(() => ({ - flexColumn: { - display: "flex", - flexDirection: "column", - }, -})) diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx index d952bc7c02176..c8446dff91c1d 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx @@ -1,16 +1,16 @@ -import { makeStyles } from "@material-ui/core/styles" import React from "react" import { useParams } from "react-router-dom" import useSWR from "swr" import * as Types from "../../api/types" import { ErrorSummary } from "../../components/ErrorSummary/ErrorSummary" import { FullScreenLoader } from "../../components/Loader/FullScreenLoader" +import { Margins } from "../../components/Margins/Margins" +import { Stack } from "../../components/Stack/Stack" import { Workspace } from "../../components/Workspace/Workspace" import { unsafeSWRArgument } from "../../util" import { firstOrItem } from "../../util/array" export const WorkspacePage: React.FC = () => { - const styles = useStyles() const { workspace: workspaceQueryParam } = useParams() const { data: workspace, error: workspaceError } = useSWR(() => { @@ -45,22 +45,10 @@ export const WorkspacePage: React.FC = () => { } return ( -
-
+ + -
-
+ + ) } - -const useStyles = makeStyles(() => ({ - root: { - display: "flex", - flexDirection: "column", - }, - inner: { - maxWidth: "1380px", - margin: "1em auto", - width: "100%", - }, -})) diff --git a/site/src/theme/constants.ts b/site/src/theme/constants.ts index 008063489519d..fd07a3abcb26f 100644 --- a/site/src/theme/constants.ts +++ b/site/src/theme/constants.ts @@ -7,3 +7,5 @@ export const BODY_FONT_FAMILY = `"Inter", sans-serif` export const lightButtonShadow = "0 2px 2px rgba(0, 23, 121, 0.08)" export const emptyBoxShadow = "none" export const navHeight = 56 +export const maxWidth = 1380 +export const sidePadding = "50px"