From 4f79d01fcdee3a4d928b82f8d549258cba5fae2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Louise=20Linn=C3=A9?= <linne.louise@gmail.com>
Date: Thu, 23 Nov 2023 11:51:20 +0100
Subject: [PATCH] Fix styling of balance

---
 src/components/BalanceDisplay.js | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/BalanceDisplay.js b/src/components/BalanceDisplay.js
index 537387a3..a7b10f57 100644
--- a/src/components/BalanceDisplay.js
+++ b/src/components/BalanceDisplay.js
@@ -32,10 +32,14 @@ const useStyles = makeStyles((theme) => ({
   },
   balanceHover: {
     '&:hover': {
-      textDecoration: 'underline',
+      borderBottom: '2.5px solid currentColor',
       textDecorationColor: theme.custom.colors.purple100,
       textShadow: theme.custom.shadows.grey,
     },
+    color: theme.custom.colors.purple100,
+  },
+  balanceStatic: {
+    color: theme.custom.colors.purple100,
   },
 }));
 
@@ -66,11 +70,13 @@ const BalanceDisplay = ({ underlineAtHover = true }) => {
         {isLoading ? (
           <CircularProgress />
         ) : (
-          <Typography
-            className={underlineAtHover ? classes.balanceHover : ''}
-            variant="balance1"
-          >
-            <Link to={TOKENS_PATH}>
+          <Typography variant="balance1">
+            <Link
+              className={
+                underlineAtHover ? classes.balanceHover : classes.balanceStatic
+              }
+              to={TOKENS_PATH}
+            >
               <IconCircles className={classes.balanceIcon} />
               {tokenBalance}
             </Link>