From f7e8c5e28a7db3f2f284c7b84b4ab70fc0839f2c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Szymon=20Mas=C5=82owski?= <szymon.maslowski@iohk.io>
Date: Wed, 4 Dec 2024 09:06:41 +0100
Subject: [PATCH] fix: fix tyling of links in VP delegation (#3251)

---
 .../VotingPowerDelegation.scss                | 10 ++++++++++
 .../VotingPowerDelegation.tsx                 | 19 +++++++++++--------
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/source/renderer/app/components/voting/voting-governance/VotingPowerDelegation.scss b/source/renderer/app/components/voting/voting-governance/VotingPowerDelegation.scss
index 0ca5e2cb17..b4e59ba4b7 100644
--- 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
index f69879a538..be81baca39 100644
--- 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>
+                      />
                     ),
                   }}
                 />