Merge pull request #1631 from kleros/fix/link-behaviour-in-dispute-card

fix(web): link-behaviour-in-dispute-card

Author: alcercu

web/src/components/Field.tsx

@@ -23,12 +23,6 @@ const FieldContainer = styled.div<FieldContainerProps>`
     width: 14px;
   }
 
-  .link {
-    color: ${({ theme }) => theme.primaryBlue};
-    :hover {
-      cursor: pointer;
-    }
-  }
   ${({ isList }) =>
     isList &&
     css`
@@ -62,6 +56,12 @@ const FieldContainer = styled.div<FieldContainerProps>`
     `};
 `;
 
+const LinkContainer = styled.div``;
+
+const StyledLink = styled(Link)`
+  color: ${({ theme }) => theme.primaryBlue};
+`;
+
 type FieldContainerProps = {
   width?: string;
   isList?: boolean;
@@ -97,15 +97,16 @@ const Field: React.FC<IField> = ({
       <Icon />
       {(!displayAsList || isOverview || isJurorBalance) && <label>{name}:</label>}
       {link ? (
-        <Link
-          className="link value"
-          to={link}
-          onClick={(event) => {
-            event.stopPropagation();
-          }}
-        >
-          {value}
-        </Link>
+        <LinkContainer className="value">
+          <StyledLink
+            to={link}
+            onClick={(event) => {
+              event.stopPropagation();
+            }}
+          >
+            {value}
+          </StyledLink>
+        </LinkContainer>
       ) : (
         <label className="value">{value}</label>
       )}