[DEV-1952][DEV-1782] Fix card shadow border and Add margin ecosystem (#…

…1158) * refactor card grid and ecosystem for card shadows * add changeset * add padding and margin for mobile version * add changeset * move padding for card grinds to parent container * add mt and pt for shadows * fix title spacing
pagopa · Sep 30, 2024 · 86ffbd6 · 86ffbd6
1 parent af68449
commit 86ffbd6
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 13 deletions.
diff --git a/.changeset/giant-icons-kick.md b/.changeset/giant-icons-kick.md
@@ -0,0 +1,5 @@
+---
+"nextjs-website": patch
+---
+
+Add padding and margin to mobile version in ecosystem cards
diff --git a/.changeset/three-walls-kick.md b/.changeset/three-walls-kick.md
@@ -0,0 +1,5 @@
+---
+"nextjs-website": patch
+---
+
+Fix ecosystem and card grid for correct card box shadows
diff --git a/apps/nextjs-website/src/components/atoms/TabComponent/TabComponent.tsx b/apps/nextjs-website/src/components/atoms/TabComponent/TabComponent.tsx
@@ -53,8 +53,8 @@ export const TabComponent: FC<TabsProps> = ({
     <>
       <Box
         sx={{
-          borderBottom: 2,
-          borderColor: 'divider',
+          display: 'flex',
+          justifyContent: 'space-around',
           marginBottom: 6,
           position: 'relative',
           top: '2px',
@@ -67,10 +67,23 @@ export const TabComponent: FC<TabsProps> = ({
           onChange={(event, newValue: number) => {
             setCurrentTab(newValue);
           }}
-          sx={{ position: 'relative', top: '2px' }}
+          sx={{
+            flexGrow: '1',
+            position: 'relative',
+            top: '2px',
+            maxWidth: '1200px',
+          }}
         >
           {items.map((item, index) => (
-            <Tab key={index} label={item.title} />
+            <Tab
+              key={index}
+              label={item.title}
+              sx={{
+                maxWidth: '600px',
+                borderBottom: 2,
+                borderColor: 'divider',
+              }}
+            />
           ))}
         </Tabs>
       </Box>

diff --git a/apps/nextjs-website/src/components/organisms/Ecosystem/Ecosystem.tsx b/apps/nextjs-website/src/components/organisms/Ecosystem/Ecosystem.tsx
@@ -1,11 +1,12 @@
 'use client';
 import React from 'react';
-import { Box, Typography, useTheme } from '@mui/material';
+import { Box, useTheme } from '@mui/material';
 import TabComponent from '@/components/atoms/TabComponent/TabComponent';
 import CardsGrid from '@/components/molecules/CardsGrid/CardsGrid';
 import { ButtonNaked } from '@pagopa/mui-italia';
 import Link from 'next/link';
 import { HomepageProps } from '@/app/page';
+import SectionTitle from '@/components/molecules/SectionTitle/SectionTitle';
 
 const Ecosystem = ({
   title,
@@ -18,12 +19,14 @@ const Ecosystem = ({
   const theme = useTheme();
   return (
     <Box pt={10} pb={0} sx={{ backgroundColor: theme.palette.grey[50] }}>
-      <Box sx={{ maxWidth: '1200px', margin: 'auto' }}>
-        {title && (
-          <Typography variant='h4' sx={{ mb: 4, width: '100%' }}>
-            {title}
-          </Typography>
-        )}
+      {title && <SectionTitle margin={'0 0 1.75rem 0'} title={title} />}
+      <Box
+        sx={{
+          maxWidth: '1264px',
+          margin: 'auto',
+          paddingX: 4,
+        }}
+      >
         <TabComponent
           items={[
             {
@@ -32,7 +35,12 @@ const Ecosystem = ({
                 <CardsGrid
                   ctaButtonsVariant={'contained'}
                   cards={products}
-                  containerSx={{ px: 0, pb: '22px' }}
+                  containerSx={{
+                    px: '22px',
+                    py: '22px',
+                    mt: '-22px',
+                    mx: '-22px',
+                  }}
                 />
               ),
             },
@@ -44,7 +52,12 @@ const Ecosystem = ({
                     <CardsGrid
                       ctaButtonsVariant={'contained'}
                       cards={solutions}
-                      containerSx={{ px: 0, pb: '22px' }}
+                      containerSx={{
+                        px: '22px',
+                        py: '22px',
+                        mt: '-22px',
+                        mx: '-22px',
+                      }}
                     />
                   )}
                   {solutionsCta && (

diff --git a/apps/nextjs-website/src/components/organisms/SolutionsShowcase/SolutionsShowcase.tsx b/apps/nextjs-website/src/components/organisms/SolutionsShowcase/SolutionsShowcase.tsx
@@ -33,6 +33,10 @@ const SolutionsShowcase = ({
           tags: card.tags,
           useSrc: true,
         }))}
+        containerSx={{
+          pt: '22px',
+          mt: '-22px',
+        }}
       />
     </Box>
   );

diff --git a/apps/nextjs-website/src/components/organisms/StartInfo/StartInfo.tsx b/apps/nextjs-website/src/components/organisms/StartInfo/StartInfo.tsx
@@ -54,6 +54,10 @@ const StartInfo = ({
             iconColor: card.iconColor,
             useSrc: card.useSrc,
           }))}
+          containerSx={{
+            pt: '22px',
+            mt: '-22px',
+          }}
         />
       </Box>
       {cta && (

diff --git a/apps/nextjs-website/src/components/templates/ApiDataListTemplate/ApiDataListTemplate.tsx b/apps/nextjs-website/src/components/templates/ApiDataListTemplate/ApiDataListTemplate.tsx
@@ -64,6 +64,10 @@ const ApiDataListTemplate = ({
             ctaLabel: t('apiDataListPage.explore'),
           }))}
           cardSize={{ xs: 12, md: 4 }}
+          containerSx={{
+            pt: '22px',
+            mt: '-22px',
+          }}
         />
       </Box>
       <BannerLinks bannerLinks={bannerLinks} />