Purse updates

src/assets/styles/icons.scss

@@ -125,6 +125,12 @@
         height: 15px;
     }
 
+    &.icon-help {
+        background: url('../images/icons/help.png');
+        width: 13px;
+        height: 23px;
+    }
+
     &.icon-joinroom {
         background-image: url('../images/toolbar/icons/joinroom.png');
         width: 21px;

src/layout/notification-bubble/NotificationBubbleView.scss

@@ -1,14 +1,11 @@
 .nitro-notification-bubble {
     pointer-events: all;
-    background-color: $gable-green;
+    padding: 6px 5px;
-    border: 2px solid rgba($white, 0.5);
+    background-color: rgba($dark,.95);
+    box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
     font-size: $font-size-sm;
     margin-bottom: 5px;
 
-    &.club-gift {
-        
-    }
-
     .bubble-image {
         width: 30px;
         height: 30px;

src/layout/notification-bubble/NotificationBubbleView.tsx

@@ -21,7 +21,7 @@ export const NotificationBubbleView: FC<NotificationBubbleViewProps> = props =>
     }, [ fadesOut, close ]);
 
     return (
-        <div className={ ('nitro-notification-bubble p-1 rounded ' + (className || '')) } { ...rest } onClick={ close }>
+        <div className={ ('nitro-notification-bubble rounded ' + (className || '')) } { ...rest } onClick={ close }>
             { children }
         </div>
     )

src/views/notification-center/views/bubble-layouts/club-gift/NotificationClubGiftBubbleView.tsx

@@ -11,13 +11,13 @@ export const NotificationClubGiftBubbleView: FC<NotificationBubbleLayoutViewProp
 
     return (
         <NotificationBubbleView className="flex-column club-gift" close={ close } { ...rest }>
-            <div className="d-flex mb-1">
+            <div className="d-flex align-items-center gap-2 mb-2">
-                <CurrencyIcon type="hc" />
+                <CurrencyIcon type="hc" className="flex-shrink-0" />
                 <span className="ms-1">{ LocalizeText('notifications.text.club_gift') }</span>
             </div>
-            <div className="d-flex align-items-center justify-content-end">
+            <div className="d-flex align-items-center justify-content-end gap-2">
-                <span className="fw-bold me-1" onClick={ close }>{ LocalizeText('notifications.button.later') }</span>
+                <button type="button" className="btn btn-success w-100 btn-sm" onClick={ () => NotificationUtilities.openUrl(item.linkUrl) }>{ LocalizeText('notifications.button.show_gift_list') }</button>
-                <button type="button" className="btn btn-primary btn-sm" onClick={ () => NotificationUtilities.openUrl(item.linkUrl) }>{ LocalizeText('notifications.button.show_gift_list') }</button>
+                <span className="text-decoration-underline cursor-pointer text-nowrap" onClick={ close }>{ LocalizeText('notifications.button.later') }</span>
             </div>
         </NotificationBubbleView>
     );

src/views/purse/PurseView.scss

@@ -1,12 +1,10 @@
 .nitro-purse {
-    padding: 2px;
+    background-color: rgba($dark,.95);
-    background-color: $gable-green;
-    border: 2px solid rgba($white, 0.5);
-    border-top: 0;
     font-size: $font-size-sm;
     pointer-events: all;
     margin-bottom: 5px;
-    
+    padding: 6px 5px;
+    box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
 
     .notification-button {
         color:lighten($dark,20);
@@ -17,19 +15,21 @@
     }
 
     .nitro-purse-hc {
-        background-color: $william;
+        background-color: rgba($light,.1);
-        margin:0 2px;
+        margin: 0 5px;
     }
 
     .nitro-purse-button {
-        background: $bg-mirage-split-background;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+        padding: 2px 3px;
+        border-radius: $border-radius;
 
-        &:not(:first-child) {
+        &:last-child {
-            margin-top:2px;
+            border-bottom: none;
         }
 
         &:hover {
-            background: $bg-cello-split-background;
+            background-color: rgba($light,.1);
         }
     }
 }

src/views/purse/PurseView.tsx

@@ -128,14 +128,14 @@ export const PurseView: FC<{}> = props =>
                         </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">
+                        <div className="nitro-purse-hc rounded mx-1 p-1 d-flex flex-column justify-content-center align-items-center h-100">
                             <CurrencyIcon className="flex-shrink-0" type="hc" />
                             <span>{ getClubText() }</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 cursor-pointer"><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 cursor-pointer"><i className="icon icon-help"/></div>
                             <div className="nitro-purse-button text-white h-100 text-center d-flex align-items-center justify-content-center cursor-pointer" onClick={ handleUserSettingsClick } ><i className="fas fa-cogs"/></div>
                         </div>
                     </div>

src/views/purse/views/currency/CurrencyView.scss

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

src/views/purse/views/seasonal/SeasonalView.scss

@@ -1,16 +1,12 @@
 .nitro-seasonal-currency {
     pointer-events: all;
-    padding: 2px;
+    padding: 6px 5px;
-    background-color: $gable-green;
+    background-color: rgba($dark,.95);
-    border: 2px solid rgba($white, 0.5);
+    box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
     font-size: $font-size-sm;
     margin-bottom: 5px;
 
-    .nitro-currency-text {
+    .seasonal-text {
-        background: $bg-mirage-split-background;
+        color: rgba($light,.5);
-    }
-
-    .nitro-seasonal-icon {
-        background-color: $william;
     }
 }

src/views/purse/views/seasonal/SeasonalView.tsx

@@ -10,10 +10,10 @@ export const SeasonalView: FC<SeasonalViewProps> = 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.${ type }`) }</span>
+                <span className="seasonal-text">{ LocalizeText(`purse.seasonal.currency.${ type }`) }</span>
                 <span>{ LocalizeShortNumber(amount) }</span>
             </div>
-            <div className="nitro-seasonal-icon">
+            <div>
                 <CurrencyIcon type={ type } />
             </div>
         </div>