feat: update footer buttons

src/components/Ecosystem/Projects/ProjectCard.tsx

@@ -1,6 +1,6 @@
 import { Avatar, Typography, IconButton, SvgIcon, Chip } from '@mui/material'
 
-import TwitterIcon from '@/public/images/twitter-icon.svg'
+import XIcon from '@/public/images/x-icon.svg'
 import GithubIcon from '@/public/images/github-icon.svg'
 
 import css from './styles.module.css'
@@ -27,7 +27,7 @@ export const ProjectCard = (item: EcosystemProjectWithCategories) => {
             size="small"
             sx={{ color: 'primary.light' }}
           >
-            <SvgIcon component={TwitterIcon} fontSize="inherit" color="inherit" inheritViewBox />
+            <SvgIcon component={XIcon} fontSize="inherit" color="inherit" inheritViewBox />
           </IconButton>
         )}
 

src/components/common/Footer/index.tsx

@@ -1,9 +1,11 @@
 import { ButtonBase, Container, Divider, Grid, Typography } from '@mui/material'
-import type { SyntheticEvent } from 'react'
+import type { ComponentType, SyntheticEvent } from 'react'
 
 import { AppRoutes } from '@/config/routes'
 import DiscordIcon from '@/public/images/discord-icon.svg'
-import TwitterIcon from '@/public/images/twitter-icon.svg'
+import XIcon from '@/public/images/x-icon.svg'
+import YoutubeIcon from '@/public/images/youtube-icon.svg'
+import DiscourseIcon from '@/public/images/discourse-icon.svg'
 import MirrorIcon from '@/public/images/mirror-icon.svg'
 import GithubIcon from '@/public/images/github-icon.svg'
 
@@ -19,6 +21,12 @@ import {
   ECOSYSTEM_LINK,
   GRANTS_LINK,
   SAFECON_LINK,
+  DISCORD_LINK,
+  FORUM_LINK,
+  GITHUB_LINK,
+  MIRROR_LINK,
+  TWITTER_LINK,
+  YOUTUBE_LINK,
 } from '@/config/constants'
 import { useCookieBannerContext } from '../CookieBanner/CookieBannerContext'
 import Logo from '@/public/images/logo.svg'
@@ -115,6 +123,20 @@ const subFooterItems = [
   },
 ]
 
+const createFooterButton = (label: string, href: string, IconComponent: ComponentType) => {
+  const buttonBaseAttributes = {
+    disableRipple: true,
+    target: '_blank',
+    rel: 'noreferrer',
+  }
+
+  return (
+    <ButtonBase {...buttonBaseAttributes} aria-label={label} href={href}>
+      <IconComponent />
+    </ButtonBase>
+  )
+}
+
 const Footer = () => {
   const { openBanner } = useCookieBannerContext()
 
@@ -180,42 +202,12 @@ const Footer = () => {
 
         <Grid item xs={12} md={3} mt={{ xs: 6, md: 0 }}>
           <div className={css.socials}>
-            <ButtonBase
-              disableRipple
-              aria-label="Twitter link"
-              href="https://twitter.com/safe"
-              target="_blank"
-              rel="noreferrer"
-            >
-              <TwitterIcon />
-            </ButtonBase>
-            <ButtonBase
-              disableRipple
-              aria-label="Mirror link"
-              href="https://safe.mirror.xyz"
-              target="_blank"
-              rel="noreferrer"
-            >
-              <MirrorIcon />
-            </ButtonBase>
-            <ButtonBase
-              disableRipple
-              aria-label="Discord link"
-              href="https://chat.safe.global"
-              target="_blank"
-              rel="noreferrer"
-            >
-              <DiscordIcon />
-            </ButtonBase>
-            <ButtonBase
-              disableRipple
-              aria-label="Github link"
-              href="https://github.com/safe-global"
-              target="_blank"
-              rel="noreferrer"
-            >
-              <GithubIcon />
-            </ButtonBase>
+            {createFooterButton('X page', TWITTER_LINK, XIcon)}
+            {createFooterButton('Discourse forum', FORUM_LINK, DiscourseIcon)}
+            {createFooterButton('Discord server', DISCORD_LINK, DiscordIcon)}
+            {createFooterButton('Youtube channel', YOUTUBE_LINK, YoutubeIcon)}
+            {createFooterButton('Mirror blog', MIRROR_LINK, MirrorIcon)}
+            {createFooterButton('Github organization', GITHUB_LINK, GithubIcon)}
           </div>
         </Grid>
       </Grid>

src/components/common/Footer/styles.module.css

@@ -38,9 +38,15 @@
 
 .socials {
   display: flex;
+  flex-wrap: wrap;
   gap: 24px;
 }
 
+.socials svg {
+  width: 28px;
+  height: 28px;
+}
+
 .logo {
   width: 150px;
   height: auto;

src/config/constants.ts

@@ -14,12 +14,18 @@ export const CORE_LINK = 'https://core.safe.global'
 export const PRESS_LINK = 'https://press.safe.global'
 export const HELP_LINK = 'https://help.safe.global'
 export const DOCS_LINK = 'https://docs.safe.global'
+export const FORUM_LINK = 'https://forum.safe.global'
 export const IOS_LINK = 'https://apps.apple.com/app/id1515759131'
 export const GPLAY_LINK = 'https://play.google.com/store/apps/details?id=io.gnosis.safe'
 export const LICENSES_LINK = 'https://app.safe.global/licenses'
 export const GOVERNANCE_LINK = 'https://gov.safe.global'
 export const ECOSYSTEM_LINK = 'https://ecosystem.safe.global'
 export const GRANTS_LINK = 'https://grants.safe.global'
+export const TWITTER_LINK = 'https://x.com/safe'
+export const DISCORD_LINK = 'https://chat.safe.global'
+export const YOUTUBE_LINK = 'https://www.youtube.com/@safeglobal'
+export const MIRROR_LINK = 'https://safe.mirror.xyz'
+export const GITHUB_LINK = 'https://github.com/safe-global'
 
 export const PROTOCOL_KIT_LINK = 'https://docs.safe.global/safe-core-aa-sdk/protocol-kit'
 export const AUTH_KIT_LINK = 'https://docs.safe.global/safe-core-aa-sdk/auth-kit'