Skip to content

Commit d993a97

Browse files
BrunoQuaresmaBrunoQuaresma
authored
refactor(site): Minor design refactoring on template version editor (#6265)
1 parent 3f75f6b commit d993a97

File tree

24 files changed

+179
-93
lines changed

24 files changed

+179
-93
lines changed

‎site/src/app.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const queryClient = new QueryClient({
1515
queries: {
1616
retry: false,
1717
cacheTime: 0,
18+
refetchOnWindowFocus: false,
1819
},
1920
},
2021
})

‎site/src/components/DeploySettingsLayout/Fieldset.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const useStyles = makeStyles((theme) => ({
3939
},
4040
title: {
4141
...theme.typography.h5,
42-
fontWeight: "bold",
42+
fontWeight: 600,
4343
},
4444
body: {
4545
...theme.typography.body2,

‎site/src/components/Dialogs/Dialog.tsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -89,11 +89,16 @@ const useButtonStyles = makeStyles((theme) => ({
8989
backgroundColor: colors.red[10],
9090
borderColor: colors.red[9],
9191
color: theme.palette.text.primary,
92-
"&:hover": {
92+
93+
"&:hover:not(:disabled)": {
9394
backgroundColor: colors.red[9],
95+
borderColor: colors.red[9],
9496
},
97+
9598
"&.Mui-disabled": {
96-
opacity: 0.5,
99+
backgroundColor: colors.red[15],
100+
borderColor: colors.red[15],
101+
color: colors.red[9],
97102
},
98103
},
99104
},

‎site/src/components/DropdownButton/ActionCtas.tsx

+11-2
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export const UpdateButton: FC<React.PropsWithChildren<WorkspaceAction>> = ({
2626

2727
return (
2828
<Button
29+
variant="outlined"
2930
className={styles.actionButton}
3031
startIcon={<CloudQueueIcon />}
3132
onClick={handleAction}
@@ -43,6 +44,7 @@ export const ChangeVersionButton: FC<
4344

4445
return (
4546
<Button
47+
variant="outlined"
4648
className={styles.actionButton}
4749
startIcon={<UpdateOutlined />}
4850
onClick={handleAction}
@@ -60,6 +62,7 @@ export const BuildParametersButton: FC<
6062

6163
return (
6264
<Button
65+
variant="outlined"
6366
className={styles.actionButton}
6467
startIcon={<SettingsOutlined />}
6568
onClick={handleAction}
@@ -150,7 +153,7 @@ export const DisabledButton: FC<React.PropsWithChildren<DisabledProps>> = ({
150153
const styles = useStyles()
151154

152155
return (
153-
<Button disabled className={styles.actionButton}>
156+
<Button variant="outlined" disabled className={styles.actionButton}>
154157
{label}
155158
</Button>
156159
)
@@ -167,6 +170,7 @@ export const ActionLoadingButton: FC<React.PropsWithChildren<LoadingProps>> = ({
167170
return (
168171
<LoadingButton
169172
loading
173+
variant="outlined"
170174
loadingLabel={label}
171175
className={combineClasses([styles.loadingButton, styles.actionButton])}
172176
/>
@@ -178,8 +182,13 @@ const useStyles = makeStyles((theme) => ({
178182
// Set fixed width for the action buttons so they will not change the size
179183
// during the transitions
180184
width: theme.spacing(20),
181-
border: "none",
182185
borderRadius: `${theme.shape.borderRadius}px 0px 0px ${theme.shape.borderRadius}px`,
186+
// This is used to show the hover effect
187+
marginRight: -1,
188+
position: "relative",
189+
"&:hover": {
190+
zIndex: 1,
191+
},
183192
},
184193
cancelButton: {
185194
"&.MuiButton-root": {

‎site/src/components/DropdownButton/DropdownButton.tsx

+14-7
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export const DropdownButton: FC<DropdownButtonProps> = ({
4141
<>
4242
{/* popover toggle button */}
4343
<Button
44+
variant="outlined"
4445
data-testid="workspace-actions-button"
4546
aria-controls="workspace-actions-menu"
4647
aria-haspopup="true"
@@ -86,13 +87,9 @@ export const DropdownButton: FC<DropdownButtonProps> = ({
8687

8788
const useStyles = makeStyles((theme) => ({
8889
buttonContainer: {
89-
border: `1px solid ${theme.palette.divider}`,
90-
borderRadius: `${theme.shape.borderRadius}px`,
9190
display: "inline-flex",
9291
},
9392
dropdownButton: {
94-
border: "none",
95-
borderLeft: `1px solid ${theme.palette.divider}`,
9693
borderRadius: `0px ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0px`,
9794
minWidth: "unset",
9895
width: "64px", // matching cancel button so button grouping doesn't grow in size
@@ -110,8 +107,18 @@ const useStyles = makeStyles((theme) => ({
110107
},
111108
},
112109
popoverPaper: {
113-
padding: `${theme.spacing(1)}px ${theme.spacing(2)}px ${theme.spacing(
114-
1,
115-
)}px`,
110+
padding: 0,
111+
width: theme.spacing(28),
112+
113+
"& .MuiButton-root": {
114+
padding: theme.spacing(1, 2),
115+
borderRadius: 0,
116+
width: "100%",
117+
border: 0,
118+
119+
"&:hover": {
120+
background: theme.palette.action.hover,
121+
},
122+
},
116123
},
117124
}))

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export const FullPageHorizontalForm: FC<
2323
<Margins size="medium">
2424
<PageHeader
2525
actions={
26-
<Button size="small" onClick={onCancel}>
26+
<Button variant="outlined" size="small" onClick={onCancel}>
2727
Cancel
2828
</Button>
2929
}

‎site/src/components/LicenseBanner/LicenseBannerView.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ const useStyles = makeStyles((theme) => ({
9393
link: {
9494
color: "inherit",
9595
textDecoration: "none",
96-
fontWeight: "bold",
96+
fontWeight: 600,
9797
},
9898
list: {
9999
padding: theme.spacing(1),

‎site/src/components/NavbarView/NavbarView.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -239,7 +239,7 @@ const useStyles = makeStyles((theme) => ({
239239
// NavLink adds this class when the current route matches.
240240
"&.active": {
241241
color: theme.palette.text.primary,
242-
fontWeight: "bold",
242+
fontWeight: 500,
243243
},
244244

245245
[theme.breakpoints.up("md")]: {

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

+3-1
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/SearchBarWithFilter/SearchBarWithFilter.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ export const SearchBarWithFilter: React.FC<
7777
<Stack direction="row" spacing={0}>
7878
{presetFilters && presetFilters.length > 0 && (
7979
<Button
80+
variant="outlined"
8081
aria-controls="filter-menu"
8182
aria-haspopup="true"
8283
onClick={handleClick}

‎site/src/components/TemplateLayout/TemplatePageHeader.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ const TemplateSettingsButton: FC<{ templateName: string }> = ({
2828
templateName,
2929
}) => (
3030
<Button
31+
variant="outlined"
3132
component={RouterLink}
3233
to={`/templates/${templateName}/settings`}
3334
startIcon={<SettingsOutlined />}
@@ -50,7 +51,7 @@ const CreateWorkspaceButton: FC<{
5051
)
5152

5253
const DeleteTemplateButton: FC<{ onClick: () => void }> = ({ onClick }) => (
53-
<Button startIcon={<DeleteOutlined />} onClick={onClick}>
54+
<Button variant="outlined" startIcon={<DeleteOutlined />} onClick={onClick}>
5455
{Language.deleteButton}
5556
</Button>
5657
)

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

+20-12
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import MenuItem from "@material-ui/core/MenuItem"
88
import { FC, useState } from "react"
99
import { FileTree } from "util/filetree"
1010
import { DockerIcon } from "components/Icons/DockerIcon"
11+
import { colors } from "theme/colors"
1112

1213
const sortFileTree = (fileTree: FileTree) => (a: string, b: string) => {
1314
const contentA = fileTree[a]
@@ -98,7 +99,6 @@ export const FileTreeView: FC<{
9899
defaultCollapseIcon={<ExpandMoreIcon />}
99100
defaultExpandIcon={<ChevronRightIcon />}
100101
aria-label="Files"
101-
className={styles.fileTree}
102102
>
103103
{Object.keys(fileTree)
104104
.sort(sortFileTree(fileTree))
@@ -156,23 +156,22 @@ export const FileTreeView: FC<{
156156
}
157157

158158
const useStyles = makeStyles((theme) => ({
159-
fileTree: {},
160159
fileTreeItem: {
161160
overflow: "hidden",
162161
userSelect: "none",
163162

164-
"&:focus": {
165-
"& > .MuiTreeItem-content": {
166-
background: "rgba(255, 255, 255, 0.1)",
167-
},
163+
"&:focus:not(.active) > .MuiTreeItem-content": {
164+
background: theme.palette.action.hover,
165+
color: theme.palette.text.primary,
168166
},
169-
"& > .MuiTreeItem-content:hover": {
170-
background: theme.palette.background.paperLight,
167+
168+
"&:not(:focus):not(.active) > .MuiTreeItem-content:hover": {
169+
background: theme.palette.action.hover,
171170
color: theme.palette.text.primary,
172171
},
173172

174173
"& > .MuiTreeItem-content": {
175-
padding: "1px 16px",
174+
padding: theme.spacing(0.25, 2),
176175
color: theme.palette.text.secondary,
177176

178177
"& svg": {
@@ -182,16 +181,25 @@ const useStyles = makeStyles((theme) => ({
182181

183182
"& > .MuiTreeItem-label": {
184183
marginLeft: 4,
185-
fontSize: 14,
184+
fontSize: 13,
186185
color: "inherit",
187186
},
188187
},
189188

190189
"&.active": {
191-
background: theme.palette.background.paper,
192-
193190
"& > .MuiTreeItem-content": {
194191
color: theme.palette.text.primary,
192+
background: colors.gray[13],
193+
pointerEvents: "none",
194+
},
195+
},
196+
197+
"& .MuiTreeItem-group": {
198+
marginLeft: 0,
199+
200+
// We need to find a better way to recursive padding here
201+
"& .MuiTreeItem-content": {
202+
paddingLeft: theme.spacing(5),
195203
},
196204
},
197205
},

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ export const MonacoEditor: FC<{
122122
],
123123
colors: {
124124
"editor.foreground": hslToHex(theme.palette.text.primary),
125-
"editor.background": hslToHex(theme.palette.background.paper),
125+
"editor.background": hslToHex(theme.palette.background.default),
126126
},
127127
})
128128
editor.updateOptions({

0 commit comments

Comments
 (0)