From 013a47f7e6347fc3c6fd8dc3765b98bd6ceb388f Mon Sep 17 00:00:00 2001
From: MikeAtUqido <146933303+MikeAtUqido@users.noreply.github.com>
Date: Fri, 9 Feb 2024 15:48:39 +0100
Subject: [PATCH] [DEV-1278]: uniform footer (#606)

---
 .changeset/neat-experts-wave.md                |  5 +++++
 .../components/atoms/IconWrapper/IconMap.ts    |  2 ++
 .../atoms/IconWrapper/IconWrapper.tsx          |  4 ++--
 .../components/atoms/SiteFooter/SiteFooter.tsx |  5 +++++
 .../src/editorialComponents/Footer/Footer.tsx  | 18 +++++++++++-------
 .../Footer/components/FooterColumn.tsx         |  7 ++++++-
 .../FundedByNextGenerationEU.tsx               |  1 +
 apps/nextjs-website/src/messages/it.json       |  2 +-
 8 files changed, 33 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/neat-experts-wave.md

diff --git a/.changeset/neat-experts-wave.md b/.changeset/neat-experts-wave.md
new file mode 100644
index 0000000000..2bf110d140
--- /dev/null
+++ 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
index d47c5af9bd..c27a722c62 100644
--- 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
index 910afefde0..1ebd2982d1 100644
--- 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
index d19303239e..4b2a47ae0f 100644
--- 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
index 9db1c0799b..d234adef64 100644
--- 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,7 +28,7 @@ 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
@@ -36,6 +36,7 @@ export const Footer = ({
       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
index 0d82dfa283..3ed26f90bc 100644
--- 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/apps/nextjs-website/src/editorialComponents/FundedByNextGenerationEU/FundedByNextGenerationEU.tsx b/apps/nextjs-website/src/editorialComponents/FundedByNextGenerationEU/FundedByNextGenerationEU.tsx
index 0779aadbe5..66512c57f8 100644
--- a/apps/nextjs-website/src/editorialComponents/FundedByNextGenerationEU/FundedByNextGenerationEU.tsx
+++ b/apps/nextjs-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
index 29dd509611..c905be0fcc 100644
--- 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": {