duckietm/Nitro-Cool-UI
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-Cool-UI.git synced 2025-06-21 22:36:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added: Purse

Browse Source
This commit is contained in:
duckietm 2024-04-05 14:55:51 +02:00
parent d850e6568d
commit 235c2d7bec
4 changed files with 48 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/common/index.scss
View File

@ -225,7 +225,6 @@
}
.nitro-currency-icon {
background-position: center;
background-repeat: no-repeat;
width: 15px;
height: 15px;

55
src/components/purse/PurseView.scss
View File

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

8
src/components/purse/PurseView.tsx
View File

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

2
src/components/purse/views/CurrencyView.tsx
View File

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