Skip to content

Commit 9070fcd

Browse files
BrunoQuaresmaBrunoQuaresma
authored
refactor: Refactor page header spacing and stats (#4750)
1 parent 2ffefc3 commit 9070fcd

File tree

6 files changed

+25
-62
lines changed

6 files changed

+25
-62
lines changed

‎site/src/components/PageHeader/PageHeader.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const useStyles = makeStyles((theme) => ({
5252
display: "flex",
5353
alignItems: "center",
5454
paddingTop: theme.spacing(6),
55-
paddingBottom: theme.spacing(5),
55+
paddingBottom: theme.spacing(6),
5656

5757
[theme.breakpoints.down("sm")]: {
5858
flexDirection: "column",

‎site/src/components/Pill/Pill.tsx

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { makeStyles, Theme } from "@material-ui/core/styles"
22
import { FC } from "react"
3-
import { MONOSPACE_FONT_FAMILY } from "theme/constants"
43
import { PaletteIndex } from "theme/palettes"
54
import { combineClasses } from "util/combineClasses"
65

@@ -28,14 +27,12 @@ export const Pill: FC<PillProps> = (props) => {
2827

2928
const useStyles = makeStyles<Theme, PillProps>((theme) => ({
3029
wrapper: {
31-
fontFamily: MONOSPACE_FONT_FAMILY,
3230
display: "inline-flex",
3331
alignItems: "center",
3432
borderWidth: 1,
3533
borderStyle: "solid",
3634
borderRadius: 99999,
37-
fontSize: 14,
38-
fontWeight: 500,
35+
fontSize: 12,
3936
color: "#FFF",
4037
height: theme.spacing(3),
4138
paddingLeft: ({ icon }) =>

‎site/src/components/TemplateStats/TemplateStats.tsx

+11-28
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
formatTemplateActiveDevelopers,
77
} from "util/templates"
88
import { Template, TemplateVersion } from "../../api/typesGenerated"
9-
import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
109

1110
const Language = {
1211
usedByLabel: "Used by",
@@ -32,7 +31,7 @@ export const TemplateStats: FC<TemplateStatsProps> = ({
3231
return (
3332
<div className={styles.stats}>
3433
<div className={styles.statItem}>
35-
<span className={styles.statsLabel}>{Language.usedByLabel}</span>
34+
<span className={styles.statsLabel}>{Language.usedByLabel}:</span>
3635

3736
<span className={styles.statsValue}>
3837
{formatTemplateActiveDevelopers(template.active_user_count)}{" "}
@@ -41,29 +40,27 @@ export const TemplateStats: FC<TemplateStatsProps> = ({
4140
: Language.developerPlural}
4241
</span>
4342
</div>
44-
<div className={styles.statsDivider} />
4543
<div className={styles.statItem}>
46-
<span className={styles.statsLabel}>{Language.buildTimeLabel}</span>
44+
<span className={styles.statsLabel}>{Language.buildTimeLabel}:</span>
4745

4846
<span className={styles.statsValue}>
4947
{formatTemplateBuildTime(template.build_time_stats.start_ms)}{" "}
5048
</span>
5149
</div>
52-
<div className={styles.statsDivider} />
5350
<div className={styles.statItem}>
54-
<span className={styles.statsLabel}>{Language.activeVersionLabel}</span>
51+
<span className={styles.statsLabel}>
52+
{Language.activeVersionLabel}:
53+
</span>
5554
<span className={styles.statsValue}>{activeVersion.name}</span>
5655
</div>
57-
<div className={styles.statsDivider} />
5856
<div className={styles.statItem}>
59-
<span className={styles.statsLabel}>{Language.lastUpdateLabel}</span>
57+
<span className={styles.statsLabel}>{Language.lastUpdateLabel}:</span>
6058
<span className={styles.statsValue} data-chromatic="ignore">
6159
{createDayString(template.updated_at)}
6260
</span>
6361
</div>
64-
<div className={styles.statsDivider} />
6562
<div className={styles.statItem}>
66-
<span className={styles.statsLabel}>{Language.createdByLabel}</span>
63+
<span className={styles.statsLabel}>{Language.createdByLabel}:</span>
6764
<span className={styles.statsValue}>{template.created_by_name}</span>
6865
</div>
6966
</div>
@@ -74,46 +71,32 @@ const useStyles = makeStyles((theme) => ({
7471
stats: {
7572
paddingLeft: theme.spacing(2),
7673
paddingRight: theme.spacing(2),
77-
backgroundColor: theme.palette.background.paper,
7874
borderRadius: theme.shape.borderRadius,
7975
display: "flex",
8076
alignItems: "center",
8177
color: theme.palette.text.secondary,
82-
fontFamily: MONOSPACE_FONT_FAMILY,
8378
border: `1px solid ${theme.palette.divider}`,
8479
[theme.breakpoints.down("sm")]: {
8580
display: "block",
8681
},
8782
},
8883

8984
statItem: {
90-
minWidth: "15%",
9185
padding: theme.spacing(2),
9286
paddingTop: theme.spacing(1.75),
87+
display: "flex",
88+
alignItems: "baseline",
89+
gap: theme.spacing(1),
9390
},
9491

9592
statsLabel: {
96-
fontSize: 12,
97-
textTransform: "uppercase",
9893
display: "block",
99-
fontWeight: 600,
10094
wordWrap: "break-word",
10195
},
10296

10397
statsValue: {
104-
fontSize: 16,
105-
marginTop: theme.spacing(0.25),
10698
display: "block",
10799
wordWrap: "break-word",
108-
},
109-
110-
statsDivider: {
111-
width: 1,
112-
height: theme.spacing(5),
113-
backgroundColor: theme.palette.divider,
114-
marginRight: theme.spacing(2),
115-
[theme.breakpoints.down("sm")]: {
116-
display: "none",
117-
},
100+
color: theme.palette.text.primary,
118101
},
119102
}))

‎site/src/components/Workspace/Workspace.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,7 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
179179
<Stack
180180
direction="column"
181181
className={styles.firstColumnSpacer}
182-
spacing={6}
182+
spacing={4}
183183
>
184184
{buildError}
185185
{cancellationError}

‎site/src/components/WorkspaceStats/WorkspaceStats.tsx

+9-26
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { combineClasses } from "util/combineClasses"
77
import { createDayString } from "util/createDayString"
88
import { getDisplayWorkspaceBuildInitiatedBy } from "util/workspace"
99
import { Workspace } from "../../api/typesGenerated"
10-
import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
1110

1211
const Language = {
1312
workspaceDetails: "Workspace Details",
@@ -17,7 +16,7 @@ const Language = {
1716
lastBuiltLabel: "Last Built",
1817
outdated: "Outdated",
1918
upToDate: "Up to date",
20-
byLabel: "Last Built by",
19+
byLabel: "Last built by",
2120
}
2221

2322
export interface WorkspaceStatsProps {
@@ -38,7 +37,7 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({
3837
return (
3938
<div className={styles.stats} aria-label={Language.workspaceDetails}>
4039
<div className={styles.statItem}>
41-
<span className={styles.statsLabel}>{Language.templateLabel}</span>
40+
<span className={styles.statsLabel}>{Language.templateLabel}:</span>
4241
<Link
4342
component={RouterLink}
4443
to={`/templates/${workspace.template_name}`}
@@ -47,9 +46,8 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({
4746
{workspace.template_name}
4847
</Link>
4948
</div>
50-
<div className={styles.statsDivider} />
5149
<div className={styles.statItem}>
52-
<span className={styles.statsLabel}>{Language.versionLabel}</span>
50+
<span className={styles.statsLabel}>{Language.versionLabel}:</span>
5351
<span className={styles.statsValue}>
5452
{workspace.outdated ? (
5553
<span className={styles.outdatedLabel}>
@@ -66,16 +64,14 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({
6664
)}
6765
</span>
6866
</div>
69-
<div className={styles.statsDivider} />
7067
<div className={styles.statItem}>
71-
<span className={styles.statsLabel}>{Language.lastBuiltLabel}</span>
68+
<span className={styles.statsLabel}>{Language.lastBuiltLabel}:</span>
7269
<span className={styles.statsValue} data-chromatic="ignore">
7370
{createDayString(workspace.latest_build.created_at)}
7471
</span>
7572
</div>
76-
<div className={styles.statsDivider} />
7773
<div className={styles.statItem}>
78-
<span className={styles.statsLabel}>{Language.byLabel}</span>
74+
<span className={styles.statsLabel}>{Language.byLabel}:</span>
7975
<span className={styles.statsValue}>{initiatedBy}</span>
8076
</div>
8177
</div>
@@ -86,48 +82,35 @@ const useStyles = makeStyles((theme) => ({
8682
stats: {
8783
paddingLeft: theme.spacing(2),
8884
paddingRight: theme.spacing(2),
89-
backgroundColor: theme.palette.background.paper,
9085
borderRadius: theme.shape.borderRadius,
9186
border: `1px solid ${theme.palette.divider}`,
9287
display: "flex",
9388
alignItems: "center",
9489
color: theme.palette.text.secondary,
95-
fontFamily: MONOSPACE_FONT_FAMILY,
9690
margin: "0px",
9791
[theme.breakpoints.down("sm")]: {
9892
display: "block",
9993
},
10094
},
10195

10296
statItem: {
103-
minWidth: "16%",
10497
padding: theme.spacing(2),
10598
paddingTop: theme.spacing(1.75),
99+
display: "flex",
100+
alignItems: "baseline",
101+
gap: theme.spacing(1),
106102
},
107103

108104
statsLabel: {
109-
fontSize: 12,
110-
textTransform: "uppercase",
111105
display: "block",
112-
fontWeight: 600,
113106
wordWrap: "break-word",
114107
},
115108

116109
statsValue: {
117-
fontSize: 16,
118110
marginTop: theme.spacing(0.25),
119111
display: "block",
120112
wordWrap: "break-word",
121-
},
122-
123-
statsDivider: {
124-
width: 1,
125-
height: theme.spacing(5),
126-
backgroundColor: theme.palette.divider,
127-
marginRight: theme.spacing(2),
128-
[theme.breakpoints.down("sm")]: {
129-
display: "none",
130-
},
113+
color: theme.palette.text.primary,
131114
},
132115

133116
capitalize: {

‎site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -54,13 +54,13 @@ export const TemplateSummaryPageView: FC<
5454
}
5555

5656
return (
57-
<Stack spacing={2.5}>
57+
<Stack spacing={4}>
5858
{deleteError}
59-
{templateDAUs && <DAUChart templateDAUs={templateDAUs} />}
6059
<TemplateStats
6160
template={template}
6261
activeVersion={activeTemplateVersion}
6362
/>
63+
{templateDAUs && <DAUChart templateDAUs={templateDAUs} />}
6464
<TemplateResourcesTable
6565
resources={getStartedResources(templateResources)}
6666
/>

0 commit comments

Comments
 (0)