changes ig

src/assets/styles/bootstrap/_variables.scss

@@ -79,11 +79,13 @@ $success:       #008026 !default;
 $info:          $cyan !default;
 $warning:       $yellow !default;
 $danger:        #C23027 !default;
+
 $light:         #DFDFDF !default;
-$dark:          $gray-900 !default;
+$dark:          #24211c !default;
 $light-dark:    $gray-800 !default;
 
 
+
 // scss-docs-end theme-color-variables
 
 .bg-tertiary-split {

src/assets/styles/scrollbars.scss

@@ -5,23 +5,21 @@
 
 ::-webkit-scrollbar-track {
     border-radius: $border-radius;
-    background: rgba($primary,.4);
+    background: rgba($black,.1);
-    box-shadow:inset 1px 0 rgba($black,.2);
+    box-shadow:inset 0 0 1px 1px rgba($black,.1);
     padding-top:3px;
 }
 
 ::-webkit-scrollbar-thumb {
     border-radius: $border-radius;
-    background: #DCDCDC;
+    background: rgba($primary,.4);
-    box-shadow:inset 0px 4px $white, inset 0px -4px rgba($black,.2), 0 1px rgba($black,.2);
     width: 4px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-    background: rgba($white, 1);
+    background: rgba($primary,.8);
 }
 
 ::-webkit-scrollbar-thumb:active {
-    box-shadow: inset 1px 4px rgba($white,.4), inset -1px -4px rgba($black,.2), 0 1px rgba($black,.2);
+    background: $secondary;
-    background:#C4C4C4;
 }

src/layout/card/NitroCardView.scss

@@ -12,7 +12,6 @@ $nitro-card-top-height: $nitro-card-header-height + $nitro-card-tabs-height;
 }
 
 .nitro-card-close-parent {
-    right: -3px;
     top: 5px;
     position: absolute;
     width: auto;

src/layout/card/content/NitroCardContentView.scss

@@ -7,6 +7,8 @@
         
     .content-area {
         height: 100% !important;
+        min-height: auto !important;
         max-height: 100% !important;
+        resize: none !important;
     }
 }

src/layout/card/header/NitroCardHeaderView.scss

@@ -1,4 +1,8 @@
 .nitro-card-header {
     min-height: $nitro-card-header-height;
     max-height: $nitro-card-header-height;
+
+    .nitro-card-close-parent {
+        right:-3px;
+    }
 }

src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.tsx

@@ -21,7 +21,7 @@ export const CatalogLayoutSingleBundleView: FC<CatalogLayoutSingleBundleViewProp
                         }) }
                 </div>
             </div>
-            <div className="position-relative d-flex flex-column col-5 justify-content-center align-items-center">
+            <div className="position-relative d-flex flex-column col-5 justify-content-center align-items-center h-100 overflow-auto">
                 <div className="d-block mb-2">
                     <img alt="" src={ GetCatalogPageImage(pageParser, 1) } />
                 </div>

src/views/purse/PurseView.scss

@@ -1,5 +1,14 @@
 .nitro-purse {
+    background: rgba($dark,.95);
+    border: 1px solid lighten($dark,8.3);
+    box-shadow: inset 0px 3px lighten(rgba($dark,.6),2.5), inset 0 -2px darken(rgba($dark,.6),4);
+    font-weight: bolder;
 
+    .notification-button {
+        color:lighten($dark,20);
+        cursor: pointer;
+        font-size: 0.9rem;
+    }
 }
 
 @import './currency/CurrencyView';

src/views/purse/PurseView.tsx

@@ -29,13 +29,14 @@ export const PurseView: FC<PurseViewProps> = props =>
     return (
         <PurseContextProvider value={ { purseState, dispatchPurseState }}>
             <PurseMessageHandler />
-            <div className="nitro-purse row row-cols-2 g-0">
+            <div className="nitro-purse rounded d-flex flex-row py-1 justify-content-between">
                 { currencies && currencies.map((currency, index) =>
                     {
                         if(displayedCurrencies.indexOf(currency.type) === -1) return null;
 
                         return <CurrencyView key={ index } currency={ currency } />;
                     }) }
+                <div className="notification-button px-2"><i className="fas fa-bars"/></div> 
             </div>
         </PurseContextProvider>
     );

src/views/purse/currency/CurrencyView.scss

@@ -1,9 +1,10 @@
 .nitro-currency {
-    background: rgba(20, 20, 20, .95);
+    pointer-events: all;
-    border: 1px solid #101010;
+    .nitro-currency-text {
-    box-shadow: inset 2px 2px rgba(255, 255, 255, .1), inset -2px -2px rgba(255, 255, 255, .1);
+        max-width: 60px;
-
+    }
-    .icon {
+    &:not(:last-child) {
-        border-left: 1px solid rgba(255, 255, 255, .1);
+        border-right:1px solid #000;
+        box-shadow: 1px 0 lighten($dark,8.3)
     }
 }

src/views/purse/currency/CurrencyView.tsx

@@ -1,3 +1,5 @@
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+import { LocalizeShortNumber } from '../../../utils/LocalizeShortNumber';
 import { CurrencyIcon } from '../../currency-icon/CurrencyIcon';
 import { CurrencyViewProps } from './CurrencyView.types';
 
@@ -6,13 +8,19 @@ export function CurrencyView(props: CurrencyViewProps): JSX.Element
     const { currency = null } = props;
 
     return (
-        <div className="col pe-1 pb-1">
+        <OverlayTrigger
-            <div className="nitro-currency p-1 d-flex rounded overflow-hidden">
+        placement="left"
-                <div className="flex-grow-1 px-1 me-1 text-end">{ currency.amount }</div>
+        overlay={
-                <div className="icon px-1">
+            <Tooltip id={`tooltip-${currency.type}`}>
+                { currency.amount }
+            </Tooltip>
+        }>
+            <div className="nitro-currency px-1 d-flex">
+                <div className="px-1 text-end text-truncate nitro-currency-text">{LocalizeShortNumber(currency.amount)}</div>
+                <div className="icon">
                     <CurrencyIcon type={ currency.type } />
                 </div>
             </div>
-        </div>
+        </OverlayTrigger>
     );
 }

src/views/right-side/RightSideView.scss

@@ -2,7 +2,8 @@
     position: absolute;
     top: 10px;
     right: 10px;
-    width: 200px;
+    min-width: 200px;
+    max-width: 400px;
     z-index: $rightside-zindex;
     pointer-events: none;
 }

src/views/toolbar/ToolbarView.scss

@@ -9,9 +9,9 @@
     .nitro-toolbar {
         height: 100%;
         pointer-events: all;
-        background: rgba(20, 20, 20, .95);
+        background: rgba($dark,.95);
-        border-top: 1px solid #101010;
+        border-top: 2px solid lighten($dark,8.3);
-        box-shadow: inset 0px 2px rgba(255, 255, 255, .1);
+        box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
 
         #toolbar-chat-input-container {
             margin-left: 25px;