Fix styling of balance (#761)

CirclesUBI · Dec 19, 2023 · 177f2db · 177f2db
1 parent 01c2726
commit 177f2db
Showing 1 changed file with 12 additions and 6 deletions.
diff --git 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>