From a84a641ba741d58eee7f20f0244466da05b44f90 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Mon, 21 Feb 2022 23:22:04 -0500
Subject: [PATCH] Purse update

---
 src/components/purse/PurseView.scss         | 56 +++++++--------------
 src/components/purse/PurseView.tsx          | 46 +++++++++--------
 src/components/purse/views/CurrencyView.tsx |  8 +--
 src/components/purse/views/SeasonalView.tsx | 14 +++---
 4 files changed, 53 insertions(+), 71 deletions(-)

diff --git a/src/components/purse/PurseView.scss b/src/components/purse/PurseView.scss
index 2901eebb..a860c41a 100644
--- a/src/components/purse/PurseView.scss
+++ b/src/components/purse/PurseView.scss
@@ -1,44 +1,26 @@
-.nitro-purse {
-    background-color: rgba($dark, 0.95);
+.nitro-purse-container {
     font-size: $font-size-sm;
     pointer-events: all;
-    box-shadow: inset 0px 5px lighten(rgba($dark, 0.6), 2.5),
-        inset 0 -4px darken(rgba($dark, 0.6), 4);
 
-    .notification-button {
-        color: lighten($dark, 20);
-        cursor: pointer;
-        font-size: 0.9rem;
-        pointer-events: all;
-        display: none;
-    }
-
-    .nitro-purse-hc {
-        background-color: rgba($light, 0.1);
-    }
-
-    .nitro-purse-button {
-
-        &:hover {
-            background-color: rgba($light, 0.1);
-            cursor: pointer;
-        }
-    }
-
-    .nitro-currency {
-        pointer-events: all;
-        position: relative;
-    }
-
-    .nitro-seasonal-currency {
-        pointer-events: all;
-        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;
+    .nitro-purse {
+        background-color: rgba($dark, 0.95);
+        box-shadow: inset 0px 5px lighten(rgba($dark, 0.6), 2.5), inset 0 -4px darken(rgba($dark, 0.6), 4);
     
-        .seasonal-text {
-            color: rgba($light,.5);
+        .nitro-purse-subscription {
+            background-color: rgba($light, 0.1);
         }
+    
+        .nitro-purse-button {
+            padding: 3px 2px;
+    
+            &:hover {
+                background-color: rgba($light, 0.1);
+            }
+        }
+    }
+
+    .nitro-purse-seasonal-currency {
+        background-color: rgba($dark, .95);
+        box-shadow: inset 0px 5px lighten(rgba($dark, .6),2.5), inset 0 -4px darken(rgba($dark, .6), 4);
     }
 }
diff --git a/src/components/purse/PurseView.tsx b/src/components/purse/PurseView.tsx
index 1363b2f6..6c7cc299 100644
--- a/src/components/purse/PurseView.tsx
+++ b/src/components/purse/PurseView.tsx
@@ -1,7 +1,7 @@
 import { FriendlyTime, HabboClubLevelEnum, UserCurrencyComposer, UserSubscriptionComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { CreateLinkEvent, GetConfiguration, LocalizeText } from '../../api';
-import { Column, Flex, Grid } from '../../common';
+import { Column, Flex, Grid, Text } from '../../common';
 import { HcCenterEvent } from '../../events/hc-center/HcCenterEvent';
 import { UserSettingsUIEvent } from '../../events/user-settings/UserSettingsUIEvent';
 import { dispatchUiEvent } from '../../hooks';
@@ -109,27 +109,29 @@ export const PurseView: FC<{}> = props =>
     return (
         <PurseContextProvider value={ { purse } }>
             <PurseMessageHandler />
-            <Flex className="nitro-purse rounded-bottom p-1">
-                <Grid gap={ 1 }>
-                    <Column justifyContent="center" size={ 6 } gap={ 1 } className="nitro-currencies">
-                        <CurrencyView type={ -1 } amount={ purse.credits } short={ currencyDisplayNumberShort } />
-                        { getCurrencyElements(0, 2) }
-                    </Column>
-                    <Column center size={ 4 } gap={ 1 } className="nitro-purse-hc nitro-purse-button rounded" onClick={ handleHcCenterClick }>
-                        <CurrencyIcon className="flex-shrink-0" type="hc" />
-                        <span>{ getClubText }</span>
-                    </Column>
-                    <Column justifyContent="center" size={ 2 } gap={ 1 } className="nitro-purse-buttons">
-                        <Flex center pointer fullHeight className="nitro-purse-button text-white text-center p-1 rounded" onClick={ handleHelpCenterClick }>
-                            <i className="icon icon-help"/>
-                        </Flex>
-                        <Flex center pointer fullHeight className="nitro-purse-button text-white text-center p-1 rounded" onClick={ handleUserSettingsClick } >
-                            <i className="icon icon-cog"/>
-                        </Flex>
-                    </Column>
-                </Grid>
-            </Flex>
-            { getCurrencyElements(2, -1, true) }
+            <Column className="nitro-purse-container" gap={ 1 }>
+                <Flex className="nitro-purse rounded-bottom p-1">
+                    <Grid fullWidth gap={ 1 }>
+                        <Column justifyContent="center" size={ 6 } gap={ 0 }>
+                            <CurrencyView type={ -1 } amount={ purse.credits } short={ currencyDisplayNumberShort } />
+                            { getCurrencyElements(0, 2) }
+                        </Column>
+                        <Column center pointer size={ 4 } gap={ 1 } className="nitro-purse-subscription rounded" onClick={ handleHcCenterClick }>
+                            <CurrencyIcon type="hc" />
+                            <Text variant="white">{ getClubText }</Text>
+                        </Column>
+                        <Column justifyContent="center" size={ 2 } gap={ 0 }>
+                            <Flex center pointer fullHeight className="nitro-purse-button p-1 rounded" onClick={ handleHelpCenterClick }>
+                                <i className="icon icon-help"/>
+                            </Flex>
+                            <Flex center pointer fullHeight className="nitro-purse-button p-1 rounded" onClick={ handleUserSettingsClick } >
+                                <i className="icon icon-cog"/>
+                            </Flex>
+                        </Column>
+                    </Grid>
+                </Flex>
+                { getCurrencyElements(2, -1, true) }
+            </Column>
         </PurseContextProvider>
     );
 }
diff --git a/src/components/purse/views/CurrencyView.tsx b/src/components/purse/views/CurrencyView.tsx
index 4204d444..27004784 100644
--- a/src/components/purse/views/CurrencyView.tsx
+++ b/src/components/purse/views/CurrencyView.tsx
@@ -1,7 +1,7 @@
 import { FC, useMemo } from 'react';
 import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 import { LocalizeFormattedNumber, LocalizeShortNumber } from '../../../api';
-import { Flex } from '../../../common';
+import { Flex, Text } from '../../../common';
 import { CurrencyIcon } from '../../../views/shared/currency-icon/CurrencyIcon';
 
 interface CurrencyViewProps
@@ -18,9 +18,9 @@ export const CurrencyView: FC<CurrencyViewProps> = props =>
     const element = useMemo(() =>
     {
         return (
-            <Flex justifyContent="end" className="nitro-currency nitro-purse-button rounded">
-                <div className="px-1 text-end text-truncate nitro-currency-text align-self-center">{ short ? LocalizeShortNumber(amount) : LocalizeFormattedNumber(amount) }</div>
-                <CurrencyIcon className="flex-shrink-0" type={ type } />
+            <Flex justifyContent="end" pointer gap={ 1 } className="nitro-purse-button rounded">
+                <Text truncate textEnd variant="white" grow>{ short ? LocalizeShortNumber(amount) : LocalizeFormattedNumber(amount) }</Text>
+                <CurrencyIcon type={ type } />
             </Flex>);
     }, [ amount, short, type ]);
 
diff --git a/src/components/purse/views/SeasonalView.tsx b/src/components/purse/views/SeasonalView.tsx
index d46f6f26..49cc8930 100644
--- a/src/components/purse/views/SeasonalView.tsx
+++ b/src/components/purse/views/SeasonalView.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { LocalizeFormattedNumber, LocalizeText } from '../../../api';
-import { Flex } from '../../../common';
+import { Flex, Text } from '../../../common';
 import { CurrencyIcon } from '../../../views/shared/currency-icon/CurrencyIcon';
 
 interface SeasonalViewProps
@@ -14,14 +14,12 @@ export const SeasonalView: FC<SeasonalViewProps> = props =>
     const { type = -1, amount = -1 } = props;
 
     return (
-        <Flex justifyContent="end" className="nitro-seasonal-currency rounded">
-            <div className="nitro-currency-text w-100 px-1 d-flex justify-content-between">
-                <span className="seasonal-text">{ LocalizeText(`purse.seasonal.currency.${ type }`) }</span>
-                <span>{ LocalizeFormattedNumber(amount) }</span>
-            </div>
-            <div>
+        <Flex justifyContent="between" className="nitro-purse-seasonal-currency p-2 rounded">
+            <Text variant="white">{ LocalizeText(`purse.seasonal.currency.${ type }`) }</Text>
+            <Flex gap={ 1 }>
+                <Text variant="white">{ LocalizeFormattedNumber(amount) }</Text>
                 <CurrencyIcon type={ type } />
-            </div>
+            </Flex>
         </Flex>
     );
 }