From 7be120ef3adc23e4b51802262fae69cb16e8ad8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Salgado?= <sergiodiassalgado@gmail.com>
Date: Wed, 17 Feb 2021 17:46:17 +0000
Subject: [PATCH] fix: cashbox label styling

---
 .../src/components/inputs/cashbox/Cashbox.js          | 11 ++++++++---
 .../pages/Notifications/sections/FiatBalanceAlerts.js |  4 ++--
 .../sections/FiatBalanceAlerts.styles.js              |  8 +++-----
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.js b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.js
index 5902c141..3db0c862 100644
--- a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.js
+++ b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.js
@@ -17,7 +17,8 @@ const Cashbox = ({
   percent = 0,
   cashOut = false,
   className,
-  emptyPartClassName
+  emptyPartClassName,
+  labelClassName
 }) => {
   const classes = cashboxClasses({ percent, cashOut })
   const threshold = 51
@@ -25,10 +26,14 @@ const Cashbox = ({
   return (
     <div className={classnames(className, classes.cashbox)}>
       <div className={classnames(emptyPartClassName, classes.emptyPart)}>
-        {percent <= threshold && <Label2>{percent.toFixed(0)}%</Label2>}
+        {percent <= threshold && (
+          <Label2 className={labelClassName}>{percent.toFixed(0)}%</Label2>
+        )}
       </div>
       <div className={classes.fullPart}>
-        {percent > threshold && <Label2>{percent.toFixed(0)}%</Label2>}
+        {percent > threshold && (
+          <Label2 className={labelClassName}>{percent.toFixed(0)}%</Label2>
+        )}
       </div>
     </div>
   )
diff --git a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.js b/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.js
index d83a260f..23d5e1e6 100644
--- a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.js
+++ b/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.js
@@ -77,7 +77,7 @@ const FiatBalance = ({
           <div className={classes.first}>
             <div className={classes.row}>
               <Cashbox
-                className={classes.cashbox}
+                labelClassName={classes.cashboxLabel}
                 emptyPartClassName={classes.cashboxEmptyPart}
                 percent={fiatBalanceCassette1Percent}
                 cashOut
@@ -97,7 +97,7 @@ const FiatBalance = ({
           </div>
           <div className={classes.row}>
             <Cashbox
-              className={classes.cashbox}
+              labelClassName={classes.cashboxLabel}
               emptyPartClassName={classes.cashboxEmptyPart}
               percent={fiatBalanceCassette2Percent}
               cashOut
diff --git a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.styles.js b/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.styles.js
index f6f39d99..792c54c3 100644
--- a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.styles.js
+++ b/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.styles.js
@@ -24,11 +24,9 @@ export default {
   col2: {
     width: 136
   },
-  cashbox: {
-    '& p': {
-      marginRight: 4,
-      fontSize: 20
-    }
+  cashboxLabel: {
+    marginRight: 4,
+    fontSize: 20
   },
   cashboxEmptyPart: {
     backgroundColor: `${backgroundColor}`