From c28cf7a4414814fb9f3a8f29db8a0b3af86de1e8 Mon Sep 17 00:00:00 2001
From: Fernando Lucchesi <fernando@lucalto.com>
Date: Fri, 29 Sep 2023 11:03:23 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Fix=20styles=20of=20links=20#191?=
 =?UTF-8?q?0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/components/src/Link/Link.tsx                             | 5 +++--
 web/pageComponents/shared/Hero/FiftyFiftyHero.tsx            | 1 -
 web/pageComponents/shared/siteMenu/MenuGroup.tsx             | 4 +++-
 web/pageComponents/shared/siteMenu/simple/SimpleSiteMenu.tsx | 5 ++++-
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/web/components/src/Link/Link.tsx b/web/components/src/Link/Link.tsx
index 9a122931d..6f3d14c59 100644
--- a/web/components/src/Link/Link.tsx
+++ b/web/components/src/Link/Link.tsx
@@ -10,10 +10,11 @@ import { default as NextLink } from 'next/link'
 
 const { outline } = Tokens
 
-export const BaseLink = styled(NextLink)`
+export const BaseLink = styled(NextLink)<{ $textDecoration?: string }>`
   display: inline-flex;
   align-items: center;
   color: var(--slate-blue-95);
+  text-decoration: ${({ $textDecoration }) => $textDecoration || 'none'};
   &[data-focus-visible-added]:focus {
     ${outlineTemplate(outline)}
   }
@@ -144,9 +145,9 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
       style={
         {
           ...style,
-          textDecoration: underline ? 'underline' : 'none',
         } as CSSProperties
       }
+      $textDecoration={underline ? 'underline' : 'none'}
       {...rest}
     >
       {children} {type === 'externalUrl' ? <Icon data={external_link} size={16} /> : null}
diff --git a/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx b/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx
index 878695907..05ee3a89d 100644
--- a/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx
+++ b/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx
@@ -5,7 +5,6 @@ import TitleText from '../portableText/TitleText'
 import type { LinkData, HeroType } from '../../../types/types'
 import { BackgroundContainer, Link, Text } from '@components'
 import { getUrlFromAction } from '../../../common/helpers/getUrlFromAction'
-import { Flags } from '../../../common/helpers/datasetHelpers'
 import { getLocaleFromName } from '../../../lib/localization'
 
 const StyledHero = styled(BackgroundContainer)`
diff --git a/web/pageComponents/shared/siteMenu/MenuGroup.tsx b/web/pageComponents/shared/siteMenu/MenuGroup.tsx
index 418219b62..93f8c5b5c 100644
--- a/web/pageComponents/shared/siteMenu/MenuGroup.tsx
+++ b/web/pageComponents/shared/siteMenu/MenuGroup.tsx
@@ -110,7 +110,9 @@ export const MenuGroup = ({ topLevelItem, index }: MenuGroupType) => {
                       <SubMenuGroupList aria-label={groupItem.label || topLevelLink?.label} unstyled>
                         {groupItem.links?.map((link: MenuLinkData) => (
                           <StyledItem key={link.id}>
-                            <StyledSubMenuGroupLink href={getLink(link)}>{link.label}</StyledSubMenuGroupLink>
+                            <StyledSubMenuGroupLink underline={false} href={getLink(link)}>
+                              {link.label}
+                            </StyledSubMenuGroupLink>
                           </StyledItem>
                         ))}
                       </SubMenuGroupList>
diff --git a/web/pageComponents/shared/siteMenu/simple/SimpleSiteMenu.tsx b/web/pageComponents/shared/siteMenu/simple/SimpleSiteMenu.tsx
index 4becff7d1..47a1e8b5b 100644
--- a/web/pageComponents/shared/siteMenu/simple/SimpleSiteMenu.tsx
+++ b/web/pageComponents/shared/siteMenu/simple/SimpleSiteMenu.tsx
@@ -90,7 +90,10 @@ const SimpleSiteMenu = ({ data, ...rest }: MenuProps) => {
                       }
                       return (
                         <li key={item.id}>
-                          <MenuLink href={(item.link && item.link.slug) || '/'}> {item.label} </MenuLink>
+                          <MenuLink variant="contentLink" href={(item.link && item.link.slug) || '/'}>
+                            {' '}
+                            {item.label}{' '}
+                          </MenuLink>
                         </li>
                       )
                     }