Skip to content

Commit cd2229d

Browse files
BrunoQuaresmakylecarbs
BrunoQuaresma
authored and
kylecarbs
committed
feat: Add selected template link at the template select field (#1918)
1 parent 945ea93 commit cd2229d

File tree

10 files changed

+166
-124
lines changed

10 files changed

+166
-124
lines changed

‎site/src/components/CreateUserForm/CreateUserForm.tsx

Lines changed: 29 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import * as TypesGen from "../../api/typesGenerated"
77
import { getFormHelpers, nameValidator, onChangeTrimmed } from "../../util/formUtils"
88
import { FormFooter } from "../FormFooter/FormFooter"
99
import { FullPageForm } from "../FullPageForm/FullPageForm"
10+
import { Stack } from "../Stack/Stack"
1011

1112
export const Language = {
1213
emailLabel: "Email",
@@ -57,32 +58,34 @@ export const CreateUserForm: FC<CreateUserFormProps> = ({
5758
return (
5859
<FullPageForm title="Create user" onCancel={onCancel}>
5960
<form onSubmit={form.handleSubmit}>
60-
<TextField
61-
{...getFieldHelpers("username")}
62-
onChange={onChangeTrimmed(form)}
63-
autoComplete="username"
64-
autoFocus
65-
fullWidth
66-
label={Language.usernameLabel}
67-
variant="outlined"
68-
/>
69-
<TextField
70-
{...getFieldHelpers("email")}
71-
onChange={onChangeTrimmed(form)}
72-
autoComplete="email"
73-
fullWidth
74-
label={Language.emailLabel}
75-
variant="outlined"
76-
/>
77-
<TextField
78-
{...getFieldHelpers("password")}
79-
autoComplete="current-password"
80-
fullWidth
81-
id="password"
82-
label={Language.passwordLabel}
83-
type="password"
84-
variant="outlined"
85-
/>
61+
<Stack spacing={1}>
62+
<TextField
63+
{...getFieldHelpers("username")}
64+
onChange={onChangeTrimmed(form)}
65+
autoComplete="username"
66+
autoFocus
67+
fullWidth
68+
label={Language.usernameLabel}
69+
variant="outlined"
70+
/>
71+
<TextField
72+
{...getFieldHelpers("email")}
73+
onChange={onChangeTrimmed(form)}
74+
autoComplete="email"
75+
fullWidth
76+
label={Language.emailLabel}
77+
variant="outlined"
78+
/>
79+
<TextField
80+
{...getFieldHelpers("password")}
81+
autoComplete="current-password"
82+
fullWidth
83+
id="password"
84+
label={Language.passwordLabel}
85+
type="password"
86+
variant="outlined"
87+
/>
88+
</Stack>
8689
{error && <FormHelperText error>{error}</FormHelperText>}
8790
<FormFooter onCancel={onCancel} isLoading={isLoading} />
8891
</form>

‎site/src/components/FormFooter/FormFooter.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,17 @@ export interface FormFooterProps {
1414
submitLabel?: string
1515
}
1616

17-
const useStyles = makeStyles(() => ({
17+
const useStyles = makeStyles((theme) => ({
1818
footer: {
1919
display: "flex",
2020
flex: "0",
2121
flexDirection: "row",
22-
justifyContent: "center",
22+
gap: theme.spacing(1.5),
2323
alignItems: "center",
24+
marginTop: theme.spacing(3),
2425
},
2526
button: {
26-
margin: "1em",
27+
width: "100%",
2728
},
2829
}))
2930

‎site/src/components/FormTitle/FormTitle.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,8 @@ export interface FormTitleProps {
99

1010
const useStyles = makeStyles((theme) => ({
1111
title: {
12-
textAlign: "center",
13-
marginTop: theme.spacing(5),
14-
marginBottom: theme.spacing(5),
12+
marginTop: theme.spacing(6),
13+
marginBottom: theme.spacing(4),
1514

1615
"& h3": {
1716
marginBottom: theme.spacing(1),

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export const FullPageForm: FC<FullPageFormProps> = ({ title, detail, onCancel, c
2323
const styles = useStyles()
2424
return (
2525
<main className={styles.root}>
26-
<Margins>
26+
<Margins size="small">
2727
<FormTitle title={title} detail={detail} />
2828
<FormCloseButton onClose={onCancel} />
2929

‎site/src/components/Margins/Margins.tsx

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,30 @@
11
import { makeStyles } from "@material-ui/core/styles"
22
import { FC } from "react"
3-
import { maxWidth, sidePadding } from "../../theme/constants"
3+
import { containerWidth, sidePadding } from "../../theme/constants"
4+
5+
type Size = "regular" | "medium" | "small"
6+
7+
const widthBySize: Record<Size, number> = {
8+
regular: containerWidth,
9+
medium: containerWidth / 2,
10+
small: containerWidth / 3,
11+
}
412

513
const useStyles = makeStyles(() => ({
614
margins: {
715
margin: "0 auto",
8-
maxWidth,
9-
padding: `0 ${sidePadding}`,
16+
maxWidth: ({ maxWidth }: { maxWidth: number }) => maxWidth,
17+
padding: `0 ${sidePadding}px`,
1018
flex: 1,
1119
width: "100%",
1220
},
1321
}))
1422

15-
export const Margins: FC = ({ children }) => {
16-
const styles = useStyles()
23+
interface MarginsProps {
24+
size?: Size
25+
}
26+
27+
export const Margins: FC<MarginsProps> = ({ children, size = "regular" }) => {
28+
const styles = useStyles({ maxWidth: widthBySize[size] })
1729
return <div className={styles.margins}>{children}</div>
1830
}

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

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import FormControlLabel from "@material-ui/core/FormControlLabel"
2-
import Paper from "@material-ui/core/Paper"
32
import Radio from "@material-ui/core/Radio"
43
import RadioGroup from "@material-ui/core/RadioGroup"
5-
import { lighten, makeStyles } from "@material-ui/core/styles"
4+
import { makeStyles } from "@material-ui/core/styles"
65
import TextField from "@material-ui/core/TextField"
76
import { FC } from "react"
87
import { ParameterSchema } from "../../api/typesGenerated"
@@ -17,15 +16,15 @@ export interface ParameterInputProps {
1716
export const ParameterInput: FC<ParameterInputProps> = ({ disabled, onChange, schema }) => {
1817
const styles = useStyles()
1918
return (
20-
<Paper className={styles.paper}>
19+
<div className={styles.root}>
2120
<div className={styles.title}>
2221
<h2>var.{schema.name}</h2>
2322
{schema.description && <span>{schema.description}</span>}
2423
</div>
2524
<div className={styles.input}>
2625
<ParameterField disabled={disabled} onChange={onChange} schema={schema} />
2726
</div>
28-
</Paper>
27+
</div>
2928
)
3029
}
3130

@@ -67,28 +66,26 @@ const ParameterField: React.FC<ParameterInputProps> = ({ disabled, onChange, sch
6766
}
6867

6968
const useStyles = makeStyles((theme) => ({
70-
paper: {
69+
root: {
7170
display: "flex",
7271
flexDirection: "column",
7372
fontFamily: MONOSPACE_FONT_FAMILY,
73+
paddingTop: theme.spacing(2),
74+
paddingBottom: theme.spacing(2),
7475
},
7576
title: {
76-
background: lighten(theme.palette.background.default, 0.1),
77-
borderBottom: `1px solid ${theme.palette.divider}`,
78-
padding: theme.spacing(3),
7977
display: "flex",
8078
flexDirection: "column",
8179
"& h2": {
8280
margin: 0,
8381
},
8482
"& span": {
85-
paddingTop: theme.spacing(2),
83+
paddingTop: theme.spacing(1),
8684
},
8785
},
8886
input: {
89-
padding: theme.spacing(3),
87+
marginTop: theme.spacing(2),
9088
display: "flex",
9189
flexDirection: "column",
92-
maxWidth: 480,
9390
},
9491
}))

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

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -167,8 +167,8 @@ export const WorkspaceScheduleForm: FC<WorkspaceScheduleFormProps> = ({
167167

168168
return (
169169
<FullPageForm onCancel={onCancel} title="Workspace Schedule">
170-
<form className={styles.form} onSubmit={form.handleSubmit}>
171-
<Stack className={styles.stack}>
170+
<form onSubmit={form.handleSubmit} className={styles.form}>
171+
<Stack>
172172
<TextField
173173
{...formHelpers("startTime", Language.startTimeHelperText)}
174174
disabled={form.isSubmitting || isLoading}
@@ -177,7 +177,6 @@ export const WorkspaceScheduleForm: FC<WorkspaceScheduleFormProps> = ({
177177
}}
178178
label={Language.startTimeLabel}
179179
type="time"
180-
variant="standard"
181180
/>
182181

183182
<TextField
@@ -195,7 +194,6 @@ export const WorkspaceScheduleForm: FC<WorkspaceScheduleFormProps> = ({
195194
shrink: true,
196195
}}
197196
label={Language.timezoneLabel}
198-
variant="standard"
199197
/>
200198

201199
<FormControl component="fieldset" error={Boolean(form.errors.monday)}>
@@ -212,6 +210,9 @@ export const WorkspaceScheduleForm: FC<WorkspaceScheduleFormProps> = ({
212210
disabled={!form.values.startTime || form.isSubmitting || isLoading}
213211
onChange={form.handleChange}
214212
name={checkbox.name}
213+
color="primary"
214+
size="small"
215+
disableRipple
215216
/>
216217
}
217218
key={checkbox.name}
@@ -229,7 +230,6 @@ export const WorkspaceScheduleForm: FC<WorkspaceScheduleFormProps> = ({
229230
inputProps={{ min: 0, step: 1 }}
230231
label={Language.ttlLabel}
231232
type="number"
232-
variant="standard"
233233
/>
234234

235235
<FormFooter onCancel={onCancel} isLoading={form.isSubmitting || isLoading} />
@@ -241,21 +241,10 @@ export const WorkspaceScheduleForm: FC<WorkspaceScheduleFormProps> = ({
241241

242242
const useStyles = makeStyles({
243243
form: {
244-
display: "flex",
245-
justifyContent: "center",
246-
247244
"& input": {
248245
colorScheme: "dark",
249246
},
250247
},
251-
stack: {
252-
// REMARK: 360 is 'arbitrary' in that it gives the helper text enough room
253-
// to render on one line. If we change the text, we might want to
254-
// adjust these. Without constraining the width, the date picker
255-
// and number inputs aren't visually appealing or maximally usable.
256-
maxWidth: 360,
257-
minWidth: 360,
258-
},
259248
daysOfWeekLabel: {
260249
fontSize: 12,
261250
},

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy