From 3435e244d5119e3cdf35c3009079c314c8fb7076 Mon Sep 17 00:00:00 2001
From: marc2332 <mespinsanz@gmail.com>
Date: Thu, 9 Nov 2023 08:52:04 +0100
Subject: [PATCH] fix: Mana Calculator small improvements

---
 .../ManaCalculator/components/BlocksAllowance.tsx        | 3 +--
 .../ManaCalculator/components/ManaAcculation.tsx         | 2 +-
 .../ManaCalculator/components/ValidatorCard.tsx          | 2 +-
 .../ManaCalculator/hooks/useResultsWithUnit.ts           | 2 +-
 src/components/ManaCalculator/styles.css                 | 9 +++++++++
 5 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/ManaCalculator/components/BlocksAllowance.tsx b/src/components/ManaCalculator/components/BlocksAllowance.tsx
index 16b69c742a2..3eb412d3566 100644
--- a/src/components/ManaCalculator/components/BlocksAllowance.tsx
+++ b/src/components/ManaCalculator/components/BlocksAllowance.tsx
@@ -39,12 +39,11 @@ export function BlocksAllowance({
           <YAxis
             width={100}
             label={{ value: 'Blocks', angle: -90, position: 'insideLeft' }}
-            color='rgb(169, 184, 214)'
             unit={unitString}
           />
           <CartesianGrid
             strokeDasharray='3 3'
-            stroke='rgb(255, 255, 255, 0.15)'
+            stroke='rgb(150, 150, 150, 0.3)'
           />
           <Tooltip content={chartTooltip('Epoch', 'Blocks', unit)} />
           <Area
diff --git a/src/components/ManaCalculator/components/ManaAcculation.tsx b/src/components/ManaCalculator/components/ManaAcculation.tsx
index 7b1faa850eb..8935ae5dec4 100644
--- a/src/components/ManaCalculator/components/ManaAcculation.tsx
+++ b/src/components/ManaCalculator/components/ManaAcculation.tsx
@@ -43,7 +43,7 @@ export function ManaAccumulation({
           />
           <CartesianGrid
             strokeDasharray='3 3'
-            stroke='rgb(255, 255, 255, 0.15)'
+            stroke='rgb(150, 150, 150, 0.3)'
           />
           <Tooltip content={chartTooltip('Epoch', 'Mana', unit)} />
           <Area
diff --git a/src/components/ManaCalculator/components/ValidatorCard.tsx b/src/components/ManaCalculator/components/ValidatorCard.tsx
index f2826461bea..517a5293a46 100644
--- a/src/components/ManaCalculator/components/ValidatorCard.tsx
+++ b/src/components/ManaCalculator/components/ValidatorCard.tsx
@@ -47,7 +47,7 @@ export function ValidatorCard({
         onChange={(e) => handleFCChange(Number(e.target.value), id)}
       ></input>
       <button
-        className=' button button--remove'
+        className=' button button--remove mana-calculator__button mana-calculator__transparent-button'
         onClick={() => handleDelete(id)}
       >
         Remove
diff --git a/src/components/ManaCalculator/hooks/useResultsWithUnit.ts b/src/components/ManaCalculator/hooks/useResultsWithUnit.ts
index 8e170bf2a0a..3f437dbd262 100644
--- a/src/components/ManaCalculator/hooks/useResultsWithUnit.ts
+++ b/src/components/ManaCalculator/hooks/useResultsWithUnit.ts
@@ -30,7 +30,7 @@ const getUnit = (value: number): Unit => {
   let bestUnits: Unit = Unit.default;
 
   const checkLength = Math.abs(value).toFixed(0).replace('.', '').length;
-  console.log(checkLength, value);
+
   if (checkLength > UNIT_MAP.M.dp) {
     bestUnits = Unit.M;
   } else if (checkLength > UNIT_MAP.K.dp) {
diff --git a/src/components/ManaCalculator/styles.css b/src/components/ManaCalculator/styles.css
index e95fa997a03..ed27fcb926b 100644
--- a/src/components/ManaCalculator/styles.css
+++ b/src/components/ManaCalculator/styles.css
@@ -83,10 +83,19 @@
   padding: 10px;
 }
 
+.mana-calculator__transparent-button {
+  background-color: transparent !important;
+}
+
 .mana-calculator__button {
   background-color: var(--ifm-color-emphasis-100);
   margin: 0px;
   margin-top: 1rem;
+  color: var(--ifm-font-color-base);
+}
+
+.mana-calculator__button:hover {
+  color: var(--ifm-font-color-base);
 }
 
 .mana-calculator__tooltip > p {