From b93ab6cc480734b2c6ad91483b29623dd1392588 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fede=20=C3=81lvarez?= <fedealvarezcampos@gmail.com>
Date: Wed, 29 Jun 2022 10:33:16 +0200
Subject: [PATCH] Footer CMS fixes

---
 .../common/footer/footer.module.scss          |  9 +++
 src/components/common/footer/index.tsx        | 75 +++++++++++--------
 2 files changed, 53 insertions(+), 31 deletions(-)

diff --git a/src/components/common/footer/footer.module.scss b/src/components/common/footer/footer.module.scss
index fedfc46..b1f213b 100644
--- a/src/components/common/footer/footer.module.scss
+++ b/src/components/common/footer/footer.module.scss
@@ -215,6 +215,15 @@
     padding: 0;
     list-style-type: none;
 
+    span {
+      text-transform: none;
+      line-height: 1;
+      letter-spacing: tovw(-0.5px, 'default', -0.5px);
+      font-family: var(--font-tt-hoves);
+      font-size: tovw(16px, 'default', 14px);
+      font-weight: 500;
+    }
+
     > li {
       @include respond-to('mobile') {
         margin-bottom: tovw(14px, 'default', 14px);
diff --git a/src/components/common/footer/index.tsx b/src/components/common/footer/index.tsx
index 5ac9473..82d1182 100644
--- a/src/components/common/footer/index.tsx
+++ b/src/components/common/footer/index.tsx
@@ -207,9 +207,12 @@ export const Footer = ({ data }: Props) => {
                 {data.developerLinks.map((link) => {
                   return (
                     <li key={link.title}>
-                      <Link href={link.href} variant="nav">
-                        {link.title}
-                      </Link>
+                      {link.href && (
+                        <Link href={link.href} variant="nav">
+                          {link.title}
+                        </Link>
+                      )}
+                      {!link.href && <span>{link.title}</span>}
                     </li>
                   )
                 })}
@@ -218,9 +221,12 @@ export const Footer = ({ data }: Props) => {
                 {data.productsLinks.map((link) => {
                   return (
                     <li key={link.title}>
-                      <Link href={link.href} variant="nav">
-                        {link.title}
-                      </Link>
+                      {link.href && (
+                        <Link href={link.href} variant="nav">
+                          {link.title}
+                        </Link>
+                      )}
+                      {!link.href && <span>{link.title}</span>}
                     </li>
                   )
                 })}
@@ -229,9 +235,12 @@ export const Footer = ({ data }: Props) => {
                 {data.aboutLinks.map((link) => {
                   return (
                     <li key={link.title}>
-                      <Link href={link.href} variant="nav">
-                        {link.title}
-                      </Link>
+                      {link.href && (
+                        <Link href={link.href} variant="nav">
+                          {link.title}
+                        </Link>
+                      )}
+                      {!link.href && <span>{link.title}</span>}
                     </li>
                   )
                 })}
@@ -246,17 +255,19 @@ export const Footer = ({ data }: Props) => {
                   {data?.connectLinks.map((link, index) => {
                     return (
                       <div key={`${link.title}-${index}`}>
-                        <Link href={link.href} variant="unstyled">
-                          <span className="sr-only">{link.title}</span>
-                          {link?.title === 'Twitter' && <Twitter />}
-                          {link?.title === 'Discord' && <Discord />}
-                          {link?.title === 'Discourse' && <Discourse />}
-                          {link?.title === 'Instagram' && <Instagram />}
-                          {link?.title === 'Facebook' && <Facebook />}
-                          {link?.title === 'Telegram' && <Telegram />}
-                          {link?.title === 'Linkedin' && <Linkedin />}
-                          {link?.title === 'Reddit' && <Reddit />}
-                        </Link>
+                        {link.href && (
+                          <Link href={link.href} variant="unstyled">
+                            <span className="sr-only">{link.title}</span>
+                            {link?.title === 'Twitter' && <Twitter />}
+                            {link?.title === 'Discord' && <Discord />}
+                            {link?.title === 'Discourse' && <Discourse />}
+                            {link?.title === 'Instagram' && <Instagram />}
+                            {link?.title === 'Facebook' && <Facebook />}
+                            {link?.title === 'Telegram' && <Telegram />}
+                            {link?.title === 'Linkedin' && <Linkedin />}
+                            {link?.title === 'Reddit' && <Reddit />}
+                          </Link>
+                        )}
                       </div>
                     )
                   })}
@@ -271,17 +282,19 @@ export const Footer = ({ data }: Props) => {
                   {data?.connectLinks.map((link, index) => {
                     return (
                       <div key={`${link.title}-${index}`}>
-                        <Link href={link.href} variant="unstyled">
-                          <span className="sr-only">{link.title}</span>
-                          {link?.title === 'Twitter' && <Twitter />}
-                          {link?.title === 'Discord' && <Discord />}
-                          {link?.title === 'Discourse' && <Discourse />}
-                          {link?.title === 'Instagram' && <Instagram />}
-                          {link?.title === 'Facebook' && <Facebook />}
-                          {link?.title === 'Telegram' && <Telegram />}
-                          {link?.title === 'Linkedin' && <Linkedin />}
-                          {link?.title === 'Reddit' && <Reddit />}
-                        </Link>
+                        {link.href && (
+                          <Link href={link.href} variant="unstyled">
+                            <span className="sr-only">{link.title}</span>
+                            {link?.title === 'Twitter' && <Twitter />}
+                            {link?.title === 'Discord' && <Discord />}
+                            {link?.title === 'Discourse' && <Discourse />}
+                            {link?.title === 'Instagram' && <Instagram />}
+                            {link?.title === 'Facebook' && <Facebook />}
+                            {link?.title === 'Telegram' && <Telegram />}
+                            {link?.title === 'Linkedin' && <Linkedin />}
+                            {link?.title === 'Reddit' && <Reddit />}
+                          </Link>
+                        )}
                       </div>
                     )
                   })}