restyle eligibility catalog

Author: wbglaeser

src/ui/screens/eligibilty-overview/EligibilityOverviewScreen.js

@@ -53,7 +53,7 @@ const EligibilityOverviewScreen = ({
                         {featureFlags.bielefunke && atLeastOneWithMissingData() &&
                             <RegularButton
                                 text={"Noch offene Ansprüche prüfen"}
-                                variant={'blueContained'}
+                                variant={'blackContained'}
                                 link='/onboarding-welcome'
                                 onClick={doSetSelectedBenefits}
                                 endIcon={<EastIcon/>}

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

@@ -1,23 +1,28 @@
 import { Typography } from "@mui/material";
 import { HBox } from "@/ui/shared-components/LayoutBoxes";
 import theme from "@/theme";
+import ClearIcon from '@mui/icons-material/Clear';
+import CheckIcon from '@mui/icons-material/Check';
 
 const EligibilityOverviewBanner = ({ t, eligible }) => {
     const eligibilityBannerType = (() => {
         switch (eligible) {
             case 'eligible':
                 return {
                     text: 'app.browseAll.item.eligible',
+                    border: '1px solid rgba(11, 175, 18, 0.2)',
                     backgroundColor: 'secondary.light'
                 }
             case 'preliminary-eligible':
                 return {
                     text: 'app.browseAll.item.preliminaryEligible',
+                    border: '1px solid rgba(11, 175, 18, 0.2)',
                     backgroundColor: 'yellow.main'
                 }
             case 'non-eligible':
                 return {
                     text: 'app.browseAll.item.notEligible',
+                    border: '1px solid rgba(255, 0, 0, 0.2)',
                     backgroundColor: 'error.light'
                 }
             default:
@@ -28,15 +33,28 @@ const EligibilityOverviewBanner = ({ t, eligible }) => {
         }
     })();
 
+    const eligibilityIcon = (() => {
+        switch (eligible) {
+            case 'eligible':
+                return <CheckIcon sx={{ fontSize: '16px' }} />;
+            case 'non-eligible':
+                return <ClearIcon sx={{ fontSize: '16px' }} />;
+            default:
+                return <ClearIcon sx={{ fontSize: '16px' }} />;
+        }
+    })();
+
     return (
         <HBox sx={{
-            height: 'fit-content',
             backgroundColor: eligibilityBannerType.backgroundColor,
-            padding: "6px 18px",
+            border: eligibilityBannerType.border || 'none',
+            padding: '6px 18px',
             borderRadius: theme.shape.borderRadius,
             alignItems: 'center',
+            gap: 1,
         }}>
-            <Typography variant="body1" >{t(eligibilityBannerType.text)}</Typography>
+            <Typography variant="body1">{t(eligibilityBannerType.text)}</Typography>
+            {eligibilityIcon}
         </HBox>
     );
 }

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

@@ -23,6 +23,10 @@ const EligibilityOverviewItem = ({ t, item, eligible, isDesktop }) => {
     const setSelectedBenefits = useSelectedBenefitsStore((state) => state.setSelectedBenefits);
     const clearSelectedTopics = useSelectedTopicsStore((state) => state.clear);
 
+    const hasFirstSectionChildren =
+        eligible !== 'indeterminate' ||
+        (!isVisible && isDesktop && item.benefitCategories?.length > 0);
+
     return (
         <VBox
             sx={{
@@ -97,37 +101,35 @@ const EligibilityOverviewItem = ({ t, item, eligible, isDesktop }) => {
                 )}
                 <HBox sx={{
                     flexWrap: 'wrap',
-                    gap: { xs: 0, md: 2 },
+                    gap: hasFirstSectionChildren ? 2 : 0,
                     alignItems: 'center',
                     justifyContent: 'space-between',
                     '& > :only-child': { marginLeft: 'auto' }
                 }}>
                     <HBox sx={{ gap: 2, alignItems: 'center', flex: { xs: 0, md: 3 } }}>
-                        {
-                            eligible !== 'indeterminate' && (
-                                <HBox>
+                        <HBox sx={{ flexWrap: 'wrap', gap: 1 }}>
+                            {
+                                eligible !== 'indeterminate' && (
                                     <EligibilityOverviewBanner t={t} eligible={eligible} />
-                                </HBox>
-                            )
-                        }
-                        {!isVisible && isDesktop && (
-                            <HBox sx={{ flexWrap: 'wrap', gap: 1 }}>
-                                {item.benefitCategories?.map(tag => (
+                                )
+                            }
+                            {!isVisible && isDesktop &&
+                                item.benefitCategories?.map(tag => (
                                     <EligibilityOverviewTag
                                         key={tag.id}
                                         tag={tag.label}
                                         isDesktop={isDesktop}
                                         tagType="benefitCategories"
                                     />
-                                ))}
-                            </HBox>
-                        )}
+                                ))
+                            }
+                        </HBox>
                     </HBox>
-                    <HBox sx={{ 
-                        justifyContent: { xs: 'flex-start', md: 'flex-end' }, 
-                        flexWrap: 'wrap', 
-                        gap: 2, 
-                        alignItems: 'center', 
+                    <HBox sx={{
+                        justifyContent: { xs: 'flex-start', md: 'flex-end' },
+                        flexWrap: 'wrap',
+                        gap: 2,
+                        alignItems: 'center',
                         flex: 3
                     }}
                     >