From 1ad8f679a3222ab620c131fec62d453c00623eee Mon Sep 17 00:00:00 2001 From: Presley Date: Thu, 28 Apr 2022 23:20:55 +0000 Subject: [PATCH 1/4] Add Margin, use constants --- .../components/FullPageForm/FullPageForm.tsx | 10 ++++---- site/src/components/Header/Header.tsx | 6 +++-- .../components/Margins/Margins.stories.tsx | 19 +++++++++++++++ site/src/components/Margins/Margins.tsx | 23 +++++++++++++++++++ site/src/pages/UsersPage/UsersPageView.tsx | 19 ++++++--------- site/src/theme/constants.ts | 2 ++ 6 files changed, 61 insertions(+), 18 deletions(-) create mode 100644 site/src/components/Margins/Margins.stories.tsx create mode 100644 site/src/components/Margins/Margins.tsx 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..5037ba7a54b4c 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..102632d9a29b4 --- /dev/null +++ b/site/src/components/Margins/Margins.stories.tsx @@ -0,0 +1,19 @@ +import { action } from "@storybook/addon-actions" +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's some content that won't 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..50824865864c0 --- /dev/null +++ b/site/src/components/Margins/Margins.tsx @@ -0,0 +1,23 @@ +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/pages/UsersPage/UsersPageView.tsx b/site/src/pages/UsersPage/UsersPageView.tsx index a919ac9f5f2f5..afd7b88eb9afb 100644 --- a/site/src/pages/UsersPage/UsersPageView.tsx +++ b/site/src/pages/UsersPage/UsersPageView.tsx @@ -2,6 +2,8 @@ import { makeStyles } from "@material-ui/core/styles" import React from "react" import { Pager, 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 = { @@ -17,23 +19,16 @@ export interface UsersPageViewProps { } export const UsersPageView: React.FC = ({ users, pager, openUserCreationDialog }) => { - const styles = useStyles() - return ( -
+
- -
+ + + + ) } - -const useStyles = makeStyles(() => ({ - flexColumn: { - display: "flex", - flexDirection: "column", - }, -})) 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" From 00224b817de92b3a7e87322279f51f2538c081db Mon Sep 17 00:00:00 2001 From: Presley Date: Thu, 28 Apr 2022 23:54:34 +0000 Subject: [PATCH 2/4] Change throughout --- .../PreferencesLayout/PreferencesLayout.tsx | 5 ++-- site/src/forms/CreateTemplateForm.tsx | 3 +- site/src/forms/CreateWorkspaceForm.tsx | 3 +- .../TemplatePage/TemplatePage.tsx | 29 ++++--------------- .../pages/TemplatesPages/TemplatesPage.tsx | 14 ++++----- .../pages/WorkspacesPage/WorkspacesPage.tsx | 24 ++++----------- 6 files changed, 25 insertions(+), 53 deletions(-) diff --git a/site/src/components/PreferencesLayout/PreferencesLayout.tsx b/site/src/components/PreferencesLayout/PreferencesLayout.tsx index bfd58426c91d7..b8e114b3923be 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..d1701f6e6fe5e 100644 --- a/site/src/pages/TemplatesPages/TemplatesPage.tsx +++ b/site/src/pages/TemplatesPages/TemplatesPage.tsx @@ -9,6 +9,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 +70,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/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%", - }, -})) From 8f55513d48ad55d67f4429b9a9cf3806c24a72e1 Mon Sep 17 00:00:00 2001 From: Presley Date: Fri, 29 Apr 2022 14:12:20 +0000 Subject: [PATCH 3/4] Add to a page, lint --- site/src/components/Header/Header.tsx | 2 +- .../components/Margins/Margins.stories.tsx | 5 +---- site/src/components/Margins/Margins.tsx | 6 ++---- .../PreferencesLayout/PreferencesLayout.tsx | 2 +- .../pages/TemplatesPages/TemplatesPage.tsx | 1 - .../CreateUserPage/CreateUserPage.tsx | 19 +++++++++++-------- site/src/pages/UsersPage/UsersPageView.tsx | 1 - 7 files changed, 16 insertions(+), 20 deletions(-) diff --git a/site/src/components/Header/Header.tsx b/site/src/components/Header/Header.tsx index 5037ba7a54b4c..fb79e0487f836 100644 --- a/site/src/components/Header/Header.tsx +++ b/site/src/components/Header/Header.tsx @@ -79,7 +79,7 @@ const useStyles = makeStyles((theme) => ({ flex: 1, height: 68, minWidth: 0, - padding: `0 ${sidePadding}` + padding: `0 ${sidePadding}`, }, title: { display: "flex", diff --git a/site/src/components/Margins/Margins.stories.tsx b/site/src/components/Margins/Margins.stories.tsx index 102632d9a29b4..031c9f1495227 100644 --- a/site/src/components/Margins/Margins.stories.tsx +++ b/site/src/components/Margins/Margins.stories.tsx @@ -1,4 +1,3 @@ -import { action } from "@storybook/addon-actions" import { ComponentMeta, Story } from "@storybook/react" import React from "react" import { Margins } from "./Margins" @@ -10,9 +9,7 @@ export default { const Template: Story = (args) => ( -
- Here's some content that won't get too wide! -
+
Here is some content that will not get too wide!
 ) diff --git a/site/src/components/Margins/Margins.tsx b/site/src/components/Margins/Margins.tsx index 50824865864c0..e59692a214c54 100644 --- a/site/src/components/Margins/Margins.tsx +++ b/site/src/components/Margins/Margins.tsx @@ -8,16 +8,14 @@ const useStyles = makeStyles(() => ({ maxWidth, padding: `0 ${sidePadding}`, flex: 1, - } + }, })) export const Margins: React.FC = ({ children }) => { const styles = useStyles() return (
-
- {children} -
+
{children}
) } diff --git a/site/src/components/PreferencesLayout/PreferencesLayout.tsx b/site/src/components/PreferencesLayout/PreferencesLayout.tsx index b8e114b3923be..c0fb69df6dc93 100644 --- a/site/src/components/PreferencesLayout/PreferencesLayout.tsx +++ b/site/src/components/PreferencesLayout/PreferencesLayout.tsx @@ -28,7 +28,7 @@ export const PreferencesLayout: React.FC = () => { - + ) diff --git a/site/src/pages/TemplatesPages/TemplatesPage.tsx b/site/src/pages/TemplatesPages/TemplatesPage.tsx index d1701f6e6fe5e..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" 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 afd7b88eb9afb..a484300b518f0 100644 --- a/site/src/pages/UsersPage/UsersPageView.tsx +++ b/site/src/pages/UsersPage/UsersPageView.tsx @@ -1,4 +1,3 @@ -import { makeStyles } from "@material-ui/core/styles" import React from "react" import { Pager, UserResponse } from "../../api/types" import { Header } from "../../components/Header/Header" From 47caa7ee9ee75dad58013552a42fd6da5f6006dd Mon Sep 17 00:00:00 2001 From: Presley Date: Tue, 3 May 2022 21:23:04 +0000 Subject: [PATCH 4/4] Format --- site/src/pages/UsersPage/UsersPageView.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/site/src/pages/UsersPage/UsersPageView.tsx b/site/src/pages/UsersPage/UsersPageView.tsx index 01be3f5b9d95d..24e5b96f44f5d 100644 --- a/site/src/pages/UsersPage/UsersPageView.tsx +++ b/site/src/pages/UsersPage/UsersPageView.tsx @@ -1,4 +1,3 @@ - import React from "react" import { UserResponse } from "../../api/types" import { Header } from "../../components/Header/Header"