From 8f1f321758feccc59fd4e44478ecccb89c32b040 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Salgado?= <sergiodiassalgado@gmail.com>
Date: Mon, 15 Feb 2021 18:56:39 +0000
Subject: [PATCH] fix: notification fiat balance alert styling

---
 .../src/components/inputs/cashbox/Cashbox.js       |  9 +++++++--
 .../Notifications/sections/FiatBalanceAlerts.js    | 14 ++++++++++++--
 .../sections/FiatBalanceAlerts.styles.js           | 11 +++++++++++
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.js b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.js
index 9cbefaf9..5902c141 100644
--- a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.js
+++ b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.js
@@ -13,13 +13,18 @@ import { cashboxStyles, gridStyles } from './Cashbox.styles'
 const cashboxClasses = makeStyles(cashboxStyles)
 const gridClasses = makeStyles(gridStyles)
 
-const Cashbox = ({ percent = 0, cashOut = false, className }) => {
+const Cashbox = ({
+  percent = 0,
+  cashOut = false,
+  className,
+  emptyPartClassName
+}) => {
   const classes = cashboxClasses({ percent, cashOut })
   const threshold = 51
 
   return (
     <div className={classnames(className, classes.cashbox)}>
-      <div className={classes.emptyPart}>
+      <div className={classnames(emptyPartClassName, classes.emptyPart)}>
         {percent <= threshold && <Label2>{percent.toFixed(0)}%</Label2>}
       </div>
       <div className={classes.fullPart}>
diff --git a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.js b/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.js
index 9fd38e51..d83a260f 100644
--- a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.js
+++ b/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.js
@@ -76,7 +76,12 @@ const FiatBalance = ({
         <div className={classes.wrapper}>
           <div className={classes.first}>
             <div className={classes.row}>
-              <Cashbox percent={fiatBalanceCassette1Percent} cashOut />
+              <Cashbox
+                className={classes.cashbox}
+                emptyPartClassName={classes.cashboxEmptyPart}
+                percent={fiatBalanceCassette1Percent}
+                cashOut
+              />
               <div className={classes.col2}>
                 <TL2 className={classes.title}>Cassette 1 (Top)</TL2>
                 <EditableNumber
@@ -91,7 +96,12 @@ const FiatBalance = ({
             </div>
           </div>
           <div className={classes.row}>
-            <Cashbox percent={fiatBalanceCassette2Percent} cashOut />
+            <Cashbox
+              className={classes.cashbox}
+              emptyPartClassName={classes.cashboxEmptyPart}
+              percent={fiatBalanceCassette2Percent}
+              cashOut
+            />
             <div className={classes.col2}>
               <TL2 className={classes.title}>Cassette 2 (Bottom)</TL2>
               <EditableNumber
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 e655567e..f6f39d99 100644
--- a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.styles.js
+++ b/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.styles.js
@@ -1,3 +1,5 @@
+import { backgroundColor } from 'src/styling/variables'
+
 export default {
   wrapper: {
     display: 'flex'
@@ -21,5 +23,14 @@ export default {
   },
   col2: {
     width: 136
+  },
+  cashbox: {
+    '& p': {
+      marginRight: 4,
+      fontSize: 20
+    }
+  },
+  cashboxEmptyPart: {
+    backgroundColor: `${backgroundColor}`
   }
 }