[DEV-1278]: uniform footer (#606)

pagopa · Feb 9, 2024 · 013a47f · 013a47f
1 parent 0c33e93
commit 013a47f
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 11 deletions.
diff --git a/.changeset/neat-experts-wave.md b/.changeset/neat-experts-wave.md
@@ -0,0 +1,5 @@
+---
+"nextjs-website": patch
+---
+
+[DEV-1278]: uniform footer design
diff --git a/apps/nextjs-website/src/components/atoms/IconWrapper/IconMap.ts b/apps/nextjs-website/src/components/atoms/IconWrapper/IconMap.ts
@@ -22,6 +22,7 @@ import TimerSharp from '@mui/icons-material/TimerSharp';
 import TrendingUp from '@mui/icons-material/TrendingUp';
 import Twitter from '@mui/icons-material/Twitter';
 import VpnKey from '@mui/icons-material/VpnKey';
+import { MediumIcon } from '@pagopa/mui-italia/dist/icons/MediumIcon';
 
 export const ICON_MAP = {
   AccountBalance: AccountBalance,
@@ -37,6 +38,7 @@ export const ICON_MAP = {
   LinkedIn: LinkedIn,
   LiveHelp: LiveHelp,
   MarkEmailRead: MarkEmailRead,
+  Medium: MediumIcon,
   MenuBook: MenuBook,
   MessageRounded: MessageRounded,
   Payment: Payment,

diff --git a/apps/nextjs-website/src/components/atoms/IconWrapper/IconWrapper.tsx b/apps/nextjs-website/src/components/atoms/IconWrapper/IconWrapper.tsx
@@ -16,8 +16,8 @@ type IconName = keyof typeof ICON_MAP;
 const IconWrapper = ({
   icon,
   isSvg = false,
-  color = 'primary.main',
-  size = 40,
+  color = 'text.primary',
+  size = 35,
 }: IconWrapperProps) => {
   if (isSvg) {
     return (

diff --git a/apps/nextjs-website/src/components/atoms/SiteFooter/SiteFooter.tsx b/apps/nextjs-website/src/components/atoms/SiteFooter/SiteFooter.tsx
@@ -37,6 +37,10 @@ const SiteFooter = ({
           href: 'https://www.instagram.com/pagopaspa/',
           icon: 'Instagram',
         },
+        {
+          href: 'https://medium.com/pagopa-spa',
+          icon: 'Medium',
+        },
       ],
       links: [
         {
@@ -161,6 +165,7 @@ const SiteFooter = ({
 
   const legalInfo = t.rich('legalInfo', {
     strong: (chunks) => <strong>{chunks}</strong>,
+    br: () => <br></br>,
   }) as string;
 
   const cookiePreferenceLink: FooterLinksType = {

diff --git a/apps/nextjs-website/src/editorialComponents/Footer/Footer.tsx b/apps/nextjs-website/src/editorialComponents/Footer/Footer.tsx
@@ -1,4 +1,4 @@
-import { Box, Container } from '@mui/material';
+import { Box, Container, Stack } from '@mui/material';
 import { FundedByNextGenerationEU } from '@/editorialComponents/FundedByNextGenerationEU';
 import { type Generic } from '../types/components';
 import { FooterColumn } from './components/FooterColumn';
@@ -28,14 +28,15 @@ export const Footer = ({
     borderColor='divider'
     borderTop='1px'
     component='footer'
-    px={{ xs: 2, sm: 4, md: 8 }}
+    px={{ xs: 2, sm: 4, md: 20 }}
     sx={{ backgroundColor: 'background.paper' }}
   >
     <Container
       maxWidth={false}
       sx={{
         py: 8,
         display: 'flex',
+        alignItems: 'stretch',
         justifyContent: 'space-between',
         flexDirection: { xs: 'column', sm: 'row' },
         gap: 4,
@@ -48,12 +49,15 @@ export const Footer = ({
         display='flex'
         flexDirection='column'
         alignItems={{ sm: 'flex-start', xs: 'center' }}
+        justifyContent='space-between'
       >
-        <FooterColumn
-          data={followUs}
-          icons={followUs.socialLinks as FooterColumnIcon[]}
-        />
-        {!!langProps?.languages?.length && <LangSwitch {...langProps} />}
+        <Stack display='flex' alignItems={{ xs: 'center', sm: 'start' }}>
+          <FooterColumn
+            data={followUs}
+            icons={followUs.socialLinks as FooterColumnIcon[]}
+          />
+          {!!langProps?.languages?.length && <LangSwitch {...langProps} />}
+        </Stack>
         {showFundedByNextGenerationEULogo && (
           <FundedByNextGenerationEU size={180} />
         )}

diff --git a/apps/nextjs-website/src/editorialComponents/Footer/components/FooterColumn.tsx b/apps/nextjs-website/src/editorialComponents/Footer/components/FooterColumn.tsx
@@ -21,7 +21,11 @@ export const FooterColumn = ({
   icons,
 }: FooterColumnProps) => (
   <Stack spacing={2} display='flex' alignItems={{ xs: 'center', sm: 'start' }}>
-    {data?.title && <Typography variant='overline'>{data.title}</Typography>}
+    {data?.title && (
+      <Typography variant='overline' fontSize='body2.fontSize'>
+        {data.title}
+      </Typography>
+    )}
 
     {companyLink && (
       <LinkMui
@@ -67,6 +71,7 @@ export const FooterColumn = ({
         <li key={i}>
           <LinkMui
             aria-label={ariaLabel}
+            fontSize='body2.fontSize'
             component={'a'}
             href={href}
             onClick={onClick}

diff --git a/...tjs-website/src/editorialComponents/FundedByNextGenerationEU/FundedByNextGenerationEU.tsx b/...tjs-website/src/editorialComponents/FundedByNextGenerationEU/FundedByNextGenerationEU.tsx
@@ -60,6 +60,7 @@ export const FundedByNextGenerationEU = ({
     role='img'
     aria-labelledby='logo-next-genEU-titleID'
     sx={{
+      mt: { xs: 5 },
       width: size,
       /* If the color variant is set,
       the following property is ignored */

diff --git a/apps/nextjs-website/src/messages/it.json b/apps/nextjs-website/src/messages/it.json
@@ -392,7 +392,7 @@
         "languages": {
             "it": "Italiano"
         },
-        "legalInfo": "<strong>PagoPA S.p.A.</strong> - Società per azioni con socio unico - Capitale sociale di euro 1,000,000 interamente versato - Sede legale in Roma, Piazza Colonna 370, <br />CAP 00187 - N. di iscrizione a Registro Imprese di Roma, CF e P.IVA 15376371009",
+        "legalInfo": "<strong>PagoPA S.p.A.</strong> - Società per azioni con socio unico - Capitale sociale di euro 1,000,000 interamente versato - Sede legale in Roma, Piazza Colonna 370, <br></br>CAP 00187 - N. di iscrizione a Registro Imprese di Roma, CF e P.IVA 15376371009",
         "followUs": {
             "links": {
                 "accessibility": {