Revert "stuff ui"

This reverts commit da9aba9867.

.vscode/settings.json

@@ -6,9 +6,9 @@
     "typescript.format.placeOpenBraceOnNewLineForFunctions": true,
     "editor.wordWrap": "on",
     "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": "explicit",
+        "source.fixAll.eslint": true,
-        "source.fixAll.sortJSON": "never",
+        "source.fixAll.sortJSON": false,
-        "source.organizeImports": "explicit"
+        "source.organizeImports": true
     },
     "editor.formatOnSave": false,
     "git.ignoreLimitWarning": true,

src/App.scss

@@ -51,8 +51,8 @@ $nitro-widget-crafting-height: 300px;
 $chat-history-width: 300px;
 $chat-history-height: 300px;
 
-$friends-list-width: 275px;
+$friends-list-width: 250px;
-$friends-list-height: 325px;
+$friends-list-height: 300px;
 
 $help-width: 450px;
 $help-height: 290px;

src/App.tsx

@@ -22,7 +22,6 @@ export const App: FC<{}> = props =>
         if(!NitroConfig) throw new Error('NitroConfig is not defined!');
 
         Nitro.bootstrap();
-        Nitro.instance.application.renderer.backgroundColor = 0xFFFFFF;
     }
 
     const handler = useCallback(async (event: NitroEvent) =>

src/api/utils/ColorUtils.ts

@@ -62,42 +62,4 @@ export class ColorUtils
 
         return 'rgba(' + [ r, g, b, 1 ].join(',') + ')';
     }
-
-    public static hslToHex(h, s, l) 
-    {
-        // Convert HSL to RGB first
-        let r, g, b;
-    
-        if (s === 0) 
-        {
-            r = g = b = l; // achromatic
-        }
-        else 
-        {
-            const hue2rgb = (p, q, t) => 
-            {
-                if (t < 0) t += 1;
-                if (t > 1) t -= 1;
-                if (t < 1 / 6) return p + (q - p) * 6 * t;
-                if (t < 1 / 2) return q;
-                if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
-                return p;
-            };
-    
-            const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-            const p = 2 * l - q;
-            r = hue2rgb(p, q, h + 1 / 3);
-            g = hue2rgb(p, q, h);
-            b = hue2rgb(p, q, h - 1 / 3);
-        }
-    
-        // Convert RGB to hexadecimal
-        const toHex = (c) => 
-        {
-            const hex = Math.round(c * 255).toString(16);
-            return hex.length === 1 ? '0' + hex : hex;
-        };
-    
-        return `#${ toHex(r) }${ toHex(g) }${ toHex(b) }`;
-    }
 }

src/api/utils/LocalizeFormattedNumber.ts

@@ -2,5 +2,5 @@ export function LocalizeFormattedNumber(number: number): string
 {
     if(!number || isNaN(number)) return '0';
 
-    return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
 };

src/assets/styles/bootstrap/_buttons.scss

@@ -15,6 +15,7 @@
   cursor: if($enable-button-pointers, pointer, null);
   user-select: none;
   background-color: transparent;
+  border: $btn-border-width solid transparent;
   @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);
   @include transition($btn-transition);
 

src/assets/styles/bootstrap/_functions.scss

@@ -168,7 +168,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
   $l1: luminance($background);
   $l2: luminance(opaque($background, $foreground));
 
-  @return if($l1 > $l2, divide($l1 + .01, $l2 + .01), divide($l2 + .01, $l1 + .01));
+  @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
 }
 
 // Return WCAG2.0 relative luminance

src/assets/styles/bootstrap/_reboot.scss

@@ -51,7 +51,7 @@ body {
     line-height: var(--#{$variable-prefix}body-line-height);
     color: var(--#{$variable-prefix}body-color);
     text-align: var(--#{$variable-prefix}body-text-align);
-    background-color: #001d2a; // 2
+    background-color: var(--#{$variable-prefix}body-bg); // 2
     -webkit-text-size-adjust: 100%; // 3
     -webkit-tap-highlight-color: rgba($black, 0); // 4
 }

src/assets/styles/bootstrap/_variables.scss

@@ -42,7 +42,7 @@ $purple:  #6f42c1 !default;
 $pink:    #d63384 !default;
 $red:     #a81a12 !default;
 $orange:  #fd7e14 !default;
-$yellow:  #fcbe00 !default;
+$yellow:  #ffc107 !default;
 $green:   #00800b !default;
 $teal:    #20c997 !default;
 $cyan:    #0dcaf0 !default;
@@ -70,10 +70,10 @@ $colors: (
 // scss-docs-end colors-map
 
 // scss-docs-start theme-color-variables
-$primary:       #3986b1 !default;
+$primary:       #1E7295 !default;
-$secondary:     darken($primary,10) !default;
+$secondary:     #185D79 !default;
-$tertiary:      $primary !default;
+$tertiary:      #2DABC2 !default;
-$quaternary:    darken($primary,10) !default;
+$quaternary:    #2B91A7 !default;
 $mirage:        #131e25 !default;
 $aztec:         #0d171d !default;
 $cello-light:   #21516e !default;
@@ -91,13 +91,9 @@ $info:          $cyan !default;
 $warning:       $yellow !default;
 $danger:        $red !default;
 
-$f-grey: #555555;
+$light:         #DFDFDF !default;
-$f-grey-sec: #444444;
+$dark:          rgba(28,28,32,.9803921568627451) !default;
-
-$light:         #e3e3d8 !default;
-$dark:          $f-grey-sec !default;
 $light-dark:    $gray-800 !default;
-
 // scss-docs-end theme-color-variables
 
 $bg-tertiary-split-background: repeating-linear-gradient($tertiary, $tertiary 50%, $quaternary 50%, $quaternary 100%) !default;
@@ -131,8 +127,7 @@ $theme-colors: (
   "black":      $black,
   "muted":      $muted,
   "purple":     $purple,
-  "gainsboro":  $gainsboro,
+  "gainsboro":  $gainsboro
-  'f-grey': $f-grey
 ) !default;
 // scss-docs-end theme-colors-map
 
@@ -565,11 +560,11 @@ $border-widths: (
   5: 5px
 ) !default;
 
-$border-color:                black !default;
+$border-color:                #283F5D !default;
 // scss-docs-end border-variables
 
 // scss-docs-start border-radius-variables
-$border-radius:               .30rem !default;
+$border-radius:               .25rem !default;
 $border-radius-sm:            .2rem !default;
 $border-radius-lg:            .3rem !default;
 $border-radius-pill:          50rem !default;
@@ -624,7 +619,7 @@ $font-family-code:            var(--#{$variable-prefix}font-monospace) !default;
 // $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
 // $font-size-base affects the font size of the body text
 $font-size-root:              null !default;
-$font-size-base:              .75rem !default; // Assumes the browser default, typically `16px`
+$font-size-base:              .9rem !default; // Assumes the browser default, typically `16px`
 $font-size-sm:                $font-size-base * .875 !default;
 $font-size-lg:                $font-size-base * 1.25 !default;
 
@@ -1134,7 +1129,7 @@ $nav-link-hover-color:              null !default;
 $nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
 $nav-link-disabled-color:           $gray-600 !default;
 
-$nav-tabs-border-color:             black !default;
+$nav-tabs-border-color:             #283F5D !default;
 $nav-tabs-border-width:             $border-width !default;
 $nav-tabs-border-radius:            $border-radius !default;
 $nav-tabs-link-bg:                  $muted !default;

src/assets/styles/bootstrap/mixins/_buttons.scss

@@ -20,31 +20,13 @@
 ) {
   color: $color;
   @include gradient-bg($background);
-  border: 1px solid darken($background, 20%);
+  border-color: $border;
-  box-shadow: inset 0 -2px darken($background, 5%);
+  @include box-shadow($btn-box-shadow);
-  filter: drop-shadow(0px 1px 0 rgba(white,.3)) drop-shadow(0px -1px 0 rgba(black,.2));
-  position: relative;
 
-  &::before {
+  &:hover {
-    content:'';
+    color: $hover-color;
-    height:2px;
+    @include gradient-bg($hover-background);
-    position: absolute;
+    border-color: $hover-border;
-    top:0;
-    left:0;
-    right:0;
-    margin:1px;
-    border-radius: 1px;
-    background: lighten($background, 10%);
-  }
-
-  &:hover,
-  &.inset {
-    background: darken($background, 10%);
-    box-shadow: inset 0 2px darken($background, 15%);
-
-    &::before {
-      height: 0;
-    }
   }
 
   .btn-check:focus + &,
@@ -101,27 +83,12 @@
   $active-color: color-contrast($active-background)
 ) {
   color: $color;
-  border: 1px solid $color;
+  border-color: $color;
-  border-radius: 0 !important;
-  box-shadow: none;
-  filter:unset !important;
-  position: relative;
 
   &:hover {
     color: $color-hover;
-    border-color: $active-border;
-
-    &::before {
-      content:'';
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      margin:1px;
     background-color: $active-background;
-      z-index: -2;
+    border-color: $active-border;
-    }
   }
 
   .btn-check:focus + &,

src/assets/styles/fonts.scss

@@ -1,4 +1,4 @@
 @font-face {
     font-family: Ubuntu;
-    src: url('@/assets/webfonts/Ubuntu.ttf');
+    src: url('@/assets/webfonts/Ubuntu-C.ttf');
 }

src/assets/styles/icons.scss

@@ -25,8 +25,8 @@
 
     &.icon-catalog {
         background-image: url('@/assets/images/toolbar/icons/catalog.png');
-        width: 33px;
+        width: 37px;
-        height: 33px;
+        height: 36px;
     }
 
     &.icon-game {
@@ -53,8 +53,8 @@
 
     &.icon-inventory {
         background-image: url('@/assets/images/toolbar/icons/inventory.png');
-        height: 29px;
+        height: 41px;
-        width: 28px;
+        width: 44px;
     }
 
     &.icon-modtools {
@@ -367,25 +367,6 @@
         height: 22px;
     }
 
-    &.icon-search {
-        background: url('@/assets/images/fusion/friends/search.png');
-        width: 18px;
-        height: 18px;
-    }
-
-    &.icon-online-friends {
-        background: url('@/assets/images/fusion/friends/online.png');
-        width: 18px;
-        height: 18px;
-    }
-
-    &.icon-offline-friends {
-        background: url('@/assets/images/fusion/friends/online.png');
-        width: 18px;
-        height: 18px;
-        filter: saturate(0);
-    }
-
     &.icon-arrows {
         background: url('@/assets/images/icons/arrows.png');
         width: 17px;

src/assets/styles/index.scss

@@ -4,7 +4,6 @@
 @import './slider';
 @import './icons';
 @import './utils';
-@import './inputs.scss';
 
 .btn-sm {
   min-height: 28px;

src/assets/styles/inputs.scss

@@ -1,12 +0,0 @@
-.fi {
-    &.fi-white {
-        background:transparent;
-        border:1px solid white;
-        color:white;
-    }
-
-    outline: none !important;
-    &* {
-        outline: none !important;
-    }
-}

src/common/Button.tsx

@@ -8,22 +8,17 @@ export interface ButtonProps extends FlexProps
     size?: ButtonSizeType;
     active?: boolean;
     disabled?: boolean;
-    outline?: boolean;
-    tp?: boolean;
 }
 
 export const Button: FC<ButtonProps> = props =>
 {
-    const { variant = 'primary', size = 'sm', active = false, disabled = false, classNames = [], outline = false, tp = false, ...rest } = props;
+    const { variant = 'primary', size = 'sm', active = false, disabled = false, classNames = [], ...rest } = props;
 
     const getClassNames = useMemo(() =>
     {
         const newClassNames: string[] = [ 'btn' ];
 
-        if(outline && variant) newClassNames.push('btn-outline-' + variant)
+        if(variant) newClassNames.push('btn-' + variant);
-        else if (variant) newClassNames.push('btn-' + variant);
-        
-        if (tp) newClassNames.push('btn-transparent');
 
         if(size) newClassNames.push('btn-' + size);
 
@@ -34,7 +29,7 @@ export const Button: FC<ButtonProps> = props =>
         if(classNames.length) newClassNames.push(...classNames);
 
         return newClassNames;
-    }, [ variant, size, active, disabled, classNames, outline ]);
+    }, [ variant, size, active, disabled, classNames ]);
 
     return <Flex center classNames={ getClassNames } { ...rest } />;
 }

src/common/card/NitroCardHeaderView.tsx

@@ -1,5 +1,5 @@
 import { FC, MouseEvent, useMemo } from 'react';
-import { FaFlag } from 'react-icons/fa';
+import { FaFlag, FaTimes } from 'react-icons/fa';
 import { Base, Column, ColumnProps, Flex } from '..';
 
 interface NitroCardHeaderViewProps extends ColumnProps
@@ -32,14 +32,16 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
 
     return (
         <Column center position="relative" classNames={ getClassNames } { ...rest }>
-            <Flex fullWidth alignItems="center" justifyContent="between" className="nitro-header-stuff">
+            <Flex fullWidth center>
                 <span className="nitro-card-header-text">{ headerText }</span>
                 { isGalleryPhoto &&
                     <Base position="absolute" className="end-4 nitro-card-header-report-camera" onClick={ onReportPhoto }>
                         <FaFlag className="fa-icon" />
                     </Base>
                 }
-                <Flex center position="absolute" className="end-2 nitro-card-header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick } />
+                <Flex center position="absolute" className="end-2 nitro-card-header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>
+                    <FaTimes className="fa-icon w-12 h-12" />
+                </Flex>
             </Flex>
         </Column>
     );

src/common/card/NitroCardView.scss

@@ -1,8 +1,5 @@
-$nitro-card-header-height: 29px;
+$nitro-card-header-height: 33px;
-$nitro-card-tabs-height: 29px;
+$nitro-card-tabs-height: 33px;
-
-$lp: lighten($primary, 15);
-$ls: lighten($secondary, 15);
 
 .nitro-card {
     resize: both;
@@ -12,41 +9,40 @@ $ls: lighten($secondary, 15);
         max-height: 100vh !important;
     }
 
-    &.theme-primary,
+    &.theme-primary {
-    &.theme-yellow {
         border: $border-width solid $border-color;
-        border-bottom-width: 3px;
-        box-shadow: 0 0 10px 0px black;
 
         .nitro-card-header {
-            min-height:$nitro-card-header-height;
+            min-height: 33px;
-            max-height: $nitro-card-header-height;
+            max-height: 33px;
             background: $primary;
-            border-bottom: 1px solid $secondary;
-            border-radius:  $border-radius $border-radius 0 0;
-            box-shadow: 0 1px $primary, inset 0 1px $lp, inset 1px 0 $lp, inset -1px 0 $lp;
-
-            .nitro-header-stuff {
-                justify-content: center !important;
-            }
 
             .nitro-card-header-text {
                 color: $white;
-                text-shadow: 0px -1px rgba(black, 0.5);
+                text-shadow: 0px 4px 4px rgba($black, 0.25);
                 @include font-size($h4-font-size);
             }
 
             .nitro-card-header-close {
-                width:19px;
+                cursor: pointer;
-                height:20px;
+                padding: 2px 2px;
-                background-image: url(@/assets/images/fusion/cards/card-close.png);
+                line-height: 1;
+                border-radius: $border-radius;
+                box-shadow: 0 0 0 1.6px $white;
+                border: 2px solid #921911;
+                background: repeating-linear-gradient(
+                    rgba(245, 80, 65, 1),
+                    rgba(245, 80, 65, 1) 50%,
+                    rgba(194, 48, 39, 1) 50%,
+                    rgba(194, 48, 39, 1) 100%
+                );
 
                 &:hover {
-                    background-position: -38px 0px;
+                    filter: brightness(1.2);
                 }
 
                 &:active {
-                    background-position: -19px 0px;
+                    filter: brightness(0.8);
                 }
             }
 
@@ -76,91 +72,97 @@ $ls: lighten($secondary, 15);
 
         .nitro-card-tabs {
             background-color: $secondary;
-            box-shadow: inset 1px 0 $ls, inset -1px 0 $ls, inset 0 -1px $ls;
 
             .nav-item {
                 padding: $nav-link-padding-y $nav-link-padding-x;
-                background-color: rgba($light, 0.7);
+                background-color: $muted;
                 color: $black;
                 z-index: 1;
                 margin-bottom: -1px;
-                border-color: rgba(black, 0.7) !important;
-                border-bottom: 0px solid black;
-                margin-left:-1px;
 
                 &.active {
                     background-color: $light;
                     border-color: $border-color $border-color $light !important;
-                    border-width: 2px !important;
+                    border-bottom: 1px solid black;
 
                     &:before {
                         background: $white;
                     }
+                }
 
-                    box-shadow: 0 2px $light, inset 0 -2px $light, inset 0 0 0 2px white;
+                &:before {
+                    content: '';
+                    position: absolute;
+                    width: 93%;
+                    height: 3px;
+                    border-radius: 0.25rem;
+                    top: 1.5px;
+                    left: 0;
+                    right: 0;
+                    margin: auto;
+                    background: #c2c9d1;
+                    z-index: 1;
                 }
             }
         }
 
         .content-area {
             background-color: $light;
-            box-shadow: inset 0 0 0 2px white;
         }
     }
 
-    &.theme-primary-slim,
+    &.theme-primary-slim {
-    &.theme-yellow-slim {
         border: $border-width solid $border-color;
-        background-color: $f-grey-sec;
-        box-shadow: inset 0 0 0 2px white;
-        border-radius: $border-radius-lg !important;
-        border-bottom-width: 3px;
-        box-shadow: inset 0 0 0 1px rgba(white, 0.3), $box-shadow !important;
-        padding:1px;
-        padding-bottom: 3px;
 
         .nitro-card-header {
             position: relative;
-            min-height: 29px;
+            min-height: 28px;
-            max-height: 29px;
+            max-height: 28px;
-            background: repeating-linear-gradient($f-grey, $f-grey 50%, $f-grey-sec 50%, $f-grey-sec 100%);
+            background: repeating-linear-gradient($tertiary, $tertiary 50%, $quaternary 50%, $quaternary 100%);
-            border-radius: $border-radius-sm $border-radius-sm 0 0;
+            border-bottom: 2px solid darken($quaternary, 5);
+            box-shadow: 0 2px white;
+            width: 100%;
+            margin: 0;
+            padding-top:2px;
 
-            &::before {
+            &:before {
-                content:'';
                 position: absolute;
-                height:1px;
+                content: ' ';
                 top: 0;
-                bottom:0;
                 left: 0;
-                right:0;
+                width: 100%;
-                margin:auto;
+                height: 2px;
-                background: $f-grey-sec;
+                background-color: rgba($white, 0.3);
-                box-shadow: 0 1px $f-grey;
-                z-index: 1;
-            }
-
-            > * {
-                z-index: 3;
             }
 
             .nitro-card-header-text {
-                color: white;
+                color: $white;
-                text-shadow: 0px -1px rgba(black, 0.5);
+                text-shadow: 0px 4px 4px rgba($black, 0.25);
                 @include font-size($h5-font-size);
+                min-height: 21px;
             }
 
             .nitro-card-header-close {
-                width:19px;
+                cursor: pointer;
-                height:20px;
+                padding: 0px 2px;
-                background-image: url(@/assets/images/fusion/cards/card-close.png);
+                line-height: 1;
+                @include font-size($h7-font-size);
+                border-radius: $border-radius;
+                box-shadow: 0 0 0 1.6px $white;
+                border: 2px solid #921911;
+                background: repeating-linear-gradient(
+                    rgba(245, 80, 65, 1),
+                    rgba(245, 80, 65, 1) 50%,
+                    rgba(194, 48, 39, 1) 50%,
+                    rgba(194, 48, 39, 1) 100%
+                );
 
                 &:hover {
-                    background-position: -38px 0px;
+                    filter: brightness(1.2);
                 }
 
                 &:active {
-                    background-position: -19px 0px;
+                    filter: brightness(0.8);
                 }
             }
 
@@ -195,102 +197,7 @@ $ls: lighten($secondary, 15);
         }
 
         .content-area {
-            z-index: 4;
-            border:1px solid black;
-            border-radius: 0 0 $border-radius-sm $border-radius-sm;
             background-color: $light;
-            margin:0 2px;
-            width: auto !important;
-            box-shadow: 0 -1px rgba(white,.3);
-
-        }
-    }
-
-    &.theme-yellow {
-        background: darken($warning, 10);
-        box-shadow: inset 1px 0 $warning, inset -1px 0 $warning, inset 0 -1px $warning;
-
-        .nitro-card-header {
-            background: $warning;
-            box-shadow: 0 1px $warning, inset 0 1px lighten($warning,15), inset 1px 0 lighten($warning,15), inset -1px 0 lighten($warning,15);
-            border-bottom: 1px solid darken($warning, 15);
-        }
-
-        .nitro-card-tabs {
-            border-bottom:0;
-            background-color: darken($warning, 10);
-            box-shadow: inset 1px 0 $warning, inset -1px 0 $warning;
-            gap:3px;
-            padding-left:5px;
-            padding-right:5px;
-
-            .nav-item {
-                background-color: $warning;
-                margin-left: 0px;
-                border-radius: $border-radius-lg;
-                box-shadow: 0 1px $warning, 0 -1px darken($warning, 20), inset 0 -2px darken($warning, 10);
-                width: 100%;
-
-                &.active {
-                    background-color: #b67f04;
-                    border-color: $border-color !important;
-                    border-width: 1px !important;
-                    box-shadow: inset 0 3px darken($warning, 25), 0 1px $warning, 0 -1px darken($warning, 20);
-
-                    &:before {
-                        background: $white;
-                    }
-                }
-            }
-        }
-
-        .content-area {
-            background-image: url(@/assets/images/fusion/cards/yellow-bg.png);
-            color:white;
-            box-shadow: inset 0 0 0 2px rgba(0,0,0,.3);
-            border:1px solid black;
-            margin:5px;
-            width: auto !important;
-        }
-    }
-
-    &.theme-yellow-slim {
-        background-color: darken($warning,8);
-        padding:1px 3px 3px 3px;
-        box-shadow: inset 0 0 0 1px lighten($warning,20), $box-shadow !important;
-
-        .nitro-card-header {
-            background: repeating-linear-gradient($warning, $warning 50%, darken($warning,8) 50%, darken($warning,8) 100%);
-            margin: 0 -2px;
-            width: calc(100% + 4px);
-
-            .nitro-header-stuff {
-                justify-content: space-between !important;
-            }
-            
-            .nitro-card-header-text {
-                color: darken($warning, 50);
-                text-shadow: 0px -1px rgba(black, 0.5), 0 1px lighten($warning,15);
-            }
-
-            &::before {
-                background: darken($warning,8);
-                box-shadow: 0 1px $warning;
-            }
-        }
-
-
-        >:not(:first-child) {
-            margin:0 4px;
-        }
-
-        .content-area {
-            background-image: url(@/assets/images/fusion/cards/yellow-bg.png);
-            color:white;
-            border-radius: $border-radius-lg;
-            width: auto !important;
-            box-shadow: 0 -1px lighten($warning,10), inset 0 0 0 4px rgba(0,0,0,.3), 0 1px darken($warning, 23);
-            padding:8px;
         }
     }
 }
@@ -304,10 +211,6 @@ $ls: lighten($secondary, 15);
     &.theme-dark {
         background-color: #1C323F !important;
     }
-
-    .btn {
-        filter: drop-shadow(0px 1px 0 white) drop-shadow(0px -1px 0 rgba(black,.2));
-    }
 }
 
 @include media-breakpoint-down(lg) {
@@ -335,6 +238,7 @@ $ls: lighten($secondary, 15);
     &.active {
         height: 100%;
         overflow: hidden;
+        background: rgba($white, 0.5);
         border-bottom: 1px solid rgba($black, 0.2);
     }
 

src/common/card/NitroCardView.tsx

@@ -15,7 +15,7 @@ export const NitroCardView: FC<NitroCardViewProps> = props =>
 
     const getClassNames = useMemo(() =>
     {
-        const newClassNames: string[] = [ 'nitro-card', 'rounded', ];
+        const newClassNames: string[] = [ 'nitro-card', 'rounded', 'shadow', ];
 
         newClassNames.push(`theme-${ theme || 'primary' }`);
 
@@ -24,35 +24,35 @@ export const NitroCardView: FC<NitroCardViewProps> = props =>
         return newClassNames;
     }, [ theme, classNames ]);
 
-    // useEffect(() =>
+    /* useEffect(() =>
-    // {
+    {
-    //     if(!uniqueKey || !elementRef || !elementRef.current) return;
+        if(!uniqueKey || !elementRef || !elementRef.current) return;
 
-    //     const localStorage = GetLocalStorage<WindowSaveOptions>(`nitro.windows.${ uniqueKey }`);
+        const localStorage = GetLocalStorage<WindowSaveOptions>(`nitro.windows.${ uniqueKey }`);
-    //     const element = elementRef.current;
+        const element = elementRef.current;
 
-    //     if(localStorage && localStorage.size)
+        if(localStorage && localStorage.size)
-    //     {
+        {
-    //         //element.style.width = `${ localStorage.size.width }px`;
+            //element.style.width = `${ localStorage.size.width }px`;
-    //         //element.style.height = `${ localStorage.size.height }px`;
+            //element.style.height = `${ localStorage.size.height }px`;
-    //     }
+        }
 
-    //     const observer = new ResizeObserver(event =>
+        const observer = new ResizeObserver(event =>
-    //     {
+        {
-    //         const newStorage = { ...GetLocalStorage<Partial<WindowSaveOptions>>(`nitro.windows.${ uniqueKey }`) } as WindowSaveOptions;
+            const newStorage = { ...GetLocalStorage<Partial<WindowSaveOptions>>(`nitro.windows.${ uniqueKey }`) } as WindowSaveOptions;
 
-    //         newStorage.size = { width: element.offsetWidth, height: element.offsetHeight };
+            newStorage.size = { width: element.offsetWidth, height: element.offsetHeight };
 
-    //         SetLocalStorage<WindowSaveOptions>(`nitro.windows.${ uniqueKey }`, newStorage);
+            SetLocalStorage<WindowSaveOptions>(`nitro.windows.${ uniqueKey }`, newStorage);
-    //     });
+        });
 
-    //     observer.observe(element);
+        observer.observe(element);
 
-    //     return () =>
+        return () =>
-    //     {
+        {
-    //         observer.disconnect();
+            observer.disconnect();
-    //     }
+        }
-    // }, [ uniqueKey ]);
+    }, [ uniqueKey ]); */
 
     return (
         <NitroCardContextProvider value={ { theme } }>

src/common/card/accordion/NitroCardAccordionSetView.tsx

@@ -71,7 +71,7 @@ export const NitroCardAccordionSetView: FC<NitroCardAccordionSetViewProps> = pro
     return (
         <Column classNames={ getClassNames } gap={ gap } { ...rest }>
             <Flex pointer justifyContent="between" className="nitro-card-accordion-set-header px-2 py-1" onClick={ onClick }>
-                <Text variant="white">{ headerText }</Text>
+                <Text>{ headerText }</Text>
                 { isOpen && <FaCaretUp className="fa-icon" /> }
                 { !isOpen && <FaCaretDown className="fa-icon" /> }
             </Flex>

src/common/card/tabs/NitroCardTabsView.tsx

@@ -3,7 +3,7 @@ import { Flex, FlexProps } from '../..';
 
 export const NitroCardTabsView: FC<FlexProps> = props =>
 {
-    const { justifyContent = 'start', gap = 0, classNames = [], children = null, ...rest } = props;
+    const { justifyContent = 'center', gap = 1, classNames = [], children = null, ...rest } = props;
 
     const getClassNames = useMemo(() =>
     {

src/common/draggable-window/DraggableWindow.tsx

@@ -2,11 +2,10 @@ import { MouseEventType, TouchEventType } from '@nitrots/nitro-renderer';
 import { CSSProperties, FC, Key, MouseEvent as ReactMouseEvent, ReactNode, TouchEvent as ReactTouchEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Base } from '..';
-import { GetLocalStorage, WindowSaveOptions } from '../../api';
+import { GetLocalStorage, SetLocalStorage, WindowSaveOptions } from '../../api';
 import { DraggableWindowPosition } from './DraggableWindowPosition';
 
 const CURRENT_WINDOWS: HTMLElement[] = [];
-const POS_MEMORY: Map<Key, { x: number, y: number }> = new Map();
 const BOUNDS_THRESHOLD_TOP: number = 0;
 const BOUNDS_THRESHOLD_LEFT: number = 0;
 
@@ -139,7 +138,14 @@ export const DraggableWindow: FC<DraggableWindowProps> = props =>
         setOffset({ x: offsetX, y: offsetY });
         setIsDragging(false);
 
-        if(uniqueKey !== null) POS_MEMORY.set(uniqueKey, { x: offsetX, y: offsetY });
+        if(uniqueKey !== null)
+        {
+            const newStorage = { ...GetLocalStorage<WindowSaveOptions>(`nitro.windows.${ uniqueKey }`) } as WindowSaveOptions;
+
+            newStorage.offset = { x: offsetX, y: offsetY };
+
+            SetLocalStorage<WindowSaveOptions>(`nitro.windows.${ uniqueKey }`, newStorage);
+        }
     }, [ dragHandler, delta, offset, uniqueKey ]);
 
     const onDragMouseUp = useCallback((event: MouseEvent) =>
@@ -188,17 +194,6 @@ export const DraggableWindow: FC<DraggableWindowProps> = props =>
                 break;
         }
 
-        if(uniqueKey !== null)
-        {
-            const memory = POS_MEMORY.get(uniqueKey);
-
-            if(memory)
-            {
-                offsetX = memory.x;
-                offsetY = memory.y;
-            }
-        }
-
         setDelta({ x: 0, y: 0 });
         setOffset({ x: offsetX, y: offsetY });
 

src/common/layout/LayoutNotificationAlertView.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode, useMemo } from 'react';
+import { FC, useMemo } from 'react';
 import { NotificationAlertType } from '../../api';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroCardViewProps } from '../card';
 
@@ -7,12 +7,11 @@ export interface LayoutNotificationAlertViewProps extends NitroCardViewProps
     title?: string;
     type?: string;
     onClose: () => void;
-    options?: ReactNode;
 }
 
 export const LayoutNotificationAlertView: FC<LayoutNotificationAlertViewProps> = props =>
 {
-    const { title = '', onClose = null, classNames = [], children = null,type = NotificationAlertType.DEFAULT, options = null, ...rest } = props;
+    const { title = '', onClose = null, classNames = [], children = null,type = NotificationAlertType.DEFAULT, ...rest } = props;
 
     const getClassNames = useMemo(() =>
     {
@@ -31,7 +30,6 @@ export const LayoutNotificationAlertView: FC<LayoutNotificationAlertViewProps> =
             <NitroCardContentView grow justifyContent="between" overflow="hidden" className="text-black" gap={ 0 }>
                 { children }
             </NitroCardContentView>
-            { options }
         </NitroCardView>
     );
 }

src/common/types/ColorVariantType.ts

@@ -1 +1 @@
-export type ColorVariantType = 'primary' | 'success' | 'danger' | 'secondary' | 'link' | 'black' | 'white' | 'dark' | 'warning' | 'muted' | 'light' | 'f-grey';
+export type ColorVariantType = 'primary' | 'success' | 'danger' | 'secondary' | 'link' | 'black' | 'white' | 'dark' | 'warning' | 'muted' | 'light';

src/components/friends/FriendsView.scss

@@ -1,5 +1,3 @@
-@import './views/friends-list/myinfo/MyInfo.scss';
-
 .nitro-friends-spritesheet {
     background: url('@/assets/images/friends/friends-spritesheet.png') transparent no-repeat;
 
@@ -120,35 +118,18 @@
         position: relative;
         padding-left:38px;
         text-align: left;
-        position: relative;
-        pointer-events: all;
-
-        &:not(:last-of-type)::before {
-            content:'';
-            width:1px;
-            background-color: black;
-            box-shadow: 0px 1px 0 lighten($f-grey, 10%), 0px -1px 0 darken($f-grey-sec, 10);
-            height: 33px;
-            position: absolute;
-            left:100%;
-        }
 
         &.friend-bar-item-active {
-            .friend-bar-item-head {
+            margin-bottom:21px;
-                &.avatar {
-                    top: -50px;
-                    left: -30px;
-                }
-            }
         }
 
         .friend-bar-item-head {
             &.avatar {
-                top: -40px;
+                top: -30px;
                 left: -30px;
             }
             &.group {
-                top: -15px;
+                top: -5px;
                 left: -5px;
             }
 

src/components/friends/views/friends-bar/FriendBarItemView.tsx

@@ -33,7 +33,7 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
     if(!friend)
     {
         return (
-            <div ref={ elementRef } className="btn btn-f-grey friend-bar-search">
+            <div ref={ elementRef } className="btn btn-primary friend-bar-item friend-bar-search">
                 <div className="friend-bar-item-head position-absolute"/>
                 <div className="text-truncate">{ LocalizeText('friend.bar.find.title') }</div>
             </div>
@@ -41,18 +41,19 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
     }
 
     return (
-        <div ref={ elementRef } className={ 'friend-bar-item  d-flex align-items-center ' + (isVisible ? 'friend-bar-item-active' : '') } onMouseOver={ () => setVisible(true) } onMouseOut={ () => setVisible(false) }>
+        <div ref={ elementRef } className={ 'btn btn-success friend-bar-item ' + (isVisible ? 'friend-bar-item-active' : '') } onClick={ event => setVisible(prevValue => !prevValue) }>
             <div className={ `friend-bar-item-head position-absolute ${ friend.id > 0 ? 'avatar': 'group' }` }>
-                { (friend.id > 0) && <LayoutAvatarImageView figure={ friend.figure } direction={ isVisible ? 2 : 3 } /> }
+                { (friend.id > 0) && <LayoutAvatarImageView headOnly={ true } figure={ friend.figure } direction={ 2 } /> }
                 { (friend.id <= 0) && <LayoutBadgeImageView isGroup={ true } badgeCode={ friend.figure } /> } 
             </div>
-            { isVisible ?
+            <div className="text-truncate">{ friend.name }</div>
-                <div className="d-flex justify-content-between w-100 gap-2 pe-1">
+            { isVisible &&
+            <div className="d-flex justify-content-between">
                 <Base className="nitro-friends-spritesheet icon-friendbar-chat cursor-pointer" onClick={ event => OpenMessengerChat(friend.id) } />
                 { friend.followingAllowed &&
                 <Base className="nitro-friends-spritesheet icon-friendbar-visit cursor-pointer" onClick={ event => followFriend(friend) } /> }
                 <Base className="nitro-friends-spritesheet icon-profile cursor-pointer" onClick={ event => GetUserProfile(friend.id) } />
-                </div> : <div className="text-truncate w-100 pe-1">{ friend.name }</div> }
+            </div> }
         </div>
     );
 }

src/components/friends/views/friends-bar/FriendsBarView.tsx

@@ -1,62 +1,19 @@
-import { FC, useCallback, useEffect, useRef, useState } from 'react';
+import { FC, useRef, useState } from 'react';
 import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
 import { MessengerFriend } from '../../../../api';
 import { Button, Flex } from '../../../../common';
 import { FriendBarItemView } from './FriendBarItemView';
 
+const MAX_DISPLAY_COUNT = 3;
+
 export const FriendBarView: FC<{ onlineFriends: MessengerFriend[] }> = props =>
 {
     const { onlineFriends = null } = props;
     const [ indexOffset, setIndexOffset ] = useState(0);
-    const [ MAX_DISPLAY_COUNT, setMaxDisplayCount ] = useState(1);
+    const elementRef = useRef<HTMLDivElement>();
-
-    const friendWidth = 150;
-    const friendRef = useRef<HTMLDivElement>();
-
-    const calculateDisplayCount = useCallback(() =>
-    {
-        let min = 1 + onlineFriends.length;
-
-        if(!friendRef.current) return min;
-        
-        let max = Math.floor((friendRef?.current?.getBoundingClientRect().width - 60) / friendWidth);
-
-        if(min >= max) min = max;
-
-        setMaxDisplayCount( min );
-    }, [ friendWidth, onlineFriends ])
-
-
-    useEffect(() =>
-    {
-        if(!friendRef.current) return;
-
-        const resizeObserver = new ResizeObserver(() =>
-        {
-            calculateDisplayCount();
-            resizeObserver.disconnect();
-        });
-
-        resizeObserver.observe(friendRef.current);
-
-        window.addEventListener('resize', () =>
-        {
-            calculateDisplayCount()
-        });
-
-        return () =>
-        {
-            resizeObserver.disconnect();
-            window.removeEventListener('resize', () =>
-            {
-                calculateDisplayCount()
-            });
-
-        }
-    }, [ calculateDisplayCount, friendRef ]);
 
     return (
-        <Flex innerRef={ friendRef } className="w-100 justify-content-center align-items-center friend-bar" gap={ 1 }>
+        <Flex innerRef={ elementRef } alignItems="center" className="friend-bar">
             <Button variant="black" className="friend-bar-button" disabled={ (indexOffset <= 0) } onClick={ event => setIndexOffset(indexOffset - 1) }>
                 <FaChevronLeft className="fa-icon" />
             </Button>

src/components/friends/views/friends-list/FriendsListSearchView.tsx

@@ -1,7 +1,7 @@
 import { HabboSearchComposer, HabboSearchResultData, HabboSearchResultEvent } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText, OpenMessengerChat, SendMessageComposer } from '../../../../api';
-import { Base, Column, Flex, NitroCardAccordionItemView, NitroCardAccordionSetViewProps, Text, UserProfileIconView } from '../../../../common';
+import { Base, Column, Flex, NitroCardAccordionItemView, NitroCardAccordionSetView, NitroCardAccordionSetViewProps, Text, UserProfileIconView } from '../../../../common';
 import { useFriends, useMessageEvent } from '../../../../hooks';
 
 interface FriendsSearchViewProps extends NitroCardAccordionSetViewProps
@@ -39,18 +39,19 @@ export const FriendsSearchView: FC<FriendsSearchViewProps> = props =>
         return () => clearTimeout(timeout);
     }, [ searchValue ]);
 
-    return <>
+    return (
-        <Text bold variant="white">{ LocalizeText('friendlist.tip.tab.3') }</Text>
+        <NitroCardAccordionSetView { ...rest }>
-        <input type="text" className="fi fi-white" placeholder={ LocalizeText('generic.search') } value={ searchValue } maxLength={ 50 } onChange={ event => setSearchValue(event.target.value) } />
+            <input type="text" className="search-input form-control form-control-sm w-100 rounded-0" placeholder={ LocalizeText('generic.search') } value={ searchValue } maxLength={ 50 } onChange={ event => setSearchValue(event.target.value) } />
-        <Column gap={ 1 } fullHeight overflow="hidden">
+            <Column>
                 { friendResults &&
                     <>
                         { (friendResults.length === 0) &&
-                            <Text bold small variant="white">{ LocalizeText('friendlist.search.nofriendsfound') }</Text> }
+                            <Text bold small className="px-2 py-1">{ LocalizeText('friendlist.search.nofriendsfound') }</Text> }
                         { (friendResults.length > 0) &&
-                            <Column gap={ 0 } fullHeight overflow="hidden">
+                            <Column gap={ 0 }>
-                                <Text bold small variant="white">{ LocalizeText('friendlist.search.friendscaption', [ 'cnt' ], [ friendResults.length.toString() ]) }</Text>
+                                <Text bold small className="px-2 py-1">{ LocalizeText('friendlist.search.friendscaption', [ 'cnt' ], [ friendResults.length.toString() ]) }</Text>
-                                <Column gap={ 0 } fullHeight className="overflow-y-scroll">
+                                <hr className="mx-2 mt-0 mb-1 text-black" />
+                                <Column gap={ 0 }>
                                     { friendResults.map(result =>
                                     {
                                         return (
@@ -72,11 +73,12 @@ export const FriendsSearchView: FC<FriendsSearchViewProps> = props =>
                 { otherResults &&
                     <>
                         { (otherResults.length === 0) &&
-                            <Text bold small variant="white">{ LocalizeText('friendlist.search.noothersfound') }</Text> }
+                            <Text bold small className="px-2 py-1">{ LocalizeText('friendlist.search.noothersfound') }</Text> }
                         { (otherResults.length > 0) &&
-                            <Column gap={ 0 } fullHeight overflow="hidden">
+                            <Column gap={ 0 }>
-                                <Text bold small variant="white">{ LocalizeText('friendlist.search.otherscaption', [ 'cnt' ], [ otherResults.length.toString() ]) }</Text>
+                                <Text bold small className="px-2 py-1">{ LocalizeText('friendlist.search.otherscaption', [ 'cnt' ], [ otherResults.length.toString() ]) }</Text>
-                                <Column gap={ 0 } fullHeight className="overflow-y-scroll">
+                                <hr className="mx-2 mt-0 mb-1 text-black" />
+                                <Column gap={ 0 }>
                                     { otherResults.map(result =>
                                     {
                                         return (
@@ -96,5 +98,6 @@ export const FriendsSearchView: FC<FriendsSearchViewProps> = props =>
                             </Column> }
                     </> }
             </Column>
-    </>
+        </NitroCardAccordionSetView>
+    );
 }

src/components/friends/views/friends-list/FriendsListView.tsx

@@ -1,13 +1,13 @@
 import { ILinkEventTracker, RemoveFriendComposer, SendRoomInviteComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { AddEventLinkTracker, LocalizeText, MessengerFriend, RemoveLinkEventTracker, SendMessageComposer } from '../../../../api';
-import { Button, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
+import { Button, Flex, NitroCardAccordionSetView, NitroCardAccordionView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
 import { useFriends } from '../../../../hooks';
+import { FriendsListGroupView } from './friends-list-group/FriendsListGroupView';
+import { FriendsListRequestView } from './friends-list-request/FriendsListRequestView';
 import { FriendsRemoveConfirmationView } from './FriendsListRemoveConfirmationView';
 import { FriendsRoomInviteView } from './FriendsListRoomInviteView';
 import { FriendsSearchView } from './FriendsListSearchView';
-import { FriendsListGroupView } from './friends-list-group/FriendsListGroupView';
-import { MyInfoView } from './myinfo/MyInfoView';
 
 export const FriendsListView: FC<{}> = props =>
 {
@@ -17,8 +17,6 @@ export const FriendsListView: FC<{}> = props =>
     const [ showRemoveFriendsConfirmation, setShowRemoveFriendsConfirmation ] = useState<boolean>(false);
     const { onlineFriends = [], offlineFriends = [], requests = [], requestFriend = null } = useFriends();
 
-    const [ tab, setTab ] = useState<number>(0);
-
     const removeFriendsText = useMemo(() =>
     {
         if(!selectedFriendsIds || !selectedFriendsIds.length) return '';
@@ -85,30 +83,6 @@ export const FriendsListView: FC<{}> = props =>
         setShowRemoveFriendsConfirmation(false);
     }
 
-    const getView = () => 
-    {
-        switch(tab)
-        { 
-            case 0: return <MyInfoView />
-            case 1: return <>
-                <Text variant="white" bold>{ LocalizeText('friendlist.friends') + ` (${ onlineFriends.length })` }</Text>
-                <FriendsListGroupView list={ onlineFriends } selectedFriendsIds={ selectedFriendsIds } selectFriend={ selectFriend } />
-                { selectedFriendsIds && selectedFriendsIds.length > 0 &&
-                        <Flex gap={ 1 } className="p-1">
-                            <Button outline fullWidth variant="white" onClick={ () => setShowRoomInvite(true) }>{ LocalizeText('friendlist.tip.invite') }</Button>
-                            <Button outline fullWidth variant="white" onClick={ event => setShowRemoveFriendsConfirmation(true) }>{ LocalizeText('generic.delete') }</Button>
-                        </Flex> }
-            </>;
-            case 2: return <>
-                <Text variant="white" bold>{ LocalizeText('friendlist.friends.offlinecaption')+ ` (${ offlineFriends.length })` }</Text>
-                <FriendsListGroupView list={ offlineFriends } selectedFriendsIds={ selectedFriendsIds } selectFriend={ selectFriend } />
-            </>
-            case 3: return <FriendsSearchView headerText={ LocalizeText('people.search.title') } />;
-            default:
-                return null
-        }
-    }
-
     useEffect(() =>
     {
         const linkTracker: ILinkEventTracker = {
@@ -147,11 +121,10 @@ export const FriendsListView: FC<{}> = props =>
 
     return (
         <>
-            <NitroCardView className="nitro-friends" uniqueKey="nitro-friends" theme="yellow-slim">
+            <NitroCardView className="nitro-friends" uniqueKey="nitro-friends" theme="primary-slim">
                 <NitroCardHeaderView headerText={ LocalizeText('friendlist.friends') } onCloseClick={ event => setIsVisible(false) } />
-                <NitroCardContentView overflow="hidden" gap={ 1 } className="mb-2">
+                <NitroCardContentView overflow="hidden" gap={ 1 } className="text-black p-0">
-                    { getView() }
+                    <NitroCardAccordionView fullHeight overflow="hidden">
-                    { /* <NitroCardAccordionView fullHeight overflow="hidden">
                         <NitroCardAccordionSetView headerText={ LocalizeText('friendlist.friends') + ` (${ onlineFriends.length })` } isExpanded={ true }>
                             <FriendsListGroupView list={ onlineFriends } selectedFriendsIds={ selectedFriendsIds } selectFriend={ selectFriend } />
                         </NitroCardAccordionSetView>
@@ -165,25 +138,8 @@ export const FriendsListView: FC<{}> = props =>
                         <Flex gap={ 1 } className="p-1">
                             <Button fullWidth onClick={ () => setShowRoomInvite(true) }>{ LocalizeText('friendlist.tip.invite') }</Button>
                             <Button fullWidth variant="danger" onClick={ event => setShowRemoveFriendsConfirmation(true) }>{ LocalizeText('generic.delete') }</Button>
-                        </Flex> }  */ }
+                        </Flex> } 
                 </NitroCardContentView>
-                <Flex gap={ 1 } className="mb-1">
-                    <Button variant="warning" fullWidth className={ tab == 0 ? 'inset' : '' } onClick={ () => setTab(0) }>
-                        <i className="icon disk-creator" />
-                    </Button>
-                    <Button variant="warning" fullWidth className={ tab == 1 ? 'inset' : '' } onClick={ () => setTab(1) }>
-                        <i className="icon icon-online-friends" />
-                    </Button>
-                    <Button variant="warning" fullWidth className={ tab == 2 ? 'inset' : '' } onClick={ () => setTab(2) }>
-                        <i className="icon icon-offline-friends" />
-                    </Button>
-                    <Button variant="warning" fullWidth className={ tab == 3 ? 'inset' : '' } onClick={ () => setTab(3) }>
-                        <i className="icon icon-search" />
-                    </Button>
-                    <Button variant="warning" fullWidth className={ tab == 4 ? 'inset' : '' } onClick={ () => setTab(4) }>
-                        <i className="nitro-friends-spritesheet icon-chat" />
-                    </Button>
-                </Flex>
             </NitroCardView>
             { showRoomInvite &&
                 <FriendsRoomInviteView selectedFriendsIds={ selectedFriendsIds } onCloseClick={ () => setShowRoomInvite(false) } sendRoomInvite={ sendRoomInvite } /> }

src/components/friends/views/friends-list/friends-list-group/FriendsListGroupItemView.tsx

@@ -54,33 +54,6 @@ export const FriendsListGroupItemView: FC<{ friend: MessengerFriend, selected: b
 
     if(!friend) return null;
 
-    return <Flex fullWidth justifyContent="between" onClick={ event => selectFriend(friend.id) } className={ selected ? 'bg-primary text-white' : '' }>
-        <Flex alignItems="center" gap={ 1 }>
-            <Base onClick={ event => event.stopPropagation() }>
-                <UserProfileIconView userId={ friend.id } />
-            </Base>
-            <div>{ friend.name }</div>
-        </Flex>
-        <Flex alignItems="center" gap={ 1 }>
-            { !isRelationshipOpen &&
-                    <>
-                        { friend.followingAllowed &&
-                            <Base pointer onClick={ clickFollowFriend } className="nitro-friends-spritesheet icon-follow" title={ LocalizeText('friendlist.tip.follow') } /> }
-                        { friend.online &&
-                            <Base pointer className="nitro-friends-spritesheet icon-chat" onClick={ openMessengerChat } title={ LocalizeText('friendlist.tip.im') } /> }
-                        { (friend.id > 0) &&
-                            <Base className={ `nitro-friends-spritesheet icon-${ getCurrentRelationshipName() } cursor-pointer` } onClick={ openRelationship } title={ LocalizeText('infostand.link.relationship') } /> }
-                    </> }
-            { isRelationshipOpen &&
-                    <>
-                        <Base pointer className="nitro-friends-spritesheet icon-heart" onClick={ event => clickUpdateRelationship(event, MessengerFriend.RELATIONSHIP_HEART) } />
-                        <Base pointer className="nitro-friends-spritesheet icon-smile" onClick={ event => clickUpdateRelationship(event, MessengerFriend.RELATIONSHIP_SMILE) } />
-                        <Base pointer className="nitro-friends-spritesheet icon-bobba" onClick={ event => clickUpdateRelationship(event, MessengerFriend.RELATIONSHIP_BOBBA) } />
-                        <Base pointer className="nitro-friends-spritesheet icon-none" onClick={ event => clickUpdateRelationship(event, MessengerFriend.RELATIONSHIP_NONE) } />
-                    </> }
-        </Flex>
-    </Flex>
-
     return (
         <NitroCardAccordionItemView justifyContent="between" className={ `px-2 py-1 ${ selected && 'bg-primary text-white' }` } onClick={ event => selectFriend(friend.id) }>
             <Flex alignItems="center" gap={ 1 }>

src/components/friends/views/friends-list/friends-list-group/FriendsListGroupView.tsx

@@ -1,6 +1,5 @@
 import { FC } from 'react';
 import { MessengerFriend } from '../../../../../api';
-import { Column } from '../../../../../common';
 import { FriendsListGroupItemView } from './FriendsListGroupItemView';
 
 interface FriendsListGroupViewProps
@@ -17,8 +16,8 @@ export const FriendsListGroupView: FC<FriendsListGroupViewProps> = props =>
     if(!list || !list.length) return null;
 
     return (
-        <Column fullHeight className="overflow-y-scroll">
+        <>
             { list.map((item, index) => <FriendsListGroupItemView key={ index } friend={ item } selected={ selectedFriendsIds && (selectedFriendsIds.indexOf(item.id) >= 0) } selectFriend={ selectFriend } />) }
-        </Column>  
+        </>  
     );
 }

src/components/friends/views/friends-list/myinfo/MyInfo.scss

@@ -1,16 +0,0 @@
-.friends-myinfo {
-    > :first-child {
-        border-bottom: 1px dashed white;
-    }
-    
-    .myinfo-avatar {
-        height: 60px;
-        width: 60px;
-        display: flex;
-        justify-content: center;
-
-        .avatar-image {
-            margin-top: -17px;
-        }
-    }
-}

src/components/friends/views/friends-list/myinfo/MyInfoView.tsx

@@ -1,40 +0,0 @@
-import { KeyboardEvent } from 'react';
-import { Base, Column, Flex, LayoutAvatarImageView, Text } from '../../../../../common';
-import { useFriends, useMessenger, useSessionInfo } from '../../../../../hooks';
-
-export const MyInfoView = () =>
-{ 
-    const { userFigure = null, userName = null, motto,setMotto, saveMotto } = useSessionInfo();
-    const { unreadThreads = 0 } = useMessenger();
-    const { requests = [] } = useFriends();
-
-    const onMottoKeyDown = (event: KeyboardEvent<HTMLInputElement>) =>
-    {
-        event.stopPropagation();
-
-        switch(event.key)
-        {
-            case 'Enter':
-                saveMotto((event.target as HTMLInputElement).value);
-                return;
-        }
-    }
-    
-    return <Column fullHeight fullWidth className="friends-myinfo">
-        <Flex fullHeight fullWidth center gap={ 1 } className="px-2">
-            <Base className="myinfo-avatar">
-                <LayoutAvatarImageView figure={ userFigure } direction={ 3 } position="absolute" headOnly />
-            </Base>
-            <Column>
-                <Text variant="white" bold>{ userName }</Text>
-                <input className="fi fi-white" value={ motto } onChange={ event => setMotto(event.target.value) } onKeyDown={ onMottoKeyDown } />
-            </Column>
-        </Flex>
-        <Flex fullHeight fullWidth center>
-            <Column>
-                <Text variant="white" bold underline>{ unreadThreads } Unread Messages</Text>
-                <Text variant="white" bold underline>{ requests.length } Friend Requests</Text>
-            </Column>
-        </Flex>
-    </Column>
-}

src/components/inventory/InventoryView.scss

@@ -14,27 +14,4 @@
         padding: 1px 2px;
         z-index: 5;
     }
-
-    .tab-icon {
-        width:18px;
-        height:18px;
-        background-position: center;
-        background-repeat: no-repeat;
-
-        &.tab-inventory-furni {
-            background-image: url(@/assets/images/fusion/inventory/furni.png);
-        }
-
-        &.tab-inventory-bots {
-            background-image: url(@/assets/images/fusion/inventory/bots.png);
-        }
-
-        &.tab-inventory-furni-tab-pets {
-            background-image: url(@/assets/images/fusion/inventory/pets.png);
-        }
-
-        &.tab-inventory-badges {
-            background-image: url(@/assets/images/fusion/inventory/ach.png);
-        }
-    }
 }

src/components/inventory/InventoryView.tsx

@@ -1,7 +1,7 @@
 import { BadgePointLimitsEvent, ILinkEventTracker, IRoomSession, RoomEngineObjectEvent, RoomEngineObjectPlacedEvent, RoomPreviewer, RoomSessionEvent } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import { AddEventLinkTracker, GetLocalization, GetRoomEngine, LocalizeText, RemoveLinkEventTracker, UnseenItemCategory, isObjectMoverRequested, setObjectMoverRequested } from '../../api';
+import { AddEventLinkTracker, GetLocalization, GetRoomEngine, isObjectMoverRequested, LocalizeText, RemoveLinkEventTracker, setObjectMoverRequested, UnseenItemCategory } from '../../api';
-import { Base, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
 import { useInventoryTrade, useInventoryUnseenTracker, useMessageEvent, useRoomEngineEvent, useRoomSessionManagerEvent } from '../../hooks';
 import { InventoryBadgeView } from './views/badge/InventoryBadgeView';
 import { InventoryBotView } from './views/bot/InventoryBotView';
@@ -127,7 +127,7 @@ export const InventoryView: FC<{}> = props =>
                         {
                             return (
                                 <NitroCardTabsItemView key={ index } isActive={ (currentTab === name) } onClick={ event => setCurrentTab(name) } count={ getCount(UNSEEN_CATEGORIES[index]) }>
-                                    <Base className={ `tab-icon tab-${ name.replaceAll('.','-') }` }/>
+                                    { LocalizeText(name) }
                                 </NitroCardTabsItemView>
                             );
                         }) }

src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx

@@ -21,14 +21,8 @@ export const NotificationDefaultAlertView: FC<NotificationDefaultAlertViewProps>
     
     const hasFrank = (item.alertType === NotificationAlertType.DEFAULT);
 
-    const options = <Column alignItems="center" center gap={ 0 } className="my-1">
-        { !item.clickUrl &&
-            <Button onClick={ onClose } variant="success">{ LocalizeText('generic.close') }</Button> }
-        { item.clickUrl && (item.clickUrl.length > 0) && <Button variant="success" onClick={ visitUrl }>{ LocalizeText(item.clickUrlText) }</Button> }
-    </Column>
-
     return (
-        <LayoutNotificationAlertView title={ title } onClose={ onClose } { ...rest } type={ hasFrank ? NotificationAlertType.DEFAULT : item.alertType } options={ options }>
+        <LayoutNotificationAlertView title={ title } onClose={ onClose } { ...rest } type={ hasFrank ? NotificationAlertType.DEFAULT : item.alertType }>
             <Flex fullHeight overflow="auto" gap={ hasFrank || (item.imageUrl && !imageFailed) ? 2 : 0 }>
                 { hasFrank && !item.imageUrl && <Base className="notification-frank flex-shrink-0" /> }
                 { item.imageUrl && !imageFailed && <img src={ item.imageUrl } alt={ item.title } onError={ () => 
@@ -42,8 +36,20 @@ export const NotificationDefaultAlertView: FC<NotificationDefaultAlertViewProps>
 
                         return <Base key={ index } dangerouslySetInnerHTML={ { __html: htmlText } } />;
                     }) }
+                    { item.clickUrl && (item.clickUrl.length > 0) && (item.imageUrl && !imageFailed) && <>
+                        <hr className="my-2 w-100" />
+                        <Button onClick={ visitUrl } className="align-self-center px-3">{ LocalizeText(item.clickUrlText) }</Button>
+                    </> }
                 </Base>
             </Flex>
+            { (!item.imageUrl || (item.imageUrl && imageFailed)) && <>
+                <Column alignItems="center" center gap={ 0 }>
+                    <hr className="my-2 w-100" />
+                    { !item.clickUrl &&
+                        <Button onClick={ onClose }>{ LocalizeText('generic.close') }</Button> }
+                    { item.clickUrl && (item.clickUrl.length > 0) && <Button onClick={ visitUrl }>{ LocalizeText(item.clickUrlText) }</Button> }
+                </Column>
+            </> }
         </LayoutNotificationAlertView>
     );
 

src/components/purse/PurseView.scss

@@ -1,13 +1,6 @@
 .nitro-purse-container {
-    pointer-events: none;
+    font-size: $font-size-sm;
-    position: absolute;
+    pointer-events: all;
-    left: 0;
-    right: 0;
-    margin: auto;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 0;
 
     .nitro-purse {
         background-color: rgba($dark, 0.95);

src/components/purse/PurseView.tsx

@@ -1,9 +1,10 @@
 import { FriendlyTime, HabboClubLevelEnum } from '@nitrots/nitro-renderer';
 import { FC, useMemo } from 'react';
 import { CreateLinkEvent, GetConfiguration, LocalizeText } from '../../api';
-import { Button, Flex, LayoutCurrencyIcon, Text } from '../../common';
+import { Column, Flex, Grid, LayoutCurrencyIcon, Text } from '../../common';
 import { usePurse } from '../../hooks';
 import { CurrencyView } from './views/CurrencyView';
+import { SeasonalView } from './views/SeasonalView';
 
 export const PurseView: FC<{}> = props =>
 {
@@ -49,7 +50,8 @@ export const PurseView: FC<{}> = props =>
         {
             if((limit > -1) && (count === limit)) break;
 
-            elements.push(<CurrencyView key={ type } type={ type } amount={ purse.activityPoints.get(type) } short={ currencyDisplayNumberShort } />)
+            if(seasonal) elements.push(<SeasonalView key={ type } type={ type } amount={ purse.activityPoints.get(type) } />);
+            else elements.push(<CurrencyView key={ type } type={ type } amount={ purse.activityPoints.get(type) } short={ currencyDisplayNumberShort } />);
 
             count++;
         }
@@ -59,12 +61,30 @@ export const PurseView: FC<{}> = props =>
 
     if(!purse) return null;
 
-    return <Flex className="nitro-purse-container" gap={ 2 }>
+    return (
+        <Column alignItems="end" className="nitro-purse-container" gap={ 1 }>
+            <Flex className="nitro-purse rounded-bottom p-1">
+                <Grid fullWidth gap={ 1 }>
+                    <Column justifyContent="center" size={ hcDisabled ? 10 : 6 } gap={ 0 }>
                         <CurrencyView type={ -1 } amount={ purse.credits } short={ currencyDisplayNumberShort } />
-        { getCurrencyElements(0, -1) }
+                        { getCurrencyElements(0, 2) }
-        { !hcDisabled && <Button className="gap-2 d-flex inset" variant="f-grey" onClick={ event => CreateLinkEvent('habboUI/open/hccenter') }>
+                    </Column>
-            <Text truncate bold textEnd variant="white" grow>{ getClubText }</Text>
+                    { !hcDisabled &&
+                        <Column center pointer size={ 4 } gap={ 1 } className="nitro-purse-subscription rounded" onClick={ event => CreateLinkEvent('habboUI/open/hccenter') }>
                             <LayoutCurrencyIcon type="hc" />
-        </Button> } 
+                            <Text variant="white">{ getClubText }</Text>
-    </Flex>;
+                        </Column> }
+                    <Column justifyContent="center" size={ 2 } gap={ 0 }>
+                        <Flex center pointer fullHeight className="nitro-purse-button p-1 rounded" 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') } >
+                            <i className="icon icon-cog"/>
+                        </Flex>
+                    </Column>
+                </Grid>
+            </Flex>
+            { getCurrencyElements(2, -1, true) }
+        </Column>
+    );
 }

src/components/purse/views/CurrencyView.tsx

@@ -1,7 +1,7 @@
 import { FC, useMemo } from 'react';
 import { OverlayTrigger, Tooltip } from 'react-bootstrap';
-import { CreateLinkEvent, LocalizeFormattedNumber, LocalizeShortNumber } from '../../../api';
+import { LocalizeFormattedNumber, LocalizeShortNumber } from '../../../api';
-import { Button, LayoutCurrencyIcon, Text } from '../../../common';
+import { Flex, LayoutCurrencyIcon, Text } from '../../../common';
 
 interface CurrencyViewProps
 {
@@ -16,10 +16,11 @@ export const CurrencyView: FC<CurrencyViewProps> = props =>
 
     const element = useMemo(() =>
     {
-        return <Button className="gap-2 d-flex inset" variant="f-grey" onClick={ () => CreateLinkEvent('catalog/open/currency-' + type) }>
+        return (
-            <Text truncate bold textEnd variant="white" grow>{ short ? LocalizeShortNumber(amount) : LocalizeFormattedNumber(amount) }</Text>
+            <Flex justifyContent="end" pointer gap={ 1 } className="nitro-purse-button rounded">
+                <Text truncate textEnd variant="white" grow>{ short ? LocalizeShortNumber(amount) : LocalizeFormattedNumber(amount) }</Text>
                 <LayoutCurrencyIcon type={ type } />
-        </Button>
+            </Flex>);
     }, [ amount, short, type ]);
 
     if(!short) return element;

src/components/right-side/RightSideView.tsx

@@ -3,6 +3,7 @@ import { Column } from '../../common';
 import { OfferView } from '../catalog/views/targeted-offer/OfferView';
 import { GroupRoomInformationView } from '../groups/views/GroupRoomInformationView';
 import { NotificationCenterView } from '../notification-center/NotificationCenterView';
+import { PurseView } from '../purse/PurseView';
 import { MysteryBoxExtensionView } from '../room/widgets/mysterybox/MysteryBoxExtensionView';
 import { RoomPromotesWidgetView } from '../room/widgets/room-promotes/RoomPromotesWidgetView';
 
@@ -11,6 +12,7 @@ export const RightSideView: FC<{}> = props =>
     return (
         <div className="nitro-right-side">
             <Column position="relative" gap={ 1 }>
+                <PurseView />
                 <GroupRoomInformationView />
                 <MysteryBoxExtensionView />
                 <OfferView/>

src/components/room/RoomView.tsx

@@ -34,7 +34,7 @@ export const RoomView: FC<{}> = props =>
     }, []);
 
     return (
-        <Base fit innerRef={ elementRef } className={ (!roomSession && 'd-none') + ' nitro-room' }>
+        <Base fit innerRef={ elementRef } className={ (!roomSession && 'd-none') }>
             { roomSession &&
                 <>
                     <RoomWidgetsView />

src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx

@@ -3,7 +3,7 @@ import { Dispatch, FC, FocusEvent, KeyboardEvent, SetStateAction, useEffect, use
 import { FaPencilAlt, FaTimes } from 'react-icons/fa';
 import { AvatarInfoUser, CloneObject, GetConfiguration, GetGroupInformation, GetSessionDataManager, GetUserProfile, LocalizeText, SendMessageComposer } from '../../../../../api';
 import { Column, Flex, LayoutAvatarImageView, LayoutBadgeImageView, Text, UserProfileIconView } from '../../../../../common';
-import { useMessageEvent, useRoom, useRoomSessionManagerEvent, useSessionInfo } from '../../../../../hooks';
+import { useMessageEvent, useRoom, useRoomSessionManagerEvent } from '../../../../../hooks';
 import { InfoStandWidgetUserRelationshipsView } from './InfoStandWidgetUserRelationshipsView';
 import { InfoStandWidgetUserTagsView } from './InfoStandWidgetUserTagsView';
 
@@ -21,7 +21,15 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
     const [ isEditingMotto, setIsEditingMotto ] = useState(false);
     const [ relationships, setRelationships ] = useState<RelationshipStatusInfoMessageParser>(null);
     const { roomSession = null } = useRoom();
-    const { saveMotto } = useSessionInfo();
+
+    const saveMotto = (motto: string) =>
+    {
+        if(!isEditingMotto || (motto.length > GetConfiguration<number>('motto.max.length', 38))) return;
+
+        roomSession.sendMottoMessage(motto);
+
+        setIsEditingMotto(false);
+    }
 
     const onMottoBlur = (event: FocusEvent<HTMLInputElement>) => saveMotto(event.target.value);
 

src/components/room/widgets/chat-input/ChatInputView.scss

@@ -10,12 +10,6 @@
     padding-right: 10px;
     width: 100%;
     overflow: hidden;
-    position: absolute;
-    bottom:55px;
-    left:0;
-    right:0;
-    max-width: 500px;
-    margin:auto;
 
     @include media-breakpoint-down(sm) {
         display: flex;

src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx

@@ -1,7 +1,7 @@
 import { GetGuestRoomResultEvent, NavigatorSearchComposer, RateFlatMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { CreateLinkEvent, GetRoomEngine, LocalizeText, SendMessageComposer } from '../../../../api';
-import { Base, Column, Flex, Text, TransitionAnimation, TransitionAnimationTypes, classNames } from '../../../../common';
+import { Base, classNames, Column, Flex, Text, TransitionAnimation, TransitionAnimationTypes } from '../../../../common';
 import { useMessageEvent, useNavigator, useRoom } from '../../../../hooks';
 
 export const RoomToolsWidgetView: FC<{}> = props =>
@@ -76,7 +76,6 @@ export const RoomToolsWidgetView: FC<{}> = props =>
                 <Base pointer title={ LocalizeText('room.settings.button.text') } className="icon icon-cog" onClick={ () => handleToolClick('settings') } />
                 <Base pointer title={ LocalizeText('room.zoom.button.text') } onClick={ () => handleToolClick('zoom') } className={ classNames('icon', (!isZoomedIn && 'icon-zoom-less'), (isZoomedIn && 'icon-zoom-more')) } />
                 <Base pointer title={ LocalizeText('room.chathistory.button.text') } onClick={ () => handleToolClick('chat_history') } className="icon icon-chat-history" />
-                <Base pointer title={ LocalizeText('room.chathistory.button.text') } onClick={ event => CreateLinkEvent('camera/toggle') } className="icon icon-camera-small" />
                 { navigatorData.canRate &&
                     <Base pointer title={ LocalizeText('room.like.button.text') } onClick={ () => handleToolClick('like_room') } className="icon icon-like-room" /> }
             </Column>

src/components/toolbar/ToolbarView.scss

@@ -1,54 +1,17 @@
-.nitro-toolbar,
+.nitro-toolbar {
-.nitro-friendbar {
     position: absolute;
-    left: 0;
-    right:0;
-    width: 100%; 
-    z-index: $toolbar-zindex;
-    background: repeating-linear-gradient($f-grey, $f-grey 50%, $f-grey-sec 50%, $f-grey-sec 100%);
-    border-bottom:1px solid black;
-    border-top:1px solid black;
-    box-shadow: inset 0 1px lighten($f-grey, 10%), inset 0 -1px lighten($f-grey-sec, 10%);
-    pointer-events: all;
-    
-
-    &::before {
-        content:'';
-        position: absolute;
-        height:1px;
-        top:0;
     bottom: 0;
     left: 0;
-        right:0;
+    width: 100%;
-        margin:auto;
+    height: $toolbar-height;
-        background: $f-grey-sec;
+    z-index: $toolbar-zindex;
-        box-shadow: 0 1px $f-grey;
-        z-index: 1;
-    }
-
-    .tb-splitter {
-        width:1px;
-        background-color: black;
-        box-shadow: 0px 1px 0 lighten($f-grey, 10%), 0px -1px 0 darken($f-grey-sec, 10);
-        height: 33px;
-    }
-
-    .btn {
-        filter: drop-shadow(0px 1px 0 lighten($f-grey, 10%)) drop-shadow(0px -1px 0 darken($f-grey-sec, 10));
-        &:not(:disabled) {
     pointer-events: all;
-        }
+    background: 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);
-    > *  {
-        z-index: 2;
-    }
 
     .navigation-item {
         position: relative;
-        z-index: 40;
-
-        filter: drop-shadow(0px 1px 0 lighten($f-grey, 10%)) drop-shadow(0px -1px 0 darken($f-grey-sec, 10));
 
         &.item-avatar {
             width: 50px;
@@ -57,7 +20,7 @@
     
             .avatar-image {
                 margin-left: -5px;
-                margin-top: 40px;
+                margin-top: 25px;
             }
         }
 
@@ -74,15 +37,14 @@
             filter: none;
         }
     }
+
+    #toolbar-chat-input-container {
+
+        @include media-breakpoint-down(sm) {
+            width: 0px;
+            height: 0px;
         }
-
-.nitro-friendbar{
-    bottom:0;
     }
-
-
-.nitro-toolbar {
-    top:0;
 }
 
 .nitro-toolbar-me {

src/components/toolbar/ToolbarView.tsx

@@ -3,7 +3,6 @@ import { FC, useState } from 'react';
 import { CreateLinkEvent, GetConfiguration, GetSessionDataManager, MessengerIconState, OpenMessengerChat, VisitDesktop } from '../../api';
 import { Base, Flex, LayoutAvatarImageView, LayoutItemCountView, TransitionAnimation, TransitionAnimationTypes } from '../../common';
 import { useAchievements, useFriends, useInventoryUnseenTracker, useMessageEvent, useMessenger, useRoomEngineEvent, useSessionInfo } from '../../hooks';
-import { PurseView } from '../purse/PurseView';
 import { ToolbarMeView } from './ToolbarMeView';
 
 export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
@@ -11,7 +10,7 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
     const { isInRoom } = props;
     const [ isMeExpanded, setMeExpanded ] = useState(false);
     const [ useGuideTool, setUseGuideTool ] = useState(false);
-    const { userFigure = null, userName = null } = useSessionInfo();
+    const { userFigure = null } = useSessionInfo();
     const { getFullCount = 0 } = useInventoryUnseenTracker();
     const { getTotalUnseen = 0 } = useAchievements();
     const { requests = [] } = useFriends();
@@ -69,8 +68,14 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
             <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ isMeExpanded } timeout={ 300 }>
                 <ToolbarMeView useGuideTool={ useGuideTool } unseenAchievementCount={ getTotalUnseen } setMeExpanded={ setMeExpanded } />
             </TransitionAnimation>
-            <Flex alignItems="center" justifyContent="between" gap={ 2 } className="nitro-toolbar px-4" overflow="hidden">
+            <Flex alignItems="center" justifyContent="between" gap={ 2 } className="nitro-toolbar py-1 px-3">
-                <Flex gap={ 3 } alignItems="center" fullHeight>
+                <Flex gap={ 2 } alignItems="center">
+                    <Flex alignItems="center" gap={ 2 }>
+                        <Flex center pointer className={ 'navigation-item item-avatar ' + (isMeExpanded ? 'active ' : '') } onClick={ event => setMeExpanded(!isMeExpanded) }>
+                            <LayoutAvatarImageView figure={ userFigure } direction={ 2 } position="absolute" />
+                            { (getTotalUnseen > 0) &&
+                                <LayoutItemCountView count={ getTotalUnseen } /> }
+                        </Flex>
                         { isInRoom &&
                             <Base pointer className="navigation-item icon icon-habbo" onClick={ event => VisitDesktop() } /> }
                         { !isInRoom &&
@@ -82,31 +87,14 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
                             { (getFullCount > 0) &&
                                 <LayoutItemCountView count={ getFullCount } /> }
                         </Base>
-                    <Base className="tb-splitter"/>
+                        { isInRoom &&
-                </Flex>
+                            <Base pointer className="navigation-item icon icon-camera" onClick={ event => CreateLinkEvent('camera/toggle') } /> }
-                <PurseView />
-                <Flex gap={ 3 } alignItems="center" fullHeight>
-                    <Base className="tb-splitter" />
                         { isMod &&
                             <Base pointer className="navigation-item icon icon-modtools" onClick={ event => CreateLinkEvent('mod-tools/toggle') } /> }
-                    <Flex center pointer fullHeight className="navigation-item" onClick={ event => CreateLinkEvent('help/show') }>
-                        <i className="icon icon-help"/>
-                    </Flex>
-                    <Flex center pointer fullHeight className="navigation-item" onClick={ event => CreateLinkEvent('user-settings/toggle') } >
-                        <i className="icon icon-cog"/>
-                    </Flex>
-                    <Flex gap={ 0 } alignItems="center">
-                        <Flex center pointer className={ 'navigation-item item-avatar ' + (isMeExpanded ? 'active ' : '') } onClick={ event => setMeExpanded(!isMeExpanded) }>
-                            <LayoutAvatarImageView figure={ userFigure } direction={ 3 } position="absolute" headOnly />
-                            { (getTotalUnseen > 0) &&
-                                <LayoutItemCountView count={ getTotalUnseen } /> }
-                        </Flex>
-                        { userName }
-                    </Flex>
-                </Flex>
                     </Flex>
                     <Flex alignItems="center" id="toolbar-chat-input-container" />
-            <Flex alignItems="center" gap={ 3 } className="nitro-friendbar px-4 py-1">
+                </Flex>
+                <Flex alignItems="center" gap={ 2 }>
                     <Flex gap={ 2 }>
                         <Base pointer className="navigation-item icon icon-friendall" onClick={ event => CreateLinkEvent('friends/toggle') }>
                             { (requests.length > 0) &&
@@ -115,7 +103,8 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
                         { ((iconState === MessengerIconState.SHOW) || (iconState === MessengerIconState.UNREAD)) &&
                             <Base pointer className={ `navigation-item icon icon-message ${ (iconState === MessengerIconState.UNREAD) && 'is-unseen' }` } onClick={ event => OpenMessengerChat() } /> }
                     </Flex>
-                <Base id="toolbar-friend-bar-container" fullWidth position="absolute" className="pe-none" />
+                    <Base id="toolbar-friend-bar-container" className="d-none d-lg-block" />
+                </Flex>
             </Flex>
         </>
     );

src/hooks/friends/useMessenger.ts

@@ -17,17 +17,6 @@ const useMessengerState = () =>
 
     const visibleThreads = useMemo(() => messageThreads.filter(thread => (hiddenThreadIds.indexOf(thread.threadId) === -1)), [ messageThreads, hiddenThreadIds ]);
     const activeThread = useMemo(() => ((activeThreadId > 0) && visibleThreads.find(thread => (thread.threadId === activeThreadId) || null)), [ activeThreadId, visibleThreads ]);
-    const unreadThreads = useMemo(() =>
-    { 
-        let count = 0;
-
-        messageThreads.forEach(t =>
-        { 
-            count += t.unreadCount
-        })
-
-        return count
-    }, [ messageThreads ] )
 
     const getMessageThread = (userId: number) =>
     {
@@ -192,7 +181,7 @@ const useMessengerState = () =>
         });
     }, [ visibleThreads ]);
 
-    return { messageThreads, activeThread, iconState, visibleThreads, getMessageThread, setActiveThreadId, closeThread, sendMessage, unreadThreads };
+    return { messageThreads, activeThread, iconState, visibleThreads, getMessageThread, setActiveThreadId, closeThread, sendMessage };
 }
 
 export const useMessenger = () => useBetween(useMessengerState);

src/hooks/rooms/useRoom.ts

@@ -27,8 +27,6 @@ const useRoomState = () =>
         {
             roomBackground.tint = newColor;
         }
-
-        console.log(hue, saturation, lightness);
     }
 
     const updateRoomFilter = (color: number) =>
@@ -58,7 +56,7 @@ const useRoomState = () =>
         if(RoomId.isRoomPreviewerId(event.roomId)) return;
 
         if(event.enable) updateRoomBackgroundColor(event.hue, event.saturation, event.lightness, true);
-        else updateRoomBackgroundColor(146, 206, 21, true);
+        else updateRoomBackgroundColor(0, 0, 0, true);
     });
 
     useRoomEngineEvent<RoomBackgroundColorEvent>(RoomBackgroundColorEvent.ROOM_COLOR, event =>
@@ -93,26 +91,6 @@ const useRoomState = () =>
             case RoomEngineEvent.INITIALIZED:
                 SetActiveRoomId(event.roomId);
                 setRoomSession(session);
-
-                // const room = GetRoomEngine().createTextureFromRoom(roomSession.roomId, 1);
-                // const canvas = GetRoomEngine().getRoomInstanceRenderingCanvas(roomSession.roomId, 1);
-
-                // const texture = new NitroSprite(room);
-
-                // console.log(TextureUtils.generateImageUrl(texture))
-
-                // if (!canvas) return;
-                
-                // const master = (canvas.master as NitroContainer);
-
-                // texture.width = room.width;
-                // texture.height = room.height
-
-                // texture.x = 30;
-                // texture.y = 30;
-
-                // master.addChildAt(texture, 1);
-
                 return;
             case RoomEngineEvent.DISPOSED:
                 setRoomSession(null);
@@ -244,26 +222,10 @@ const useRoomState = () =>
         const filter = new AdjustmentFilter();
         const master = (canvas.master as NitroContainer);
 
-        background.tint = ColorConverter.hslToRGB(((((146 & 0xFF) << 16) + ((206 & 0xFF) << 8)) + (21 & 0xFF)));
+        background.tint = 0;
         background.width = width;
         background.height = height;
 
-        // const room = GetRoomEngine().createTextureFromRoom(roomSession.roomId, 1);
-
-        // const texture = new NitroSprite(room);
-
-        // texture.width = room.width;
-        // texture.height = room.height
-
-        // texture.x = room.frame.x
-        // texture.y = room.frame.y
-
-        // texture.tint = 0
-        // texture.alpha = 0.5
-
-        // console.log(TextureUtils.generateImageUrl(texture))
-
-        //master.addChildAt(texture,0)
         master.addChildAt(background, 0);
         master.filters = [ filter ];
 

src/hooks/session/useSessionInfo.ts

@@ -1,7 +1,7 @@
-import { FigureUpdateEvent, RoomUnitChatStyleComposer, UserInfoDataParser, UserInfoEvent, UserMottoComposer, UserSettingsEvent } from '@nitrots/nitro-renderer';
+import { FigureUpdateEvent, RoomUnitChatStyleComposer, UserInfoDataParser, UserInfoEvent, UserSettingsEvent } from '@nitrots/nitro-renderer';
 import { useEffect, useState } from 'react';
 import { useBetween } from 'use-between';
-import { GetConfiguration, GetLocalStorage, GetSessionDataManager, SendMessageComposer } from '../../api';
+import { GetLocalStorage, GetSessionDataManager, SendMessageComposer } from '../../api';
 import { useMessageEvent } from '../events';
 import { useLocalStorage } from '../useLocalStorage';
 
@@ -9,8 +9,6 @@ const useSessionInfoState = () =>
 {
     const [ userInfo, setUserInfo ] = useState<UserInfoDataParser>(null);
     const [ userFigure, setUserFigure ] = useState<string>(null);
-    const [ userName, setUserName ] = useState<string>(null);
-    const [ motto, setMotto ] = useState<string>('');
     const [ chatStyleId, setChatStyleId ] = useState<number>(0);
     const [ userRespectRemaining, setUserRespectRemaining ] = useState<number>(0);
     const [ petRespectRemaining, setPetRespectRemaining ] = useState<number>(0);
@@ -37,20 +35,11 @@ const useSessionInfoState = () =>
         setPetRespectRemaining(GetSessionDataManager().respectsPetLeft);
     }
 
-    const saveMotto = (motto: string) =>
-    {
-        if (motto.length > GetConfiguration<number>('motto.max.length', 38)) return;
-        setMotto(motto);
-        SendMessageComposer(new UserMottoComposer(motto))
-    }
-
     useMessageEvent<UserInfoEvent>(UserInfoEvent, event =>
     {
         const parser = event.getParser();
 
         setUserInfo(parser.userInfo);
-        setUserName(parser.userInfo.username);
-        setMotto(parser.userInfo.motto);
         setUserFigure(parser.userInfo.figure);
         setUserRespectRemaining(parser.userInfo.respectsRemaining);
         setPetRespectRemaining(parser.userInfo.respectsPetRemaining);
@@ -98,7 +87,7 @@ const useSessionInfoState = () =>
         }
     }, [ setScreenSize ]);
 
-    return { userInfo, userFigure, userName,motto, chatStyleId, userRespectRemaining, petRespectRemaining, respectUser, respectPet, updateChatStyleId, setMotto, saveMotto };
+    return { userInfo, userFigure, chatStyleId, userRespectRemaining, petRespectRemaining, respectUser, respectPet, updateChatStyleId };
 }
 
 export const useSessionInfo = () => useBetween(useSessionInfoState);