From 235c2d7bec1ca459ff1f82b5adf6c520ac108947 Mon Sep 17 00:00:00 2001
From: duckietm <troop@mailtjes.com>
Date: Fri, 5 Apr 2024 14:55:51 +0200
Subject: [PATCH] Added: Purse

---
 src/common/index.scss                       |  1 -
 src/components/purse/PurseView.scss         | 55 ++++++++++++++++-----
 src/components/purse/PurseView.tsx          |  8 +--
 src/components/purse/views/CurrencyView.tsx |  2 +-
 4 files changed, 48 insertions(+), 18 deletions(-)

diff --git a/src/common/index.scss b/src/common/index.scss
index 705b9ca..76c0d09 100644
--- a/src/common/index.scss
+++ b/src/common/index.scss
@@ -225,7 +225,6 @@
 }
 
 .nitro-currency-icon {
-    background-position: center;
     background-repeat: no-repeat;
     width: 15px;
     height: 15px;
diff --git a/src/components/purse/PurseView.scss b/src/components/purse/PurseView.scss
index a860c41..238a8e7 100644
--- a/src/components/purse/PurseView.scss
+++ b/src/components/purse/PurseView.scss
@@ -1,26 +1,57 @@
 .nitro-purse-container {
-    font-size: $font-size-sm;
-    pointer-events: all;
-
+    font-size: 1em;
+    	
     .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);
-    
+        margin-top: 4px;
+
         .nitro-purse-subscription {
             background-color: rgba($light, 0.1);
+			pointer-events: all;
         }
     
         .nitro-purse-button {
             padding: 3px 2px;
-    
-            &:hover {
-                background-color: rgba($light, 0.1);
-            }
+        }
+        .coffecurrencybutton{
+            border-radius: 0.5rem !important;
+            background-color: #b69b83;
+            border: 2px solid hsla(0deg, 0%, 100%, 0.5);
+            margin-bottom: 3px;
+            padding: 0px !important;
+            width: 30px;
+			pointer-events: all;
+        }
+        .borderhccontent{
+            background-color: #212131;
+            border-radius: 0.5rem!important;
+            border: 2px solid #383853;
+            height: calc(100% - 3px);
+        }
+        .nitro-purse-button.currency--1 {
+            background: #e8b125;
+            border: 2px solid #f4d892;
+        }
+        .nitro-purse-button.currency-0 {
+            background: #c364c1;
+            border: 2px solid #ecb3ea;
+        }
+        .nitro-purse-button.currency-5 {
+            background: #6bafaa;
+			border: 2px solid #ace6e2;
+        }
+        .allcurrencypurse{
+            border-radius: 5px!important;
+            margin-bottom: 2px;
         }
     }
 
     .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);
+        background-color: #212131;
+        box-shadow: inset 0 5px rgba(38,38,57,.6), inset 0 -4px rgba(25,25,37,.6);
+        margin-bottom: 6px;
+        margin-top: -6px;
     }
 }
+.topcurrencygen{
+    margin-top: 2px;
+}
diff --git a/src/components/purse/PurseView.tsx b/src/components/purse/PurseView.tsx
index dc200af..d189835 100644
--- a/src/components/purse/PurseView.tsx
+++ b/src/components/purse/PurseView.tsx
@@ -1,6 +1,6 @@
 import { CreateLinkEvent, HabboClubLevelEnum } from '@nitrots/nitro-renderer';
 import { FC, useMemo } from 'react';
-import { FriendlyTime, GetConfigurationValue, LocalizeText } from '../../api';
+import { GetConfigurationValue, FriendlyTime, LocalizeText } from '../../api';
 import { Column, Flex, Grid, LayoutCurrencyIcon, Text } from '../../common';
 import { usePurse } from '../../hooks';
 import { CurrencyView } from './views/CurrencyView';
@@ -70,15 +70,15 @@ export const PurseView: FC<{}> = props =>
                         { getCurrencyElements(0, 2) }
                     </Column>
                     { !hcDisabled &&
-                        <Column center pointer size={ 4 } gap={ 1 } className="nitro-purse-subscription rounded" onClick={ event => CreateLinkEvent('habboUI/open/hccenter') }>
+                        <Column center pointer size={ 4 } gap={ 1 } className="nitro-purse-subscription rounded borderhccontent" onClick={ event => CreateLinkEvent('habboUI/open/hccenter') }>
                             <LayoutCurrencyIcon 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={ event => CreateLinkEvent('help/show') }>
+                        <Flex center pointer fullHeight className="nitro-purse-button p-1 rounded coffecurrencybutton" onClick={ event => CreateLinkEvent('help/show') }>
                             <i className="icon icon-help"/>
                         </Flex>
-                        <Flex center pointer fullHeight className="nitro-purse-button p-1 rounded" onClick={ event => CreateLinkEvent('user-settings/toggle') } >
+                        <Flex center pointer fullHeight className="nitro-purse-button p-1 rounded coffecurrencybutton" onClick={ event => CreateLinkEvent('user-settings/toggle') } >
                             <i className="icon icon-cog"/>
                         </Flex>
                     </Column>
diff --git a/src/components/purse/views/CurrencyView.tsx b/src/components/purse/views/CurrencyView.tsx
index 73f13c0..9f72158 100644
--- a/src/components/purse/views/CurrencyView.tsx
+++ b/src/components/purse/views/CurrencyView.tsx
@@ -17,7 +17,7 @@ export const CurrencyView: FC<CurrencyViewProps> = props =>
     const element = useMemo(() =>
     {
         return (
-            <Flex justifyContent="end" pointer gap={ 1 } className="nitro-purse-button rounded">
+            <Flex justifyContent="end" pointer gap={ 1 } className={`nitro-purse-button rounded allcurrencypurse nitro-purse-button currency-${type}`}>
                 <Text truncate textEnd variant="white" grow>{ short ? LocalizeShortNumber(amount) : LocalizeFormattedNumber(amount) }</Text>
                 <LayoutCurrencyIcon type={ type } />
             </Flex>);