Skip to content

Commit a0bbf8f

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Fix filter size
1 parent 4abb23d commit a0bbf8f

File tree

20 files changed

+51
-102
lines changed

20 files changed

+51
-102
lines changed

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,11 +42,7 @@ export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
4242
<p>{t("deleteDialog.confirm", { entity })}</p>
4343

4444
<TextField
45-
variant="standard"
4645
fullWidth
47-
InputLabelProps={{
48-
shrink: true,
49-
}}
5046
autoFocus
5147
className={styles.textField}
5248
name="confirmation"

‎site/src/components/Form/Form.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,11 @@ export const FormSection: FC<
9999
export const FormFields: FC<PropsWithChildren> = ({ children }) => {
100100
const styles = useStyles()
101101
return (
102-
<Stack direction="column" className={styles.formSectionFields}>
102+
<Stack
103+
direction="column"
104+
spacing={2.5}
105+
className={styles.formSectionFields}
106+
>
103107
{children}
104108
</Stack>
105109
)

‎site/src/components/GitAuth/GitAuth.tsx

Lines changed: 17 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
import Button from "@mui/material/Button"
22
import FormHelperText from "@mui/material/FormHelperText"
3-
import { makeStyles } from "@mui/styles"
43
import { SvgIconProps } from "@mui/material/SvgIcon"
54
import Tooltip from "@mui/material/Tooltip"
65
import GitHub from "@mui/icons-material/GitHub"
76
import * as TypesGen from "api/typesGenerated"
87
import { AzureDevOpsIcon } from "components/Icons/AzureDevOpsIcon"
98
import { BitbucketIcon } from "components/Icons/BitbucketIcon"
109
import { GitlabIcon } from "components/Icons/GitlabIcon"
11-
import { Typography } from "components/Typography/Typography"
1210
import { FC } from "react"
13-
import { Theme } from "@mui/material/styles"
11+
import Link from "@mui/material/Link"
12+
import { makeStyles } from "@mui/styles"
1413

1514
export interface GitAuthProps {
1615
type: TypesGen.GitProvider
@@ -59,9 +58,8 @@ export const GitAuth: FC<GitAuthProps> = ({
5958
}
6059
>
6160
<div>
62-
<a
61+
<Link
6362
href={authenticateURL}
64-
className={styles.link}
6563
onClick={(event) => {
6664
event.preventDefault()
6765
// If the user is already authenticated, we don't want to redirect them
@@ -71,46 +69,27 @@ export const GitAuth: FC<GitAuthProps> = ({
7169
window.open(authenticateURL, "_blank", "width=900,height=600")
7270
}}
7371
>
74-
<Button className={styles.button} disabled={authenticated} fullWidth>
75-
<div className={styles.root}>
76-
<Icon className={styles.icon} />
77-
<Typography variant="body2">
78-
{authenticated
79-
? `You're authenticated with ${prettyName}!`
80-
: `Click to login with ${prettyName}!`}
81-
</Typography>
82-
</div>
72+
<Button
73+
size="large"
74+
startIcon={<Icon />}
75+
disabled={authenticated}
76+
className={styles.button}
77+
color={error ? "error" : undefined}
78+
fullWidth
79+
>
80+
{authenticated
81+
? `You're authenticated with ${prettyName}!`
82+
: `Click to login with ${prettyName}!`}
8383
</Button>
84-
</a>
84+
</Link>
8585
{error && <FormHelperText error>{error}</FormHelperText>}
8686
</div>
8787
</Tooltip>
8888
)
8989
}
9090

91-
const useStyles = makeStyles<
92-
Theme,
93-
{
94-
error: boolean
95-
}
96-
>((theme) => ({
97-
link: {
98-
textDecoration: "none",
99-
},
100-
root: {
101-
padding: 4,
102-
display: "flex",
103-
gap: 12,
104-
alignItems: "center",
105-
textAlign: "left",
106-
},
91+
const useStyles = makeStyles(() => ({
10792
button: {
108-
height: "unset",
109-
border: ({ error }) =>
110-
error ? `1px solid ${theme.palette.error.main}` : "unset",
111-
},
112-
icon: {
113-
width: 32,
114-
height: 32,
93+
height: 52,
11594
},
11695
}))

‎site/src/components/IconField/IconField.tsx

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { colors } from "theme/colors"
1010
import { useTranslation } from "react-i18next"
1111
import data from "@emoji-mart/data/sets/14/twitter.json"
1212
import { IconFieldProps } from "./types"
13+
import { Stack } from "components/Stack/Stack"
1314

1415
const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
1516
if (
@@ -26,7 +27,7 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
2627
const hasIcon = textFieldProps.value && textFieldProps.value !== ""
2728

2829
return (
29-
<div className={styles.iconField}>
30+
<Stack spacing={1}>
3031
<TextField
3132
{...textFieldProps}
3233
fullWidth
@@ -50,7 +51,6 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
5051
<Button
5152
fullWidth
5253
ref={emojiButtonRef}
53-
size="small"
5454
endIcon={<OpenDropdown />}
5555
onClick={() => {
5656
setIsEmojiPickerOpen((v) => !v)
@@ -81,7 +81,7 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
8181
}}
8282
/>
8383
</Popover>
84-
</div>
84+
</Stack>
8585
)
8686
}
8787

@@ -104,9 +104,6 @@ const useStyles = makeStyles((theme) => ({
104104
maxWidth: "100%",
105105
},
106106
},
107-
iconField: {
108-
paddingBottom: theme.spacing(0.5),
109-
},
110107
}))
111108

112109
export default IconField

‎site/src/components/ParameterInput/ParameterInput.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export const ParameterInput: FC<ParameterInputProps> = ({
4747
const styles = useStyles()
4848

4949
return (
50-
<Stack direction="column" spacing={0.75}>
50+
<Stack direction="column" spacing={2}>
5151
<ParameterLabel schema={schema} />
5252
<div className={styles.input}>
5353
<ParameterField
@@ -70,7 +70,6 @@ const ParameterField: React.FC<ParameterInputProps> = ({
7070
if (schema.validation_contains && schema.validation_contains.length > 0) {
7171
return (
7272
<TextField
73-
variant="standard"
7473
id={schema.name}
7574
size="small"
7675
defaultValue={defaultValue ?? schema.default_source_value}
@@ -121,7 +120,6 @@ const ParameterField: React.FC<ParameterInputProps> = ({
121120
// we should break this out into more finely scoped input fields.
122121
return (
123122
<TextField
124-
variant="standard"
125123
id={schema.name}
126124
size="small"
127125
disabled={disabled}
@@ -146,6 +144,7 @@ const useStyles = makeStyles((theme) => ({
146144
color: theme.palette.text.primary,
147145
display: "block",
148146
fontWeight: 600,
147+
lineHeight: "24px", // Keep the same as ParameterInput
149148
},
150149
input: {
151150
display: "flex",

‎site/src/components/PortForwardButton/PortForwardButton.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,6 @@ const TooltipView: React.FC<PortForwardButtonProps> = (props) => {
8181
className={styles.form}
8282
>
8383
<TextField
84-
variant="standard"
8584
label="Port"
8685
type="number"
8786
value={port}

‎site/src/components/RichParameterInput/RichParameterInput.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ export const RichParameterInput: FC<RichParameterInputProps> = ({
7373
const styles = useStyles()
7474

7575
return (
76-
<Stack direction="column" spacing={0.75}>
76+
<Stack direction="column" spacing={2}>
7777
<ParameterLabel id={fieldProps.id} parameter={parameter} />
7878
<div className={styles.input}>
7979
<RichParameterField
@@ -191,7 +191,6 @@ const RichParameterField: React.FC<RichParameterInputProps> = ({
191191
// we should break this out into more finely scoped input fields.
192192
return (
193193
<TextField
194-
variant="standard"
195194
{...props}
196195
type={parameter.type}
197196
size="small"
@@ -224,7 +223,7 @@ const useStyles = makeStyles((theme) => ({
224223

225224
"& p": {
226225
margin: 0,
227-
lineHeight: "20px", // Keep the same as ParameterInput
226+
lineHeight: "24px", // Keep the same as ParameterInput
228227
},
229228
},
230229
labelImmutable: {

‎site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ export const SearchBarWithFilter: React.FC<
8282
<Button
8383
aria-controls="filter-menu"
8484
aria-haspopup="true"
85+
size="large"
8586
onClick={handleClick}
8687
className={styles.buttonRoot}
8788
>

‎site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -77,29 +77,20 @@ export const SecurityForm: FC<SecurityFormProps> = ({
7777
)}
7878
<TextField
7979
{...getFieldHelpers("old_password")}
80-
InputLabelProps={{
81-
shrink: true,
82-
}}
8380
autoComplete="old_password"
8481
fullWidth
8582
label={Language.oldPasswordLabel}
8683
type="password"
8784
/>
8885
<TextField
8986
{...getFieldHelpers("password")}
90-
InputLabelProps={{
91-
shrink: true,
92-
}}
9387
autoComplete="password"
9488
fullWidth
9589
label={Language.newPasswordLabel}
9690
type="password"
9791
/>
9892
<TextField
9993
{...getFieldHelpers("confirm_password")}
100-
InputLabelProps={{
101-
shrink: true,
102-
}}
10394
autoComplete="confirm_password"
10495
fullWidth
10596
label={Language.confirmPasswordLabel}

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

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,6 @@ export const CreateFileDialog: FC<{
6565
slashes too.
6666
</Typography>
6767
<TextField
68-
variant="standard"
6968
autoFocus
7069
onKeyDown={(event) => {
7170
if (event.key === "Enter") {
@@ -81,9 +80,6 @@ export const CreateFileDialog: FC<{
8180
value={pathValue}
8281
onChange={handleChange}
8382
label="File Path"
84-
InputLabelProps={{
85-
shrink: true,
86-
}}
8783
/>
8884
</Stack>
8985
}
@@ -180,7 +176,6 @@ export const RenameFileDialog: FC<{
180176
contain slashes too!
181177
</p>
182178
<TextField
183-
variant="standard"
184179
autoFocus
185180
onKeyDown={(event) => {
186181
if (event.key === "Enter") {

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,14 +64,10 @@ export const PublishTemplateVersionDialog: FC<
6464
<p>You are about to publish a new version of this template.</p>
6565
<FormFields>
6666
<TextField
67-
variant="standard"
6867
{...getFieldHelpers("name")}
6968
label="Version name"
7069
autoFocus
7170
disabled={isPublishing}
72-
InputLabelProps={{
73-
shrink: true,
74-
}}
7571
/>
7672

7773
<FormControlLabel

‎site/src/components/UserAutocomplete/UserAutocomplete.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { User } from "api/typesGenerated"
77
import { Avatar } from "components/Avatar/Avatar"
88
import { AvatarData } from "components/AvatarData/AvatarData"
99
import debounce from "just-debounce-it"
10-
import { ChangeEvent, FC, useEffect, useState } from "react"
10+
import { ChangeEvent, ComponentProps, FC, useEffect, useState } from "react"
1111
import { searchUserMachine } from "xServices/users/searchUserXService"
1212
import { useTranslation } from "react-i18next"
1313
import Box from "@mui/material/Box"
@@ -17,13 +17,15 @@ export type UserAutocompleteProps = {
1717
onChange: (user: User | null) => void
1818
label?: string
1919
className?: string
20+
size?: ComponentProps<typeof TextField>["size"]
2021
}
2122

2223
export const UserAutocomplete: FC<UserAutocompleteProps> = ({
2324
value,
2425
onChange,
2526
label,
2627
className,
28+
size = "small",
2729
}) => {
2830
const styles = useStyles()
2931
const { t } = useTranslation("common")
@@ -89,7 +91,7 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
8991
<TextField
9092
{...params}
9193
fullWidth
92-
size="small"
94+
size={size}
9395
label={label}
9496
placeholder="User email or username"
9597
className={styles.textField}

‎site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -299,23 +299,15 @@ export const WorkspaceScheduleForm: FC<
299299
/>
300300
<Stack direction="row">
301301
<TextField
302-
variant="standard"
303302
{...formHelpers("startTime")}
304303
disabled={isLoading || !form.values.autostartEnabled}
305-
InputLabelProps={{
306-
shrink: true,
307-
}}
308304
label={Language.startTimeLabel}
309305
type="time"
310306
fullWidth
311307
/>
312308
<TextField
313-
variant="standard"
314309
{...formHelpers("timezone")}
315310
disabled={isLoading || !form.values.autostartEnabled}
316-
InputLabelProps={{
317-
shrink: true,
318-
}}
319311
label={Language.timezoneLabel}
320312
select
321313
fullWidth
@@ -328,11 +320,7 @@ export const WorkspaceScheduleForm: FC<
328320
</TextField>
329321
</Stack>
330322

331-
<FormControl
332-
variant="standard"
333-
component="fieldset"
334-
error={Boolean(form.errors.monday)}
335-
>
323+
<FormControl component="fieldset" error={Boolean(form.errors.monday)}>
336324
<FormLabel className={styles.daysOfWeekLabel} component="legend">
337325
{Language.daysOfWeekLabel}
338326
</FormLabel>
@@ -381,7 +369,6 @@ export const WorkspaceScheduleForm: FC<
381369
label={Language.stopSwitch}
382370
/>
383371
<TextField
384-
variant="standard"
385372
{...formHelpers("ttl", ttlShutdownAt(form.values.ttl), "ttl_ms")}
386373
disabled={isLoading || !form.values.autostopEnabled}
387374
inputProps={{ min: 0, step: 1 }}

0 commit comments

Comments
 (0)