fix: move number alongside bar on empty part until 51%, and them move it

to the filled part

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

@@ -15,13 +15,15 @@ const gridClasses = makeStyles(gridStyles)
 
 const Cashbox = ({ percent = 0, cashOut = false, className }) => {
   const classes = cashboxClasses({ percent, cashOut })
+  const threshold = 51
+
   return (
     <div className={classnames(className, classes.cashbox)}>
       <div className={classes.emptyPart}>
-        {percent <= 50 && <Label2>{percent.toFixed(0)}%</Label2>}
+        {percent <= threshold && <Label2>{percent.toFixed(0)}%</Label2>}
       </div>
       <div className={classes.fullPart}>
-        {percent > 50 && <Label2>{percent.toFixed(0)}%</Label2>}
+        {percent > threshold && <Label2>{percent.toFixed(0)}%</Label2>}
       </div>
     </div>
   )

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

@@ -27,14 +27,18 @@ const cashboxStyles = {
   emptyPart: {
     backgroundColor: 'white',
     height: ({ percent }) => `${100 - percent}%`,
+    position: 'relative',
     '& > p': {
       color: colorPicker,
-      display: 'inline-block'
+      display: 'inline-block',
+      position: 'absolute',
+      margin: 0,
+      bottom: 0,
+      right: 0
     }
   },
   fullPart: {
     backgroundColor: colorPicker,
-    height: ({ percent }) => `${percent}%`,
     '& > p': {
       color: 'white',
       display: 'inline'