mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-11-23 14:40:50 +01:00
Merge branch 'purse-redesign' into dev
This commit is contained in:
Bill
commit
d229e63135
@ -461,19 +461,82 @@
|
||||
"camera.available.effects": [
|
||||
{
|
||||
"name": "dark_sepia",
|
||||
"colorMatrix": [0.4, 0.4, 0.1, 0, 110, 0.3, 0.4, 0.1, 0, 30, 0.3, 0.2, 0.1, 0, 0, 0, 0, 0, 1, 0],
|
||||
"colorMatrix": [
|
||||
0.4,
|
||||
0.4,
|
||||
0.1,
|
||||
0,
|
||||
110,
|
||||
0.3,
|
||||
0.4,
|
||||
0.1,
|
||||
0,
|
||||
30,
|
||||
0.3,
|
||||
0.2,
|
||||
0.1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0
|
||||
],
|
||||
"minLevel": 0,
|
||||
"enabled": true
|
||||
},
|
||||
{
|
||||
"name": "increase_saturation",
|
||||
"colorMatrix": [2, -0.5, -0.5, 0, 0, -0.5, 2, -0.5, 0, 0, -0.5, -0.5, 2, 0, 0, 0, 0, 0, 1, 0],
|
||||
"colorMatrix": [
|
||||
2,
|
||||
-0.5,
|
||||
-0.5,
|
||||
0,
|
||||
0,
|
||||
-0.5,
|
||||
2,
|
||||
-0.5,
|
||||
0,
|
||||
0,
|
||||
-0.5,
|
||||
-0.5,
|
||||
2,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0
|
||||
],
|
||||
"minLevel": 0,
|
||||
"enabled": true
|
||||
},
|
||||
{
|
||||
"name": "increase_contrast",
|
||||
"colorMatrix": [1.5, 0, 0, 0, -50, 0, 1.5, 0, 0, -50, 0, 0, 1.5, 0, -50, 0, 0, 0, 1.5, 0],
|
||||
"colorMatrix": [
|
||||
1.5,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
-50,
|
||||
0,
|
||||
1.5,
|
||||
0,
|
||||
0,
|
||||
-50,
|
||||
0,
|
||||
0,
|
||||
1.5,
|
||||
0,
|
||||
-50,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1.5,
|
||||
0
|
||||
],
|
||||
"minLevel": 0,
|
||||
"enabled": true
|
||||
},
|
||||
@ -486,13 +549,55 @@
|
||||
},
|
||||
{
|
||||
"name": "color_1",
|
||||
"colorMatrix": [0.393, 0.769, 0.189, 0, 0, 0.349, 0.686, 0.168, 0, 0, 0.272, 0.534, 0.131, 0, 0, 0, 0, 0, 1, 0],
|
||||
"colorMatrix": [
|
||||
0.393,
|
||||
0.769,
|
||||
0.189,
|
||||
0,
|
||||
0,
|
||||
0.349,
|
||||
0.686,
|
||||
0.168,
|
||||
0,
|
||||
0,
|
||||
0.272,
|
||||
0.534,
|
||||
0.131,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0
|
||||
],
|
||||
"minLevel": 1,
|
||||
"enabled": true
|
||||
},
|
||||
{
|
||||
"name": "hue_bright_sat",
|
||||
"colorMatrix": [1, 0.6, 0.2, 0, -50, 0.2, 1, 0.6, 0, -50, 0.6, 0.2, 1, 0, -50, 0, 0, 0, 1, 0],
|
||||
"colorMatrix": [
|
||||
1,
|
||||
0.6,
|
||||
0.2,
|
||||
0,
|
||||
-50,
|
||||
0.2,
|
||||
1,
|
||||
0.6,
|
||||
0,
|
||||
-50,
|
||||
0.6,
|
||||
0.2,
|
||||
1,
|
||||
0,
|
||||
-50,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0
|
||||
],
|
||||
"minLevel": 1,
|
||||
"enabled": true
|
||||
},
|
||||
@ -519,13 +624,55 @@
|
||||
},
|
||||
{
|
||||
"name": "color_2",
|
||||
"colorMatrix": [0.333, 0.333, 0.333, 0, 0, 0.333, 0.333, 0.333, 0, 0, 0.333, 0.333, 0.333, 0, 0, 0, 0, 0, 1, 0],
|
||||
"colorMatrix": [
|
||||
0.333,
|
||||
0.333,
|
||||
0.333,
|
||||
0,
|
||||
0,
|
||||
0.333,
|
||||
0.333,
|
||||
0.333,
|
||||
0,
|
||||
0,
|
||||
0.333,
|
||||
0.333,
|
||||
0.333,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0
|
||||
],
|
||||
"minLevel": 2,
|
||||
"enabled": true
|
||||
},
|
||||
{
|
||||
"name": "night_vision",
|
||||
"colorMatrix": [0, 0, 0, 0, 0, 0, 1.1, 0, 0, -50, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
|
||||
"colorMatrix": [
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1.1,
|
||||
0,
|
||||
0,
|
||||
-50,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0
|
||||
],
|
||||
"minLevel": 2,
|
||||
"enabled": true
|
||||
},
|
||||
@ -566,13 +713,55 @@
|
||||
},
|
||||
{
|
||||
"name": "decr_conrast",
|
||||
"colorMatrix": [0.5, 0, 0, 0, 50, 0, 0.5, 0, 0, 50, 0, 0, 0.5, 0, 50, 0, 0, 0, 1, 0],
|
||||
"colorMatrix": [
|
||||
0.5,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
50,
|
||||
0,
|
||||
0.5,
|
||||
0,
|
||||
0,
|
||||
50,
|
||||
0,
|
||||
0,
|
||||
0.5,
|
||||
0,
|
||||
50,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0
|
||||
],
|
||||
"minLevel": 4,
|
||||
"enabled": true
|
||||
},
|
||||
{
|
||||
"name": "green_2",
|
||||
"colorMatrix": [0.5, 0.5, 0.5, 0, 0, 0.5, 0.5, 0.5, 0, 90, 0.5, 0.5, 0.5, 0, 0, 0, 0, 0, 1, 0],
|
||||
"colorMatrix": [
|
||||
0.5,
|
||||
0.5,
|
||||
0.5,
|
||||
0,
|
||||
0,
|
||||
0.5,
|
||||
0.5,
|
||||
0.5,
|
||||
0,
|
||||
90,
|
||||
0.5,
|
||||
0.5,
|
||||
0.5,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0
|
||||
],
|
||||
"minLevel": 4,
|
||||
"enabled": true
|
||||
},
|
||||
@ -585,13 +774,55 @@
|
||||
},
|
||||
{
|
||||
"name": "color_3",
|
||||
"colorMatrix": [0.609, 0.609, 0.082, 0, 0, 0.309, 0.609, 0.082, 0, 0, 0.309, 0.609, 0.082, 0, 0, 0, 0, 0, 1, 0],
|
||||
"colorMatrix": [
|
||||
0.609,
|
||||
0.609,
|
||||
0.082,
|
||||
0,
|
||||
0,
|
||||
0.309,
|
||||
0.609,
|
||||
0.082,
|
||||
0,
|
||||
0,
|
||||
0.309,
|
||||
0.609,
|
||||
0.082,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0
|
||||
],
|
||||
"minLevel": 5,
|
||||
"enabled": true
|
||||
},
|
||||
{
|
||||
"name": "color_4",
|
||||
"colorMatrix": [0.8, -0.8, 1, 0, 70, 0.8, -0.8, 1, 0, 70, 0.8, -0.8, 1, 0, 70, 0, 0, 0, 1, 0],
|
||||
"colorMatrix": [
|
||||
0.8,
|
||||
-0.8,
|
||||
1,
|
||||
0,
|
||||
70,
|
||||
0.8,
|
||||
-0.8,
|
||||
1,
|
||||
0,
|
||||
70,
|
||||
0.8,
|
||||
-0.8,
|
||||
1,
|
||||
0,
|
||||
70,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0
|
||||
],
|
||||
"minLevel": 5,
|
||||
"enabled": true
|
||||
},
|
||||
@ -604,13 +835,55 @@
|
||||
},
|
||||
{
|
||||
"name": "hypersaturated",
|
||||
"colorMatrix": [2, -1, 0, 0, 0, -1, 2, 0, 0, 0, 0, -1, 2, 0, 0, 0, 0, 0, 1, 0],
|
||||
"colorMatrix": [
|
||||
2,
|
||||
-1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
-1,
|
||||
2,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
-1,
|
||||
2,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0
|
||||
],
|
||||
"minLevel": 6,
|
||||
"enabled": true
|
||||
},
|
||||
{
|
||||
"name": "Yellow",
|
||||
"colorMatrix": [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
|
||||
"colorMatrix": [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0
|
||||
],
|
||||
"minLevel": 6,
|
||||
"enabled": true
|
||||
},
|
||||
@ -623,13 +896,55 @@
|
||||
},
|
||||
{
|
||||
"name": "x_ray",
|
||||
"colorMatrix": [0, 1.2, 0, 0, -100, 0, 2, 0, 0, -120, 0, 2, 0, 0, -120, 0, 0, 0, 1, 0],
|
||||
"colorMatrix": [
|
||||
0,
|
||||
1.2,
|
||||
0,
|
||||
0,
|
||||
-100,
|
||||
0,
|
||||
2,
|
||||
0,
|
||||
0,
|
||||
-120,
|
||||
0,
|
||||
2,
|
||||
0,
|
||||
0,
|
||||
-120,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0
|
||||
],
|
||||
"minLevel": 7,
|
||||
"enabled": true
|
||||
},
|
||||
{
|
||||
"name": "decrease_saturation",
|
||||
"colorMatrix": [0.7, 0.2, 0.2, 0, 0, 0.2, 0.7, 0.2, 0, 0, 0.2, 0.2, 0.7, 0, 0, 0, 0, 0, 1, 0],
|
||||
"colorMatrix": [
|
||||
0.7,
|
||||
0.2,
|
||||
0.2,
|
||||
0,
|
||||
0,
|
||||
0.2,
|
||||
0.7,
|
||||
0.2,
|
||||
0,
|
||||
0,
|
||||
0.2,
|
||||
0.2,
|
||||
0.7,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0
|
||||
],
|
||||
"minLevel": 7,
|
||||
"enabled": true
|
||||
},
|
||||
@ -691,31 +1006,136 @@
|
||||
},
|
||||
{
|
||||
"name": "color_5",
|
||||
"colorMatrix": [3.309, 0.609, 1.082, 0.2, 0, 0.309, 0.609, 0.082, 0, 0, 1.309, 0.609, 0.082, 0, 0, 0, 0, 0, 1, 0],
|
||||
"colorMatrix": [
|
||||
3.309,
|
||||
0.609,
|
||||
1.082,
|
||||
0.2,
|
||||
0,
|
||||
0.309,
|
||||
0.609,
|
||||
0.082,
|
||||
0,
|
||||
0,
|
||||
1.309,
|
||||
0.609,
|
||||
0.082,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0
|
||||
],
|
||||
"minLevel": 10,
|
||||
"enabled": true
|
||||
},
|
||||
{
|
||||
"name": "black_white_negative",
|
||||
"colorMatrix": [-0.5, -0.5, -0.5, 0, 0, -0.5, -0.5, -0.5, 0, 0, -0.5, -0.5, -0.5, 0, 0, 0, 0, 0, 1, 0],
|
||||
"colorMatrix": [
|
||||
-0.5,
|
||||
-0.5,
|
||||
-0.5,
|
||||
0,
|
||||
0,
|
||||
-0.5,
|
||||
-0.5,
|
||||
-0.5,
|
||||
0,
|
||||
0,
|
||||
-0.5,
|
||||
-0.5,
|
||||
-0.5,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0
|
||||
],
|
||||
"minLevel": 10,
|
||||
"enabled": true
|
||||
},
|
||||
{
|
||||
"name": "blue",
|
||||
"colorMatrix": [0.5, 0.5, 0.5, 0, -255, 0.5, 0.5, 0.5, 0, -170, 0.5, 0.5, 0.5, 0, 0, 0, 0, 0, 1, 0],
|
||||
"colorMatrix": [
|
||||
0.5,
|
||||
0.5,
|
||||
0.5,
|
||||
0,
|
||||
-255,
|
||||
0.5,
|
||||
0.5,
|
||||
0.5,
|
||||
0,
|
||||
-170,
|
||||
0.5,
|
||||
0.5,
|
||||
0.5,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0
|
||||
],
|
||||
"minLevel": 10,
|
||||
"enabled": true
|
||||
},
|
||||
{
|
||||
"name": "red",
|
||||
"colorMatrix": [0.5, 0.5, 0.5, 0, 0, 0.5, 0.5, 0.5, 0, -170, 0.5, 0.5, 0.5, 0, -170, 0, 0, 0, 1, 0],
|
||||
"colorMatrix": [
|
||||
0.5,
|
||||
0.5,
|
||||
0.5,
|
||||
0,
|
||||
0,
|
||||
0.5,
|
||||
0.5,
|
||||
0.5,
|
||||
0,
|
||||
-170,
|
||||
0.5,
|
||||
0.5,
|
||||
0.5,
|
||||
0,
|
||||
-170,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0
|
||||
],
|
||||
"minLevel": 10,
|
||||
"enabled": true
|
||||
},
|
||||
{
|
||||
"name": "green",
|
||||
"colorMatrix": [0.5, 0.5, 0.5, 0, -170, 0.5, 0.5, 0.5, 0, 0, 0.5, 0.5, 0.5, 0, -170, 0, 0, 0, 1, 0],
|
||||
"colorMatrix": [
|
||||
0.5,
|
||||
0.5,
|
||||
0.5,
|
||||
0,
|
||||
-170,
|
||||
0.5,
|
||||
0.5,
|
||||
0.5,
|
||||
0,
|
||||
0,
|
||||
0.5,
|
||||
0.5,
|
||||
0.5,
|
||||
0,
|
||||
-170,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0
|
||||
],
|
||||
"minLevel": 10,
|
||||
"enabled": true
|
||||
}
|
||||
|
||||
@ -1,15 +1,39 @@
|
||||
.nitro-purse {
|
||||
background: rgba($dark,.95);
|
||||
border: 1px solid lighten($dark,8.3);
|
||||
box-shadow: inset 0px 3px lighten(rgba($dark,.6),2.5), inset 0 -2px darken(rgba($dark,.6),4);
|
||||
font-weight: bolder;
|
||||
padding: 2px;
|
||||
background-color: #1c323f;
|
||||
border: 2px solid rgba($white, 0.5);
|
||||
border-top:0;
|
||||
font-size: $font-size-sm;
|
||||
z-index: $context-menu-zindex;
|
||||
pointer-events: all;
|
||||
margin-bottom:5px;
|
||||
|
||||
|
||||
.notification-button {
|
||||
color:lighten($dark,20);
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
pointer-events: all;
|
||||
display: none
|
||||
}
|
||||
|
||||
.nitro-purse-hc {
|
||||
background-color: #3d5f6e;
|
||||
margin:0 2px;
|
||||
}
|
||||
|
||||
.nitro-purse-button {
|
||||
background: $bg-mirage-split-background;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top:2px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $bg-cello-split-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import './currency/CurrencyView';
|
||||
@import './seasonal/SeasonalView';
|
||||
|
||||
@ -4,12 +4,15 @@ import { GetConfiguration } from '../../api';
|
||||
import { NotificationCenterEvent } from '../../events';
|
||||
import { dispatchUiEvent } from '../../hooks/events';
|
||||
import { SendMessageHook } from '../../hooks/messages/message-event';
|
||||
import { LocalizeText } from '../../utils/LocalizeText';
|
||||
import { CurrencyIcon } from '../shared/currency-icon/CurrencyIcon';
|
||||
import { SetLastCurrencies } from './common/CurrencyHelper';
|
||||
import { PurseContextProvider } from './context/PurseContext';
|
||||
import { CurrencyView } from './currency/CurrencyView';
|
||||
import { PurseMessageHandler } from './PurseMessageHandler';
|
||||
import { PurseViewProps } from './PurseView.types';
|
||||
import { initialPurse, PurseReducer } from './reducers/PurseReducer';
|
||||
import { SeasonalView } from './seasonal/SeasonalView';
|
||||
|
||||
export const PurseView: FC<PurseViewProps> = props =>
|
||||
{
|
||||
@ -36,17 +39,45 @@ export const PurseView: FC<PurseViewProps> = props =>
|
||||
return (
|
||||
<PurseContextProvider value={ { purseState, dispatchPurseState }}>
|
||||
<PurseMessageHandler />
|
||||
<div className="nitro-purse rounded d-flex flex-row py-1 justify-content-between">
|
||||
{ currencies && currencies.map(currency =>
|
||||
<div className="nitro-purse rounded-bottom d-flex flex-row justify-content-between">
|
||||
<div className="row mx-0 w-100">
|
||||
<div className="col-6 px-0">
|
||||
<div className="d-flex flex-column nitro-currencies">
|
||||
{ currencies && currencies.map((currency, index) =>
|
||||
{
|
||||
if (displayedCurrencies.indexOf(currency.type) === -1) return null;
|
||||
|
||||
return <CurrencyView key={ currency.type } currency={ currency } />;
|
||||
if (currency.type === -1 || currency.type === 0 || currency.type === 5) return <CurrencyView key={index} currency={currency} />;
|
||||
|
||||
return null;
|
||||
})}
|
||||
<div className="notification-button px-2" onClick={ toggleNotificationCenter }>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-4 px-0">
|
||||
<div className="nitro-purse-hc p-1 d-flex flex-column justify-content-center align-items-center h-100">
|
||||
<CurrencyIcon className="flex-shrink-0" type="hc" />
|
||||
<span>{LocalizeText('purse.clubdays.zero.amount.text')}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-2 px-0">
|
||||
<div className="d-flex flex-column nitro-purse-buttons h-100 justify-content-center">
|
||||
<div className="nitro-purse-button text-white h-100 text-center d-flex align-items-center justify-content-center"><i className="fas fa-life-ring"/></div>
|
||||
<div className="nitro-purse-button text-white h-100 text-center d-flex align-items-center justify-content-center"><i className="fas fa-cogs"/></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/*<div className="notification-button px-2" onClick={toggleNotificationCenter}>
|
||||
<i className="fas fa-bars" />
|
||||
</div>*/}
|
||||
</div>
|
||||
</div>
|
||||
{ currencies && currencies.map((currency, index) =>
|
||||
{
|
||||
if (displayedCurrencies.indexOf(currency.type) === -1) return null;
|
||||
|
||||
if (currency.type === -1 || currency.type === 0 || currency.type === 5) return null;
|
||||
|
||||
return <SeasonalView key={index} currency={ currency } />;
|
||||
})}
|
||||
</PurseContextProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
.nitro-currency {
|
||||
pointer-events: all;
|
||||
.nitro-currency-text {
|
||||
max-width: 60px;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
border-right:1px solid #000;
|
||||
box-shadow: 1px 0 lighten($dark,8.3)
|
||||
background: $bg-mirage-split-background;
|
||||
position: relative;
|
||||
|
||||
&:not(:first-of-type) {
|
||||
margin-top:2px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,11 +16,9 @@ export const CurrencyView: FC<CurrencyViewProps> = props =>
|
||||
{ currency.amount }
|
||||
</Tooltip>
|
||||
}>
|
||||
<div className="nitro-currency px-1 d-flex">
|
||||
<div className="px-1 text-end text-truncate nitro-currency-text">{LocalizeShortNumber(currency.amount)}</div>
|
||||
<div className="icon">
|
||||
<CurrencyIcon type={ currency.type } />
|
||||
</div>
|
||||
<div className="nitro-currency d-flex justify-content-end nitro-purse-button">
|
||||
<div className="px-1 text-end text-truncate nitro-currency-text align-self-center">{LocalizeShortNumber(currency.amount)}</div>
|
||||
<CurrencyIcon className="flex-shrink-0" type={ currency.type } />
|
||||
</div>
|
||||
</OverlayTrigger>
|
||||
);
|
||||
|
||||
16
src/views/purse/seasonal/SeasonalView.scss
Normal file
16
src/views/purse/seasonal/SeasonalView.scss
Normal file
@ -0,0 +1,16 @@
|
||||
.nitro-seasonal-currency {
|
||||
pointer-events: all;
|
||||
padding: 2px;
|
||||
background-color: #1c323f;
|
||||
border: 2px solid rgba($white, 0.5);
|
||||
font-size: $font-size-sm;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.nitro-currency-text {
|
||||
background: $bg-mirage-split-background;
|
||||
}
|
||||
|
||||
.nitro-seasonal-icon {
|
||||
background-color: #3d5f6e
|
||||
}
|
||||
}
|
||||
22
src/views/purse/seasonal/SeasonalView.tsx
Normal file
22
src/views/purse/seasonal/SeasonalView.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
import { FC } from 'react';
|
||||
import { LocalizeShortNumber } from '../../../utils/LocalizeShortNumber';
|
||||
import { LocalizeText } from '../../../utils/LocalizeText';
|
||||
import { CurrencyIcon } from '../../shared/currency-icon/CurrencyIcon';
|
||||
import { SeasonalViewProps } from './SeasonalView.types';
|
||||
|
||||
export const SeasonalView: FC<SeasonalViewProps> = props =>
|
||||
{
|
||||
const { currency = null } = props;
|
||||
|
||||
return (
|
||||
<div className="nitro-seasonal-currency rounded d-flex justify-content-end">
|
||||
<div className="nitro-currency-text w-100 px-1 d-flex justify-content-between">
|
||||
<span>{ LocalizeText(`purse.seasonal.currency.${currency.type}`) }</span>
|
||||
<span>{ LocalizeShortNumber(currency.amount) }</span>
|
||||
</div>
|
||||
<div className="nitro-seasonal-icon">
|
||||
<CurrencyIcon type={ currency.type } />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
6
src/views/purse/seasonal/SeasonalView.types.ts
Normal file
6
src/views/purse/seasonal/SeasonalView.types.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { Currency } from '../common/Currency';
|
||||
|
||||
export interface SeasonalViewProps
|
||||
{
|
||||
currency: Currency;
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
.nitro-right-side {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
top: 0px;
|
||||
right: 5px;
|
||||
min-width: 200px;
|
||||
max-width: 400px;
|
||||
z-index: $rightside-zindex;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user