lamassu/lamassu-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: use a specific prop for each different cashbox styling

Browse source
This commit is contained in:
José Oliveira 2021-06-21 18:55:36 +01:00 • committed by Josh Harvey
parent 410bc25afb
commit bb5f1fb1d3
3 changed files with 21 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -19,25 +19,32 @@ const Cashbox = ({
className,
emptyPartClassName,
labelClassName,
inFiatBalanceAlerts
applyColorVariant,
applyFiatBalanceAlertsStyling,
removeInnerPercentage
}) => {
const classes = cashboxClasses({ percent, cashOut, inFiatBalanceAlerts })
console.log(
applyColorVariant,
applyFiatBalanceAlertsStyling,
removeInnerPercentage
)
const classes = cashboxClasses({ percent, cashOut, applyColorVariant })
const threshold = 51
const showCashBox = {
[classes.fiatBalanceAlertCashbox]: inFiatBalanceAlerts,
[classes.cashbox]: !inFiatBalanceAlerts
[classes.fiatBalanceAlertCashbox]: applyFiatBalanceAlertsStyling,
[classes.cashbox]: !applyFiatBalanceAlertsStyling
}
return (
<div className={classnames(className, showCashBox)}>
<div className={classnames(emptyPartClassName, classes.emptyPart)}>
{!inFiatBalanceAlerts && percent <= threshold && (
{!removeInnerPercentage && percent <= threshold && (
<Label2 className={labelClassName}>{percent.toFixed(0)}%</Label2>
)}
</div>
<div className={classes.fullPart}>
{!inFiatBalanceAlerts && percent > threshold && (
{!removeInnerPercentage && percent > threshold && (
<Label2 className={labelClassName}>{percent.toFixed(0)}%</Label2>
)}
</div>

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

@ -11,8 +11,8 @@ const colors = {
}
}
const colorPicker = ({ percent, cashOut, inFiatBalanceAlerts }) => {
if (inFiatBalanceAlerts) return colors[cashOut ? 'cashOut' : 'cashIn'].full
const colorPicker = ({ percent, cashOut, applyColorVariant }) => {
if (applyColorVariant) return colors[cashOut ? 'cashOut' : 'cashIn'].full
return colors[cashOut ? 'cashOut' : 'cashIn'][
percent >= 50 ? 'full' : 'empty'
]

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

@ -77,7 +77,9 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
values.fillingPercentageCassette1 ??
data?.fillingPercentageCassette1
}
inFiatBalanceAlerts={true}
applyColorVariant
applyFiatBalanceAlertsStyling
removeInnerPercentage
cashOut
/>
<div className={classes.col2}>
@ -101,7 +103,9 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
values.fillingPercentageCassette2 ??
data?.fillingPercentageCassette2
}
inFiatBalanceAlerts={true}
applyColorVariant
applyFiatBalanceAlertsStyling
removeInnerPercentage
cashOut
/>
<div className={classes.col2}>