clean up benefit page

Citizen-Knowledge-Graph · Dec 22, 2024 · af5559a · af5559a
1 parent a5b80a6
commit af5559a
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 150 deletions.
diff --git a/src/ui/screens/benefit-page/components/BenefitPageHeader.js b/src/ui/screens/benefit-page/components/BenefitPageHeader.js
@@ -4,23 +4,18 @@ import HStack from "../../../shared-components/HStack";
 import globalStyles from "../../../styles/styles";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import React, {useState} from "react";
-import {useStore} from "../../../shared-components/ViewportUpdater";
 import {Link} from "react-router-dom";
 import {useSelectedBenefitStore, useSelectedTopicsStore, useValidationReportStore} from "../../../storage/zustand";
 import useIsMissingDataBenefit from "../hooks/useIsMissingDataBenefit";
 import useTranslation from "../../../language/useTranslation";
 
 const BenefitPageHeader = ({id, benefit}) => {
     const {t} = useTranslation();
-
     const [leiKaInfo, setLeiKaInfo] = useState(false);
-    const isDesktop = useStore((state) => state.isDesktop);
-    const titleFontSize = isDesktop ? '32px' : '28px';
 
     const setSelectedBenefit = useSelectedBenefitStore((state) => state.setSelectedBenefit);
     const clearSelectedTopics = useSelectedTopicsStore((state) => state.clear);
     const validationReport = useValidationReportStore((state) => state.validationReport);
-
     const isMissingDataBenefit = useIsMissingDataBenefit(id, validationReport);
 
     return (
@@ -31,12 +26,12 @@ const BenefitPageHeader = ({id, benefit}) => {
             borderRadius: '12px'
         }}>
             <VStack>
-                <Typography sx={{...styles.titleText, fontSize: titleFontSize}}>
+                <Typography variant="h4">
                     {benefit.title}
                 </Typography>
                 <VStack>
                     <HStack alignItems={'center'}>
-                        <Typography sx={styles.subTitleText}>
+                        <Typography variant="body2">
                             LeiKa-Id: {benefit.leikaId}
                         </Typography>
                         <IconButton
@@ -59,7 +54,7 @@ const BenefitPageHeader = ({id, benefit}) => {
                     </HStack>
                     {leiKaInfo && (
                         <VStack sx={{backgroundColor: 'white', padding: '12px', borderRadius: '12px'}}>
-                            <Typography sx={styles.subTitleText}>
+                            <Typography variant="body2">
                                 LeiKa is a unique identifier for benefits in Germany. It helps you to
                                 find
                                 the right benefit for you.
@@ -94,17 +89,4 @@ const BenefitPageHeader = ({id, benefit}) => {
     );
 }
 
-
-const styles = {
-    titleText: {
-        fontWeight: 'bold',
-    },
-    subTitleText: {
-        fontSize: '14px',
-        fontWeight: '400',
-        color: 'black',
-        textTransform: 'none',
-    },
-}
-
 export default BenefitPageHeader;
diff --git a/src/ui/screens/benefit-page/components/BenefitPageList.js b/src/ui/screens/benefit-page/components/BenefitPageList.js
diff --git a/src/ui/screens/benefit-page/components/BenefitPageRuleEntry.js b/src/ui/screens/benefit-page/components/BenefitPageRuleEntry.js
@@ -54,18 +54,18 @@ const BenefitPageRuleEntry = ({ruleData}) => {
         <DynamicStacker>
             <HStack sx={{width: '100%'}}>
                 <VStack gap={0} sx={{width: '50%'}}>
-                    <Typography sx={styles.fieldText}>
+                    <Typography variant="body2">
                         {ruleData.requirement.label}
                     </Typography>
-                    <Typography sx={styles.requirementText}>
+                    <Typography variant="body1">
                         {ruleData.requirement.rule}
                     </Typography>
                 </VStack>
                 <VStack gap={0} sx={{width: '50%'}}>
-                    <Typography sx={styles.fieldText}>
+                    <Typography variant="body2">
                         {t('app.benefitPage.rulesTable.yourAnswer')}
                     </Typography>
-                    <Typography sx={styles.requirementText}>
+                    <Typography variant="body1">
                         {ruleData.userValue}
                     </Typography>
                 </VStack>
@@ -77,16 +77,4 @@ const BenefitPageRuleEntry = ({ruleData}) => {
     )
 }
 
-
-const styles = {
-    fieldText: {
-        fontSize: '14px',
-        fontWeight: '300',
-    },
-    requirementText: {
-        fontSize: '16px',
-        fontWeight: '400',
-    }
-}
-
 export default BenefitPageRuleEntry;
diff --git a/src/ui/screens/benefit-page/components/BenefitPageRules.js b/src/ui/screens/benefit-page/components/BenefitPageRules.js
@@ -12,7 +12,7 @@ import useBenefitPageRules from "../hooks/useBenefitPageRules";
 
 
 const BenefitPageRules = ({ benefitId }) => {
-    const { t } = useTranslation();
+    const { t } = useTranslation();    
     const metadata = useMetadataStore((state) => state.metadata);
     const validationReport = useValidationReportStore((state) => state.validationReport);
     const activeUser = useUserStore((state) => state.activeUserId);