Skip to content

Commit 48a4ea6

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Refactor editor header
1 parent 7a864bd commit 48a4ea6

File tree

4 files changed

+44
-36
lines changed

4 files changed

+44
-36
lines changed

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,17 @@ export interface PillProps {
99
text: string
1010
type?: PaletteIndex
1111
lightBorder?: boolean
12+
title?: string
1213
}
1314

1415
export const Pill: FC<PillProps> = (props) => {
15-
const { className, icon, text = false } = props
16+
const { className, icon, text = false, title } = props
1617
const styles = useStyles(props)
1718
return (
1819
<div
1920
className={combineClasses([styles.wrapper, styles.pillColor, className])}
2021
role="status"
22+
title={title}
2123
>
2224
{icon && <div className={styles.iconWrapper}>{icon}</div>}
2325
{text}

‎site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx

Lines changed: 13 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import Button from "@material-ui/core/Button"
22
import IconButton from "@material-ui/core/IconButton"
33
import { makeStyles, Theme } from "@material-ui/core/styles"
44
import Tooltip from "@material-ui/core/Tooltip"
5-
import CreateIcon from "@material-ui/icons/AddBox"
5+
import CreateIcon from "@material-ui/icons/AddBoxOutlined"
66
import BuildIcon from "@material-ui/icons/BuildOutlined"
7-
import PreviewIcon from "@material-ui/icons/Visibility"
7+
import PreviewIcon from "@material-ui/icons/VisibilityOutlined"
88
import {
99
ProvisionerJobLog,
1010
Template,
@@ -50,7 +50,7 @@ export interface TemplateVersionEditorProps {
5050
onUpdate: () => void
5151
}
5252

53-
const topbarHeight = navHeight
53+
const topbarHeight = 80
5454

5555
const findInitialFile = (fileTree: FileTree): string | undefined => {
5656
let initialFile: string | undefined
@@ -161,50 +161,39 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
161161
)
162162
}
163163
/>
164-
<div>Used By: {template.active_user_count} developers</div>
165164
</div>
166165

167166
<div className={styles.topbarSides}>
168167
<div className={styles.buildStatus}>
169-
Build Status:
170168
<TemplateVersionStatusBadge version={templateVersion} />
171169
</div>
172170

173171
<Button
172+
title="Build template (Ctrl + Enter)"
174173
size="small"
175174
variant="outlined"
176-
color="primary"
177175
disabled={disablePreview}
178176
onClick={() => {
179177
triggerPreview()
180178
}}
181179
>
182-
Build (Ctrl + Enter)
180+
Build template
183181
</Button>
184182

185-
<Tooltip
183+
<Button
186184
title={
187185
dirty
188186
? "You have edited files! Run another build before updating."
189187
: templateVersion.job.status !== "succeeded"
190188
? "Something"
191189
: ""
192190
}
191+
size="small"
192+
disabled={dirty || disableUpdate}
193+
onClick={onUpdate}
193194
>
194-
<span>
195-
<Button
196-
size="small"
197-
variant="contained"
198-
color="primary"
199-
disabled={dirty || disableUpdate}
200-
onClick={() => {
201-
onUpdate()
202-
}}
203-
>
204-
Publish New Version
205-
</Button>
206-
</span>
207-
</Tooltip>
195+
Publish version
196+
</Button>
208197
</div>
209198
</div>
210199

@@ -413,11 +402,12 @@ const useStyles = makeStyles<
413402
alignItems: "center",
414403
justifyContent: "space-between",
415404
height: topbarHeight,
405+
background: theme.palette.background.paper,
416406
},
417407
topbarSides: {
418408
display: "flex",
419409
alignItems: "center",
420-
gap: 16,
410+
gap: theme.spacing(2),
421411
},
422412
buildStatus: {
423413
display: "flex",

‎site/src/components/TemplateVersionEditor/TemplateVersionStatusBadge.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { TemplateVersion } from "api/typesGenerated"
22
import { FC, ReactNode } from "react"
33
import { PaletteIndex } from "theme/palettes"
4-
54
import CircularProgress from "@material-ui/core/CircularProgress"
65
import ErrorIcon from "@material-ui/icons/ErrorOutline"
76
import CheckIcon from "@material-ui/icons/CheckOutlined"
@@ -11,7 +10,14 @@ export const TemplateVersionStatusBadge: FC<{
1110
version: TemplateVersion
1211
}> = ({ version }) => {
1312
const { text, icon, type } = getStatus(version)
14-
return <Pill icon={icon} text={text} type={type} />
13+
return (
14+
<Pill
15+
icon={icon}
16+
text={text}
17+
type={type}
18+
title={`Build status is ${text}`}
19+
/>
20+
)
1521
}
1622

1723
const LoadingIcon: FC = () => {

‎site/src/theme/overrides.ts

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { lighten, Theme, StyleRules } from "@material-ui/core/styles"
1+
import { Theme, StyleRules } from "@material-ui/core/styles"
22
import { Overrides } from "@material-ui/core/styles/overrides"
33
import { SkeletonClassKey } from "@material-ui/lab"
44
import { colors } from "./colors"
@@ -57,17 +57,20 @@ export const getOverrides = ({
5757
contained: {
5858
boxShadow: "none",
5959
color: palette.text.primary,
60-
backgroundColor: colors.gray[17],
60+
backgroundColor: colors.gray[11],
61+
borderColor: colors.gray[10],
6162

62-
"&:hover": {
63+
"&:hover:not(:disabled)": {
6364
boxShadow: "none",
64-
backgroundColor: colors.gray[17],
65-
borderColor: lighten(palette.divider, 0.2),
65+
backgroundColor: colors.gray[12],
66+
borderColor: colors.gray[12],
6667
},
6768

6869
"&.Mui-disabled": {
69-
backgroundColor: palette.background.paper,
70-
color: palette.secondary.main,
70+
color: colors.gray[9],
71+
backgroundColor: colors.gray[14],
72+
pointerEvents: "auto",
73+
cursor: "not-allowed",
7174
},
7275
},
7376
sizeSmall: {
@@ -89,10 +92,17 @@ export const getOverrides = ({
8992
},
9093
},
9194
outlined: {
92-
border: `1px solid ${palette.divider}`,
95+
border: `1px solid ${colors.gray[11]}`,
96+
97+
"&:hover:not(:disabled)": {
98+
backgroundColor: colors.gray[14],
99+
},
93100

94-
"&:hover": {
95-
backgroundColor: palette.action.hover,
101+
"&.Mui-disabled": {
102+
color: colors.gray[9],
103+
border: `1px solid ${colors.gray[12]}`,
104+
pointerEvents: "auto",
105+
cursor: "not-allowed",
96106
},
97107
},
98108
},

0 commit comments

Comments
 (0)