diff --git a/public/images/discourse-icon.svg b/public/images/discourse-icon.svg new file mode 100644 index 000000000..d4c0484a2 --- /dev/null +++ b/public/images/discourse-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/twitter-icon.svg b/public/images/twitter-icon.svg deleted file mode 100644 index d7cae6382..000000000 --- a/public/images/twitter-icon.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/public/images/x-icon.svg b/public/images/x-icon.svg new file mode 100644 index 000000000..6adcf3562 --- /dev/null +++ b/public/images/x-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/youtube-icon.svg b/public/images/youtube-icon.svg new file mode 100644 index 000000000..862f505af --- /dev/null +++ b/public/images/youtube-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Ecosystem/Projects/ProjectCard.tsx b/src/components/Ecosystem/Projects/ProjectCard.tsx index 95be16323..903c04a13 100644 --- a/src/components/Ecosystem/Projects/ProjectCard.tsx +++ b/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' }} > - + )} diff --git a/src/components/common/Footer/index.tsx b/src/components/common/Footer/index.tsx index 992a4a29c..4df89eb1a 100644 --- a/src/components/common/Footer/index.tsx +++ b/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 ( + + + + ) +} + const Footer = () => { const { openBanner } = useCookieBannerContext() @@ -180,42 +202,12 @@ const Footer = () => {
- - - - - - - - - - - - + {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)}
diff --git a/src/components/common/Footer/styles.module.css b/src/components/common/Footer/styles.module.css index bfb65d470..f0b1b0672 100644 --- a/src/components/common/Footer/styles.module.css +++ b/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; diff --git a/src/config/constants.ts b/src/config/constants.ts index a81360e76..eae2f9dae 100644 --- a/src/config/constants.ts +++ b/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'