update links design

Author: wbglaeser

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

@@ -10,25 +10,26 @@ const BenefitPageLinkButton = ({ link }) => {
     return (
         <VBox
             sx={{
-                width: { xs: '100%', sm: 250 },
-                padding: { xs: 2, sm: 4 },
+                maxWidth: 800,
+                padding: { xs: 2, sm: 2 },
                 backgroundColor: "transparent",
                 border: "1px solid",
-                borderColor: "blue.main",
+                borderColor: "blue.dark",
                 boxShadow: '0px 1px 2px rgba(0, 0, 0, 0.25)',
-                borderRadius: theme.shape.borderRadius
+                borderRadius: theme.shape.borderRadius,
+                gap: 2,
 
             }}
         >
-            <VBox sx={{ gap: 2 }} >
+            <VBox sx={{ gap: 1 }} >
                 <Typography variant="h4" sx={{ fontWeight: 500, wordBreak: "break-word" }}>
                     {link?.title}
                 </Typography>
                 <Typography variant="body1" sx={{ wordBreak: "break-word" }}>
                     {link?.description}
                 </Typography>
                 <RegularButton
-                    variant="transparentBlueOutlined"
+                    variant="whiteOutlinedBlue"
                     size='small'
                     text={'Link öffnen'}
                     link={link?.url}

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

@@ -22,13 +22,13 @@ const BenefitPageLinks = ({ t, linksList }) => {
                         {t('app.benefitPage.links.title')}
                     </Typography>
                 </HBox>
-                <HBox sx={{flexWrap: 'wrap', gap: 2}}>
+                <VBox sx={{flexWrap: 'wrap', gap: 2}}>
                     {
                         linksList?.map((link, i) =>
                             <BenefitPageLinkButton key={i} t={t} link={link} />
                         )
                     }
-                </HBox>            
+                </VBox>            
             </VBox >
         </VBox >
     );