Skip to content

Commit

Permalink
Issue #1: As a clinician, I can generate a GUID from patient identifi…
Browse files Browse the repository at this point in the history
…able information

* added multiline placeholder
* fixed the position of the input adornment
* used theme colors instead of hardcoded colors
* improved overall spacing
* used Typography component for "copied" message for consistent font face
  • Loading branch information
marta- committed Oct 14, 2020
1 parent c0afc53 commit ca73c29
Showing 1 changed file with 20 additions and 10 deletions.
30 changes: 20 additions & 10 deletions guids-generator.html
Original file line number Diff line number Diff line change
Expand Up @@ -36,26 +36,34 @@
const { CopyToClipboard } = window['CopyToClipboard'];

const useStyles = makeStyles((theme) => ({
bform: {
marginTop: theme.spacing(2),
marginBottom: theme.spacing(2),
},
btextinput: {
width: theme.spacing(50),
paddingTop: theme.spacing(2),
marginTop: theme.spacing(3),
marginBottom: theme.spacing(2),
marginBottom: theme.spacing(0),
"& .MuiInput-root": {
alignItems: "start",
},
},
binputIcon: {
marginTop: theme.spacing(1),
},
projectidinput: {
width: theme.spacing(50),
},
boutput: {
width: theme.spacing(70),
marginBottom: theme.spacing(2),
marginBottom: theme.spacing(0),
},
bbutton: {
margin: theme.spacing(2),
},
labelRoot: {
width: theme.spacing(70),
color: theme.palette.text.primary,
"&$labelFocused": {
color: "purple"
color: theme.palette.primary.main
}
},
labelFocused: {},
Expand Down Expand Up @@ -196,21 +204,23 @@
return (
<div className={classes.main}>
<Typography variant="h3">GUID generator</Typography>
<Grid container direction="column" wrap="nowrap" spacing={4}>
<Grid container direction="column" wrap="nowrap" spacing={6} className={classes.bform}>
<Grid item>
<TextField
multiline
inputProps={{rows: 2}}
id="binput"
value={binput}
className={classes.btextinput}
onChange={(event) => {handleChange(event.target.value)}}
helperText={!errorText ? "Please enter the health card number, province code, and date of birth as YYYY-MM-DD, separated by ',' for one or more patients, one patient per line. Example:'2345678904,ON,2002-01-23'." : errorText}
error={errorText}
label="Health card number,Province code,Date of birth"
placeholder="2345678904,ON,2002-01-23"
placeholder="2345678904,ON,2002-01-23
23456789,AB,2003-05-31"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<InputAdornment position="start" className={classes.binputIcon}>
<Icon color="primary">folder_shared</Icon>
</InputAdornment>
),
Expand Down Expand Up @@ -264,7 +274,7 @@
<Icon>file_copy</Icon>
</IconButton>
</CopyToClipboard>
{copied ? <span style={{color: 'green'}}>Copied</span> : null}
{copied ? <Typography display="inline" style={{color: 'green'}}>Copied</Typography> : null}
</div>
}

Expand Down

0 comments on commit ca73c29

Please sign in to comment.