update display of violated requirements texts

Author: wbglaeser

package.json

@@ -4,11 +4,11 @@
   "private": true,
   "homepage": "https://foerderfunke.org/",
   "dependencies": {
+    "@foerderfunke/matching-engine": "1.5.2",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/plugin-transform-private-property-in-object": "^7.24.7",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@foerderfunke/matching-engine": "^1.5.0",
     "@mui/icons-material": "^5.15.19",
     "@mui/material": "^5.15.19",
     "@mui/x-charts": "^7.6.2",

src/ui/screens/benefit-page/components/BenefitPageRequirements.js

@@ -7,6 +7,7 @@ import RegularButton from '@/ui/shared-components/buttons/RegularButton';
 import FlowChart from '@/ui/shared-components/flow-chart/FlowChart';
 import matchingEngineManager from "@/core/managers/matchingEngineManager";
 import featureFlags from '@/featureFlags';
+import ClearIcon from '@mui/icons-material/Clear';
 
 
 const BenefitPageRequirements = ({ t, validatedStatus, isDesktop, evalGraph }) => {
@@ -59,12 +60,32 @@ const BenefitPageRequirements = ({ t, validatedStatus, isDesktop, evalGraph }) =
                                     <Typography variant="h3" sx={{ fontWeight: 500 }}>
                                         {t('app.benefitPage.requirements.writtenViolationsTitle')}
                                     </Typography>
-                                    <VBox sx={{ gap: 1 }}>
+                                    <VBox sx={{ gap: 2 }}>
                                         {
                                             violations.map((violation, index) => (
-                                                <Typography key={index} variant="body1" sx={{ color: 'error.main' }}>
-                                                    {violation}
-                                                </Typography>
+                                                <HBox
+                                                    key={index}
+                                                    sx={{ gap: 2, alignItems: 'center' }}
+                                                >
+                                                    <VBox
+                                                        sx={{
+                                                            flexShrink: 0,
+                                                            width: '24px',
+                                                            height: '24px',
+                                                            justifyContent: 'center',
+                                                            alignItems: 'center',
+                                                            backgroundColor: 'error.light',
+                                                            borderRadius: '50%',
+                                                        }}
+                                                    >
+                                                        <ClearIcon sx={{ fontSize: '20px' }} />
+                                                    </VBox>
+                                                    <Typography
+                                                        variant="body1" sx={{ color: 'black.main' }}
+                                                        component="div"
+                                                        dangerouslySetInnerHTML={{ __html: violation }}
+                                                    />
+                                                </HBox>
                                             ))
                                         }
                                     </VBox>

src/ui/screens/eligibilty-overview/components/EligibilityOverviewFilter.js

@@ -89,7 +89,8 @@ const EligibilityOverviewFilter = ({ t, filterOptions, filters, onChangeFilters
                                 >
                                     {filterOptions[key].map(item => (
                                         <MenuItem key={item.id} value={item.id}>
-                                            <Checkbox checked={!!filters[key]?.includes(item.id)} />                                            <ListItemText primary={item.label} />
+                                            <Checkbox checked={!!filters[key]?.includes(item.id)} />
+                                            <ListItemText primary={item.label} />
                                         </MenuItem>
                                     ))}
                                 </Select>