fix: cashbox label styling
This commit is contained in:
parent
8f1f321758
commit
7be120ef3a
3 changed files with 13 additions and 10 deletions
|
|
@ -17,7 +17,8 @@ const Cashbox = ({
|
||||||
percent = 0,
|
percent = 0,
|
||||||
cashOut = false,
|
cashOut = false,
|
||||||
className,
|
className,
|
||||||
emptyPartClassName
|
emptyPartClassName,
|
||||||
|
labelClassName
|
||||||
}) => {
|
}) => {
|
||||||
const classes = cashboxClasses({ percent, cashOut })
|
const classes = cashboxClasses({ percent, cashOut })
|
||||||
const threshold = 51
|
const threshold = 51
|
||||||
|
|
@ -25,10 +26,14 @@ const Cashbox = ({
|
||||||
return (
|
return (
|
||||||
<div className={classnames(className, classes.cashbox)}>
|
<div className={classnames(className, classes.cashbox)}>
|
||||||
<div className={classnames(emptyPartClassName, classes.emptyPart)}>
|
<div className={classnames(emptyPartClassName, classes.emptyPart)}>
|
||||||
{percent <= threshold && <Label2>{percent.toFixed(0)}%</Label2>}
|
{percent <= threshold && (
|
||||||
|
<Label2 className={labelClassName}>{percent.toFixed(0)}%</Label2>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className={classes.fullPart}>
|
<div className={classes.fullPart}>
|
||||||
{percent > threshold && <Label2>{percent.toFixed(0)}%</Label2>}
|
{percent > threshold && (
|
||||||
|
<Label2 className={labelClassName}>{percent.toFixed(0)}%</Label2>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -77,7 +77,7 @@ const FiatBalance = ({
|
||||||
<div className={classes.first}>
|
<div className={classes.first}>
|
||||||
<div className={classes.row}>
|
<div className={classes.row}>
|
||||||
<Cashbox
|
<Cashbox
|
||||||
className={classes.cashbox}
|
labelClassName={classes.cashboxLabel}
|
||||||
emptyPartClassName={classes.cashboxEmptyPart}
|
emptyPartClassName={classes.cashboxEmptyPart}
|
||||||
percent={fiatBalanceCassette1Percent}
|
percent={fiatBalanceCassette1Percent}
|
||||||
cashOut
|
cashOut
|
||||||
|
|
@ -97,7 +97,7 @@ const FiatBalance = ({
|
||||||
</div>
|
</div>
|
||||||
<div className={classes.row}>
|
<div className={classes.row}>
|
||||||
<Cashbox
|
<Cashbox
|
||||||
className={classes.cashbox}
|
labelClassName={classes.cashboxLabel}
|
||||||
emptyPartClassName={classes.cashboxEmptyPart}
|
emptyPartClassName={classes.cashboxEmptyPart}
|
||||||
percent={fiatBalanceCassette2Percent}
|
percent={fiatBalanceCassette2Percent}
|
||||||
cashOut
|
cashOut
|
||||||
|
|
|
||||||
|
|
@ -24,11 +24,9 @@ export default {
|
||||||
col2: {
|
col2: {
|
||||||
width: 136
|
width: 136
|
||||||
},
|
},
|
||||||
cashbox: {
|
cashboxLabel: {
|
||||||
'& p': {
|
marginRight: 4,
|
||||||
marginRight: 4,
|
fontSize: 20
|
||||||
fontSize: 20
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
cashboxEmptyPart: {
|
cashboxEmptyPart: {
|
||||||
backgroundColor: `${backgroundColor}`
|
backgroundColor: `${backgroundColor}`
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue