integrate first two task creation steps with backend

package.json

@@ -7,6 +7,7 @@
     "@emotion/react": "latest",
     "@emotion/styled": "latest",
     "@mui/icons-material": "^5.4.4",
+    "@mui/lab": "^5.0.0-alpha.80",
     "@mui/material": "latest",
     "@mui/x-data-grid": "^5.7.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",

src/components/candidate-doc-card/CandidateDocCard.css

@@ -28,9 +28,13 @@
 }
 
 .candidate-doc-card--checked {
-    background-color: #a7d8ee73 !important;
+    background-color: #a7d8ee5e !important;
 }
 
 .candidate-doc-card--completed {
-    background-color: #a7eebd99 !important;
+    background-color: #a7eebd5e !important;
+}
+
+.candidate-doc-card-highlight {
+    max-width: 50%;
 }

src/components/candidate-doc-card/CandidateDocCard.tsx

@@ -7,6 +7,7 @@ import { CandidateDoc } from '@services/task-service';
 export interface CandidateDocCardProps {
     doc: CandidateDoc;
     checked: boolean;
+    checkboxDisabled: boolean;
     onHighlightConfirm: (text: string) => void;
     highlightText: string;
     onCheck: (isChecked: boolean) => void;
@@ -19,7 +20,7 @@ const getSelectionText = (currentNode: Element) => {
     else return '';
 }
 
-export const CandidateDocCard: React.FC<CandidateDocCardProps> = ({ doc, checked, onCheck, onHighlightConfirm, highlightText }) => {
+export const CandidateDocCard: React.FC<CandidateDocCardProps> = ({ doc, checked, onCheck, onHighlightConfirm, highlightText, checkboxDisabled }) => {
     const [expanded, setExpanded] = React.useState(false);
     const [selectedText, setSelectedText] = React.useState('');
 
@@ -46,7 +47,7 @@ export const CandidateDocCard: React.FC<CandidateDocCardProps> = ({ doc, checked
     }
 
     return <Grid item classes={{root: 'candidate-doc-card'}} container>
-        <Grid item><Checkbox onChange={(e, isChecked) => onCheck(isChecked)} checked={checked}/></Grid>
+        <Grid item><Checkbox disabled={!checked && checkboxDisabled} onChange={(e, isChecked) => onCheck(isChecked)} checked={checked}/></Grid>
         <Grid item xs={11}>
             <Card id={id} elevation={8} classes={{ root: `candidate-doc-card ${checked ? ( highlightText ? 'candidate-doc-card--completed' : 'candidate-doc-card--checked') : ''}` }}>
                 <CardContent classes={{ root: expanded ? 'candidate-doc-card-content' : 'candidate-doc-card-content candidate-doc-card-content--compact' }}>
@@ -60,7 +61,7 @@ export const CandidateDocCard: React.FC<CandidateDocCardProps> = ({ doc, checked
                         <KeyboardArrowDownIcon fontSize={'large'} classes={{root: 'up-arrow'}} /> : 
                         <KeyboardArrowDownIcon fontSize={'large'} />}
                     </IconButton>
-                    {highlightText?.length > 0 && <span style={{'max-width': '50%'}}><b>Highlighted Text:</b>&nbsp;{highlightText}</span>}
+                    {highlightText?.length > 0 && <span className={'candidate-doc-card-highlight'}><b>Highlighted Text:</b>&nbsp;{highlightText}</span>}
                     {checked && <Button variant={'outlined'} disabled={selectedText.length === 0} onClick={() => onHighlightConfirm(selectedText)}>Confirm Highlight</Button>}
                 </CardActions>
             </Card>    

src/components/formDialog/SentencesFormDialog.tsx

@@ -10,7 +10,7 @@ import TableRow from '@mui/material/TableRow';
 import InputLabel from '@mui/material/InputLabel';
 import MenuItem from '@mui/material/MenuItem';
 import { Grid } from '@mui/material';
-import Select, { SelectChangeEvent } from '@mui/material/Select';
+import Select from '@mui/material/Select';
 
 import React from 'react';