Purse update

This commit is contained in:
MyNameIsBatman 2021-05-11 23:37:47 -03:00
parent 425a4cd885
commit d85b3b9b7b
5 changed files with 13 additions and 5 deletions

View File

@ -1,5 +1,5 @@
.nitro-purse {
}
@import './currency/CurrencyView';

View File

@ -29,7 +29,7 @@ export const PurseView: FC<PurseViewProps> = props =>
return (
<PurseContextProvider value={ { purseState, dispatchPurseState }}>
<PurseMessageHandler />
<div className="row row-cols-2 g-0">
<div className="nitro-purse row row-cols-2 g-0">
{ currencies && currencies.map((currency, index) =>
{
if(displayedCurrencies.indexOf(currency.type) === -1) return null;

View File

@ -1,2 +1,9 @@
.nitro-currency {
background: rgba(20, 20, 20, .95);
border: 1px solid #101010;
box-shadow: inset 2px 2px rgba(255, 255, 255, .1), inset -2px -2px rgba(255, 255, 255, .1);
.icon {
border-left: 1px solid rgba(255, 255, 255, .1);
}
}

View File

@ -18,9 +18,9 @@ export function CurrencyView(props: CurrencyViewProps): JSX.Element
return (
<TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ showUp }>
<div className="col pe-1 pb-1">
<div className="d-flex bg-primary rounded border overflow-hidden">
<div className="d-flex flex-grow-1 align-items-center justify-content-end pe-1">{ currency.amount }</div>
<div className="bg-secondary"><CurrencyIcon type={ currency.type } /></div>
<div className="nitro-currency p-1 d-flex rounded overflow-hidden">
<div className="flex-grow-1 px-1 me-1 text-end">{ currency.amount }</div>
<div className="icon px-1"><CurrencyIcon type={ currency.type } /></div>
</div>
</div>
</TransitionAnimation>

View File

@ -4,4 +4,5 @@
right: 10px;
width: 200px;
z-index: $rightside-zindex;
pointer-events: none;
}