Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 34b91fd

Browse files
presleyppresleyp
authored
feat: add margins to pages (#1217)
* Add Margin, use constants * Change throughout * Add to a page, lint * Format
1 parent 4c35b81 commit 34b91fd

File tree

13 files changed

+91
-83
lines changed

13 files changed

+91
-83
lines changed

‎site/src/components/FullPageForm/FullPageForm.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { makeStyles } from "@material-ui/core/styles"
22
import React from "react"
33
import { FormCloseButton } from "../FormCloseButton/FormCloseButton"
44
import { FormTitle } from "../FormTitle/FormTitle"
5+
import { Margins } from "../Margins/Margins"
56

67
export interface FullPageFormProps {
78
title: string
@@ -11,7 +12,6 @@ export interface FullPageFormProps {
1112

1213
const useStyles = makeStyles(() => ({
1314
root: {
14-
maxWidth: "1380px",
1515
width: "100%",
1616
display: "flex",
1717
flexDirection: "column",
@@ -23,10 +23,12 @@ export const FullPageForm: React.FC<FullPageFormProps> = ({ title, detail, onCan
2323
const styles = useStyles()
2424
return (
2525
<main className={styles.root}>
26-
<FormTitle title={title} detail={detail} />
27-
<FormCloseButton onClose={onCancel} />
26+
<Margins>
27+
<FormTitle title={title} detail={detail} />
28+
<FormCloseButton onClose={onCancel} />
2829

29-
{children}
30+
{children}
31+
</Margins>
3032
</main>
3133
)
3234
}

‎site/src/components/Header/Header.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import Box from "@material-ui/core/Box"
22
import { makeStyles } from "@material-ui/core/styles"
33
import Typography from "@material-ui/core/Typography"
44
import React from "react"
5+
import { maxWidth, sidePadding } from "../../theme/constants"
56
import { HeaderButton } from "../HeaderButton/HeaderButton"
67

78
export interface HeaderAction {
@@ -66,18 +67,19 @@ const useStyles = makeStyles((theme) => ({
6667
position: "relative",
6768
display: "flex",
6869
alignItems: "center",
69-
height: 150,
70+
height: 126,
7071
background: theme.palette.hero.main,
7172
boxShadow: theme.shadows[3],
7273
},
7374
topInner: {
7475
display: "flex",
7576
alignItems: "center",
76-
maxWidth: "1380px",
77+
maxWidth,
7778
margin: "0 auto",
7879
flex: 1,
7980
height: 68,
8081
minWidth: 0,
82+
padding: `0 ${sidePadding}`,
8183
},
8284
title: {
8385
display: "flex",

‎site/src/components/Margins/Margins.stories.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { ComponentMeta, Story } from "@storybook/react"
2+
import React from "react"
3+
import { Margins } from "./Margins"
4+
5+
export default {
6+
title: "components/Margins",
7+
component: Margins,
8+
} as ComponentMeta<typeof Margins>
9+
10+
const Template: Story = (args) => (
11+
<Margins {...args}>
12+
<div style={{ width: "100%", background: "lightgrey" }}>Here is some content that will not get too wide!</div>
13+
</Margins>
14+
)
15+
16+
export const Example = Template.bind({})

‎site/src/components/Margins/Margins.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { makeStyles } from "@material-ui/core/styles"
2+
import React from "react"
3+
import { maxWidth, sidePadding } from "../../theme/constants"
4+
5+
const useStyles = makeStyles(() => ({
6+
margins: {
7+
margin: "0 auto",
8+
maxWidth,
9+
padding: `0 ${sidePadding}`,
10+
flex: 1,
11+
},
12+
}))
13+
14+
export const Margins: React.FC = ({ children }) => {
15+
const styles = useStyles()
16+
return (
17+
<div>
18+
<div className={styles.margins}>{children}</div>
19+
</div>
20+
)
21+
}

‎site/src/components/PreferencesLayout/PreferencesLayout.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import Box from "@material-ui/core/Box"
22
import React from "react"
33
import { Outlet } from "react-router-dom"
44
import { AuthAndFrame } from "../AuthAndFrame/AuthAndFrame"
5+
import { Margins } from "../Margins/Margins"
56
import { TabPanel } from "../TabPanel/TabPanel"
67

78
export const Language = {
@@ -23,11 +24,11 @@ export const PreferencesLayout: React.FC = () => {
2324
return (
2425
<AuthAndFrame>
2526
<Box display="flex" flexDirection="column">
26-
<Box style={{ maxWidth: "1380px", margin: "1em auto" }}>
27+
<Margins>
2728
<TabPanel title={Language.preferencesLabel} menuItems={menuItems}>
2829
<Outlet />
2930
</TabPanel>
30-
</Box>
31+
</Margins>
3132
</Box>
3233
</AuthAndFrame>
3334
)

‎site/src/forms/CreateTemplateForm.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { FormSection } from "../components/FormSection/FormSection"
1010
import { FormTextField } from "../components/FormTextField/FormTextField"
1111
import { FormTitle } from "../components/FormTitle/FormTitle"
1212
import { LoadingButton } from "../components/LoadingButton/LoadingButton"
13+
import { maxWidth } from "../theme/constants"
1314

1415
export interface CreateTemplateFormProps {
1516
provisioners: Provisioner[]
@@ -121,7 +122,7 @@ export const CreateTemplateForm: React.FC<CreateTemplateFormProps> = ({
121122

122123
const useStyles = makeStyles(() => ({
123124
root: {
124-
maxWidth: "1380px",
125+
maxWidth,
125126
width: "100%",
126127
display: "flex",
127128
flexDirection: "column",

‎site/src/forms/CreateWorkspaceForm.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { FormSection } from "../components/FormSection/FormSection"
99
import { FormTextField } from "../components/FormTextField/FormTextField"
1010
import { FormTitle } from "../components/FormTitle/FormTitle"
1111
import { LoadingButton } from "../components/LoadingButton/LoadingButton"
12+
import { maxWidth } from "../theme/constants"
1213

1314
export interface CreateWorkspaceForm {
1415
template: Template
@@ -82,7 +83,7 @@ export const CreateWorkspaceForm: React.FC<CreateWorkspaceForm> = ({ template, o
8283

8384
const useStyles = makeStyles(() => ({
8485
root: {
85-
maxWidth: "1380px",
86+
maxWidth,
8687
width: "100%",
8788
display: "flex",
8889
flexDirection: "column",

‎site/src/pages/TemplatesPages/OrganizationPage/TemplatePage/TemplatePage.tsx

Lines changed: 6 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import Paper from "@material-ui/core/Paper"
2-
import { makeStyles } from "@material-ui/core/styles"
31
import React from "react"
42
import { Link, useNavigate, useParams } from "react-router-dom"
53
import useSWR from "swr"
@@ -8,12 +6,13 @@ import { EmptyState } from "../../../../components/EmptyState/EmptyState"
86
import { ErrorSummary } from "../../../../components/ErrorSummary/ErrorSummary"
97
import { Header } from "../../../../components/Header/Header"
108
import { FullScreenLoader } from "../../../../components/Loader/FullScreenLoader"
9+
import { Margins } from "../../../../components/Margins/Margins"
10+
import { Stack } from "../../../../components/Stack/Stack"
1111
import { Column, Table } from "../../../../components/Table/Table"
1212
import { unsafeSWRArgument } from "../../../../util"
1313
import { firstOrItem } from "../../../../util/array"
1414

1515
export const TemplatePage: React.FC = () => {
16-
const styles = useStyles()
1716
const navigate = useNavigate()
1817
const { template: templateName, organization: organizationName } = useParams()
1918

@@ -82,7 +81,7 @@ export const TemplatePage: React.FC = () => {
8281
}
8382

8483
return (
85-
<div className={styles.root}>
84+
<Stack spacing={4}>
8685
<Header
8786
title={firstOrItem(templateName, "")}
8887
description={firstOrItem(organizationName, "")}
@@ -93,25 +92,9 @@ export const TemplatePage: React.FC = () => {
9392
}}
9493
/>
9594

96-
<Paper style={{ maxWidth: "1380px", margin: "1em auto", width: "100%" }}>
95+
<Margins>
9796
<Table {...tableProps} />
98-
</Paper>
99-
</div>
97+
</Margins>
98+
</Stack>
10099
)
101100
}
102-
103-
const useStyles = makeStyles((theme) => ({
104-
root: {
105-
display: "flex",
106-
flexDirection: "column",
107-
},
108-
header: {
109-
display: "flex",
110-
flexDirection: "row-reverse",
111-
justifyContent: "space-between",
112-
margin: "1em auto",
113-
maxWidth: "1380px",
114-
padding: theme.spacing(2, 6.25, 0),
115-
width: "100%",
116-
},
117-
}))

‎site/src/pages/TemplatesPages/TemplatesPage.tsx

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import Paper from "@material-ui/core/Paper"
21
import { makeStyles } from "@material-ui/core/styles"
32
import React from "react"
43
import { Link } from "react-router-dom"
@@ -9,6 +8,8 @@ import { EmptyState } from "../../components/EmptyState/EmptyState"
98
import { ErrorSummary } from "../../components/ErrorSummary/ErrorSummary"
109
import { Header } from "../../components/Header/Header"
1110
import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
11+
import { Margins } from "../../components/Margins/Margins"
12+
import { Stack } from "../../components/Stack/Stack"
1213
import { Column, Table } from "../../components/Table/Table"
1314

1415
export const TemplatesPage: React.FC = () => {
@@ -68,20 +69,16 @@ export const TemplatesPage: React.FC = () => {
6869
const subTitle = `${templates.length} total`
6970

7071
return (
71-
<div className={styles.root}>
72+
<Stack spacing={4}>
7273
<Header title="Templates" subTitle={subTitle} />
73-
<Paper style={{ maxWidth: "1380px", margin: "1em auto", width: "100%" }}>
74+
<Margins>
7475
<Table {...tableProps} />
75-
</Paper>
76-
</div>
76+
</Margins>
77+
</Stack>
7778
)
7879
}
7980

8081
const useStyles = makeStyles((theme) => ({
81-
root: {
82-
display: "flex",
83-
flexDirection: "column",
84-
},
8582
descriptionLabel: {
8683
marginBottom: theme.spacing(1),
8784
},

‎site/src/pages/UsersPage/CreateUserPage/CreateUserPage.tsx

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React, { useContext } from "react"
33
import { useNavigate } from "react-router"
44
import { CreateUserRequest } from "../../../api/types"
55
import { CreateUserForm } from "../../../components/CreateUserForm/CreateUserForm"
6+
import { Margins } from "../../../components/Margins/Margins"
67
import { selectOrgId } from "../../../xServices/auth/authSelectors"
78
import { XServiceContext } from "../../../xServices/StateContext"
89

@@ -21,13 +22,15 @@ export const CreateUserPage: React.FC = () => {
2122
createUserError || createUserFormErrors?.organization_id || !myOrgId ? Language.unknownError : undefined
2223

2324
return (
24-
<CreateUserForm
25-
formErrors={createUserFormErrors}
26-
onSubmit={(user: CreateUserRequest) => usersSend({ type: "CREATE", user })}
27-
onCancel={() => navigate("/users")}
28-
isLoading={usersState.hasTag("loading")}
29-
error={genericError}
30-
myOrgId={myOrgId ?? ""}
31-
/>
25+
<Margins>
26+
<CreateUserForm
27+
formErrors={createUserFormErrors}
28+
onSubmit={(user: CreateUserRequest) => usersSend({ type: "CREATE", user })}
29+
onCancel={() => navigate("/users")}
30+
isLoading={usersState.hasTag("loading")}
31+
error={genericError}
32+
myOrgId={myOrgId ?? ""}
33+
/>
34+
</Margins>
3235
)
3336
}

‎site/src/pages/UsersPage/UsersPageView.tsx

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import Paper from "@material-ui/core/Paper"
2-
import { makeStyles } from "@material-ui/core/styles"
31
import React from "react"
42
import { UserResponse } from "../../api/types"
53
import { Header } from "../../components/Header/Header"
4+
import { Margins } from "../../components/Margins/Margins"
5+
import { Stack } from "../../components/Stack/Stack"
66
import { UsersTable } from "../../components/UsersTable/UsersTable"
77

88
export const Language = {
@@ -16,21 +16,12 @@ export interface UsersPageViewProps {
1616
}
1717

1818
export const UsersPageView: React.FC<UsersPageViewProps> = ({ users, openUserCreationDialog }) => {
19-
const styles = useStyles()
20-
2119
return (
22-
<div className={styles.flexColumn}>
20+
<Stack spacing={4}>
2321
<Header title={Language.pageTitle} action={{ text: Language.newUserButton, onClick: openUserCreationDialog }} />
24-
<Paper style={{ maxWidth: "1380px", margin: "1em auto", width: "100%" }}>
22+
<Margins>
2523
<UsersTable users={users} />
26-
</Paper>
27-
</div>
24+
</Margins>
25+
</Stack>
2826
)
2927
}
30-
31-
const useStyles = makeStyles(() => ({
32-
flexColumn: {
33-
display: "flex",
34-
flexDirection: "column",
35-
},
36-
}))

‎site/src/pages/WorkspacesPage/WorkspacesPage.tsx

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import { makeStyles } from "@material-ui/core/styles"
21
import React from "react"
32
import { useParams } from "react-router-dom"
43
import useSWR from "swr"
54
import * as Types from "../../api/types"
65
import { ErrorSummary } from "../../components/ErrorSummary/ErrorSummary"
76
import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
7+
import { Margins } from "../../components/Margins/Margins"
8+
import { Stack } from "../../components/Stack/Stack"
89
import { Workspace } from "../../components/Workspace/Workspace"
910
import { unsafeSWRArgument } from "../../util"
1011
import { firstOrItem } from "../../util/array"
1112

1213
export const WorkspacePage: React.FC = () => {
13-
const styles = useStyles()
1414
const { workspace: workspaceQueryParam } = useParams()
1515

1616
const { data: workspace, error: workspaceError } = useSWR<Types.Workspace, Error>(() => {
@@ -45,22 +45,10 @@ export const WorkspacePage: React.FC = () => {
4545
}
4646

4747
return (
48-
<div className={styles.root}>
49-
<div className={styles.inner}>
48+
<Margins>
49+
<Stack spacing={4}>
5050
<Workspace organization={organization} template={template} workspace={workspace} />
51-
</div>
52-
</div>
51+
</Stack>
52+
</Margins>
5353
)
5454
}
55-
56-
const useStyles = makeStyles(() => ({
57-
root: {
58-
display: "flex",
59-
flexDirection: "column",
60-
},
61-
inner: {
62-
maxWidth: "1380px",
63-
margin: "1em auto",
64-
width: "100%",
65-
},
66-
}))

‎site/src/theme/constants.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,5 @@ export const BODY_FONT_FAMILY = `"Inter", sans-serif`
77
export const lightButtonShadow = "0 2px 2px rgba(0, 23, 121, 0.08)"
88
export const emptyBoxShadow = "none"
99
export const navHeight = 56
10+
export const maxWidth = 1380
11+
export const sidePadding = "50px"

0 commit comments

Comments
 (0)