fix: notification fiat balance alert styling

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}>

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

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}`
   }
 }