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

Lines changed: 1 addition & 0 deletions
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 7 additions & 2 deletions
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

Lines changed: 11 additions & 2 deletions
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

Lines changed: 14 additions & 7 deletions
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 1 addition & 1 deletion
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

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

Lines changed: 1 addition & 0 deletions
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}

0 commit comments

Comments
 (0)