fix: fix token selector hover ui for token explorer link

rango-exchange · Apr 20, 2024 · ede0fac · ede0fac
1 parent 10713a2
commit ede0fac
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/widget/embedded/src/components/TokenList/TokenList.styles.ts b/widget/embedded/src/components/TokenList/TokenList.styles.ts
@@ -30,6 +30,7 @@ export const tokenTitleStyles = css({
 export const tokenAddressStyles = css({
   transform: 'translateY(12px)',
   visibility: 'hidden',
+  display: 'flex',
   '& a': {
     display: 'flex',
     justifyContent: 'center',
@@ -157,3 +158,9 @@ export const TokenBalance = styled(Typography, {
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
 });
+
+export const StyledLink = styled('a', {
+  '& svg:hover': {
+    color: '$colors$info',
+  },
+});
diff --git a/widget/embedded/src/components/TokenList/TokenList.tsx b/widget/embedded/src/components/TokenList/TokenList.tsx
@@ -31,6 +31,7 @@ import {
   ImageSection,
   List,
   Pin,
+  StyledLink,
   Tag,
   TagTitle,
   Title,
@@ -72,17 +73,17 @@ const renderDesc = (props: RenderDescProps) => {
           className={`${tokenAddressStyles()} ${
             !name && tokenWithoutNameStyles()
           }`}>
-          <a
+          {length > 10
+            ? `${address.slice(0, 5)}...${address.slice(length - 6, length)}`
+            : address}{' '}
+          <Divider size={4} direction="horizontal" />
+          <StyledLink
             href={url}
             target="_blank"
             rel="nofollow noreferrer"
             onClick={(e) => e.stopPropagation()}>
-            {length > 10
-              ? `${address.slice(0, 5)}...${address.slice(length - 6, length)}`
-              : address}{' '}
-            <Divider size={4} direction="horizontal" />
-            <ExternalLinkIcon color="gray" size={12} />
-          </a>
+            <ExternalLinkIcon size={12} />
+          </StyledLink>
         </div>
       )}
     </div>
@@ -164,6 +165,7 @@ export function TokenList(props: PropTypes) {
                 style={{
                   width: '100%',
                   overflow: 'hidden',
+                  height: '60px',
                 }}
                 tab-index={index}
                 key={`${token.symbol}${token.address}`}