Notes

import React from 'react';

import {
TextareaAutosize,
InputLabel,
Avatar,
FormControl,
MenuItem,
Chip,
} from '@material-ui/core';

import { makeStyles } from '@material-ui/core/styles';

import TextField from '@material-ui/core/TextField';

import Select from '@material-ui/core/Select';

import SearchIcon from '@material-ui/icons/Search';

import CloseIcon from '@material-ui/icons/Close';

import MoreVertIcon from '@material-ui/icons/MoreVert';

const useStyles = makeStyles((theme) => ({
root: {
backgroundColor: '#ffffff',
},

utext: {
margin: 10,
minWidth: theme.typography.pxToRem(720),
maxHeight: theme.typography.pxToRem(36),
},

spacetext: {
color: '#000000',
fontSize: theme.typography.pxToRem(20),
marginTop: '1 em',
marginLeft: theme.typography.pxToRem(10),
borderColor: '#E7ECF3',
},

labeltext: {
margin: theme.typography.pxToRem(10),
marginLeft: theme.typography.pxToRem(40),
color: '#000000',
fontSize: theme.typography.pxToRem(20),
display: 'inline',
'& .MuiInputLabel-root': {
display: 'inline',
},
},
labeltextTwo: {
margin: theme.typography.pxToRem(10),
marginLeft: theme.typography.pxToRem(20),
color: '#000000',
fontSize: theme.typography.pxToRem(20),
display: 'inline',
'& .MuiInputLabel-root': {
display: 'inline',
},
},
spacetextTwo: {
color: '#000000',
fontSize: theme.typography.pxToRem(20),
borderColor: '#E7ECF3',
display: 'unset',
marginLeft: theme.typography.pxToRem(220),
},
spacetextThree: {
color: '#000000',
fontSize: theme.typography.pxToRem(20),
borderColor: '#E7ECF3',
display: 'unset',
marginLeft: theme.typography.pxToRem(15),
marginRight: theme.typography.pxToRem(80),
},

tbox: {
borderColor: '#E7ECF3',
margin: 10,
minWidth: theme.typography.pxToRem(720),
maxHeight: theme.typography.pxToRem(83),
},

searchField: {
'& .MuiOutlinedInput-root': {
width: theme.typography.pxToRem(720),
height: theme.typography.pxToRem(43),
paddingLeft: theme.typography.pxToRem(20),
margin: theme.typography.pxToRem(10),
marginBottom: theme.typography.pxToRem(20),
},
},
searchIcon: {
position: 'absolute',
color: theme.palette.grey[400],
top: theme.typography.pxToRem(10),
left: theme.typography.pxToRem(15.25),
marginTop: theme.typography.pxToRem(10),
marginLeft: theme.typography.pxToRem(5),
},
searchFieldWrapper: {
position: 'relative',
marginTop: theme.typography.pxToRem(15),
marginLeft: theme.typography.pxToRem(10),
},
moreVertIcon: {
position: 'absolute',
color: theme.palette.grey[400],
top: theme.typography.pxToRem(10),
right: theme.typography.pxToRem(40),
marginTop: theme.typography.pxToRem(10),
},
closeIcon: {
float: 'right',
color: theme.palette.grey[400],
top: theme.typography.pxToRem(10),
display: 'inline',
marginRight: theme.typography.pxToRem(40),
marginTop: theme.typography.pxToRem(11.5),
},
avatar: {
marginLeft: theme.typography.pxToRem(10),
float: 'left',
width: theme.typography.pxToRem(50),
height: theme.typography.pxToRem(50),
display: 'inline-flex',
fontSize: theme.typography.pxToRem(30),
backgroundColor: '#D598E2',
color: '#000000',
},
avatarTwo: {
marginLeft: theme.typography.pxToRem(10),
float: 'left',
width: theme.typography.pxToRem(50),
height: theme.typography.pxToRem(50),
display: 'inline-flex',
fontSize: theme.typography.pxToRem(30),
backgroundColor: '#FDD6C0',
color: '#000000',
},
subtext: {
color: theme.palette.grey[400],
marginLeft: theme.typography.pxToRem(75),
display: 'block',
fontSize: theme.typography.pxToRem(18.5),
},
formControl: {
margin: theme.typography.pxToRem(10),
minWidth: theme.typography.pxToRem(250),
marginRight: theme.typography.pxToRem(50),
backgroundColor: '#D0EFFC',
color: '#000000',
maxHeight: theme.typography.pxToRem(36),
borderRadius: theme.typography.pxToRem(6),
float: 'right',
'& .MuiSelect-selectMenu': {
color: '#000000',
},
},
formControlTwo: {
minWidth: theme.typography.pxToRem(330),
minHeight: theme.typography.pxToRem(36),
marginRight: theme.typography.pxToRem(15),
color: '#000000',
float: 'right',
'& .MuiSelect-selectMenu': {
color: '#000000',
},
},
formControlThree: {
minWidth: theme.typography.pxToRem(330),
marginRight: theme.typography.pxToRem(60),
height: theme.typography.pxToRem(36),
color: '#000000',
float: 'right',
'& .MuiSelect-selectMenu': {
color: '#000000',
},
},
dropDown: {
color: '#000000',
maxHeight: theme.typography.pxToRem(30),
},
dropDownTwo: {
color: '#000000',
maxHeight: theme.typography.pxToRem(80),
},
chip: {
backgroundColor: '#D0EBE7',
marginLeft: theme.typography.pxToRem(20),
width: theme.typography.pxToRem(80),
fontFamily: 'Poppins',
maxHeight: theme.typography.pxToRem(18),
},
chipTwo: {
backgroundColor: '#FFF1CC',
width: theme.typography.pxToRem(105),
marginLeft: theme.typography.pxToRem(20),
maxHeight: theme.typography.pxToRem(18),
},
chipThree: {
backgroundColor: '#FBD2E3',
width: theme.typography.pxToRem(105),
maxHeight: theme.typography.pxToRem(18),
marginLeft: theme.typography.pxToRem(2),
},
horizontal: {
marginTop: theme.typography.pxToRem(40),
marginBottom: theme.typography.pxToRem(20),
},
}));

const DrawerScreen = () => {
const classes = useStyles();
return (
<>
<div className={classes.root}>
<InputLabel className={classes.spacetext}>Closing Unit Name</InputLabel>
<TextField variant="outlined" className={classes.utext}></TextField>
<br />
<InputLabel className={classes.spacetext}>Description</InputLabel>
<TextareaAutosize
variant="outlined"
minRows={2.5}
className={classes.tbox}
></TextareaAutosize>
<InputLabel className={classes.spacetextThree}>
Fiscal Calendar
</InputLabel>
<InputLabel className={classes.spacetextTwo}>
Holiday Calendar
</InputLabel>
<br></br>
<FormControl variant="outlined" className={classes.formControlTwo}>
<Select
className={classes.dropDownTwo}
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
label="Holiday Calendar"
defaultValue={2}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={1}>Fiscal Calendar</MenuItem>
<MenuItem value={2}>Holiday Calendar</MenuItem>
</Select>
</FormControl>
<FormControl variant="outlined" className={classes.formControlThree}>
<Select
className={classes.dropDownTwo}
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
label="Fiscal Calendar"
defaultValue={1}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={1}>Fiscal Calendar</MenuItem>
<MenuItem value={2}>Holiday Calendar</MenuItem>
</Select>
</FormControl>
<br></br>
<hr className={classes.horizontal} />
<InputLabel className={classes.spacetext}>Users Mapped</InputLabel>
<div className={classes.searchFieldWrapper}>
<SearchIcon className={classes.searchIcon} />
<TextField
defaultValue="Search"
classes={{ root: classes.searchField }}
variant="outlined"
/>
<MoreVertIcon className={classes.moreVertIcon} />
</div>
<>
<span className={classes.labeltext}>John Doe</span>
<CloseIcon className={classes.closeIcon}></CloseIcon>
<FormControl variant="outlined" className={classes.formControl}>
<Select
className={classes.dropDown}
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
label="Editor"
defaultValue={1}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={1}>Editor</MenuItem>
<MenuItem value={2}>Viewer</MenuItem>
</Select>
</FormControl>
<Avatar className={classes.avatar}>J</Avatar>
<sub className={classes.subtext}>[email protected]</sub>
</>
<br></br>
<>
<span className={classes.labeltext}>Jane Doe</span>
<CloseIcon className={classes.closeIcon}></CloseIcon>
<FormControl variant="outlined" className={classes.formControl}>
<Select
className={classes.dropDown}
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
label="Editor"
defaultValue={2}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={1}>Editor</MenuItem>
<MenuItem value={2}>Viewer</MenuItem>
</Select>
</FormControl>
<Avatar className={classes.avatarTwo}>J</Avatar>
<sub className={classes.subtext}>[email protected]</sub>
</>
<br></br>
<InputLabel className={classes.spacetext}>
Project Templates Mapped
</InputLabel>
<div className={classes.searchFieldWrapper}>
<SearchIcon className={classes.searchIcon} />
<TextField
defaultValue="Search"
classes={{ root: classes.searchField }}
variant="outlined"
/>
<MoreVertIcon className={classes.moreVertIcon} />
</div>
<div>
<div>
<InputLabel className={classes.labeltextTwo}>
Stark Power Services-Repair Shops-Monthly
<Chip label="Close" className={classes.chip}></Chip>
<Chip label="Property 2" className={classes.chipTwo}></Chip>
<Chip label="Property 3" className={classes.chipThree}></Chip>
</InputLabel>
</div>
<br></br>
<div>
<InputLabel className={classes.labeltextTwo}>
Stark Power Services-Repair Shops-Recon &nbsp;&nbsp;
<Chip label="Close" className={classes.chip}></Chip>
<Chip label="Property 2" className={classes.chipTwo}></Chip>
<Chip label="Property 3" className={classes.chipThree}></Chip>
</InputLabel>
</div>
</div>
</div>
</>
);
};

export default DrawerScreen;