Skip to content

Commit 852fc6f

Browse files
wbglaeserwbglaeser
committed
new tile design in catalog page
1 parent 0a1dac3 commit 852fc6f

4 files changed

Lines changed: 57 additions & 59 deletions

File tree

‎src/ui/language/translations.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,7 @@ const translations = {
238238
notEligible: "Not eligible:",
239239
missingData: "Missing data:",
240240
checkElBtn: "Check eligibility",
241-
learnMoreBtn: "Learn more!",
241+
learnMoreBtn: "Learn more",
242242
legendTitle: "Legend",
243243
legendText: "We use a color code to indicate the likelihood of eligibility. See the legend",
244244
legend: {
@@ -586,7 +586,7 @@ const translations = {
586586
notEligible: "Kein Anspruch:",
587587
missingData: "Fehlende Daten:",
588588
checkElBtn: "Anspruch prüfen",
589-
learnMoreBtn: "Mehr erfahren!",
589+
learnMoreBtn: "Zur Detailseite",
590590
legendTitle: "Legende",
591591
legendText: "Wir verwenden eine Farbkodierung, um die Wahrscheinlichkeit der Anspruchsberechtigung anzuzeigen. Siehe die Legende",
592592
legend: {

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,13 @@ const EligibilityOverviewBanner = ({ t, eligible }) => {
3030

3131
return (
3232
<HBox sx={{
33+
height: 'fit-content',
3334
backgroundColor: eligibilityBannerType.backgroundColor,
34-
padding: "8px 12px",
35+
padding: "6px 18px",
3536
borderRadius: theme.shape.borderRadius,
3637
alignItems: 'center',
3738
}}>
38-
<Typography>{t(eligibilityBannerType.text)}</Typography>
39+
<Typography variant="body1" >{t(eligibilityBannerType.text)}</Typography>
3940
</HBox>
4041
);
4142
}

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

Lines changed: 48 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState } from 'react';
2-
import { Divider, Typography } from '@mui/material';
2+
import { Typography } from '@mui/material';
33
import { HBox, VBox } from '@/ui/shared-components/LayoutBoxes';
44
import theme from '@/theme';
55
import RegularButton from '@/ui/shared-components/buttons/RegularButton';
@@ -20,7 +20,6 @@ const filterKeys = [
2020

2121
const EligibilityOverviewItem = ({ t, item, eligible }) => {
2222
const [isVisible, setIsVisible] = useState(false);
23-
const color = eligible === 'indeterminate' ? 'black.light' : 'black.main';
2423
const setSelectedBenefits = useSelectedBenefitsStore((state) => state.setSelectedBenefits);
2524
const clearSelectedTopics = useSelectedTopicsStore((state) => state.clear);
2625

@@ -29,10 +28,10 @@ const EligibilityOverviewItem = ({ t, item, eligible }) => {
2928
sx={{
3029
display: 'flex',
3130
flexDirection: 'column',
32-
gap: 2,
31+
gap: 3,
3332
border: `1px solid ${theme.palette.white.dark}`,
3433
boxShadow: '0px 1px 2px rgba(0, 0, 0, 0.25)',
35-
padding: 2,
34+
padding: 4,
3635
borderRadius: theme.shape.borderRadius,
3736
}}
3837
>
@@ -53,7 +52,7 @@ const EligibilityOverviewItem = ({ t, item, eligible }) => {
5352
<HBox sx={{ alignItems: 'flex-end', gap: 2, flexWrap: 'wrap', width: '100%' }}>
5453
<HBox sx={{ alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
5554
<HBox sx={{ alignItems: 'center', gap: 2, flexWrap: 'wrap' }}>
56-
<Typography variant='h2' sx={{ color: color, fontWeight: '400', wordBreak: 'break-word' }}>
55+
<Typography variant='h2' sx={{ fontWeight: '400', wordBreak: 'break-word' }}>
5756
{item.title}
5857
</Typography>
5958
{item.status === "beta" && (
@@ -84,7 +83,7 @@ const EligibilityOverviewItem = ({ t, item, eligible }) => {
8483
</VBox>
8584
</HBox>
8685
</HBox>
87-
<VBox sx={{ gap: 2 }}>
86+
<VBox sx={{ gap: 4, flex: 1 }}>
8887
{isVisible && (
8988
<HBox sx={{ flexWrap: 'wrap', gap: 1 }}>
9089
{
@@ -98,36 +97,52 @@ const EligibilityOverviewItem = ({ t, item, eligible }) => {
9897
}
9998
</HBox>
10099
)}
101-
<Divider sx={{ color: 'dark.light', borderStyle: 'dashed' }} />
102-
<HBox sx={{ flexWrap: 'wrap', gap: 2, alignItems: 'center' }}>
103-
{
104-
eligible !== 'indeterminate' && (
105-
<HBox>
106-
<EligibilityOverviewBanner t={t} eligible={eligible} />
100+
<HBox sx={{
101+
flexWrap: 'wrap',
102+
gap: 2,
103+
alignItems: 'center',
104+
justifyContent: 'space-between',
105+
'& > :only-child': { marginLeft: 'auto' }
106+
}}>
107+
<HBox sx={{ gap: 2, alignItems: 'center', flex: 4 }}>
108+
{
109+
eligible !== 'indeterminate' && (
110+
<HBox>
111+
<EligibilityOverviewBanner t={t} eligible={eligible} />
112+
</HBox>
113+
)
114+
}
115+
{!isVisible && (
116+
<HBox sx={{ flexWrap: 'wrap', gap: 1 }}>
117+
{item.benefitCategories?.map(tag => (
118+
<EligibilityOverviewTag
119+
key={tag.id}
120+
tag={tag.label}
121+
tagType="benefitCategories"
122+
/>
123+
))}
107124
</HBox>
108-
)
109-
}
110-
{eligible === 'indeterminate' &&
125+
)}
126+
</HBox>
127+
<HBox sx={{ justifyContent: 'flex-end', flexWrap: 'wrap', gap: 2, alignItems: 'center', flex: 3 }}>
111128
<RegularButton
112-
variant={'blueHollow'}
113-
onClick={() => {
114-
clearSelectedTopics()
115-
setSelectedBenefits([item.id]);
116-
}}
117-
text={'app.browseAll.checkElBtn'}
118-
link={`/onboarding-welcome`}
119-
size='small'
120-
endIcon={<ChevronRightIcon sx={{ fontSize: '16px' }} />}
129+
variant={'blackOutlined'}
130+
text={'app.browseAll.learnMoreBtn'}
131+
link={`/benefit-page/${item.id}`}
121132
/>
122-
123-
}
124-
<RegularButton
125-
variant={'blackOutlined'}
126-
text={'app.browseAll.learnMoreBtn'}
127-
link={`/benefit-page/${item.id}`}
128-
size='small'
129-
endIcon={<ChevronRightIcon sx={{ fontSize: '16px' }} />}
130-
/>
133+
{eligible === 'indeterminate' &&
134+
<RegularButton
135+
variant={'blueHollow'}
136+
onClick={() => {
137+
clearSelectedTopics()
138+
setSelectedBenefits([item.id]);
139+
}}
140+
text={'app.browseAll.checkElBtn'}
141+
link={`/onboarding-welcome`}
142+
endIcon={<ChevronRightIcon sx={{ fontSize: '16px' }} />}
143+
/>
144+
}
145+
</HBox>
131146
</HBox>
132147
</VBox>
133148
</VBox>

‎src/ui/screens/eligibilty-overview/components/EligibilityOverviewTag.js‎

Lines changed: 4 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,33 +4,15 @@ import { Typography } from '@mui/material';
44
import { HBox } from '@/ui/shared-components/LayoutBoxes';
55
import theme from '@/theme';
66

7-
const EligibilityOverTag = ({ tag, tagType }) => {
8-
9-
let tagStyle;
10-
switch (tagType) {
11-
case 'administrativeLevels':
12-
tagStyle = theme.palette.green.main ;
13-
break;
14-
case 'associatedLaws':
15-
tagStyle = theme.palette.pink.main;
16-
break;
17-
case 'providingAgencies':
18-
tagStyle = theme.palette.red.main ;
19-
break;
20-
case 'benefitCategories':
21-
tagStyle = theme.palette.blue.main;
22-
break;
23-
default:
24-
tagStyle = theme.palette.black.main;
25-
}
7+
const EligibilityOverTag = ({ tag }) => {
268

279
return (
2810
<HBox sx={{
29-
border: `1px solid ${tagStyle}`,
30-
padding: '6px 10px',
11+
backgroundColor: 'greyTransparent.main',
12+
padding: '6px 18px',
3113
borderRadius: theme.shape.borderRadius,
3214
}}>
33-
<Typography variant='body2' sx={{}}>
15+
<Typography variant='body1' sx={{}}>
3416
{tag}
3517
</Typography>
3618
</HBox>

0 commit comments

Comments
 (0)