From f10b49f31c689a2ce5d8fbf1ecb5aad541452b88 Mon Sep 17 00:00:00 2001
From: Liordino Neto <liordinoneto@gmail.com>
Date: Tue, 3 Nov 2020 20:31:11 -0300
Subject: [PATCH] fix: move number alongside bar on empty part until 51%, and
 them move it to the filled part

---
 .../src/components/inputs/cashbox/Cashbox.js              | 6 ++++--
 .../src/components/inputs/cashbox/Cashbox.styles.js       | 8 ++++++--
 2 files changed, 10 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 38dd9a2c..5305fd7d 100644
--- a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.js
+++ b/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>
   )
diff --git a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js
index c81ee693..234cc598 100644
--- a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js
+++ b/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'