nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-26 23:50:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Purse updates

Browse Source
This commit is contained in:
MyNameIsBatman 2021-09-16 02:27:23 -03:00
parent 8ad3c84dd6
commit 341af1ba2a
10 changed files with 37 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/icons/help.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 233 B

6
src/assets/styles/icons.scss
View File

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

9
src/layout/notification-bubble/NotificationBubbleView.scss
View File

@ -1,14 +1,11 @@
.nitro-notification-bubble { .nitro-notification-bubble {
pointer-events: all; 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; font-size: $font-size-sm;
margin-bottom: 5px; margin-bottom: 5px;
&.club-gift {
}
.bubble-image { .bubble-image {
width: 30px; width: 30px;
height: 30px; height: 30px;

2
src/layout/notification-bubble/NotificationBubbleView.tsx
View File

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

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

@ -11,13 +11,13 @@ export const NotificationClubGiftBubbleView: FC<NotificationBubbleLayoutViewProp
return ( return (
<NotificationBubbleView className="flex-column club-gift" close={ close } { ...rest }> <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> <span className="ms-1">{ LocalizeText('notifications.text.club_gift') }</span>
</div> </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> </div>
</NotificationBubbleView> </NotificationBubbleView>
); );

24
src/views/purse/PurseView.scss
View File

@ -1,12 +1,10 @@
.nitro-purse { .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; font-size: $font-size-sm;
pointer-events: all; pointer-events: all;
margin-bottom:5px; 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 { .notification-button {
color:lighten($dark,20); color:lighten($dark,20);
@ -17,19 +15,21 @@
} }
.nitro-purse-hc { .nitro-purse-hc {
background-color: $william; background-color: rgba($light,.1);
margin:0 2px; margin: 0 5px;
} }
.nitro-purse-button { .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 { &:hover {
background: $bg-cello-split-background; background-color: rgba($light,.1);
} }
} }
} }

4
src/views/purse/PurseView.tsx
View File

@ -128,14 +128,14 @@ export const PurseView: FC<{}> = props =>
</div> </div>
</div> </div>
<div className="col-4 px-0"> <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" /> <CurrencyIcon className="flex-shrink-0" type="hc" />
<span>{ getClubText() }</span> <span>{ getClubText() }</span>
</div> </div>
</div> </div>
<div className="col-2 px-0"> <div className="col-2 px-0">
<div className="d-flex flex-column nitro-purse-buttons h-100 justify-content-center"> <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 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>
</div> </div>

5
src/views/purse/views/currency/CurrencyView.scss
View File

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

14
src/views/purse/views/seasonal/SeasonalView.scss
View File

@ -1,16 +1,12 @@
.nitro-seasonal-currency { .nitro-seasonal-currency {
pointer-events: all; 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; font-size: $font-size-sm;
margin-bottom: 5px; margin-bottom: 5px;
.nitro-currency-text { .seasonal-text {
background: $bg-mirage-split-background; color: rgba($light,.5);
}
.nitro-seasonal-icon {
background-color: $william;
} }
} }

6
src/views/purse/views/seasonal/SeasonalView.tsx
View File

@ -10,11 +10,11 @@ export const SeasonalView: FC<SeasonalViewProps> = props =>
return ( return (
<div className="nitro-seasonal-currency rounded d-flex justify-content-end"> <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"> <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> <span>{ LocalizeShortNumber(amount) }</span>
</div> </div>
<div className="nitro-seasonal-icon"> <div>
<CurrencyIcon type={ type } /> <CurrencyIcon type={ type } />
</div> </div>
</div> </div>
); );