Skip to content

Commit b20ecfd

Browse files
refactor: Minor improvements and fixes for the page headers (#4045)
1 parent b6712ff commit b20ecfd

File tree

4 files changed

+23
-23
lines changed

4 files changed

+23
-23
lines changed

site/src/components/PageHeader/PageHeader.tsx

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,13 @@ export const PageHeaderTitle: React.FC<React.PropsWithChildren<unknown>> = ({ ch
3232
return <h1 className={styles.title}>{children}</h1>
3333
}
3434

35-
export const PageHeaderSubtitle: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
36-
const styles = useStyles()
35+
export const PageHeaderSubtitle: React.FC<React.PropsWithChildren<{ condensed?: boolean }>> = ({
36+
children,
37+
condensed,
38+
}) => {
39+
const styles = useStyles({
40+
condensed,
41+
})
3742

3843
return <h2 className={styles.subtitle}>{children}</h2>
3944
}
@@ -52,21 +57,21 @@ const useStyles = makeStyles((theme) => ({
5257
},
5358

5459
title: {
55-
fontSize: theme.spacing(4),
56-
fontWeight: 400,
60+
fontSize: theme.spacing(3),
5761
margin: 0,
5862
display: "flex",
5963
alignItems: "center",
6064
lineHeight: "140%",
6165
},
6266

6367
subtitle: {
64-
fontSize: theme.spacing(2.25),
68+
fontSize: theme.spacing(2),
6569
color: theme.palette.text.secondary,
6670
fontWeight: 400,
6771
display: "block",
6872
margin: 0,
69-
marginTop: theme.spacing(1),
73+
marginTop: ({ condensed }: { condensed?: boolean }) =>
74+
condensed ? theme.spacing(0.5) : theme.spacing(1),
7075
},
7176

7277
actions: {

site/src/components/Workspace/Workspace.tsx

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import Box from "@material-ui/core/Box"
21
import { makeStyles } from "@material-ui/core/styles"
32
import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
43
import { WorkspaceStatusBadge } from "components/WorkspaceStatusBadge/WorkspaceStatusBadge"
@@ -106,15 +105,15 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
106105
}
107106
>
108107
<WorkspaceStatusBadge build={workspace.latest_build} className={styles.statusBadge} />
109-
<Box display="flex">
108+
<Stack direction="row" spacing={3} alignItems="center">
110109
{hasTemplateIcon && (
111110
<img alt="" src={workspace.template_icon} className={styles.templateIcon} />
112111
)}
113112
<div>
114113
<PageHeaderTitle>{workspace.name}</PageHeaderTitle>
115-
<PageHeaderSubtitle>{workspace.owner_name}</PageHeaderSubtitle>
114+
<PageHeaderSubtitle condensed>{workspace.owner_name}</PageHeaderSubtitle>
116115
</div>
117-
</Box>
116+
</Stack>
118117
</PageHeader>
119118

120119
<Stack direction="column" className={styles.firstColumnSpacer} spacing={2.5}>
@@ -184,10 +183,8 @@ export const useStyles = makeStyles((theme) => {
184183
},
185184

186185
templateIcon: {
187-
width: 40,
188-
height: 40,
189-
marginRight: theme.spacing(2),
190-
marginTop: theme.spacing(0.5),
186+
width: theme.spacing(6),
187+
height: theme.spacing(6),
191188
},
192189

193190
timelineContents: {

site/src/pages/TemplatePage/TemplatePageView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ export const TemplatePageView: FC<React.PropsWithChildren<TemplatePageViewProps>
130130
</div>
131131
<div>
132132
<PageHeaderTitle>{template.name}</PageHeaderTitle>
133-
<PageHeaderSubtitle>
133+
<PageHeaderSubtitle condensed>
134134
{template.description === "" ? Language.noDescription : template.description}
135135
</PageHeaderSubtitle>
136136
</div>

site/src/pages/UsersPage/UsersPageView.tsx

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -70,14 +70,12 @@ export const UsersPageView: FC<React.PropsWithChildren<UsersPageViewProps>> = ({
7070
<PageHeaderTitle>{Language.pageTitle}</PageHeaderTitle>
7171
</PageHeader>
7272

73-
<div style={{ marginTop: "15px" }}>
74-
<SearchBarWithFilter
75-
filter={filter}
76-
onFilter={onFilter}
77-
presetFilters={presetFilters}
78-
error={error}
79-
/>
80-
</div>
73+
<SearchBarWithFilter
74+
filter={filter}
75+
onFilter={onFilter}
76+
presetFilters={presetFilters}
77+
error={error}
78+
/>
8179

8280
<UsersTable
8381
users={users}

0 commit comments

Comments
 (0)