From cdab60069c77fe702e8b7e8b7ce2838fc4770498 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Oliveira?= <josepfo.w@gmail.com>
Date: Thu, 17 Jun 2021 17:54:42 +0100
Subject: [PATCH] fix: design fixes on notifications screen

---
 .../src/components/inputs/cashbox/Cashbox.js  |  2 +-
 .../inputs/cashbox/Cashbox.styles.js          |  8 +-
 .../sections/FiatBalanceAlerts.js             | 75 ++++++++++---------
 .../sections/FiatBalanceOverrides.js          |  4 +-
 .../src/pages/Notifications/sections/Setup.js |  6 +-
 5 files changed, 50 insertions(+), 45 deletions(-)

diff --git a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.js b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.js
index 90630dc3..294c355e 100644
--- a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.js
+++ b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.js
@@ -21,7 +21,7 @@ const Cashbox = ({
   labelClassName,
   inFiatBalanceAlerts
 }) => {
-  const classes = cashboxClasses({ percent, cashOut })
+  const classes = cashboxClasses({ percent, cashOut, inFiatBalanceAlerts })
   const threshold = 51
 
   const showCashBox = {
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 e239489b..f14f711e 100644
--- a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js
+++ b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js
@@ -11,8 +11,12 @@ const colors = {
   }
 }
 
-const colorPicker = ({ percent, cashOut }) =>
-  colors[cashOut ? 'cashOut' : 'cashIn'][percent >= 50 ? 'full' : 'empty']
+const colorPicker = ({ percent, cashOut, inFiatBalanceAlerts }) => {
+  if (inFiatBalanceAlerts) return colors[cashOut ? 'cashOut' : 'cashIn'].full
+  return colors[cashOut ? 'cashOut' : 'cashIn'][
+    percent >= 50 ? 'full' : 'empty'
+  ]
+}
 
 const cashboxStyles = {
   cashbox: {
diff --git a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.js b/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.js
index 4cbd07bf..b6f55165 100644
--- a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.js
+++ b/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.js
@@ -42,6 +42,9 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
       .nullable()
   })
 
+  const getPercentage = fillingPercentage =>
+    fillingPercentage ?? data?.fillingPercentageCassette1
+
   return (
     <Formik
       validateOnBlur={false}
@@ -58,29 +61,51 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
       onReset={() => {
         setEditing(NAME, false)
       }}>
-      <Form className={classes.form}>
-        <PromptWhenDirty />
-        <Header
-          title="Cash out (Empty)"
-          editing={editing}
-          disabled={isDisabled(NAME)}
-          setEditing={it => setEditing(NAME, it)}
-        />
-        <div className={classes.wrapper}>
-          <div className={classes.first}>
+      {({ values }) => (
+        <Form className={classes.form}>
+          <PromptWhenDirty />
+          <Header
+            title="Cash out (Empty)"
+            editing={editing}
+            disabled={isDisabled(NAME)}
+            setEditing={it => setEditing(NAME, it)}
+          />
+          <div className={classes.wrapper}>
+            <div className={classes.first}>
+              <div className={classes.row}>
+                <Cashbox
+                  labelClassName={classes.cashboxLabel}
+                  emptyPartClassName={classes.cashboxEmptyPart}
+                  percent={getPercentage(values.fillingPercentageCassette1)}
+                  inFiatBalanceAlerts={true}
+                  cashOut
+                />
+                <div className={classes.col2}>
+                  <TL2 className={classes.title}>Cassette 1 (Top)</TL2>
+                  <EditableNumber
+                    label="Alert me under"
+                    name="fillingPercentageCassette1"
+                    editing={editing}
+                    displayValue={x => (x === '' ? '-' : x)}
+                    decoration="%"
+                    width={fieldWidth}
+                  />
+                </div>
+              </div>
+            </div>
             <div className={classes.row}>
               <Cashbox
                 labelClassName={classes.cashboxLabel}
                 emptyPartClassName={classes.cashboxEmptyPart}
-                percent={data?.fillingPercentageCassette1}
+                percent={getPercentage(values.fillingPercentageCassette2)}
                 inFiatBalanceAlerts={true}
                 cashOut
               />
               <div className={classes.col2}>
-                <TL2 className={classes.title}>Cassette 1 (Top)</TL2>
+                <TL2 className={classes.title}>Cassette 2 (Bottom)</TL2>
                 <EditableNumber
                   label="Alert me under"
-                  name="fillingPercentageCassette1"
+                  name="fillingPercentageCassette2"
                   editing={editing}
                   displayValue={x => (x === '' ? '-' : x)}
                   decoration="%"
@@ -89,28 +114,8 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
               </div>
             </div>
           </div>
-          <div className={classes.row}>
-            <Cashbox
-              labelClassName={classes.cashboxLabel}
-              emptyPartClassName={classes.cashboxEmptyPart}
-              percent={data?.fillingPercentageCassette2}
-              inFiatBalanceAlerts={true}
-              cashOut
-            />
-            <div className={classes.col2}>
-              <TL2 className={classes.title}>Cassette 2 (Bottom)</TL2>
-              <EditableNumber
-                label="Alert me under"
-                name="fillingPercentageCassette2"
-                editing={editing}
-                displayValue={x => (x === '' ? '-' : x)}
-                decoration="%"
-                width={fieldWidth}
-              />
-            </div>
-          </div>
-        </div>
-      </Form>
+        </Form>
+      )}
     </Formik>
   )
 }
diff --git a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceOverrides.js b/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceOverrides.js
index 94d3eeff..7bd8a3c0 100644
--- a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceOverrides.js
+++ b/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceOverrides.js
@@ -96,7 +96,7 @@ const FiatBalanceOverrides = ({ section }) => {
     },
     {
       name: CASSETTE_1_KEY,
-      display: 'Cash-out 1',
+      header: 'Cash-out 1',
       width: 155,
       textAlign: 'right',
       doubleHeader: 'Cash-out (Cassette Empty)',
@@ -109,7 +109,7 @@ const FiatBalanceOverrides = ({ section }) => {
     },
     {
       name: CASSETTE_2_KEY,
-      display: 'Cash-out 2',
+      header: 'Cash-out 2',
       width: 155,
       textAlign: 'right',
       doubleHeader: 'Cash-out (Cassette Empty)',
diff --git a/new-lamassu-admin/src/pages/Notifications/sections/Setup.js b/new-lamassu-admin/src/pages/Notifications/sections/Setup.js
index be1d1c78..3ae0fbeb 100644
--- a/new-lamassu-admin/src/pages/Notifications/sections/Setup.js
+++ b/new-lamassu-admin/src/pages/Notifications/sections/Setup.js
@@ -24,7 +24,6 @@ const sizes = {
   errors: 142,
   active: 263
 }
-const width = R.sum(R.values(sizes)) + channelSize
 
 const Row = ({ namespace, forceDisable }) => {
   const { data: rawData, save: rawSave } = useContext(NotificationsCtx)
@@ -64,9 +63,6 @@ const Row = ({ namespace, forceDisable }) => {
 }
 
 const useStyles = makeStyles({
-  mainTable: {
-    width
-  },
   wizardTable: {
     width: 930
   }
@@ -75,7 +71,7 @@ const Setup = ({ wizard, forceDisable }) => {
   const widthAdjust = wizard ? 20 : 0
   const classes = useStyles()
   return (
-    <Table className={wizard ? classes.wizardTable : classes.mainTable}>
+    <Table className={wizard ? classes.wizardTable : null}>
       <THead>
         <Th width={channelSize - widthAdjust}>Channel</Th>
         {Object.keys(sizes).map(it => (