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 { .nitro-currency-icon {
background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
width: 15px; width: 15px;
height: 15px; height: 15px;

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

@ -1,26 +1,57 @@
.nitro-purse-container { .nitro-purse-container {
font-size: $font-size-sm; font-size: 1em;
pointer-events: all;
.nitro-purse { .nitro-purse {
background-color: rgba($dark, 0.95); margin-top: 4px;
box-shadow: inset 0px 5px lighten(rgba($dark, 0.6), 2.5), inset 0 -4px darken(rgba($dark, 0.6), 4);
.nitro-purse-subscription { .nitro-purse-subscription {
background-color: rgba($light, 0.1); background-color: rgba($light, 0.1);
pointer-events: all;
} }
.nitro-purse-button { .nitro-purse-button {
padding: 3px 2px; 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 { .nitro-purse-seasonal-currency {
background-color: rgba($dark, .95); background-color: #212131;
box-shadow: inset 0px 5px lighten(rgba($dark, .6),2.5), inset 0 -4px darken(rgba($dark, .6), 4); 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 { CreateLinkEvent, HabboClubLevelEnum } from '@nitrots/nitro-renderer';
import { FC, useMemo } from 'react'; 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 { Column, Flex, Grid, LayoutCurrencyIcon, Text } from '../../common';
import { usePurse } from '../../hooks'; import { usePurse } from '../../hooks';
import { CurrencyView } from './views/CurrencyView'; import { CurrencyView } from './views/CurrencyView';
@ -70,15 +70,15 @@ export const PurseView: FC<{}> = props =>
{ getCurrencyElements(0, 2) } { getCurrencyElements(0, 2) }
</Column> </Column>
{ !hcDisabled && { !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" /> <LayoutCurrencyIcon type="hc" />
<Text variant="white">{ getClubText }</Text> <Text variant="white">{ getClubText }</Text>
</Column> } </Column> }
<Column justifyContent="center" size={ 2 } gap={ 0 }> <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"/> <i className="icon icon-help"/>
</Flex> </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"/> <i className="icon icon-cog"/>
</Flex> </Flex>
</Column> </Column>

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

@ -17,7 +17,7 @@ export const CurrencyView: FC<CurrencyViewProps> = props =>
const element = useMemo(() => const element = useMemo(() =>
{ {
return ( 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> <Text truncate textEnd variant="white" grow>{ short ? LocalizeShortNumber(amount) : LocalizeFormattedNumber(amount) }</Text>
<LayoutCurrencyIcon type={ type } /> <LayoutCurrencyIcon type={ type } />
</Flex>); </Flex>);