purse redesign

src/views/purse/PurseView.scss

@@ -5,6 +5,8 @@
     border-top:0;
     font-size: $font-size-sm;
     z-index: $context-menu-zindex;
+    pointer-events: all;
+    margin-bottom:5px;
     
 
     .notification-button {
@@ -14,6 +16,24 @@
         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';

src/views/purse/PurseView.tsx

@@ -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 =>
 {
@@ -37,18 +40,44 @@ export const PurseView: FC<PurseViewProps> = props =>
         <PurseContextProvider value={ { purseState, dispatchPurseState }}>
             <PurseMessageHandler />
             <div className="nitro-purse rounded-bottom d-flex flex-row justify-content-between">
-                <div className="row row-cols-2 mx-0">
+                <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;
+                                if (displayedCurrencies.indexOf(currency.type) === -1) return null;
                                 
-                            return <CurrencyView key={ index } currency={ currency } />;
+                                if (currency.type === -1 || currency.type === 0 || currency.type === 5) return <CurrencyView key={index} currency={currency} />;
+
+                                return null;
                             })}
                         </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>
+            { 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>
     );
 }

src/views/purse/currency/CurrencyView.scss

@@ -1,8 +1,9 @@
 .nitro-currency {
     pointer-events: all;
     background: $bg-mirage-split-background;
+    position: relative;
 
-    .nitro-currency-text {
+    &:not(:first-of-type) {
-        max-width: 60px;
+        margin-top:2px;
     }
 }

src/views/purse/currency/CurrencyView.tsx

@@ -16,11 +16,9 @@ export const CurrencyView: FC<CurrencyViewProps> = props =>
                 { currency.amount }
             </Tooltip>
         }>
-            <div className="nitro-currency px-1 d-flex">
+            <div className="nitro-currency d-flex justify-content-end nitro-purse-button">
-                <div className="px-1 text-end text-truncate nitro-currency-text">{LocalizeShortNumber(currency.amount)}</div>
+                <div className="px-1 text-end text-truncate nitro-currency-text align-self-center">{LocalizeShortNumber(currency.amount)}</div>
-                <div className="icon">
+                <CurrencyIcon className="flex-shrink-0" type={ currency.type } />
-                    <CurrencyIcon type={ currency.type } />
-                </div>
             </div>
         </OverlayTrigger>
     );

src/views/purse/seasonal/SeasonalView.scss

@@ -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
+    }
+}

src/views/purse/seasonal/SeasonalView.tsx

@@ -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>
+    );
+}

src/views/purse/seasonal/SeasonalView.types.ts

@@ -0,0 +1,6 @@
+import { Currency } from '../common/Currency';
+
+export interface SeasonalViewProps
+{
+    currency: Currency;
+}