Skip to content

Commit 150a619

Browse files
mateumirallesmateumiralles
authored
Responsive brain (#431)
* Topbar responsive * Validators Screen responsive * fullscreen mobile dialogs * import screen responsive
1 parent 0b03c26 commit 150a619

File tree

8 files changed

+224
-204
lines changed

8 files changed

+224
-204
lines changed

‎packages/ui/src/ImportScreen.tsx‎

Lines changed: 160 additions & 160 deletions
Original file line numberDiff line numberDiff line change
@@ -233,26 +233,21 @@ export default function ImportScreen({
233233
<div>
234234
<Box
235235
sx={{
236-
margin: 8,
236+
margin: { xs: 2, sm: 3, md: 5 },
237237
display: "flex",
238238
flexDirection: "column",
239239
alignItems: "left"
240240
}}
241241
>
242+
<Typography variant="h5" sx={{ marginBottom: 2, fontSize: { xs: 20, sm: 24 } }}>
243+
<b>Import Validator Keystore(s)</b>
244+
</Typography>
242245
<Card
243246
sx={{
244-
padding: 4,
247+
padding: { xs: 2, sm: 4 },
245248
borderRadius: 2
246249
}}
247250
>
248-
<Typography
249-
variant="h5"
250-
sx={{
251-
marginBottom: 4
252-
}}
253-
>
254-
<b>Import Validator Keystore(s)</b>
255-
</Typography>
256251
<Typography>Upload any keystore JSON file(s).</Typography>
257252

258253
<SecondaryInfoTypography
@@ -264,162 +259,166 @@ export default function ImportScreen({
264259
<FileDrop callback={keystoreFilesCallback} />
265260

266261
<SecondaryInfoTypography
267-
sx={{ marginBottom: 2, marginTop: 4 }}
262+
sx={{ marginTop: 4 }}
268263
text="Remember you need to introduce the password you set during
269264
creation of the keystore files."
270265
/>
266+
</Card>
271267

272-
{acceptedFiles.length > 1 && (
273-
<>
274-
<FormGroup sx={{ marginTop: "6px" }}>
275-
<FormControlLabel
276-
control={<Switch onChange={() => handleSwitchToggle("password")} />}
277-
label="Use same password for every file"
278-
/>
279-
<FormControlLabel
280-
control={<Switch onChange={() => handleSwitchToggle("feerecipient")} />}
281-
label="Use same fee recipient for every file"
282-
/>
283-
<FormControlLabel
284-
control={<Switch onChange={() => handleSwitchToggle("tag")} />}
285-
label="Use same tag for every file"
286-
/>
287-
</FormGroup>
288-
{(useSameTag || useSameFeerecipient || useSamePassword) && (
289-
<FormControl sx={{ marginTop: 2, width: "100%" }}>
290-
{useSamePassword && (
291-
<>
292-
<TextField
293-
id={`outlined-password-input`}
294-
label="Keystore Password"
295-
type="password"
296-
sx={{ marginTop: 2 }}
297-
onChange={(e) => setPasswords(Array(acceptedFiles.length).fill(e.target.value))}
298-
helperText={"Password to decrypt the keystore(s)"}
299-
/>
300-
</>
301-
)}
302-
{useSameTag && (
303-
<>
304-
<Select
305-
id="outlined-tag-input"
306-
label="Tag"
307-
value={tags[0]}
308-
type="text"
309-
sx={{ marginTop: 2 }}
310-
onChange={(e) => {
311-
setTags(Array(acceptedFiles.length).fill(e.target.value));
312-
if (!isFeeRecipientEditable(tags[0])) {
313-
setFeeRecipients(Array(acceptedFiles.length).fill(""));
314-
}
315-
}}
316-
>
317-
{tagSelectOptions.map((option) => (
318-
<MenuItem value={option.value}>{option.label}</MenuItem>
319-
))}
320-
</Select>
321-
<FormHelperText>Staking protocol</FormHelperText>
322-
</>
323-
)}
324-
{useSameFeerecipient && (
325-
<>
326-
<TextField
327-
id={`outlined-fee-recipient-input`}
328-
label={
329-
tags[0] === undefined || isFeeRecipientEditable(tags[0])
330-
? "Fee Recipient"
331-
: "For this protocol, fee recipient will be set automatically"
268+
{acceptedFiles.length > 1 && (
269+
<>
270+
<FormGroup sx={{ marginTop: "6px" }}>
271+
<FormControlLabel
272+
control={<Switch onChange={() => handleSwitchToggle("password")} />}
273+
label="Use same password for every file"
274+
/>
275+
<FormControlLabel
276+
control={<Switch onChange={() => handleSwitchToggle("feerecipient")} />}
277+
label="Use same fee recipient for every file"
278+
/>
279+
<FormControlLabel
280+
control={<Switch onChange={() => handleSwitchToggle("tag")} />}
281+
label="Use same tag for every file"
282+
/>
283+
</FormGroup>
284+
{(useSameTag || useSameFeerecipient || useSamePassword) && (
285+
<FormControl sx={{ marginTop: 2, width: "100%" }}>
286+
{useSamePassword && (
287+
<>
288+
<TextField
289+
id={`outlined-password-input`}
290+
label="Keystore Password"
291+
type="password"
292+
sx={{ marginTop: 2 }}
293+
onChange={(e) => setPasswords(Array(acceptedFiles.length).fill(e.target.value))}
294+
helperText={"Password to decrypt the keystore(s)"}
295+
/>
296+
</>
297+
)}
298+
{useSameTag && (
299+
<>
300+
<Select
301+
id="outlined-tag-input"
302+
label="Tag"
303+
value={tags[0]}
304+
type="text"
305+
sx={{ marginTop: 2 }}
306+
onChange={(e) => {
307+
setTags(Array(acceptedFiles.length).fill(e.target.value));
308+
if (!isFeeRecipientEditable(tags[0])) {
309+
setFeeRecipients(Array(acceptedFiles.length).fill(""));
332310
}
333-
type="text"
334-
sx={{ marginTop: 2 }}
335-
onChange={(e) => {
336-
setFeeRecipients(Array(acceptedFiles.length).fill(e.target.value));
337-
}}
338-
error={isFeeRecipientFieldWrong(0)}
339-
helperText={getFeeRecipientFieldHelperText(0)}
340-
value={feeRecipients[0]}
341-
disabled={!isFeeRecipientEditable(tags[0])}
342-
/>
343-
{!areAllFeeRecipientsEditable(tags) && !useSameTag && (
344-
<Alert severity="info">This field will only apply to the editable fee recipients</Alert>
345-
)}
346-
</>
347-
)}
348-
</FormControl>
349-
)}
350-
</>
351-
)}
352-
353-
{FileCardList(
354-
acceptedFiles,
355-
setAcceptedFiles,
356-
passwords,
357-
setPasswords,
358-
useSamePassword,
359-
tags,
360-
setTags,
361-
useSameTag,
362-
feeRecipients,
363-
setFeeRecipients,
364-
useSameFeerecipient,
365-
getFeeRecipientFieldHelperText,
366-
isFeeRecipientFieldWrong,
367-
tagSelectOptions
368-
)}
369-
370-
<Box
311+
}}
312+
>
313+
{tagSelectOptions.map((option) => (
314+
<MenuItem value={option.value}>{option.label}</MenuItem>
315+
))}
316+
</Select>
317+
<FormHelperText>Staking protocol</FormHelperText>
318+
</>
319+
)}
320+
{useSameFeerecipient && (
321+
<>
322+
<TextField
323+
id={`outlined-fee-recipient-input`}
324+
label={
325+
tags[0] === undefined || isFeeRecipientEditable(tags[0])
326+
? "Fee Recipient"
327+
: "For this protocol, fee recipient will be set automatically"
328+
}
329+
type="text"
330+
sx={{ marginTop: 2 }}
331+
onChange={(e) => {
332+
setFeeRecipients(Array(acceptedFiles.length).fill(e.target.value));
333+
}}
334+
error={isFeeRecipientFieldWrong(0)}
335+
helperText={getFeeRecipientFieldHelperText(0)}
336+
value={feeRecipients[0]}
337+
disabled={!isFeeRecipientEditable(tags[0])}
338+
/>
339+
{!areAllFeeRecipientsEditable(tags) && !useSameTag && (
340+
<Alert severity="info">This field will only apply to the editable fee recipients</Alert>
341+
)}
342+
</>
343+
)}
344+
</FormControl>
345+
)}
346+
</>
347+
)}
348+
349+
{FileCardList(
350+
acceptedFiles,
351+
setAcceptedFiles,
352+
passwords,
353+
setPasswords,
354+
useSamePassword,
355+
tags,
356+
setTags,
357+
useSameTag,
358+
feeRecipients,
359+
setFeeRecipients,
360+
useSameFeerecipient,
361+
getFeeRecipientFieldHelperText,
362+
isFeeRecipientFieldWrong,
363+
tagSelectOptions
364+
)}
365+
366+
<Box
367+
sx={{
368+
marginTop: 8,
369+
display: "flex",
370+
flexDirection: "row",
371+
alignItems: "left"
372+
}}
373+
>
374+
<Typography variant="h5" sx={{ marginBottom: 2, fontSize: { xs: 20, sm: 24 } }}>
375+
<b>Import slashing protection data? (recommended)</b>
376+
</Typography>
377+
<Switch defaultChecked onChange={onSlashingChecked} />
378+
</Box>
379+
{slashingProtectionIncluded ? (
380+
<Card
371381
sx={{
372-
marginTop: 8,
373-
marginBottom: 2,
374-
display: "flex",
375-
flexDirection: "row",
376-
alignItems: "left"
382+
padding: { xs: 2, sm: 4 },
383+
borderRadius: 2
377384
}}
378385
>
379-
<Typography variant="h5" sx={{ marginRight: 2 }}>
380-
<b>Import slashing protection data? (recommended)</b>
381-
</Typography>
382-
<Switch defaultChecked onChange={onSlashingChecked} />
383-
</Box>
384-
{slashingProtectionIncluded ? (
385-
<div>
386-
<Typography>Upload your slashing protection file to protect your keystore(s).</Typography>
387-
388-
<SecondaryInfoTypography sx={{ marginBottom: 4 }} text="Only for previously-used keystores" />
389-
{slashingFile ? (
390-
<Card
391-
key={slashingFile.name}
392-
raised
386+
<Typography>Upload your slashing protection file to protect your keystore(s).</Typography>
387+
388+
<SecondaryInfoTypography sx={{ marginBottom: 4 }} text="Only for previously-used keystores" />
389+
{slashingFile ? (
390+
<Card
391+
key={slashingFile.name}
392+
raised
393+
sx={{
394+
padding: 2,
395+
marginTop: 4,
396+
borderRadius: 2
397+
}}
398+
>
399+
<Box
393400
sx={{
394-
padding: 2,
395-
marginTop: 4,
396-
borderRadius: 2
401+
display: "flex",
402+
flexDirection: "row",
403+
alignItems: "left",
404+
justifyContent: "space-between"
397405
}}
398406
>
399-
<Box
400-
sx={{
401-
display: "flex",
402-
flexDirection: "row",
403-
alignItems: "left",
404-
justifyContent: "space-between"
405-
}}
406-
>
407-
<Typography variant="h6">
408-
<b>✅ {slashingFile.name}</b>
409-
<br />
410-
</Typography>
411-
412-
<button onClick={() => setSlashingFile(undefined)}>
413-
<CloseIcon color="action" />
414-
</button>
415-
</Box>
416-
</Card>
417-
) : (
418-
<FileDrop callback={slashingFilesCallback} />
419-
)}
420-
</div>
421-
) : null}
422-
</Card>
407+
<Typography variant="h6">
408+
<b>✅ {slashingFile.name}</b>
409+
<br />
410+
</Typography>
411+
412+
<button onClick={() => setSlashingFile(undefined)}>
413+
<CloseIcon color="action" />
414+
</button>
415+
</Box>
416+
</Card>
417+
) : (
418+
<FileDrop callback={slashingFilesCallback} />
419+
)}
420+
</Card>
421+
) : null}
423422
{showMevWarning && (
424423
<Alert
425424
severity="warning"
@@ -451,14 +450,15 @@ export default function ImportScreen({
451450
sx={{
452451
marginTop: 4,
453452
display: "flex",
454-
justifyContent: "space-between"
453+
justifyContent: "space-between",
454+
gap: 2
455455
}}
456456
>
457457
<Link to={{ pathname: "/", search: window.location.search }} style={{ textDecoration: "none" }}>
458458
<Button
459459
variant="outlined"
460-
size="large"
461-
sx={{ marginRight: 4, borderRadius: 2 }}
460+
size="medium"
461+
sx={{ borderRadius: 2 }}
462462
startIcon={<ArrowCircleLeftOutlinedIcon />}
463463
>
464464
Back to Accounts
@@ -467,11 +467,11 @@ export default function ImportScreen({
467467

468468
<Button
469469
variant="contained"
470-
size="large"
470+
size="medium"
471471
endIcon={<BackupIcon />}
472472
disabled={isButtonDisabled}
473473
onClick={importKeystores}
474-
sx={{ borderRadius: 3 }}
474+
sx={{ borderRadius: 2 }}
475475
>
476476
Submit Keystores
477477
</Button>

0 commit comments

Comments
 (0)