fix: cashbox label styling

This commit is contained in:
Sérgio Salgado 2021-02-17 17:46:17 +00:00 committed by Josh Harvey
parent 8f1f321758
commit 7be120ef3a
3 changed files with 13 additions and 10 deletions

View file

@ -17,7 +17,8 @@ const Cashbox = ({
percent = 0,
cashOut = false,
className,
emptyPartClassName
emptyPartClassName,
labelClassName
}) => {
const classes = cashboxClasses({ percent, cashOut })
const threshold = 51
@ -25,10 +26,14 @@ const Cashbox = ({
return (
<div className={classnames(className, classes.cashbox)}>
<div className={classnames(emptyPartClassName, classes.emptyPart)}>
{percent <= threshold && <Label2>{percent.toFixed(0)}%</Label2>}
{percent <= threshold && (
<Label2 className={labelClassName}>{percent.toFixed(0)}%</Label2>
)}
</div>
<div className={classes.fullPart}>
{percent > threshold && <Label2>{percent.toFixed(0)}%</Label2>}
{percent > threshold && (
<Label2 className={labelClassName}>{percent.toFixed(0)}%</Label2>
)}
</div>
</div>
)

View file

@ -77,7 +77,7 @@ const FiatBalance = ({
<div className={classes.first}>
<div className={classes.row}>
<Cashbox
className={classes.cashbox}
labelClassName={classes.cashboxLabel}
emptyPartClassName={classes.cashboxEmptyPart}
percent={fiatBalanceCassette1Percent}
cashOut
@ -97,7 +97,7 @@ const FiatBalance = ({
</div>
<div className={classes.row}>
<Cashbox
className={classes.cashbox}
labelClassName={classes.cashboxLabel}
emptyPartClassName={classes.cashboxEmptyPart}
percent={fiatBalanceCassette2Percent}
cashOut

View file

@ -24,11 +24,9 @@ export default {
col2: {
width: 136
},
cashbox: {
'& p': {
marginRight: 4,
fontSize: 20
}
cashboxLabel: {
marginRight: 4,
fontSize: 20
},
cashboxEmptyPart: {
backgroundColor: `${backgroundColor}`