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;
}
&.icon-help {
background: url('../images/icons/help.png');
width: 13px;
height: 23px;
}
&.icon-joinroom {
background-image: url('../images/toolbar/icons/joinroom.png');
width: 21px;

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

@ -1,14 +1,11 @@
.nitro-notification-bubble {
pointer-events: all;
background-color: $gable-green;
border: 2px solid rgba($white, 0.5);
padding: 6px 5px;
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;
&.club-gift {
}
.bubble-image {
width: 30px;
height: 30px;

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

@ -21,7 +21,7 @@ export const NotificationBubbleView: FC<NotificationBubbleViewProps> = props =>
}, [ fadesOut, close ]);
return (
<div className={ ('nitro-notification-bubble p-1 rounded ' + (className || '')) } { ...rest } onClick={ close }>
<div className={ ('nitro-notification-bubble rounded ' + (className || '')) } { ...rest } onClick={ close }>
{ children }
</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 (
<NotificationBubbleView className="flex-column club-gift" close={ close } { ...rest }>
<div className="d-flex mb-1">
<CurrencyIcon type="hc" />
<div className="d-flex align-items-center gap-2 mb-2">
<CurrencyIcon type="hc" className="flex-shrink-0" />
<span className="ms-1">{ LocalizeText('notifications.text.club_gift') }</span>
</div>
<div className="d-flex align-items-center justify-content-end">
<span className="fw-bold me-1" onClick={ close }>{ LocalizeText('notifications.button.later') }</span>
<button type="button" className="btn btn-primary btn-sm" onClick={ () => NotificationUtilities.openUrl(item.linkUrl) }>{ LocalizeText('notifications.button.show_gift_list') }</button>
<div className="d-flex align-items-center justify-content-end gap-2">
<button type="button" className="btn btn-success w-100 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>
</NotificationBubbleView>
);

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

@ -1,12 +1,10 @@
.nitro-purse {
padding: 2px;
background-color: $gable-green;
border: 2px solid rgba($white, 0.5);
border-top: 0;
background-color: rgba($dark,.95);
font-size: $font-size-sm;
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 {
color:lighten($dark,20);
@ -17,19 +15,21 @@
}
.nitro-purse-hc {
background-color: $william;
margin:0 2px;
background-color: rgba($light,.1);
margin: 0 5px;
}
.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) {
margin-top:2px;
&:last-child {
border-bottom: none;
}
&: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 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" />
<span>{ getClubText() }</span>
</div>
</div>
<div className="col-2 px-0">
<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>
</div>

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

@ -1,9 +1,4 @@
.nitro-currency {
pointer-events: all;
background: $bg-mirage-split-background;
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 {
pointer-events: all;
padding: 2px;
background-color: $gable-green;
border: 2px solid rgba($white, 0.5);
padding: 6px 5px;
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-currency-text {
background: $bg-mirage-split-background;
}
.nitro-seasonal-icon {
background-color: $william;
.seasonal-text {
color: rgba($light,.5);
}
}

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

@ -10,10 +10,10 @@ export const SeasonalView: FC<SeasonalViewProps> = props =>
return (
<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">
<span>{ LocalizeText(`purse.seasonal.currency.${ type }`) }</span>
<span className="seasonal-text">{ LocalizeText(`purse.seasonal.currency.${ type }`) }</span>
<span>{ LocalizeShortNumber(amount) }</span>
</div>
<div className="nitro-seasonal-icon">
<div>
<CurrencyIcon type={ type } />
</div>
</div>