feat: menu text underline style (#3662)

cowprotocol · Jan 16, 2024 · 25c7280 · 25c7280
1 parent 6b4aec9
commit 25c7280
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/apps/cowswap-frontend/src/modules/mainMenu/pure/MenuTree/index.tsx b/apps/cowswap-frontend/src/modules/mainMenu/pure/MenuTree/index.tsx
@@ -1,6 +1,5 @@
 import IMAGE_MOON from '@cowprotocol/assets/cow-swap/moon.svg'
 import IMAGE_SUN from '@cowprotocol/assets/cow-swap/sun.svg'
-import { ExternalLink as ExternalLinkComponent } from '@cowprotocol/ui'
 
 import SVG from 'react-inlinesvg'
 
@@ -23,7 +22,7 @@ import { parameterizeTradeRoute } from 'modules/trade/utils/parameterizeTradeRou
 
 import { RoutesValues } from 'common/constants/routes'
 
-import { MenuBadge } from './styled'
+import { MenuBadge, StyledExternalLink } from './styled'
 
 import { MAIN_MENU } from '../../constants/mainMenu'
 
@@ -69,11 +68,11 @@ function Link({ link, context }: InternalExternalLinkProps) {
 
   if (isExternal) {
     return (
-      <ExternalLinkComponent href={url} onClickOptional={handleMobileMenuOnClick}>
+      <StyledExternalLink href={url} onClickOptional={handleMobileMenuOnClick}>
         {menuImage}
-        {title}
+        <span>{title}</span>
         {badge && <MenuBadge>{badge}</MenuBadge>}
-      </ExternalLinkComponent>
+      </StyledExternalLink>
     )
   }
 

diff --git a/apps/cowswap-frontend/src/modules/mainMenu/pure/MenuTree/styled.ts b/apps/cowswap-frontend/src/modules/mainMenu/pure/MenuTree/styled.ts
@@ -1,4 +1,5 @@
 import { UI } from '@cowprotocol/ui'
+import { ExternalLink } from '@cowprotocol/ui'
 
 import styled from 'styled-components/macro'
 
@@ -17,4 +18,15 @@ export const MenuBadge = styled.div`
   letter-spacing: 0.2px;
   font-weight: 600;
   transition: color var(${UI.ANIMATION_DURATION}) ease-in-out;
+  text-decoration: none;
+`
+
+export const StyledExternalLink = styled(ExternalLink)`
+  &&:hover {
+    text-decoration: none;
+  }
+
+  &:hover > span {
+    text-decoration: underline;
+  }
 `
diff --git a/apps/cowswap-frontend/src/modules/trade/pure/UnlockWidgetScreen/styled.ts b/apps/cowswap-frontend/src/modules/trade/pure/UnlockWidgetScreen/styled.ts
@@ -69,6 +69,7 @@ export const List = styled.ul`
         border-radius: 10px;
         font-size: 9px;
         font-weight: bold;
+        text-decoration: none;
       }
     }
   }