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

fix: design fixes on notifications screen

Browse source
This commit is contained in:
José Oliveira 2021-06-17 17:54:42 +01:00 • committed by Josh Harvey
parent fc3ad8e421
commit cdab60069c
5 changed files with 50 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -21,7 +21,7 @@ const Cashbox = ({
labelClassName, labelClassName,
inFiatBalanceAlerts inFiatBalanceAlerts
}) => { }) => {
const classes = cashboxClasses({ percent, cashOut }) const classes = cashboxClasses({ percent, cashOut, inFiatBalanceAlerts })
const threshold = 51 const threshold = 51
const showCashBox = { const showCashBox = {

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

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

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

@ -42,6 +42,9 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
.nullable() .nullable()
}) })
const getPercentage = fillingPercentage =>
fillingPercentage ?? data?.fillingPercentageCassette1
return ( return (
<Formik <Formik
validateOnBlur={false} validateOnBlur={false}
@ -58,6 +61,7 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
onReset={() => { onReset={() => {
setEditing(NAME, false) setEditing(NAME, false)
}}> }}>
{({ values }) => (
<Form className={classes.form}> <Form className={classes.form}>
<PromptWhenDirty /> <PromptWhenDirty />
<Header <Header
@ -72,7 +76,7 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
<Cashbox <Cashbox
labelClassName={classes.cashboxLabel} labelClassName={classes.cashboxLabel}
emptyPartClassName={classes.cashboxEmptyPart} emptyPartClassName={classes.cashboxEmptyPart}
percent={data?.fillingPercentageCassette1} percent={getPercentage(values.fillingPercentageCassette1)}
inFiatBalanceAlerts={true} inFiatBalanceAlerts={true}
cashOut cashOut
/> />
@ -93,7 +97,7 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
<Cashbox <Cashbox
labelClassName={classes.cashboxLabel} labelClassName={classes.cashboxLabel}
emptyPartClassName={classes.cashboxEmptyPart} emptyPartClassName={classes.cashboxEmptyPart}
percent={data?.fillingPercentageCassette2} percent={getPercentage(values.fillingPercentageCassette2)}
inFiatBalanceAlerts={true} inFiatBalanceAlerts={true}
cashOut cashOut
/> />
@ -111,6 +115,7 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
</div> </div>
</div> </div>
</Form> </Form>
)}
</Formik> </Formik>
) )
} }

4
new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceOverrides.js
View file

@ -96,7 +96,7 @@ const FiatBalanceOverrides = ({ section }) => {
}, },
{ {
name: CASSETTE_1_KEY, name: CASSETTE_1_KEY,
display: 'Cash-out 1', header: 'Cash-out 1',
width: 155, width: 155,
textAlign: 'right', textAlign: 'right',
doubleHeader: 'Cash-out (Cassette Empty)', doubleHeader: 'Cash-out (Cassette Empty)',
@ -109,7 +109,7 @@ const FiatBalanceOverrides = ({ section }) => {
}, },
{ {
name: CASSETTE_2_KEY, name: CASSETTE_2_KEY,
display: 'Cash-out 2', header: 'Cash-out 2',
width: 155, width: 155,
textAlign: 'right', textAlign: 'right',
doubleHeader: 'Cash-out (Cassette Empty)', doubleHeader: 'Cash-out (Cassette Empty)',

6
new-lamassu-admin/src/pages/Notifications/sections/Setup.js
View file

@ -24,7 +24,6 @@ const sizes = {
errors: 142, errors: 142,
active: 263 active: 263
} }
const width = R.sum(R.values(sizes)) + channelSize
const Row = ({ namespace, forceDisable }) => { const Row = ({ namespace, forceDisable }) => {
const { data: rawData, save: rawSave } = useContext(NotificationsCtx) const { data: rawData, save: rawSave } = useContext(NotificationsCtx)
@ -64,9 +63,6 @@ const Row = ({ namespace, forceDisable }) => {
} }
const useStyles = makeStyles({ const useStyles = makeStyles({
mainTable: {
width
},
wizardTable: { wizardTable: {
width: 930 width: 930
} }
@ -75,7 +71,7 @@ const Setup = ({ wizard, forceDisable }) => {
const widthAdjust = wizard ? 20 : 0 const widthAdjust = wizard ? 20 : 0
const classes = useStyles() const classes = useStyles()
return ( return (
<Table className={wizard ? classes.wizardTable : classes.mainTable}> <Table className={wizard ? classes.wizardTable : null}>
<THead> <THead>
<Th width={channelSize - widthAdjust}>Channel</Th> <Th width={channelSize - widthAdjust}>Channel</Th>
{Object.keys(sizes).map(it => ( {Object.keys(sizes).map(it => (