feat: improve inderminate icons - Ref gestion-de-projet-#2272

src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/DocumentsForm/DocumentsForm.tsx

@@ -40,6 +40,7 @@ import {
 import services from 'services/aphp'
 import { useDebounce } from 'utils/debounce'
 import OccurrencesNumberInputs from '../AdvancedInputs/OccurrencesInputs/OccurrenceNumberInputs'
+import { IndeterminateCheckBoxOutlined } from '@mui/icons-material'
 
 const defaultComposition: DocumentDataType = {
   type: 'DocumentReference',
@@ -256,6 +257,7 @@ const CompositionForm: React.FC<CriteriaDrawerComponentProps> = (props) => {
                       }
                       checked={currentDocTypeList.length === currentSelectedDocTypeList.length}
                       onClick={onClick}
+                      indeterminateIcon={<IndeterminateCheckBoxOutlined />}
                     />
                     <Typography onClick={onClick} noWrap style={{ cursor: 'pointer', width: 'calc(100% - 150px' }}>
                       {docType.group}

src/components/Filters/DocumentFilters/DocumentFilters.tsx

@@ -30,6 +30,7 @@ import { CriteriaName, DocumentFilters, ScopeTreeRow } from 'types'
 
 import useStyles from './styles'
 import PopulationCard from 'components/CreationCohort/DiagramView/components/PopulationCard/PopulationCard'
+import { IndeterminateCheckBoxOutlined } from '@mui/icons-material'
 
 type DocumentFiltersProps = {
   open: boolean
@@ -151,6 +152,7 @@ const ModalDocumentFilters: React.FC<DocumentFiltersProps> = ({
                       }
                       checked={currentDocTypeList.length === currentSelectedDocTypeList.length}
                       onClick={onClick}
+                      indeterminateIcon={<IndeterminateCheckBoxOutlined />}
                     />
                     <Typography onClick={onClick} noWrap style={{ cursor: 'pointer', width: 'calc(100% - 150px' }}>
                       {docType.group}

src/components/MyProjects/ProjectTable/ProjectTable.tsx

@@ -23,6 +23,7 @@ import { RequestState } from 'state/request'
 import { CohortState } from 'state/cohort'
 
 import useStyles from './styles'
+import { IndeterminateCheckBoxOutlined } from '@mui/icons-material'
 
 type ProjectTableProps = {
   searchInput?: string
@@ -171,6 +172,7 @@ const ProjectTable: React.FC<ProjectTableProps> = ({ searchInput, setSelectedReq
                   }
                 }}
                 color="secondary"
+                indeterminateIcon={<IndeterminateCheckBoxOutlined />}
               />
             </TableCell>
             <TableCell className={classes.tableHeadCell} align="center" style={{ width: 62 }} />

src/components/ScopeTree/ScopeTree.tsx

@@ -39,6 +39,7 @@ import {
 import servicesPerimeters, { loadingItem } from '../../services/aphp/servicePerimeters'
 import { findSelectedInListAndSubItems } from '../../utils/cohortCreation'
 import { _cancelPendingRequest } from 'utils/abortController'
+import { IndeterminateCheckBoxOutlined } from '@mui/icons-material'
 
 type ScopeTreeListItemProps = {
   row: any
@@ -111,6 +112,7 @@ const ScopeTreeListItem: React.FC<ScopeTreeListItemProps> = (props) => {
               indeterminate={isIndeterminated(row)}
               checked={isSelected(row, selectedItems, rootRows) ? true : false}
               inputProps={{ 'aria-labelledby': labelId }}
+              indeterminateIcon={<IndeterminateCheckBoxOutlined />}
             />
           </TableCell>
           <TableCell>
@@ -448,6 +450,7 @@ const ScopeTree: React.FC<ScopeTreeProps> = ({
             checked={isHeadChecked}
             indeterminate={isHeadIndetermined}
             onClick={_onSelectAll}
+            indeterminateIcon={<IndeterminateCheckBoxOutlined />}
           />
         </div>
       )

src/components/ScopeTree/ScopeTreeTable/components/TableHead.jsx

@@ -5,7 +5,7 @@ import TableHead from '@mui/material/TableHead'
 import TableRow from '@mui/material/TableRow'
 import TableSortLabel from '@mui/material/TableSortLabel'
 import Checkbox from '@mui/material/Checkbox'
-import IndeterminateCheckBoxIcon from '@mui/icons-material/IndeterminateCheckBox'
+import { IndeterminateCheckBoxOutlined } from '@mui/icons-material'
 
 function EnhancedTableHead(props) {
   const { classes, onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } = props
@@ -22,10 +22,10 @@ function EnhancedTableHead(props) {
           <TableCell align="center" padding="checkbox">
             <Checkbox
               indeterminate={numSelected > 0 && numSelected < rowCount}
-              indeterminateIcon={<IndeterminateCheckBoxIcon color="primary" />}
               checked={rowCount > 0 && numSelected === rowCount}
               onChange={onSelectAllClick}
               inputProps={{ 'aria-label': 'select all desserts' }}
+              indeterminateIcon={<IndeterminateCheckBoxOutlined />}
             />
           </TableCell>
         )}