re-arrange eligibility item

Author: wbglaeser

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

@@ -33,8 +33,9 @@ const EligibilityOverviewBanner = ({ t, eligible }) => {
     return (
         <HBox sx={{
             backgroundColor: eligibilityBannerType.backgroundColor,
-            padding: '6px 10px',
+            padding: "8px 12px",
             borderRadius: theme.shape.borderRadius,
+            alignItems: 'center',
         }}>
             <Typography>{t(eligibilityBannerType.text)}</Typography>
         </HBox>

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

@@ -45,52 +45,21 @@ const EligibilityOverviewItem = ({ t, item, eligible }) => {
                     }}
                 >
                     <VBox sx={{ gap: 2 }}>
-                        <Typography variant='h2' sx={{ color: color, fontWeight: '400', wordBreak: 'break-word' }}>
-                            {item.title}
-                        </Typography>
-                        {item.status === "beta" && (
-                            <Typography variant='body1' sx={{ color: 'blue.main' }}>
-                                Beta
+                        <HBox sx={{ alignItems: 'flex-end', gap: 2, flexWrap: 'wrap' }}>
+                            <Typography variant='h2' sx={{ color: color, fontWeight: '400', wordBreak: 'break-word' }}>
+                                {item.title}
                             </Typography>
-                        )}
-                        <Typography variant="body1">
+                            {item.status === "beta" && (
+                                <Typography variant='body1' sx={{ color: 'blue.main' }}>
+                                    Beta
+                                </Typography>
+                            )}
+                        </HBox>
+                        <Typography variant="body1" sx={{ wordBreak: 'break-word' }}>
                             {item.description}
                         </Typography>
                     </VBox>
                 </HBox>
-                <HBox sx={{
-                    flex: '1 1 auto',
-                    gap: 2,
-                    flexWrap: 'wrap',
-                    justifyContent: 'flex-end'
-                }}>
-                    <VBox
-                        sx={{ alignItems: 'flex-end', gap: 1, flexWrap: 'wrap' }}
-                    >
-                        {eligible === 'indeterminate' &&
-                            <HBox>
-                                <RegularButton
-                                    variant={'pinkContained'}
-                                    onClick={() => {
-                                        clearSelectedTopics()
-                                        setSelectedBenefit(item.id);
-                                    }}
-                                    text={'app.browseAll.checkElBtn'}
-                                    link={`/onboarding-welcome/${item.id}`}
-                                    size='small'
-                                />
-                            </HBox>
-                        }
-                        <HBox>
-                            <RegularButton
-                                variant={'blueHollow'}
-                                text={'app.browseAll.learnMoreBtn'}
-                                link={`/benefit-page/${item.id}`}
-                                size='small'
-                            />
-                        </HBox>
-                    </VBox>
-                </HBox>
             </HBox>
             <VBox sx={{ gap: 2 }}>
                 <HBox sx={{ flexWrap: 'wrap', gap: 1 }}>
@@ -104,16 +73,37 @@ const EligibilityOverviewItem = ({ t, item, eligible }) => {
                         )
                         )}
                 </HBox>
-                {
-                    eligible !== 'indeterminate' && (
-                        <>
-                            <Divider sx={{ color: 'dark.light', borderStyle: 'dashed' }} />
+                <Divider sx={{ color: 'dark.light', borderStyle: 'dashed' }} />
+                <HBox sx={{ flexWrap: 'wrap', gap: 2, alignItems: 'center' }}>
+                    {
+                        eligible !== 'indeterminate' && (
                             <HBox>
                                 <EligibilityOverviewBanner t={t} eligible={eligible} />
                             </HBox>
-                        </>
-                    )
-                }
+                        )
+                    }
+                    {eligible === 'indeterminate' &&
+
+                        <RegularButton
+                            variant={'pinkContained'}
+                            onClick={() => {
+                                clearSelectedTopics()
+                                setSelectedBenefit(item.id);
+                            }}
+                            text={'app.browseAll.checkElBtn'}
+                            link={`/onboarding-welcome/${item.id}`}
+                            size='small'
+                        />
+
+                    }
+                    <RegularButton
+                        variant={'blueHollow'}
+                        text={'app.browseAll.learnMoreBtn'}
+                        link={`/benefit-page/${item.id}`}
+                        size='small'
+                    />
+                </HBox>
+
             </VBox>
         </VBox>
     );

src/ui/screens/landing-page/LandingPage.js

@@ -1,7 +1,7 @@
 import React from "react";
-import { useStore } from "../../shared-components/ViewportUpdater";
-import { VBox } from "../../shared-components/LayoutBoxes";
-import Layout from "../../shared-components/Layout";
+import { useStore } from "@/ui/shared-components/ViewportUpdater";
+import { VBox } from "@/ui/shared-components/LayoutBoxes";
+import Layout from "@/ui/shared-components/Layout";
 import LandingPageHowItWorks from "./sections/how-it-works/LandingPageHowItWorks";
 import LandingPagePrinciples from "./sections/principles/LandingPagePrinciples";
 import LandingPageTeam from "./sections/team/LandingPageTeam";