fix: fix tyling of links in VP delegation (#3251)

input-output-hk · Dec 4, 2024 · f7e8c5e · f7e8c5e
1 parent 8074836
commit f7e8c5e
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git a/source/renderer/app/components/voting/voting-governance/VotingPowerDelegation.scss b/source/renderer/app/components/voting/voting-governance/VotingPowerDelegation.scss
@@ -16,6 +16,16 @@
   text-transform: uppercase;
 }
 
+span.link {
+  font-size: inherit;
+  line-height: inherit;
+  opacity: 0.7;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
 .info {
   @extend %regularText;
   p {

diff --git a/source/renderer/app/components/voting/voting-governance/VotingPowerDelegation.tsx b/source/renderer/app/components/voting/voting-governance/VotingPowerDelegation.tsx
@@ -3,6 +3,7 @@ import { observer } from 'mobx-react';
 import { injectIntl, FormattedMessage } from 'react-intl';
 import { Input } from 'react-polymorph/lib/components/Input';
 import { Button } from 'react-polymorph/lib/components/Button';
+import { Link } from 'react-polymorph/lib/components/Link';
 
 import BigNumber from 'bignumber.js';
 import { Cardano } from '@cardano-sdk/core';
@@ -182,17 +183,17 @@ function VotingPowerDelegation({
                 {...messages.paragraph1}
                 values={{
                   Link: (
-                    <a
+                    <Link
+                      className={styles.link}
                       href={intl.formatMessage(messages.paragraph1LinkUrl)}
+                      label={intl.formatMessage(messages.paragraph1LinkText)}
                       onClick={(event) =>
                         onExternalLinkClick(
                           intl.formatMessage(messages.paragraph1LinkUrl),
                           event
                         )
                       }
-                    >
-                      {intl.formatMessage(messages.paragraph1LinkText)}
-                    </a>
+                    />
                   ),
                 }}
               />
@@ -258,7 +259,11 @@ function VotingPowerDelegation({
                     : messages.drepInputLabel)}
                   values={{
                     drepDirectoryLink: (
-                      <a
+                      <Link
+                        className={styles.link}
+                        label={intl.formatMessage(
+                          messages.drepInputLabelLinkText
+                        )}
                         href="#"
                         onClick={(event) =>
                           onExternalLinkClick(
@@ -270,9 +275,7 @@ function VotingPowerDelegation({
                             event
                           )
                         }
-                      >
-                        {intl.formatMessage(messages.drepInputLabelLinkText)}
-                      </a>
+                      />
                     ),
                   }}
                 />