refactor: improve styling code readability

new-lamassu-admin/src/components/inputs/cashbox/Cashbox.js

@@ -24,13 +24,13 @@ const Cashbox = ({
   const classes = cashboxClasses({ percent, cashOut })
   const threshold = 51
 
+  const showCashBox = {
+    [classes.fiatBalanceAlertCashbox]: inFiatBalanceAlerts,
+    [classes.cashbox]: !inFiatBalanceAlerts
+  }
+
   return (
-    <div
+    <div className={classnames(className, showCashBox)}>
-      className={
-        inFiatBalanceAlerts
-          ? classnames(className, classes.fiatBalanceAlertCashbox)
-          : classnames(className, classes.cashbox)
-      }>
       <div className={classnames(emptyPartClassName, classes.emptyPart)}>
         {!inFiatBalanceAlerts && percent <= threshold && (
           <Label2 className={labelClassName}>{percent.toFixed(0)}%</Label2>

new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.js

@@ -1,5 +1,6 @@
 import { makeStyles } from '@material-ui/core'
 import { Form, Formik } from 'formik'
+import * as R from 'ramda'
 import React, { useContext } from 'react'
 import * as Yup from 'yup'
 
@@ -47,8 +48,10 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
       validateOnChange={false}
       enableReinitialize
       initialValues={{
-        fillingPercentageCassette1: data?.fillingPercentageCassette1 ?? '',
+        fillingPercentageCassette1:
-        fillingPercentageCassette2: data?.fillingPercentageCassette2 ?? ''
+          R.path(['fillingPercentageCassette1'])(data) ?? '',
+        fillingPercentageCassette2:
+          R.path(['fillingPercentageCassette2'])(data) ?? ''
       }}
       validationSchema={schema}
       onSubmit={it => save(section, schema.cast(it))}