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 { .nitro-purse {
} }
@import './currency/CurrencyView'; @import './currency/CurrencyView';

View File

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

View File

@ -1,2 +1,9 @@
.nitro-currency { .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 ( return (
<TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ showUp }> <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ showUp }>
<div className="col pe-1 pb-1"> <div className="col pe-1 pb-1">
<div className="d-flex bg-primary rounded border overflow-hidden"> <div className="nitro-currency p-1 d-flex rounded overflow-hidden">
<div className="d-flex flex-grow-1 align-items-center justify-content-end pe-1">{ currency.amount }</div> <div className="flex-grow-1 px-1 me-1 text-end">{ currency.amount }</div>
<div className="bg-secondary"><CurrencyIcon type={ currency.type } /></div> <div className="icon px-1"><CurrencyIcon type={ currency.type } /></div>
</div> </div>
</div> </div>
</TransitionAnimation> </TransitionAnimation>

View File

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