From 57d0342e64b7d419b22399ae57203d4240106202 Mon Sep 17 00:00:00 2001
From: Layne <laynebalsters@gmail.com>
Date: Tue, 6 Jul 2021 22:26:22 -0400
Subject: [PATCH 1/2] plz

---
 public/configuration.json                  | 540 ++++++++++++++++++---
 src/views/purse/PurseView.scss             |  12 +-
 src/views/purse/PurseView.tsx              |  18 +-
 src/views/purse/currency/CurrencyView.scss |   6 +-
 src/views/right-side/RightSideView.scss    |   4 +-
 5 files changed, 502 insertions(+), 78 deletions(-)

diff --git a/public/configuration.json b/public/configuration.json
index 30aa77ae..e06325c2 100644
--- a/public/configuration.json
+++ b/public/configuration.json
@@ -460,262 +460,682 @@
     ],
     "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],
+            "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
+            ],
             "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],
+            "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
+            ],
             "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],
+            "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
+            ],
             "minLevel": 0,
             "enabled": true
         },
         {
-            "name":"shadow_multiply_02",
+            "name": "shadow_multiply_02",
             "colorMatrix": [],
             "minLevel": 0,
             "blendMode": 2,
             "enabled": true
         },
         {
-            "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],
+            "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
+            ],
             "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],
+            "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
+            ],
             "minLevel": 1,
             "enabled": true
         },
         {
-            "name":"hearts_hardlight_02",
+            "name": "hearts_hardlight_02",
             "colorMatrix": [],
             "minLevel": 1,
             "blendMode": 9,
             "enabled": true
         },
         {
-            "name":"texture_overlay",
+            "name": "texture_overlay",
             "colorMatrix": [],
             "minLevel": 1,
             "blendMode": 4,
             "enabled": true
         },
         {
-            "name":"pinky_nrm",
+            "name": "pinky_nrm",
             "colorMatrix": [],
             "minLevel": 1,
             "blendMode": 0,
             "enabled": true
         },
         {
-            "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],
+            "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
+            ],
             "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],
+            "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
+            ],
             "minLevel": 2,
             "enabled": true
         },
         {
-            "name":"stars_hardlight_02",
+            "name": "stars_hardlight_02",
             "colorMatrix": [],
             "minLevel": 2,
             "blendMode": 9,
             "enabled": true
         },
         {
-            "name":"coffee_mpl",
+            "name": "coffee_mpl",
             "colorMatrix": [],
             "minLevel": 2,
             "blendMode": 2,
             "enabled": true
         },
         {
-            "name":"security_hardlight",
+            "name": "security_hardlight",
             "colorMatrix": [],
             "minLevel": 3,
             "blendMode": 9,
             "enabled": true
         },
         {
-            "name":"bluemood_mpl",
+            "name": "bluemood_mpl",
             "colorMatrix": [],
             "minLevel": 3,
             "blendMode": 2,
             "enabled": true
         },
         {
-            "name":"rusty_mpl",
+            "name": "rusty_mpl",
             "colorMatrix": [],
             "minLevel": 3,
             "blendMode": 2,
             "enabled": true
         },
         {
-            "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],
+            "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
+            ],
             "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],
+            "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
+            ],
             "minLevel": 4,
             "enabled": true
         },
         {
-            "name":"alien_hrd",
+            "name": "alien_hrd",
             "colorMatrix": [],
             "minLevel": 4,
             "blendMode": 9,
             "enabled": true
         },
         {
-            "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],
+            "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
+            ],
             "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],
+            "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
+            ],
             "minLevel": 5,
             "enabled": true
         },
         {
-            "name":"toxic_hrd",
+            "name": "toxic_hrd",
             "colorMatrix": [],
             "minLevel": 5,
             "blendMode": 9,
             "enabled": true
         },
         {
-            "name":"hypersaturated",
-            "colorMatrix": [2, -1, 0, 0, 0, -1, 2, 0, 0, 0, 0, -1, 2, 0, 0, 0, 0, 0, 1, 0],
+            "name": "hypersaturated",
+            "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],
+            "name": "Yellow",
+            "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
         },
         {
-            "name":"misty_hrd",
+            "name": "misty_hrd",
             "colorMatrix": [],
             "minLevel": 6,
             "blendMode": 9,
             "enabled": true
         },
         {
-            "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],
+            "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
+            ],
             "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],
+            "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
+            ],
             "minLevel": 7,
             "enabled": true
         },
         {
-            "name":"drops_mpl",
+            "name": "drops_mpl",
             "colorMatrix": [],
             "minLevel": 8,
             "blendMode": 2,
             "enabled": true
         },
         {
-            "name":"shiny_hrd",
+            "name": "shiny_hrd",
             "colorMatrix": [],
             "minLevel": 9,
             "blendMode": 9,
             "enabled": true
         },
         {
-            "name":"glitter_hrd",
+            "name": "glitter_hrd",
             "colorMatrix": [],
             "minLevel": 10,
             "blendMode": 9,
             "enabled": true
         },
         {
-            "name":"frame_gold",
+            "name": "frame_gold",
             "colorMatrix": [],
             "minLevel": 10,
             "blendMode": 0,
             "enabled": true
         },
         {
-            "name":"frame_gray_4",
+            "name": "frame_gray_4",
             "colorMatrix": [],
             "minLevel": 10,
             "blendMode": 0,
             "enabled": true
         },
         {
-            "name":"frame_black_2",
+            "name": "frame_black_2",
             "colorMatrix": [],
             "minLevel": 10,
             "blendMode": 0,
             "enabled": true
         },
         {
-            "name":"frame_wood_2",
+            "name": "frame_wood_2",
             "colorMatrix": [],
             "minLevel": 10,
             "blendMode": 0,
             "enabled": true
         },
         {
-            "name":"finger_nrm",
+            "name": "finger_nrm",
             "colorMatrix": [],
             "minLevel": 10,
             "blendMode": 0,
             "enabled": true
         },
         {
-            "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],
+            "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
+            ],
             "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],
+            "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
+            ],
             "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],
+            "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
+            ],
             "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],
+            "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
+            ],
             "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],
+            "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
+            ],
             "minLevel": 10,
             "enabled": true
         }
diff --git a/src/views/purse/PurseView.scss b/src/views/purse/PurseView.scss
index a1afd740..627f5de6 100644
--- a/src/views/purse/PurseView.scss
+++ b/src/views/purse/PurseView.scss
@@ -1,14 +1,18 @@
 .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;
+    
 
     .notification-button {
         color:lighten($dark,20);
         cursor: pointer;
         font-size: 0.9rem;
         pointer-events: all;
+        display: none
     }
 }
 
diff --git a/src/views/purse/PurseView.tsx b/src/views/purse/PurseView.tsx
index 15932d13..f5da0334 100644
--- a/src/views/purse/PurseView.tsx
+++ b/src/views/purse/PurseView.tsx
@@ -36,16 +36,18 @@ 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, index) =>
-                    {
-                        if(displayedCurrencies.indexOf(currency.type) === -1) return null;
+            <div className="nitro-purse rounded-bottom d-flex flex-row justify-content-between">
+                <div className="row row-cols-2 mx-0">
+                    { currencies && currencies.map((currency, index) =>
+                        {
+                            if(displayedCurrencies.indexOf(currency.type) === -1) return null;
 
-                        return <CurrencyView key={ index } currency={ currency } />;
-                    }) }
-                <div className="notification-button px-2" onClick={ toggleNotificationCenter }>
+                            return <CurrencyView key={ index } currency={ currency } />;
+                    })}
+                </div>
+                {/*<div className="notification-button px-2" onClick={toggleNotificationCenter}>
                     <i className="fas fa-bars" />
-                </div> 
+                </div>*/}
             </div>
         </PurseContextProvider>
     );
diff --git a/src/views/purse/currency/CurrencyView.scss b/src/views/purse/currency/CurrencyView.scss
index 5df98f9c..c0e9f9f2 100644
--- a/src/views/purse/currency/CurrencyView.scss
+++ b/src/views/purse/currency/CurrencyView.scss
@@ -1,10 +1,8 @@
 .nitro-currency {
     pointer-events: all;
+    background: $bg-mirage-split-background;
+    
     .nitro-currency-text {
         max-width: 60px;
     }
-    &:not(:last-child) {
-        border-right:1px solid #000;
-        box-shadow: 1px 0 lighten($dark,8.3)
-    }
 }
diff --git a/src/views/right-side/RightSideView.scss b/src/views/right-side/RightSideView.scss
index febd7891..c0fd037b 100644
--- a/src/views/right-side/RightSideView.scss
+++ b/src/views/right-side/RightSideView.scss
@@ -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;

From cd5d8fdf3f70862336eee25c01fbcf2297ce4f50 Mon Sep 17 00:00:00 2001
From: Layne <laynebalsters@gmail.com>
Date: Fri, 23 Jul 2021 03:12:53 -0400
Subject: [PATCH 2/2] purse redesign

---
 src/views/purse/PurseView.scss                | 20 +++++++++
 src/views/purse/PurseView.tsx                 | 41 ++++++++++++++++---
 src/views/purse/currency/CurrencyView.scss    |  7 ++--
 src/views/purse/currency/CurrencyView.tsx     |  8 ++--
 src/views/purse/seasonal/SeasonalView.scss    | 16 ++++++++
 src/views/purse/seasonal/SeasonalView.tsx     | 22 ++++++++++
 .../purse/seasonal/SeasonalView.types.ts      |  6 +++
 7 files changed, 106 insertions(+), 14 deletions(-)
 create mode 100644 src/views/purse/seasonal/SeasonalView.scss
 create mode 100644 src/views/purse/seasonal/SeasonalView.tsx
 create mode 100644 src/views/purse/seasonal/SeasonalView.types.ts

diff --git a/src/views/purse/PurseView.scss b/src/views/purse/PurseView.scss
index 627f5de6..d51789b4 100644
--- a/src/views/purse/PurseView.scss
+++ b/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';
diff --git a/src/views/purse/PurseView.tsx b/src/views/purse/PurseView.tsx
index f5da0334..435ce2a3 100644
--- a/src/views/purse/PurseView.tsx
+++ b/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">
-                    { currencies && currencies.map((currency, index) =>
-                        {
-                            if(displayedCurrencies.indexOf(currency.type) === -1) return null;
+                <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 (currency.type === -1 || currency.type === 0 || currency.type === 5) return <CurrencyView key={index} currency={currency} />;
 
-                            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>
     );
 }
diff --git a/src/views/purse/currency/CurrencyView.scss b/src/views/purse/currency/CurrencyView.scss
index c0e9f9f2..492f8454 100644
--- a/src/views/purse/currency/CurrencyView.scss
+++ b/src/views/purse/currency/CurrencyView.scss
@@ -1,8 +1,9 @@
 .nitro-currency {
     pointer-events: all;
     background: $bg-mirage-split-background;
-    
-    .nitro-currency-text {
-        max-width: 60px;
+    position: relative;
+
+    &:not(:first-of-type) {
+        margin-top:2px;
     }
 }
diff --git a/src/views/purse/currency/CurrencyView.tsx b/src/views/purse/currency/CurrencyView.tsx
index 6e7f5ced..87016ebc 100644
--- a/src/views/purse/currency/CurrencyView.tsx
+++ b/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="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>
     );
diff --git a/src/views/purse/seasonal/SeasonalView.scss b/src/views/purse/seasonal/SeasonalView.scss
new file mode 100644
index 00000000..9b5b8e25
--- /dev/null
+++ b/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
+    }
+}
diff --git a/src/views/purse/seasonal/SeasonalView.tsx b/src/views/purse/seasonal/SeasonalView.tsx
new file mode 100644
index 00000000..0edf2c19
--- /dev/null
+++ b/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>
+    );
+}
diff --git a/src/views/purse/seasonal/SeasonalView.types.ts b/src/views/purse/seasonal/SeasonalView.types.ts
new file mode 100644
index 00000000..b6c2b3a5
--- /dev/null
+++ b/src/views/purse/seasonal/SeasonalView.types.ts
@@ -0,0 +1,6 @@
+import { Currency } from '../common/Currency';
+
+export interface SeasonalViewProps
+{
+    currency: Currency;
+}