From d54ea63f8b362860b8bb540114b923e3f8d36d31 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Fri, 25 Feb 2022 15:28:36 -0500
Subject: [PATCH 01/17] Update chat widget

---
 src/assets/styles/utils.scss                  |  17 +
 .../{message => }/ChatWidgetMessageView.tsx   |  25 +-
 .../room/widgets/chat/ChatWidgetView.scss     | 905 ++++++++++++++++-
 .../room/widgets/chat/ChatWidgetView.tsx      |  17 +-
 .../{utils => common}/ChatBubbleMessage.ts    |   0
 .../chat/message/ChatWidgetMessageView.scss   | 921 ------------------
 .../message/ChatWidgetMessageView.types.ts    |   8 -
 .../widgets/chat/utils/ChatWidgetUtilities.ts |  32 -
 8 files changed, 936 insertions(+), 989 deletions(-)
 rename src/views/room/widgets/chat/{message => }/ChatWidgetMessageView.tsx (78%)
 rename src/views/room/widgets/chat/{utils => common}/ChatBubbleMessage.ts (100%)
 delete mode 100644 src/views/room/widgets/chat/message/ChatWidgetMessageView.scss
 delete mode 100644 src/views/room/widgets/chat/message/ChatWidgetMessageView.types.ts
 delete mode 100644 src/views/room/widgets/chat/utils/ChatWidgetUtilities.ts

diff --git a/src/assets/styles/utils.scss b/src/assets/styles/utils.scss
index 029f054e..8db17555 100644
--- a/src/assets/styles/utils.scss
+++ b/src/assets/styles/utils.scss
@@ -97,3 +97,20 @@ ul {
         background-color: $table-striped-bg;
     }
 }
+
+@keyframes bounceIn {
+    0% {
+       opacity: 0;
+       transform: scale(.3);
+    }
+    50% {
+       opacity: 1;
+       transform: scale(1.1);
+    }
+    70% {
+       transform: scale(.9);
+    }
+    100% {
+       transform: scale(1);
+    }
+}
diff --git a/src/views/room/widgets/chat/message/ChatWidgetMessageView.tsx b/src/views/room/widgets/chat/ChatWidgetMessageView.tsx
similarity index 78%
rename from src/views/room/widgets/chat/message/ChatWidgetMessageView.tsx
rename to src/views/room/widgets/chat/ChatWidgetMessageView.tsx
index 6ea5eea4..190d7629 100644
--- a/src/views/room/widgets/chat/message/ChatWidgetMessageView.tsx
+++ b/src/views/room/widgets/chat/ChatWidgetMessageView.tsx
@@ -1,20 +1,20 @@
-import { FC, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';
-import { useRoomContext } from '../../../context/RoomContext';
-import { ChatWidgetMessageViewProps } from './ChatWidgetMessageView.types';
+import { FC, MouseEvent, useEffect, useRef, useState } from 'react';
+import { ChatBubbleMessage } from './common/ChatBubbleMessage';
+
+interface ChatWidgetMessageViewProps
+{
+    chat: ChatBubbleMessage;
+    makeRoom: (chat: ChatBubbleMessage) => void;
+    onChatClicked: (chat: ChatBubbleMessage) => void;
+}
 
 export const ChatWidgetMessageView: FC<ChatWidgetMessageViewProps> = props =>
 {
     const { chat = null, makeRoom = null, onChatClicked = null } = props;
     const [ isVisible, setIsVisible ] = useState(false);
-    const { widgetHandler = null } = useRoomContext();
     const elementRef = useRef<HTMLDivElement>();
 
-    const onMouseDown = useCallback((event: MouseEvent<HTMLDivElement>) =>
-    {
-        if(event.shiftKey) return;
-
-        onChatClicked(chat);
-    }, [ chat, onChatClicked ]);
+    const onMouseDown = (event: MouseEvent<HTMLDivElement>) => ((event.shiftKey) && onChatClicked(chat));
 
     useEffect(() =>
     {
@@ -54,10 +54,7 @@ export const ChatWidgetMessageView: FC<ChatWidgetMessageViewProps> = props =>
         }
     }, [ elementRef, chat, makeRoom ]);
 
-    useEffect(() =>
-    {
-        setIsVisible(chat.visible);
-    }, [ chat.visible ]);
+    useEffect(() => setIsVisible(chat.visible), [ chat.visible ]);
 
     return (
         <div ref={ elementRef } className="bubble-container" style={ { visibility: (isVisible ? 'visible' : 'hidden') } } onMouseDown={ onMouseDown }>
diff --git a/src/views/room/widgets/chat/ChatWidgetView.scss b/src/views/room/widgets/chat/ChatWidgetView.scss
index 53904e1d..d2b8c923 100644
--- a/src/views/room/widgets/chat/ChatWidgetView.scss
+++ b/src/views/room/widgets/chat/ChatWidgetView.scss
@@ -13,4 +13,907 @@
     pointer-events: none;
 }
 
-@import './message/ChatWidgetMessageView';
+.chat-mention {
+    padding: 1px 5px;
+    font-weight: bold;
+    background: rgba(0, 0, 0, .2);
+    cursor: pointer;
+    border-radius: 100px;
+
+    &:hover {
+        color: blue;
+    }
+}
+
+.bubble-container {
+    position: absolute;
+    width: fit-content;
+    transition: top 0.2s ease 0s;
+    user-select: none;
+    pointer-events: all;
+
+    // -webkit-animation-duration: 0.2s;
+    // animation-duration: 0.2s;
+    // -webkit-animation-fill-mode: both;
+    // animation-fill-mode: both;
+    // -webkit-animation-name: bounceIn; 
+    // animation-name: bounceIn;
+
+    &:hover,
+    &:active {
+        pointer-events: none;
+    }
+
+    .user-container-bg {
+        position: absolute;
+        top: -1px;
+        left: 1px;
+        width: 30px;
+        height: calc(100% - 0.5px);
+        border-radius: 7px;
+        z-index: 1;
+    }
+
+    .chat-bubble {
+        position: relative;
+        z-index: 1;
+        word-break: break-word;
+        max-width: 350px;
+        min-height: 25px;
+        font-size: 15px;
+
+        border-image-slice: 17 6 6 29 fill;
+        border-image-width: 17px 6px 6px 29px;
+        border-image-outset: 2px 0px 0px 0px;
+        border-image-repeat: repeat repeat;
+
+        .pointer {
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+
+            width: 9px;
+            height: 6px;
+            bottom: -5px;
+        }
+
+        &.type-0 { // normal
+            .message {
+                font-weight: 400;
+            }
+        }
+
+        &.type-1 { // whisper
+            .message {
+                font-weight: 400;
+                font-style: italic;
+                color: #595959;
+            }
+        }
+
+        &.type-2 { // shout
+            .message {
+                font-weight: 700;
+            }
+        }
+
+        &.bubble-0 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_0_transparent.png');
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png');
+                bottom: -5px;
+            }
+        }
+
+        &.bubble-1 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_1.png');
+
+            border-image-slice: 18 6 6 29 fill;
+            border-image-width: 18px 6px 6px 29px;
+            border-image-outset: 3px 0px 0px 0px;
+
+            .user-container {
+                display: none;
+            }
+
+            .username {
+                display: none;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png');
+            }
+        }
+
+        &.bubble-2, &.bubble-31 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_2.png');
+
+            .user-container {
+                display: none;
+            }
+
+            .username {
+                color: rgba($white, 1);
+            }
+
+            .message {
+                color: rgba($white, 1) !important;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_2_31_pointer.png');
+                height: 7px;
+            }
+        }
+
+        &.bubble-3 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_3.png');
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_3_pointer.png');
+            }
+        }
+
+        &.bubble-4 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_4.png');
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_4_pointer.png');
+            }
+        }
+
+        &.bubble-5 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_5.png');
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_5_pointer.png');
+            }
+        }
+
+        &.bubble-6 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_6.png');
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_6_pointer.png');
+            }
+        }
+
+        &.bubble-7 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_7.png');
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_7_pointer.png');
+            }
+        }
+
+        &.bubble-8 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_8.png');
+
+            border-image-slice: 20 6 6 27 fill;
+            border-image-width: 20px 6px 6px 27px;
+            border-image-outset: 5px 0px 0px 0px;
+
+            .chat-content {
+                color: #fff;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_8_pointer.png');
+            }
+        }
+
+        &.bubble-9 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_9.png');
+
+            border-image-slice: 17 18 12 19 fill;
+            border-image-width: 17px 18px 12px 19px;
+            border-image-outset: 7px 7px 0px 9px;
+
+            .chat-content {
+                margin-left: 20px;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_9_pointer.png');
+                width: 7px;
+                height: 10px;
+                bottom: -6px;
+            }
+        }
+
+        &.bubble-10 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_10.png');
+
+            border-image-slice: 29 18 8 37 fill;
+            border-image-width: 29px 18px 8px 37px;
+            border-image-outset: 12px 7px 1px 5px;
+
+            .chat-content {
+                margin-left: 24px;
+                color: #fff;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_10_pointer.png');
+                width: 7px;
+                height: 8px;
+                bottom: -3px;
+            }
+        }
+
+        &.bubble-11 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_11.png');
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_11_pointer.png');
+            }
+        }
+
+        &.bubble-12 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_12.png');
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_12_pointer.png');
+            }
+        }
+
+        &.bubble-13 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_13.png');
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_13_pointer.png');
+            }
+        }
+
+        &.bubble-14 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_14.png');
+
+            .chat-content {
+                color: #fff;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_14_pointer.png');
+            }
+        }
+
+        &.bubble-15 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_15.png');
+
+            .chat-content {
+                color: #fff;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_15_pointer.png');
+            }
+        }
+
+        &.bubble-16 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_16.png');
+
+            border-image-slice: 13 6 10 31 fill;
+            border-image-width: 13px 6px 10px 31px;
+            border-image-outset: 6px 0px 0px 0px;
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_16_pointer.png');
+                height: 8px;
+            }
+        }
+
+        &.bubble-17 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_17.png');
+
+            border-image-slice: 24 6 8 35 fill;
+            border-image-width: 24px 6px 8px 35px;
+            border-image-outset: 9px 0px 2px 5px;
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_17_pointer.png');
+            }
+        }
+
+        &.bubble-18 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_18.png');
+
+            border-image-slice: 7 16 8 16 fill;
+            border-image-width: 7px 16px 8px 16px;
+            border-image-outset: 3px 10px 2px 11px;
+
+            .chat-content {
+                margin-left: 20px;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_18_pointer.png');
+                height: 8px;
+            }
+        }
+
+        &.bubble-19 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_19.png');
+
+            border-image-slice: 17 6 9 19 fill;
+            border-image-width: 17px 6px 9px 19px;
+            border-image-outset: 5px 0px 0px 8px;
+
+            .chat-content {
+                margin-left: 20px;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_19_20_pointer.png');
+            }
+        }
+
+        &.bubble-20 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_20.png');
+
+            border-image-slice: 18 6 8 19 fill;
+            border-image-width: 18px 6px 8px 19px;
+            border-image-outset: 5px 0px 0px 8px;
+
+            .chat-content {
+                margin-left: 20px;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_19_20_pointer.png');
+            }
+        }
+
+        &.bubble-21 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_21.png');
+
+            border-image-slice: 20 6 12 24 fill;
+            border-image-width: 20px 6px 12px 24px;
+            border-image-outset: 13px 2px 1px 3px;
+
+            .chat-content {
+                margin-left: 20px;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_21_pointer.png');
+                bottom: -4px;
+            }
+        }
+
+        &.bubble-22 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_22.png');
+
+            border-image-slice: 18 19 11 33 fill;
+            border-image-width: 18px 19px 11px 33px;
+            border-image-outset: 7px 1px 1px 5px;
+
+            .chat-content {
+                margin-left: 20px;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_22_pointer.png');
+            }
+        }
+
+        &.bubble-23 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_23.png');
+
+            border-image-slice: 16 6 7 32 fill;
+            border-image-width: 16px 6px 7px 32px;
+            border-image-outset: 5px 0px 0px 3px;
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_23_37_pointer.png');
+            }
+        }
+
+        &.bubble-24 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_24.png');
+
+            border-image-slice: 23 8 6 40 fill;
+            border-image-width: 23px 8px 6px 40px;
+            border-image-outset: 6px 0px 0px 6px;
+
+            .chat-content {
+                margin-left: 30px;
+                color: #fff;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_24_pointer.png');
+                bottom: -4px;
+            }
+        }
+
+        &.bubble-25 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_25.png');
+
+            border-image-slice: 10 13 8 28 fill;
+            border-image-width: 10px 13px 8px 28px;
+            border-image-outset: 6px 3px 2px 0px;
+
+            .chat-content {
+                color: #fff;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_25_pointer.png');
+                height: 9px;
+                bottom: -7px;
+            }
+        }
+
+        &.bubble-26 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_26.png');
+
+            border-image-slice: 16 9 8 29 fill;
+            border-image-width: 16px 9px 8px 29px;
+            border-image-outset: 2px 2px 2px 0px;
+
+            .chat-content {
+                color: #c59432;
+                text-shadow: 1px 1px rgba(0, 0, 0, .3);
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_26_pointer.png');
+                height: 10px;
+                bottom: -6px;
+            }
+        }
+
+        &.bubble-27 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_27.png');
+
+            border-image-slice: 25 6 5 36 fill;
+            border-image-width: 25px 6px 5px 36px;
+            border-image-outset: 8px 0px 0px 5px;
+
+            .chat-content {
+                margin-left: 30px;
+                color: #fff;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_27_pointer.png');
+            }
+        }
+
+        &.bubble-28 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_28.png');
+
+            border-image-slice: 16 7 7 27 fill;
+            border-image-width: 16px 7px 7px 27px;
+            border-image-outset: 3px 0px 0px 0px;
+
+            .chat-content {
+                margin-left: 25px;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_28_pointer.png');
+            }
+        }
+
+        &.bubble-29 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_29.png');
+
+            border-image-slice: 10 7 15 31 fill;
+            border-image-width: 10px 7px 15px 31px;
+            border-image-outset: 2px 0px 0px 1px;
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_29_pointer.png');
+                bottom: -4px;
+            }
+        }
+
+        &.bubble-30 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_30.png');
+
+            .user-container {
+                display: none;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_30_pointer.png');
+                height: 7px;
+            }
+        }
+
+        &.bubble-32 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_32.png');
+
+            border-image-slice: 15 7 7 30 fill;
+            border-image-width: 15px 7px 7px 30px;
+            border-image-outset: 2px 0px 0px 0px;
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_32_pointer.png');
+            }
+        }
+
+        &.bubble-33 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_33_34.png');
+
+            border-image-slice: 7 6 6 39 fill;
+            border-image-width: 7px 6px 6px 39px;
+            border-image-outset: 2px 0px 0px 0px;
+
+            .user-container {
+                display: none;
+            }
+
+            .chat-content {
+                margin-left: 35px;
+            }
+
+            &::before {
+                content: ' ';
+                position: absolute;
+                width: 19px;
+                height: 19px;
+                left: 9px;
+                top: 2px;
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_33_extra.png');
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png');
+            }
+        }
+
+        &.bubble-34 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_33_34.png');
+
+            border-image-slice: 7 6 6 39 fill;
+            border-image-width: 7px 6px 6px 39px;
+            border-image-outset: 2px 0px 0px 0px;
+
+            &.type-1 {
+
+                .message {
+                    font-style: unset;
+                    color: inherit;
+                }
+            }
+
+            .user-container {
+                display: none;
+            }
+
+            .username {
+                display: none;
+            }
+
+            .chat-content {
+                margin-left: 35px;
+            }
+
+            &::before {
+                content: ' ';
+                position: absolute;
+                width: 19px;
+                height: 19px;
+                left: 9px;
+                top: 2px;
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_34_extra.png');
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png');
+            }
+        }
+
+        &.bubble-35 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_35.png');
+
+            border-image-slice: 19 6 5 29 fill;
+            border-image-width: 19px 6px 5px 29px;
+            border-image-outset: 4px 0px 0px 0px;
+
+            .user-container {
+                display: none;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_35_pointer.png');
+            }
+        }
+
+        &.bubble-36 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_36.png');
+
+            border-image-slice: 17 7 5 30 fill;
+            border-image-width: 17px 7px 5px 30px;
+            border-image-outset: 2px 0px 0px 0px;
+
+            .user-container {
+                display: none;
+            }
+
+            &::before {
+                content: ' ';
+                position: absolute;
+                width: 13px;
+                height: 18px;
+                left: 5px;
+                top: 2px;
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_36_extra.png');
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_36_pointer.png');
+            }
+        }
+
+        &.bubble-37 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_37.png');
+
+            border-image-slice: 16 6 7 32 fill;
+            border-image-width: 16px 6px 7px 32px;
+            border-image-outset: 5px 0px 0px 3px;
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_23_37_pointer.png');
+            }
+        }
+
+        &.bubble-38 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_38.png');
+
+            border-image-slice: 17 7 5 30 fill;
+            border-image-width: 17px 7px 5px 30px;
+            border-image-outset: 2px 0px 0px 0px;
+
+            .user-container {
+                display: none;
+            }
+
+            &::before {
+                content: ' ';
+                position: absolute;
+                width: 19px;
+                height: 19px;
+                left: 3px;
+                top: 2px;
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_38_extra.png');
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_38_pointer.png');
+            }
+        }
+
+        .user-container {
+            z-index: 3;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            max-height: 24px;
+            overflow: hidden;
+
+            .user-image {
+                position: absolute;
+                top: -48px;
+                left: -32.5px;
+                width: 90px;
+                height: 130px;
+                background-repeat: no-repeat;
+                background-position: center;
+                transform: scale(0.5);
+                overflow: hidden;
+                image-rendering: -webkit-optimize-contrast;
+            }
+        }
+
+        .chat-content {
+            padding: 5px 6px 5px 4px;
+            margin-left: 27px;
+            line-height: 1;
+            color: $black;
+            min-height: 25px;
+        }
+    }
+}
+
+.chat-bubble-icon {
+    background-repeat: no-repeat;
+    background-position: center;
+
+    &.bubble-0 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_0.png');
+    }
+
+    &.bubble-1 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_1.png');
+        height: 25px;
+    }
+
+    &.bubble-2, &.bubble-31 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_2.png');
+    }
+
+    &.bubble-3 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_3.png');
+    }
+
+    &.bubble-4 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_4.png');
+    }
+
+    &.bubble-5 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_5.png');
+    }
+
+    &.bubble-6 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_6.png');
+    }
+
+    &.bubble-7 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_7.png');
+    }
+
+    &.bubble-8 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_8.png');
+    }
+
+    &.bubble-9 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_9.png');
+    }
+
+    &.bubble-10 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_10.png');
+    }
+
+    &.bubble-11 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_11.png');
+    }
+
+    &.bubble-12 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_12.png');
+    }
+
+    &.bubble-13 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_13.png');
+    }
+
+    &.bubble-14 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_14.png');
+    }
+
+    &.bubble-15 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_15.png');
+    }
+
+    &.bubble-16 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_16.png');
+    }
+
+    &.bubble-17 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_17.png');
+    }
+
+    &.bubble-18 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_18.png');
+    }
+
+    &.bubble-19 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_19.png');
+    }
+
+    &.bubble-20 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_20.png');
+    }
+
+    &.bubble-21 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_21.png');
+    }
+
+    &.bubble-22 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_22.png');
+    }
+
+    &.bubble-23 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_23.png');
+    }
+
+    &.bubble-24 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_24.png');
+    }
+
+    &.bubble-25 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_25.png');
+    }
+
+    &.bubble-26 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_26.png');
+    }
+
+    &.bubble-27 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_27.png');
+    }
+
+    &.bubble-28 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_28.png');
+    }
+
+    &.bubble-29 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_29.png');
+    }
+
+    &.bubble-30 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_30.png');
+    }
+
+    &.bubble-32 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_32.png');
+    }
+
+    &.bubble-33 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_33_34.png');
+
+        &::before {
+            content: ' ';
+            position: absolute;
+            width: 19px;
+            height: 19px;
+            left: 11px;
+            top: 10px;
+            background: url('../../../../assets/images/chat/chatbubbles/bubble_33_extra.png');
+        }
+    }
+
+    &.bubble-34 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_33_34.png');
+
+        &::before {
+            content: ' ';
+            position: absolute;
+            width: 19px;
+            height: 19px;
+            left: 11px;
+            top: 10px;
+            background: url('../../../../assets/images/chat/chatbubbles/bubble_34_extra.png');
+        }
+    }
+
+    &.bubble-35 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_35.png');
+    }
+
+    &.bubble-36 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_36.png');
+
+        &::before {
+            content: ' ';
+            position: absolute;
+            width: 13px;
+            height: 18px;
+            left: 13px;
+            top: 10px;
+            background: url('../../../../assets/images/chat/chatbubbles/bubble_36_extra.png');
+        }
+    }
+
+    &.bubble-37 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_35.png');
+    }
+
+    &.bubble-38 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_38.png');
+
+        &::before {
+            content: ' ';
+            position: absolute;
+            width: 19px;
+            height: 19px;
+            left: 11px;
+            top: 10px;
+            background: url('../../../../assets/images/chat/chatbubbles/bubble_38_extra.png');
+        }
+    }
+}
diff --git a/src/views/room/widgets/chat/ChatWidgetView.tsx b/src/views/room/widgets/chat/ChatWidgetView.tsx
index 6dab7b50..9181ffa3 100644
--- a/src/views/room/widgets/chat/ChatWidgetView.tsx
+++ b/src/views/room/widgets/chat/ChatWidgetView.tsx
@@ -3,8 +3,8 @@ import { FC, useCallback, useEffect, useRef, useState } from 'react';
 import { RoomWidgetChatSelectAvatarMessage, RoomWidgetRoomObjectMessage, RoomWidgetUpdateChatEvent } from '../../../../api';
 import { CreateEventDispatcherHook, useRoomEngineEvent } from '../../../../hooks/events';
 import { useRoomContext } from '../../context/RoomContext';
-import { ChatWidgetMessageView } from './message/ChatWidgetMessageView';
-import { ChatBubbleMessage } from './utils/ChatBubbleMessage';
+import { ChatWidgetMessageView } from './ChatWidgetMessageView';
+import { ChatBubbleMessage } from './common/ChatBubbleMessage';
 
 export const ChatWidgetView: FC<{}> = props =>
 {
@@ -54,13 +54,7 @@ export const ChatWidgetView: FC<{}> = props =>
         }
     }, [ chatMessages, moveChatUp, removeHiddenChats ]);
 
-    const addChat = useCallback((chat: ChatBubbleMessage) =>
-    {
-        setChatMessages(prevValue =>
-            {
-                return [ ...prevValue, chat ];
-            });
-    }, []);
+    const addChat = useCallback((chat: ChatBubbleMessage) => setChatMessages(prevValue => [ ...prevValue, chat ]), []);
 
     const onRoomWidgetUpdateChatEvent = useCallback((event: RoomWidgetUpdateChatEvent) =>
     {
@@ -115,10 +109,7 @@ export const ChatWidgetView: FC<{}> = props =>
 
     return (
         <div ref={ elementRef } className="nitro-chat-widget">
-            { chatMessages.map(chat =>
-                {
-                    return <ChatWidgetMessageView key={ chat.id } chat={ chat } makeRoom={ makeRoom } onChatClicked={ onChatClicked } />
-                })}
+            { chatMessages.map(chat => <ChatWidgetMessageView key={ chat.id } chat={ chat } makeRoom={ makeRoom } onChatClicked={ onChatClicked } />) }
         </div>
     );
 }
diff --git a/src/views/room/widgets/chat/utils/ChatBubbleMessage.ts b/src/views/room/widgets/chat/common/ChatBubbleMessage.ts
similarity index 100%
rename from src/views/room/widgets/chat/utils/ChatBubbleMessage.ts
rename to src/views/room/widgets/chat/common/ChatBubbleMessage.ts
diff --git a/src/views/room/widgets/chat/message/ChatWidgetMessageView.scss b/src/views/room/widgets/chat/message/ChatWidgetMessageView.scss
deleted file mode 100644
index 9337ed85..00000000
--- a/src/views/room/widgets/chat/message/ChatWidgetMessageView.scss
+++ /dev/null
@@ -1,921 +0,0 @@
-@keyframes bounceIn {
-    0% {
-       opacity: 0;
-       transform: scale(.3);
-    }
-    50% {
-       opacity: 1;
-       transform: scale(1.1);
-    }
-    70% {
-       transform: scale(.9);
-    }
-    100% {
-       transform: scale(1);
-    }
-}
-
-.chat-mention {
-    padding: 1px 5px;
-    font-weight: bold;
-    background: rgba(0, 0, 0, .2);
-    cursor: pointer;
-    border-radius: 100px;
-
-    &:hover {
-        color: blue;
-    }
-}
-
-.bubble-container {
-    position: absolute;
-    width: fit-content;
-    transition: top 0.2s ease 0s;
-    user-select: none;
-    pointer-events: all;
-
-    // -webkit-animation-duration: 0.2s;
-    // animation-duration: 0.2s;
-    // -webkit-animation-fill-mode: both;
-    // animation-fill-mode: both;
-    // -webkit-animation-name: bounceIn; 
-    // animation-name: bounceIn;
-
-    &:hover,
-    &:active {
-        pointer-events: none;
-    }
-
-    .user-container-bg {
-        position: absolute;
-        top: -1px;
-        left: 1px;
-        width: 30px;
-        height: calc(100% - 0.5px);
-        border-radius: 7px;
-        z-index: 1;
-    }
-
-    .chat-bubble {
-        position: relative;
-        z-index: 1;
-        word-break: break-word;
-        max-width: 350px;
-        min-height: 25px;
-        font-size: 15px;
-
-        border-image-slice: 17 6 6 29 fill;
-        border-image-width: 17px 6px 6px 29px;
-        border-image-outset: 2px 0px 0px 0px;
-        border-image-repeat: repeat repeat;
-
-        .pointer {
-            position: absolute;
-            left: 50%;
-            transform: translateX(-50%);
-
-            width: 9px;
-            height: 6px;
-            bottom: -5px;
-        }
-
-        &.type-0 { // normal
-            .message {
-                font-weight: 400;
-            }
-        }
-
-        &.type-1 { // whisper
-            .message {
-                font-weight: 400;
-                font-style: italic;
-                color: #595959;
-            }
-        }
-
-        &.type-2 { // shout
-            .message {
-                font-weight: 700;
-            }
-        }
-
-        &.bubble-0 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_0_transparent.png');
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png');
-                bottom: -5px;
-            }
-        }
-
-        &.bubble-1 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_1.png');
-
-            border-image-slice: 18 6 6 29 fill;
-            border-image-width: 18px 6px 6px 29px;
-            border-image-outset: 3px 0px 0px 0px;
-
-            .user-container {
-                display: none;
-            }
-
-            .username {
-                display: none;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png');
-            }
-        }
-
-        &.bubble-2, &.bubble-31 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_2.png');
-
-            .user-container {
-                display: none;
-            }
-
-            .username {
-                color: rgba($white, 1);
-            }
-
-            .message {
-                color: rgba($white, 1) !important;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_2_31_pointer.png');
-                height: 7px;
-            }
-        }
-
-        &.bubble-3 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_3.png');
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_3_pointer.png');
-            }
-        }
-
-        &.bubble-4 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_4.png');
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_4_pointer.png');
-            }
-        }
-
-        &.bubble-5 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_5.png');
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_5_pointer.png');
-            }
-        }
-
-        &.bubble-6 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_6.png');
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_6_pointer.png');
-            }
-        }
-
-        &.bubble-7 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_7.png');
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_7_pointer.png');
-            }
-        }
-
-        &.bubble-8 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_8.png');
-
-            border-image-slice: 20 6 6 27 fill;
-            border-image-width: 20px 6px 6px 27px;
-            border-image-outset: 5px 0px 0px 0px;
-
-            .chat-content {
-                color: #fff;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_8_pointer.png');
-            }
-        }
-
-        &.bubble-9 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_9.png');
-
-            border-image-slice: 17 18 12 19 fill;
-            border-image-width: 17px 18px 12px 19px;
-            border-image-outset: 7px 7px 0px 9px;
-
-            .chat-content {
-                margin-left: 20px;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_9_pointer.png');
-                width: 7px;
-                height: 10px;
-                bottom: -6px;
-            }
-        }
-
-        &.bubble-10 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_10.png');
-
-            border-image-slice: 29 18 8 37 fill;
-            border-image-width: 29px 18px 8px 37px;
-            border-image-outset: 12px 7px 1px 5px;
-
-            .chat-content {
-                margin-left: 24px;
-                color: #fff;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_10_pointer.png');
-                width: 7px;
-                height: 8px;
-                bottom: -3px;
-            }
-        }
-
-        &.bubble-11 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_11.png');
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_11_pointer.png');
-            }
-        }
-
-        &.bubble-12 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_12.png');
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_12_pointer.png');
-            }
-        }
-
-        &.bubble-13 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_13.png');
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_13_pointer.png');
-            }
-        }
-
-        &.bubble-14 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_14.png');
-
-            .chat-content {
-                color: #fff;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_14_pointer.png');
-            }
-        }
-
-        &.bubble-15 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_15.png');
-
-            .chat-content {
-                color: #fff;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_15_pointer.png');
-            }
-        }
-
-        &.bubble-16 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_16.png');
-
-            border-image-slice: 13 6 10 31 fill;
-            border-image-width: 13px 6px 10px 31px;
-            border-image-outset: 6px 0px 0px 0px;
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_16_pointer.png');
-                height: 8px;
-            }
-        }
-
-        &.bubble-17 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_17.png');
-
-            border-image-slice: 24 6 8 35 fill;
-            border-image-width: 24px 6px 8px 35px;
-            border-image-outset: 9px 0px 2px 5px;
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_17_pointer.png');
-            }
-        }
-
-        &.bubble-18 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_18.png');
-
-            border-image-slice: 7 16 8 16 fill;
-            border-image-width: 7px 16px 8px 16px;
-            border-image-outset: 3px 10px 2px 11px;
-
-            .chat-content {
-                margin-left: 20px;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_18_pointer.png');
-                height: 8px;
-            }
-        }
-
-        &.bubble-19 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_19.png');
-
-            border-image-slice: 17 6 9 19 fill;
-            border-image-width: 17px 6px 9px 19px;
-            border-image-outset: 5px 0px 0px 8px;
-
-            .chat-content {
-                margin-left: 20px;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_19_20_pointer.png');
-            }
-        }
-
-        &.bubble-20 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_20.png');
-
-            border-image-slice: 18 6 8 19 fill;
-            border-image-width: 18px 6px 8px 19px;
-            border-image-outset: 5px 0px 0px 8px;
-
-            .chat-content {
-                margin-left: 20px;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_19_20_pointer.png');
-            }
-        }
-
-        &.bubble-21 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_21.png');
-
-            border-image-slice: 20 6 12 24 fill;
-            border-image-width: 20px 6px 12px 24px;
-            border-image-outset: 13px 2px 1px 3px;
-
-            .chat-content {
-                margin-left: 20px;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_21_pointer.png');
-                bottom: -4px;
-            }
-        }
-
-        &.bubble-22 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_22.png');
-
-            border-image-slice: 18 19 11 33 fill;
-            border-image-width: 18px 19px 11px 33px;
-            border-image-outset: 7px 1px 1px 5px;
-
-            .chat-content {
-                margin-left: 20px;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_22_pointer.png');
-            }
-        }
-
-        &.bubble-23 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_23.png');
-
-            border-image-slice: 16 6 7 32 fill;
-            border-image-width: 16px 6px 7px 32px;
-            border-image-outset: 5px 0px 0px 3px;
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_23_37_pointer.png');
-            }
-        }
-
-        &.bubble-24 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_24.png');
-
-            border-image-slice: 23 8 6 40 fill;
-            border-image-width: 23px 8px 6px 40px;
-            border-image-outset: 6px 0px 0px 6px;
-
-            .chat-content {
-                margin-left: 30px;
-                color: #fff;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_24_pointer.png');
-                bottom: -4px;
-            }
-        }
-
-        &.bubble-25 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_25.png');
-
-            border-image-slice: 10 13 8 28 fill;
-            border-image-width: 10px 13px 8px 28px;
-            border-image-outset: 6px 3px 2px 0px;
-
-            .chat-content {
-                color: #fff;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_25_pointer.png');
-                height: 9px;
-                bottom: -7px;
-            }
-        }
-
-        &.bubble-26 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_26.png');
-
-            border-image-slice: 16 9 8 29 fill;
-            border-image-width: 16px 9px 8px 29px;
-            border-image-outset: 2px 2px 2px 0px;
-
-            .chat-content {
-                color: #c59432;
-                text-shadow: 1px 1px rgba(0, 0, 0, .3);
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_26_pointer.png');
-                height: 10px;
-                bottom: -6px;
-            }
-        }
-
-        &.bubble-27 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_27.png');
-
-            border-image-slice: 25 6 5 36 fill;
-            border-image-width: 25px 6px 5px 36px;
-            border-image-outset: 8px 0px 0px 5px;
-
-            .chat-content {
-                margin-left: 30px;
-                color: #fff;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_27_pointer.png');
-            }
-        }
-
-        &.bubble-28 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_28.png');
-
-            border-image-slice: 16 7 7 27 fill;
-            border-image-width: 16px 7px 7px 27px;
-            border-image-outset: 3px 0px 0px 0px;
-
-            .chat-content {
-                margin-left: 25px;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_28_pointer.png');
-            }
-        }
-
-        &.bubble-29 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_29.png');
-
-            border-image-slice: 10 7 15 31 fill;
-            border-image-width: 10px 7px 15px 31px;
-            border-image-outset: 2px 0px 0px 1px;
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_29_pointer.png');
-                bottom: -4px;
-            }
-        }
-
-        &.bubble-30 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_30.png');
-
-            .user-container {
-                display: none;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_30_pointer.png');
-                height: 7px;
-            }
-        }
-
-        &.bubble-32 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_32.png');
-
-            border-image-slice: 15 7 7 30 fill;
-            border-image-width: 15px 7px 7px 30px;
-            border-image-outset: 2px 0px 0px 0px;
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_32_pointer.png');
-            }
-        }
-
-        &.bubble-33 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_33_34.png');
-
-            border-image-slice: 7 6 6 39 fill;
-            border-image-width: 7px 6px 6px 39px;
-            border-image-outset: 2px 0px 0px 0px;
-
-            .user-container {
-                display: none;
-            }
-
-            .chat-content {
-                margin-left: 35px;
-            }
-
-            &::before {
-                content: ' ';
-                position: absolute;
-                width: 19px;
-                height: 19px;
-                left: 9px;
-                top: 2px;
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_33_extra.png');
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png');
-            }
-        }
-
-        &.bubble-34 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_33_34.png');
-
-            border-image-slice: 7 6 6 39 fill;
-            border-image-width: 7px 6px 6px 39px;
-            border-image-outset: 2px 0px 0px 0px;
-
-            &.type-1 {
-
-                .message {
-                    font-style: unset;
-                    color: inherit;
-                }
-            }
-
-            .user-container {
-                display: none;
-            }
-
-            .username {
-                display: none;
-            }
-
-            .chat-content {
-                margin-left: 35px;
-            }
-
-            &::before {
-                content: ' ';
-                position: absolute;
-                width: 19px;
-                height: 19px;
-                left: 9px;
-                top: 2px;
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_34_extra.png');
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png');
-            }
-        }
-
-        &.bubble-35 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_35.png');
-
-            border-image-slice: 19 6 5 29 fill;
-            border-image-width: 19px 6px 5px 29px;
-            border-image-outset: 4px 0px 0px 0px;
-
-            .user-container {
-                display: none;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_35_pointer.png');
-            }
-        }
-
-        &.bubble-36 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_36.png');
-
-            border-image-slice: 17 7 5 30 fill;
-            border-image-width: 17px 7px 5px 30px;
-            border-image-outset: 2px 0px 0px 0px;
-
-            .user-container {
-                display: none;
-            }
-
-            &::before {
-                content: ' ';
-                position: absolute;
-                width: 13px;
-                height: 18px;
-                left: 5px;
-                top: 2px;
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_36_extra.png');
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_36_pointer.png');
-            }
-        }
-
-        &.bubble-37 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_37.png');
-
-            border-image-slice: 16 6 7 32 fill;
-            border-image-width: 16px 6px 7px 32px;
-            border-image-outset: 5px 0px 0px 3px;
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_23_37_pointer.png');
-            }
-        }
-
-        &.bubble-38 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_38.png');
-
-            border-image-slice: 17 7 5 30 fill;
-            border-image-width: 17px 7px 5px 30px;
-            border-image-outset: 2px 0px 0px 0px;
-
-            .user-container {
-                display: none;
-            }
-
-            &::before {
-                content: ' ';
-                position: absolute;
-                width: 19px;
-                height: 19px;
-                left: 3px;
-                top: 2px;
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_38_extra.png');
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_38_pointer.png');
-            }
-        }
-
-        .user-container {
-            z-index: 3;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 100%;
-            max-height: 24px;
-            overflow: hidden;
-
-            .user-image {
-                position: absolute;
-                top: -48px;
-                left: -32.5px;
-                width: 90px;
-                height: 130px;
-                background-repeat: no-repeat;
-                background-position: center;
-                transform: scale(0.5);
-                overflow: hidden;
-                image-rendering: -webkit-optimize-contrast;
-            }
-        }
-
-        .chat-content {
-            padding: 5px 6px 5px 4px;
-            margin-left: 27px;
-            line-height: 1;
-            color: $black;
-            min-height: 25px;
-        }
-    }
-}
-
-.chat-bubble-icon {
-    background-repeat: no-repeat;
-    background-position: center;
-
-    &.bubble-0 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_0.png');
-    }
-
-    &.bubble-1 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_1.png');
-        height: 25px;
-    }
-
-    &.bubble-2, &.bubble-31 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_2.png');
-    }
-
-    &.bubble-3 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_3.png');
-    }
-
-    &.bubble-4 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_4.png');
-    }
-
-    &.bubble-5 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_5.png');
-    }
-
-    &.bubble-6 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_6.png');
-    }
-
-    &.bubble-7 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_7.png');
-    }
-
-    &.bubble-8 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_8.png');
-    }
-
-    &.bubble-9 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_9.png');
-    }
-
-    &.bubble-10 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_10.png');
-    }
-
-    &.bubble-11 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_11.png');
-    }
-
-    &.bubble-12 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_12.png');
-    }
-
-    &.bubble-13 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_13.png');
-    }
-
-    &.bubble-14 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_14.png');
-    }
-
-    &.bubble-15 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_15.png');
-    }
-
-    &.bubble-16 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_16.png');
-    }
-
-    &.bubble-17 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_17.png');
-    }
-
-    &.bubble-18 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_18.png');
-    }
-
-    &.bubble-19 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_19.png');
-    }
-
-    &.bubble-20 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_20.png');
-    }
-
-    &.bubble-21 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_21.png');
-    }
-
-    &.bubble-22 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_22.png');
-    }
-
-    &.bubble-23 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_23.png');
-    }
-
-    &.bubble-24 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_24.png');
-    }
-
-    &.bubble-25 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_25.png');
-    }
-
-    &.bubble-26 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_26.png');
-    }
-
-    &.bubble-27 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_27.png');
-    }
-
-    &.bubble-28 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_28.png');
-    }
-
-    &.bubble-29 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_29.png');
-    }
-
-    &.bubble-30 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_30.png');
-    }
-
-    &.bubble-32 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_32.png');
-    }
-
-    &.bubble-33 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_33_34.png');
-
-        &::before {
-            content: ' ';
-            position: absolute;
-            width: 19px;
-            height: 19px;
-            left: 11px;
-            top: 10px;
-            background: url('../../../../../assets/images/chat/chatbubbles/bubble_33_extra.png');
-        }
-    }
-
-    &.bubble-34 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_33_34.png');
-
-        &::before {
-            content: ' ';
-            position: absolute;
-            width: 19px;
-            height: 19px;
-            left: 11px;
-            top: 10px;
-            background: url('../../../../../assets/images/chat/chatbubbles/bubble_34_extra.png');
-        }
-    }
-
-    &.bubble-35 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_35.png');
-    }
-
-    &.bubble-36 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_36.png');
-
-        &::before {
-            content: ' ';
-            position: absolute;
-            width: 13px;
-            height: 18px;
-            left: 13px;
-            top: 10px;
-            background: url('../../../../../assets/images/chat/chatbubbles/bubble_36_extra.png');
-        }
-    }
-
-    &.bubble-37 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_35.png');
-    }
-
-    &.bubble-38 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_38.png');
-
-        &::before {
-            content: ' ';
-            position: absolute;
-            width: 19px;
-            height: 19px;
-            left: 11px;
-            top: 10px;
-            background: url('../../../../../assets/images/chat/chatbubbles/bubble_38_extra.png');
-        }
-    }
-}
diff --git a/src/views/room/widgets/chat/message/ChatWidgetMessageView.types.ts b/src/views/room/widgets/chat/message/ChatWidgetMessageView.types.ts
deleted file mode 100644
index 330b2886..00000000
--- a/src/views/room/widgets/chat/message/ChatWidgetMessageView.types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { ChatBubbleMessage } from '../utils/ChatBubbleMessage';
-
-export interface ChatWidgetMessageViewProps
-{
-    chat: ChatBubbleMessage;
-    makeRoom: (chat: ChatBubbleMessage) => void;
-    onChatClicked: (chat: ChatBubbleMessage) => void;
-}
diff --git a/src/views/room/widgets/chat/utils/ChatWidgetUtilities.ts b/src/views/room/widgets/chat/utils/ChatWidgetUtilities.ts
deleted file mode 100644
index 220b6bae..00000000
--- a/src/views/room/widgets/chat/utils/ChatWidgetUtilities.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { INitroPoint, IVector3D, NitroPoint } from '@nitrots/nitro-renderer';
-import { GetRoomEngine } from '../../../../../api';
-
-export function GetBubbleLocation(roomId: number, userLocation: IVector3D, canvasId = 1): INitroPoint
-{
-    const geometry = GetRoomEngine().getRoomInstanceGeometry(roomId, canvasId);
-    const scale = GetRoomEngine().getRoomInstanceRenderingCanvasScale(roomId, canvasId);
-
-    let x = ((document.body.offsetWidth * scale) / 2);
-    let y = ((document.body.offsetHeight * scale) / 2);
-
-    if(geometry && userLocation)
-    {
-        const screenPoint = geometry.getScreenPoint(userLocation);
-
-        if(screenPoint)
-        {
-            x = (x + (screenPoint.x * scale));
-            y = (y + (screenPoint.y * scale));
-
-            const offsetPoint = GetRoomEngine().getRoomInstanceRenderingCanvasOffset(roomId, canvasId);
-
-            if(offsetPoint)
-            {
-                x = (x + offsetPoint.x);
-                y = (y + offsetPoint.y);
-            }
-        }
-    }
-
-    return new NitroPoint(x, y);
-}

From da810998c5b6f5c3a78f867575596d60fae14874 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Fri, 25 Feb 2022 19:31:26 -0500
Subject: [PATCH 02/17] Update chooser widget

---
 src/App.scss                                  |  3 +
 .../widgets/choosers/ChooserWidgetView.scss   | 16 +-----
 .../widgets/choosers/ChooserWidgetView.tsx    | 56 ++++++++++---------
 .../choosers/ChooserWidgetView.type.ts        |  9 ---
 .../choosers/FurniChooserWidgetView.tsx       | 20 ++++---
 .../choosers/UserChooserWidgetView.tsx        | 16 ++++--
 6 files changed, 58 insertions(+), 62 deletions(-)
 delete mode 100644 src/views/room/widgets/choosers/ChooserWidgetView.type.ts

diff --git a/src/App.scss b/src/App.scss
index 547c02c4..30fce560 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -71,6 +71,9 @@ $room-info-width: 325px;
 
 $nitro-mod-tools-width: 175px;
 
+$nitro-chooser-width: 200px;
+$nitro-chooser-height: 200px;
+
 .nitro-app {
     width: 100%;
     height: 100%;
diff --git a/src/views/room/widgets/choosers/ChooserWidgetView.scss b/src/views/room/widgets/choosers/ChooserWidgetView.scss
index 5365dd13..026e95b1 100644
--- a/src/views/room/widgets/choosers/ChooserWidgetView.scss
+++ b/src/views/room/widgets/choosers/ChooserWidgetView.scss
@@ -1,16 +1,4 @@
 .nitro-chooser-widget {
-    
-
-    .chooser-container {
-        min-height: 150px;
-
-        .list-item {
-            color: black;
-            overflow: hidden;
-    
-            &.selected {
-                background-color: cadetblue;
-            }
-        }
-    }
+    width: $nitro-chooser-width;
+    height: $nitro-chooser-height;
 }
diff --git a/src/views/room/widgets/choosers/ChooserWidgetView.tsx b/src/views/room/widgets/choosers/ChooserWidgetView.tsx
index 492b5164..2a11519f 100644
--- a/src/views/room/widgets/choosers/ChooserWidgetView.tsx
+++ b/src/views/room/widgets/choosers/ChooserWidgetView.tsx
@@ -2,16 +2,24 @@ import { FC, useCallback, useMemo, useState } from 'react';
 import { AutoSizer, List, ListRowProps, ListRowRenderer } from 'react-virtualized';
 import { RoomObjectItem, RoomWidgetRoomObjectMessage } from '../../../../api';
 import { LocalizeText } from '../../../../api/utils';
+import { Column, Flex, Text } from '../../../../common';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 import { useRoomContext } from '../../context/RoomContext';
-import { ChooserWidgetViewProps } from './ChooserWidgetView.type';
+
+interface ChooserWidgetViewProps
+{
+    title: string;
+    items: RoomObjectItem[];
+    displayItemId: boolean;
+    onCloseClick: () => void;
+}
 
 export const ChooserWidgetView: FC<ChooserWidgetViewProps> = props =>
 {
     const { title = null, items = null, displayItemId = false, onCloseClick = null } = props;
     const [ selectedItem, setSelectedItem ] = useState<RoomObjectItem>(null);
     const [ searchValue, setSearchValue ] = useState('');
-    const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
+    const { widgetHandler = null } = useRoomContext();
 
     const filteredItems = useMemo(() =>
     {
@@ -21,15 +29,13 @@ export const ChooserWidgetView: FC<ChooserWidgetViewProps> = props =>
 
         const value = searchValue.toLocaleLowerCase();
 
-        return items.filter(item =>
-            {
-                return item.name.toLocaleLowerCase().includes(value);
-            });
+        return items.filter(item => item.name.toLocaleLowerCase().includes(value));
     }, [ items, searchValue ]);
 
     const onItemClick = useCallback((item: RoomObjectItem) =>
     {
         setSelectedItem(item);
+
         widgetHandler.processWidgetMessage(new RoomWidgetRoomObjectMessage(RoomWidgetRoomObjectMessage.SELECT_OBJECT, item.id, item.category));
     }, [ widgetHandler, setSelectedItem]);
 
@@ -38,34 +44,30 @@ export const ChooserWidgetView: FC<ChooserWidgetViewProps> = props =>
         const item = filteredItems[props.index];
 
         return (
-            <div key={ props.key } className={ 'list-item' + ((selectedItem === item) ? ' selected' : '') } style={ props.style } onClick={ () => onItemClick(item) }>
-                { item.name } { displayItemId && (' - ' + item.id) }
-            </div>
+            <Flex key={ props.key } alignItems="center" position="absolute" className={ 'rounded px-1' + ((selectedItem === item) ? ' bg-muted' : '') } pointer style={ props.style } onClick={ event => onItemClick(item) }>
+                <Text truncate>{ item.name } { displayItemId && (' - ' + item.id) }</Text>
+            </Flex>
         );
     }
 
     return (
         <NitroCardView className="nitro-chooser-widget">
             <NitroCardHeaderView headerText={ title } onCloseClick={ onCloseClick } />
-            <NitroCardContentView>
-                <div className="d-flex mb-1">
-                    <div className="d-flex flex-grow-1 me-1">
-                        <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={searchValue} onChange={event => setSearchValue(event.target.value)} />
-                    </div>
-                </div>
-                <div className="row w-100 h-100 chooser-container">
-                    <AutoSizer defaultWidth={150} defaultHeight={150}>
-                        {({ height, width }) => 
-                        {
-                            return (<List
-                                width={ width }
-                                height={ height }
-                                rowCount={ filteredItems.length }
-                                rowHeight={ 20 }
-                                rowRenderer={ rowRenderer } />)
-                        }}
+            <NitroCardContentView overflow="hidden">
+                <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={searchValue} onChange={event => setSearchValue(event.target.value)} />
+                <Column fullHeight overflow="auto">
+                    <AutoSizer defaultWidth={ 0 } defaultHeight={ 0 }>
+                        { ({ width, height }) => 
+                            {
+                                return (<List
+                                    width={ width }
+                                    height={ height }
+                                    rowCount={ filteredItems.length }
+                                    rowHeight={ 20 }
+                                    rowRenderer={ rowRenderer } />)
+                            } }
                     </AutoSizer>
-                </div>
+                </Column>
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/views/room/widgets/choosers/ChooserWidgetView.type.ts b/src/views/room/widgets/choosers/ChooserWidgetView.type.ts
deleted file mode 100644
index 89c9a169..00000000
--- a/src/views/room/widgets/choosers/ChooserWidgetView.type.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { RoomObjectItem } from '../../../../api';
-
-export interface ChooserWidgetViewProps
-{
-    title: string;
-    items: RoomObjectItem[];
-    displayItemId: boolean;
-    onCloseClick: () => void;
-}
diff --git a/src/views/room/widgets/choosers/FurniChooserWidgetView.tsx b/src/views/room/widgets/choosers/FurniChooserWidgetView.tsx
index 68a2971f..99198b1d 100644
--- a/src/views/room/widgets/choosers/FurniChooserWidgetView.tsx
+++ b/src/views/room/widgets/choosers/FurniChooserWidgetView.tsx
@@ -1,6 +1,6 @@
 import { FC, useCallback, useState } from 'react';
 import { LocalizeText, RoomObjectItem, RoomWidgetChooserContentEvent, RoomWidgetRequestWidgetMessage, RoomWidgetUpdateRoomObjectEvent } from '../../../../api';
-import { CreateEventDispatcherHook } from '../../../../hooks';
+import { BatchUpdates, CreateEventDispatcherHook } from '../../../../hooks';
 import { useRoomContext } from '../../context/RoomContext';
 import { ChooserWidgetView } from './ChooserWidgetView';
 
@@ -20,13 +20,16 @@ export const FurniChooserWidgetView: FC<{}> = props =>
                 if(prevValue) clearTimeout(prevValue);
 
                 return setTimeout(() => widgetHandler.processWidgetMessage(new RoomWidgetRequestWidgetMessage(RoomWidgetRequestWidgetMessage.FURNI_CHOOSER)), 100);
-            })
+            });
     }, [ isVisible, widgetHandler ]);
 
     const onRoomWidgetChooserContentEvent = useCallback((event: RoomWidgetChooserContentEvent) =>
     {
-        setItems(event.items);
-        setIsVisible(true);
+        BatchUpdates(() =>
+        {
+            setItems(event.items);
+            setIsVisible(true);
+        });
     }, []);
 
     CreateEventDispatcherHook(RoomWidgetChooserContentEvent.FURNI_CHOOSER_CONTENT, eventDispatcher, onRoomWidgetChooserContentEvent);
@@ -49,11 +52,14 @@ export const FurniChooserWidgetView: FC<{}> = props =>
 
     const close = useCallback(() =>
     {
-        setIsVisible(false);
-        setItems(null);
+        BatchUpdates(() =>
+        {
+            setIsVisible(false);
+            setItems(null);
+        });
     }, []);
 
-    if(!isVisible) return null;
+    if(!items) return null;
 
     return <ChooserWidgetView title={ LocalizeText('widget.chooser.furni.title') } displayItemId={ true } items={ items } onCloseClick={ close } />;
 }
diff --git a/src/views/room/widgets/choosers/UserChooserWidgetView.tsx b/src/views/room/widgets/choosers/UserChooserWidgetView.tsx
index b9ab2460..18dcbefd 100644
--- a/src/views/room/widgets/choosers/UserChooserWidgetView.tsx
+++ b/src/views/room/widgets/choosers/UserChooserWidgetView.tsx
@@ -1,6 +1,6 @@
 import { FC, useCallback, useState } from 'react';
 import { LocalizeText, RoomObjectItem, RoomWidgetChooserContentEvent, RoomWidgetRequestWidgetMessage, RoomWidgetUpdateRoomObjectEvent } from '../../../../api';
-import { CreateEventDispatcherHook } from '../../../../hooks';
+import { BatchUpdates, CreateEventDispatcherHook } from '../../../../hooks';
 import { useRoomContext } from '../../context/RoomContext';
 import { ChooserWidgetView } from './ChooserWidgetView';
 
@@ -25,8 +25,11 @@ export const UserChooserWidgetView: FC<{}> = props =>
 
     const onRoomWidgetChooserContentEvent = useCallback((event: RoomWidgetChooserContentEvent) =>
     {
-        setItems(event.items);
-        setIsVisible(true);
+        BatchUpdates(() =>
+        {
+            setItems(event.items);
+            setIsVisible(true);
+        });
     }, []);
 
     CreateEventDispatcherHook(RoomWidgetChooserContentEvent.USER_CHOOSER_CONTENT, eventDispatcher, onRoomWidgetChooserContentEvent);
@@ -49,8 +52,11 @@ export const UserChooserWidgetView: FC<{}> = props =>
 
     const close = useCallback(() =>
     {
-        setIsVisible(false);
-        setItems(null);
+        BatchUpdates(() =>
+        {
+            setIsVisible(false);
+            setItems(null);
+        });
     }, []);
     
     if(!isVisible) return null;

From de682dac3af1f0638e649edb88f2a127dc3d7064 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Fri, 25 Feb 2022 19:40:53 -0500
Subject: [PATCH 03/17] Update doorbell widget

---
 src/views/room/widgets/RoomWidgets.scss       |  1 -
 .../doorbell/DoorbellWidgetItemView.tsx       | 29 +++++++++++++++++++
 .../widgets/doorbell/DoorbellWidgetView.scss  | 22 --------------
 .../widgets/doorbell/DoorbellWidgetView.tsx   | 25 ++++++++--------
 .../doorbell-item/DoorbellWidgetItemView.tsx  | 21 --------------
 .../DoorbellWidgetItemView.types.ts           |  6 ----
 6 files changed, 41 insertions(+), 63 deletions(-)
 create mode 100644 src/views/room/widgets/doorbell/DoorbellWidgetItemView.tsx
 delete mode 100644 src/views/room/widgets/doorbell/DoorbellWidgetView.scss
 delete mode 100644 src/views/room/widgets/doorbell/doorbell-item/DoorbellWidgetItemView.tsx
 delete mode 100644 src/views/room/widgets/doorbell/doorbell-item/DoorbellWidgetItemView.types.ts

diff --git a/src/views/room/widgets/RoomWidgets.scss b/src/views/room/widgets/RoomWidgets.scss
index 46b5281c..a2f114d6 100644
--- a/src/views/room/widgets/RoomWidgets.scss
+++ b/src/views/room/widgets/RoomWidgets.scss
@@ -3,7 +3,6 @@
 @import './chat-input/ChatInputView';
 @import './choosers/ChooserWidgetView';
 @import './context-menu/ContextMenu';
-@import './doorbell/DoorbellWidgetView';
 @import './friend-request/FriendRequestDialogView';
 @import './furniture/FurnitureWidgets';
 @import './infostand/InfoStandWidgetView';
diff --git a/src/views/room/widgets/doorbell/DoorbellWidgetItemView.tsx b/src/views/room/widgets/doorbell/DoorbellWidgetItemView.tsx
new file mode 100644
index 00000000..810cae5d
--- /dev/null
+++ b/src/views/room/widgets/doorbell/DoorbellWidgetItemView.tsx
@@ -0,0 +1,29 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FC } from 'react';
+import { Button, ButtonGroup, Flex, Text } from '../../../../common';
+
+interface DoorbellWidgetItemViewProps
+{
+    userName: string;
+    accept: () => void;
+    deny: () => void;
+}
+
+export const DoorbellWidgetItemView: FC<DoorbellWidgetItemViewProps> = props =>
+{
+    const { userName = '', accept = null, deny = null } = props;
+
+    return (
+        <Flex alignItems="center" justifyContent="between">
+            <Text bold>{ userName }</Text>
+            <ButtonGroup>
+                <Button variant="success" onClick={ accept }>
+                    <FontAwesomeIcon icon="check" />
+                </Button>
+                <Button variant="danger" onClick={ deny }>
+                    <FontAwesomeIcon icon="times" />
+                </Button>
+            </ButtonGroup>
+        </Flex>
+    );
+}
diff --git a/src/views/room/widgets/doorbell/DoorbellWidgetView.scss b/src/views/room/widgets/doorbell/DoorbellWidgetView.scss
deleted file mode 100644
index 125a5e69..00000000
--- a/src/views/room/widgets/doorbell/DoorbellWidgetView.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.nitro-widget-doorbell {
-    width: 250px;
-
-    .content-area {
-        min-height: 143px;
-        height: 143px;
-    }
-
-    .doorbell-user-list {
-
-        .list-item {
-            background: $grid-active-bg-color;
-        }
-
-        .col:nth-child(even) {
-
-            .list-item {
-                background: $white !important;
-            }
-        }
-    }
-}
diff --git a/src/views/room/widgets/doorbell/DoorbellWidgetView.tsx b/src/views/room/widgets/doorbell/DoorbellWidgetView.tsx
index 8e8b86c5..a42ed47c 100644
--- a/src/views/room/widgets/doorbell/DoorbellWidgetView.tsx
+++ b/src/views/room/widgets/doorbell/DoorbellWidgetView.tsx
@@ -1,9 +1,10 @@
 import { FC, useCallback, useState } from 'react';
 import { LocalizeText, RoomWidgetDoorbellEvent, RoomWidgetLetUserInMessage } from '../../../../api';
-import { CreateEventDispatcherHook } from '../../../../hooks';
+import { Column } from '../../../../common';
+import { BatchUpdates, CreateEventDispatcherHook } from '../../../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 import { useRoomContext } from '../../context/RoomContext';
-import { DoorbellWidgetItemView } from './doorbell-item/DoorbellWidgetItemView';
+import { DoorbellWidgetItemView } from './DoorbellWidgetItemView';
 
 export const DoorbellWidgetView: FC<{}> = props =>
 {
@@ -15,10 +16,11 @@ export const DoorbellWidgetView: FC<{}> = props =>
     {
         if(users.indexOf(userName) >= 0) return;
 
-        const newUsers = [ ...users, userName ];
-
-        setUsers(newUsers);
-        setIsVisible(true);
+        BatchUpdates(() =>
+        {
+            setUsers([ ...users, userName ]);
+            setIsVisible(true);
+        });
     }, [ users ]);
 
     const removeUser = useCallback((userName: string) =>
@@ -66,13 +68,10 @@ export const DoorbellWidgetView: FC<{}> = props =>
     return (
         <NitroCardView className="nitro-widget-doorbell" simple={ true }>
             <NitroCardHeaderView headerText={ LocalizeText('navigator.doorbell.title') } onCloseClick={ event => setIsVisible(false) } />
-            <NitroCardContentView>
-                <div className="row row-cols-1 doorbell-user-list">
-                    { (users.length > 0) && users.map(userName =>
-                        {
-                            return <DoorbellWidgetItemView key={ userName } userName={ userName } accept={ () => answer(userName, true) } deny={ () => answer(userName, false) } />;
-                        }) }
-                </div>
+            <NitroCardContentView overflow="hidden">
+                <Column overflow="auto">
+                    { users && (users.length > 0) && users.map(userName => <DoorbellWidgetItemView key={ userName } userName={ userName } accept={ () => answer(userName, true) } deny={ () => answer(userName, false) } />) }
+                </Column>
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/views/room/widgets/doorbell/doorbell-item/DoorbellWidgetItemView.tsx b/src/views/room/widgets/doorbell/doorbell-item/DoorbellWidgetItemView.tsx
deleted file mode 100644
index dcd90189..00000000
--- a/src/views/room/widgets/doorbell/doorbell-item/DoorbellWidgetItemView.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { FC } from 'react';
-import { DoorbellWidgetItemViewProps } from './DoorbellWidgetItemView.types';
-
-export const DoorbellWidgetItemView: FC<DoorbellWidgetItemViewProps> = props =>
-{
-    const { userName = '', accept = null, deny = null } = props;
-
-    return (
-        <div className="d-flex col align-items-center justify-content-between">
-            <span className="fw-bold text-black">{ userName }</span>
-            <div>
-                <button type="button" className="btn btn-success btn-sm me-1" onClick={ accept }>
-                    <i className="fas fa-check" />
-                </button>
-                <button type="button" className="btn btn-danger btn-sm" onClick={ deny }>
-                    <i className="fas fa-times" />
-                </button>
-            </div>
-        </div>
-    );
-}
diff --git a/src/views/room/widgets/doorbell/doorbell-item/DoorbellWidgetItemView.types.ts b/src/views/room/widgets/doorbell/doorbell-item/DoorbellWidgetItemView.types.ts
deleted file mode 100644
index a0ba4caa..00000000
--- a/src/views/room/widgets/doorbell/doorbell-item/DoorbellWidgetItemView.types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface DoorbellWidgetItemViewProps
-{
-    userName: string;
-    accept: () => void;
-    deny: () => void;
-}

From 7bf528d4be18e441462c0edd0303822f38e7e7d6 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Fri, 25 Feb 2022 19:52:37 -0500
Subject: [PATCH 04/17] Update dimmer widget

---
 .../furniture/dimmer/FurnitureDimmerView.scss |  6 +-
 .../furniture/dimmer/FurnitureDimmerView.tsx  | 61 ++++++++-----------
 2 files changed, 28 insertions(+), 39 deletions(-)

diff --git a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.scss b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.scss
index 7ec95775..a83b0fe6 100644
--- a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.scss
+++ b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.scss
@@ -1,10 +1,10 @@
-.nitro-dimmer {
-    width: 300px;
+.nitro-room-widget-dimmer {
+    width: 275px;
 
     .dimmer-banner {
         width: 56px;
         height: 79px;
-        background: url(../../../../../assets/images/room-widgets/dimmer-widget/dimmer_banner.png) center no-repeat;
+        background: url('../../../../../assets/images/room-widgets/dimmer-widget/dimmer_banner.png') center no-repeat;
     }
 
     .color-swatch {
diff --git a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
index ad1e5dee..7e02396a 100644
--- a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
+++ b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
@@ -3,11 +3,7 @@ import classNames from 'classnames';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { ColorUtils, GetConfiguration, LocalizeText, RoomWidgetDimmerChangeStateMessage, RoomWidgetDimmerPreviewMessage, RoomWidgetDimmerSavePresetMessage, RoomWidgetUpdateDimmerEvent, RoomWidgetUpdateDimmerStateEvent } from '../../../../../api';
-import { Button } from '../../../../../common/Button';
-import { Column } from '../../../../../common/Column';
-import { Flex } from '../../../../../common/Flex';
-import { Grid } from '../../../../../common/Grid';
-import { Text } from '../../../../../common/Text';
+import { Base, Button, Column, Flex, Grid, Text } from '../../../../../common';
 import { BatchUpdates, CreateEventDispatcherHook } from '../../../../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../../layout';
 import { useRoomContext } from '../../../context/RoomContext';
@@ -31,7 +27,6 @@ export const FurnitureDimmerView: FC<{}> = props =>
     const [ selectedEffectId, setSelectedEffectId ] = useState(0);
     const [ selectedColor, setSelectedColor ] = useState(0);
     const [ selectedBrightness, setSelectedBrightness ] = useState(0);
-
     const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
 
     const onNitroEvent = useCallback((event: NitroEvent) =>
@@ -45,9 +40,12 @@ export const FurnitureDimmerView: FC<{}> = props =>
 
                 for(const preset of widgetEvent.presets) presets.push(new DimmerFurnitureWidgetPresetItem(preset.id, preset.type, preset.color, preset.brightness));
 
-                setPresets(presets);
-                setSelectedPresetId(widgetEvent.selectedPresetId);
-                setIsVisible(true);
+                BatchUpdates(() =>
+                {
+                    setPresets(presets);
+                    setSelectedPresetId(widgetEvent.selectedPresetId);
+                    setIsVisible(true);
+                });
                 return;
             }
             case RoomWidgetUpdateDimmerEvent.HIDE: {
@@ -86,10 +84,13 @@ export const FurnitureDimmerView: FC<{}> = props =>
 
         if(!preset) return;
 
-        setSelectedPresetId(preset.id);
-        setSelectedEffectId(preset.type);
-        setSelectedColor(preset.color);
-        setSelectedBrightness(preset.light);
+        BatchUpdates(() =>
+        {
+            setSelectedPresetId(preset.id);
+            setSelectedEffectId(preset.type);
+            setSelectedColor(preset.color);
+            setSelectedBrightness(preset.light);
+        });
     }, [ presets ]);
 
     const close = useCallback(() =>
@@ -133,36 +134,28 @@ export const FurnitureDimmerView: FC<{}> = props =>
         return ~~((((value - MIN_BRIGHTNESS) * (100 - 0)) / (MAX_BRIGHTNESS - MIN_BRIGHTNESS)) + 0);
     }, []);
 
-    const isFreeColorMode = useMemo(() =>
-    {
-        return GetConfiguration<boolean>('widget.dimmer.colorwheel', false);
-    }, []);
+    const isFreeColorMode = useMemo(() => GetConfiguration<boolean>('widget.dimmer.colorwheel', false), []);
 
     useEffect(() =>
     {
         if((dimmerState === 0) && (lastDimmerState === 0)) return;
 
-        console.log('ye')
-
         widgetHandler.processWidgetMessage(new RoomWidgetDimmerPreviewMessage(selectedColor, selectedBrightness, (selectedEffectId === 2)));
     }, [ widgetHandler, dimmerState, lastDimmerState, selectedColor, selectedBrightness, selectedEffectId ]);
 
     if(!isVisible) return null;
 
     return (
-        <NitroCardView className="nitro-dimmer">
+        <NitroCardView className="nitro-room-widget-dimmer">
             <NitroCardHeaderView headerText={ LocalizeText('widget.dimmer.title') } onCloseClick={ close } />
             { (dimmerState === 1) &&
                 <NitroCardTabsView>
-                    { presets.map(preset =>
-                        {
-                            return <NitroCardTabsItemView key={ preset.id } isActive={ (selectedPresetId === preset.id) } onClick={ event => selectPresetId(preset.id) }>{ LocalizeText(`widget.dimmer.tab.${preset.id}`) }</NitroCardTabsItemView>
-                        }) }
+                    { presets.map(preset => <NitroCardTabsItemView key={ preset.id } isActive={ (selectedPresetId === preset.id) } onClick={ event => selectPresetId(preset.id) }>{ LocalizeText(`widget.dimmer.tab.${preset.id}`) }</NitroCardTabsItemView>) }
                 </NitroCardTabsView> }
             <NitroCardContentView>
                 { (dimmerState === 0) &&
                     <Column alignItems="center">
-                        <div className="dimmer-banner"></div>
+                        <Base className="dimmer-banner" />
                         <Text center className="bg-muted rounded p-1">{ LocalizeText('widget.dimmer.info.off') }</Text>
                         <Button fullWidth variant="success" onClick={ toggleState }>{ LocalizeText('widget.dimmer.button.on') }</Button>
                     </Column> }
@@ -173,7 +166,7 @@ export const FurnitureDimmerView: FC<{}> = props =>
                             { isFreeColorMode &&
                                 <input type="color" className="form-control" value={ ColorUtils.makeColorNumberHex(selectedColor) } onChange={ event => setSelectedColor(ColorUtils.convertFromHex(event.target.value)) } /> }
                             { !isFreeColorMode &&
-                                <Grid columnCount={ 7 }>
+                                <Grid gap={ 1 } columnCount={ 7 }>
                                     { AVAILABLE_COLORS.map((color, index) =>
                                         {
                                             return (
@@ -193,18 +186,14 @@ export const FurnitureDimmerView: FC<{}> = props =>
                                 thumbClassName={ 'thumb percent' }
                                 renderThumb={ (props, state) => <div {...props}>{ scaledBrightness(state.valueNow) }</div> } />
                         </Column>
-                        <Flex>
+                        <Flex alignItems="center" gap={ 1 }>
                             <input className="form-check-input" type="checkbox" checked={ (selectedEffectId === 2) } onChange={ event => setSelectedEffectId(event.target.checked ? 2 : 1) } />
-                            <label className="form-check-label text-black">{ LocalizeText('widget.dimmer.type.checkbox') }</label>
+                            <Text>{ LocalizeText('widget.dimmer.type.checkbox') }</Text>
+                        </Flex>
+                        <Flex gap={ 1 }>
+                            <Button fullWidth variant="danger" onClick={ toggleState }>{ LocalizeText('widget.dimmer.button.off') }</Button>
+                            <Button fullWidth variant="success" onClick={ applyChanges }>{ LocalizeText('widget.dimmer.button.apply') }</Button>
                         </Flex>
-                        <div className="form-check mb-2">
-                            <input className="form-check-input" type="checkbox" checked={ (selectedEffectId === 2) } onChange={ event => setSelectedEffectId(event.target.checked ? 2 : 1) } />
-                            <label className="form-check-label text-black">{ LocalizeText('widget.dimmer.type.checkbox') }</label>
-                        </div>
-                        <div className="d-flex gap-2">
-                            <button className="btn btn-danger w-100" onClick={ toggleState }>{ LocalizeText('widget.dimmer.button.off') }</button>
-                            <button className="btn btn-success w-100" onClick={ applyChanges }>{ LocalizeText('widget.dimmer.button.apply') }</button>
-                        </div>
                     </> }
             </NitroCardContentView>
         </NitroCardView>

From 66bb329b74ca2cfa5a4dcbed5d3c4ffed1628167 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Fri, 25 Feb 2022 19:56:16 -0500
Subject: [PATCH 05/17] Update background color widget

---
 .../FurnitureBackgroundColorView.tsx          | 48 +++++++++----------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/views/room/widgets/furniture/background-color/FurnitureBackgroundColorView.tsx b/src/views/room/widgets/furniture/background-color/FurnitureBackgroundColorView.tsx
index 1442a942..576ac22b 100644
--- a/src/views/room/widgets/furniture/background-color/FurnitureBackgroundColorView.tsx
+++ b/src/views/room/widgets/furniture/background-color/FurnitureBackgroundColorView.tsx
@@ -2,11 +2,8 @@ import { ApplyTonerComposer, RoomControllerLevel, RoomEngineObjectEvent, RoomEng
 import { FC, useCallback, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { GetRoomEngine, GetSessionDataManager, LocalizeText, RoomWidgetUpdateBackgroundColorPreviewEvent, RoomWidgetUpdateRoomObjectEvent } from '../../../../../api';
-import { Button } from '../../../../../common/Button';
-import { Column } from '../../../../../common/Column';
-import { FormGroup } from '../../../../../common/FormGroup';
-import { Text } from '../../../../../common/Text';
-import { SendMessageHook } from '../../../../../hooks';
+import { Button, Column, Text } from '../../../../../common';
+import { BatchUpdates, SendMessageHook } from '../../../../../hooks';
 import { CreateEventDispatcherHook, useRoomEngineEvent } from '../../../../../hooks/events';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
 import { useRoomContext } from '../../../context/RoomContext';
@@ -44,11 +41,14 @@ export const FurnitureBackgroundColorView: FC<{}> = props =>
                 
                 const roomObject = GetRoomEngine().getRoomObject(event.roomId, event.objectId, event.category);
                 const model = roomObject.model;
-                
-                setObjectId(roomObject.id);
-                setHue(parseInt(model.getValue<string>(RoomObjectVariable.FURNITURE_ROOM_BACKGROUND_COLOR_HUE)));
-                setSaturation(parseInt(model.getValue<string>(RoomObjectVariable.FURNITURE_ROOM_BACKGROUND_COLOR_SATURATION)));
-                setLightness(parseInt(model.getValue<string>(RoomObjectVariable.FURNITURE_ROOM_BACKGROUND_COLOR_LIGHTNESS)));
+
+                BatchUpdates(() =>
+                {
+                    setObjectId(roomObject.id);
+                    setHue(parseInt(model.getValue<string>(RoomObjectVariable.FURNITURE_ROOM_BACKGROUND_COLOR_HUE)));
+                    setSaturation(parseInt(model.getValue<string>(RoomObjectVariable.FURNITURE_ROOM_BACKGROUND_COLOR_SATURATION)));
+                    setLightness(parseInt(model.getValue<string>(RoomObjectVariable.FURNITURE_ROOM_BACKGROUND_COLOR_LIGHTNESS)));
+                });
                 
                 return;
             }
@@ -89,10 +89,10 @@ export const FurnitureBackgroundColorView: FC<{}> = props =>
     return (
         <NitroCardView>
             <NitroCardHeaderView headerText={ LocalizeText('widget.backgroundcolor.title') } onCloseClick={ close } />
-            <NitroCardContentView>
-                <Column overflow="auto">
-                    <FormGroup column>
-                        <Text fontWeight="bold">{ LocalizeText('widget.backgroundcolor.hue') }</Text>
+            <NitroCardContentView overflow="hidden">
+                <Column overflow="auto" gap={ 1 }>
+                    <Column>
+                        <Text bold>{ LocalizeText('widget.backgroundcolor.hue') }</Text>
                         <ReactSlider
                             className={ 'nitro-slider' }
                             min={ 0 }
@@ -101,9 +101,9 @@ export const FurnitureBackgroundColorView: FC<{}> = props =>
                             onChange={ event => setHue(event) }
                             thumbClassName={ 'thumb degree' }
                             renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> } />
-                    </FormGroup>
-                    <FormGroup column>
-                        <Text fontWeight="bold">{ LocalizeText('widget.backgroundcolor.saturation') }</Text>
+                    </Column>
+                    <Column>
+                        <Text bold>{ LocalizeText('widget.backgroundcolor.saturation') }</Text>
                         <ReactSlider
                             className={ 'nitro-slider' }
                             min={ 0 }
@@ -112,9 +112,9 @@ export const FurnitureBackgroundColorView: FC<{}> = props =>
                             onChange={ event => setSaturation(event) }
                             thumbClassName={ 'thumb percent' }
                             renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> } />
-                    </FormGroup>
-                    <FormGroup column>
-                        <Text fontWeight="bold">{ LocalizeText('widget.backgroundcolor.lightness') }</Text>
+                    </Column>
+                    <Column>
+                        <Text bold>{ LocalizeText('widget.backgroundcolor.lightness') }</Text>
                         <ReactSlider
                             className={ 'nitro-slider' }
                             min={ 0 }
@@ -123,13 +123,13 @@ export const FurnitureBackgroundColorView: FC<{}> = props =>
                             onChange={ event => setLightness(event) }
                             thumbClassName={ 'thumb percent' }
                             renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> } />
-                    </FormGroup>
+                    </Column>
                 </Column>
-                <Column center gap={ 1 }>
-                    <Button fullWidth variant="primary" size="sm" onClick={ event => processAction('toggle') }>
+                <Column gap={ 1 }>
+                    <Button fullWidth variant="primary" onClick={ event => processAction('toggle') }>
                         { LocalizeText('widget.backgroundcolor.button.on') }
                     </Button>
-                    <Button fullWidth variant="primary" size="sm" onClick={ event => processAction('apply') }>
+                    <Button fullWidth variant="primary" onClick={ event => processAction('apply') }>
                         { LocalizeText('widget.backgroundcolor.button.apply') }
                     </Button>
                 </Column>

From d40cb0897391c9c2fd51092d89c6e3fe67769df8 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Fri, 25 Feb 2022 21:52:27 -0500
Subject: [PATCH 06/17] Update context menus

---
 .../context-menu/FurnitureContextMenuView.tsx | 100 +++++++++++-------
 .../views/EffectBoxConfirmView.tsx            |  41 +++++++
 .../MonsterPlantSeedConfirmView.tsx           |  58 +++++-----
 .../PurchasableClothingConfirmView.tsx        |  60 ++++++-----
 .../views/effect-box/EffectBoxConfirmView.tsx |  37 -------
 .../effect-box/EffectBoxConfirmView.types.ts  |   5 -
 .../MonsterPlantSeedConfirmView.types.ts      |   5 -
 .../PurchasableClothingConfirmView.types.ts   |   5 -
 8 files changed, 165 insertions(+), 146 deletions(-)
 create mode 100644 src/views/room/widgets/furniture/context-menu/views/EffectBoxConfirmView.tsx
 rename src/views/room/widgets/furniture/context-menu/views/{monsterplant-seed => }/MonsterPlantSeedConfirmView.tsx (50%)
 rename src/views/room/widgets/furniture/context-menu/views/{purchaseable-clothing => }/PurchasableClothingConfirmView.tsx (59%)
 delete mode 100644 src/views/room/widgets/furniture/context-menu/views/effect-box/EffectBoxConfirmView.tsx
 delete mode 100644 src/views/room/widgets/furniture/context-menu/views/effect-box/EffectBoxConfirmView.types.ts
 delete mode 100644 src/views/room/widgets/furniture/context-menu/views/monsterplant-seed/MonsterPlantSeedConfirmView.types.ts
 delete mode 100644 src/views/room/widgets/furniture/context-menu/views/purchaseable-clothing/PurchasableClothingConfirmView.types.ts

diff --git a/src/views/room/widgets/furniture/context-menu/FurnitureContextMenuView.tsx b/src/views/room/widgets/furniture/context-menu/FurnitureContextMenuView.tsx
index a66d6bda..c8b836fd 100644
--- a/src/views/room/widgets/furniture/context-menu/FurnitureContextMenuView.tsx
+++ b/src/views/room/widgets/furniture/context-menu/FurnitureContextMenuView.tsx
@@ -3,15 +3,15 @@ import { GroupFurniContextMenuInfoMessageEvent } from '@nitrots/nitro-renderer/s
 import { FC, useCallback, useState } from 'react';
 import { GetGroupInformation, GetRoomEngine, IsOwnerOfFurniture, LocalizeText, RoomWidgetFurniActionMessage, TryVisitRoom } from '../../../../../api';
 import { TryJoinGroup } from '../../../../../api/groups/TryJoinGroup';
-import { CreateMessageHook } from '../../../../../hooks';
+import { BatchUpdates, CreateMessageHook } from '../../../../../hooks';
 import { useRoomEngineEvent } from '../../../../../hooks/events';
 import { useRoomContext } from '../../../context/RoomContext';
 import { ContextMenuView } from '../../context-menu/ContextMenuView';
 import { ContextMenuHeaderView } from '../../context-menu/views/header/ContextMenuHeaderView';
 import { ContextMenuListItemView } from '../../context-menu/views/list-item/ContextMenuListItemView';
-import { EffectBoxConfirmView } from './views/effect-box/EffectBoxConfirmView';
-import { MonsterPlantSeedConfirmView } from './views/monsterplant-seed/MonsterPlantSeedConfirmView';
-import { PurchasableClothingConfirmView } from './views/purchaseable-clothing/PurchasableClothingConfirmView';
+import { EffectBoxConfirmView } from './views/EffectBoxConfirmView';
+import { MonsterPlantSeedConfirmView } from './views/MonsterPlantSeedConfirmView';
+import { PurchasableClothingConfirmView } from './views/PurchasableClothingConfirmView';
 
 const MONSTERPLANT_SEED_CONFIRMATION: string = 'MONSTERPLANT_SEED_CONFIRMATION';
 const PURCHASABLE_CLOTHING_CONFIRMATION: string = 'PURCHASABLE_CLOTHING_CONFIRMATION';
@@ -26,22 +26,24 @@ export const FurnitureContextMenuView: FC<{}> = props =>
     const [ confirmingObjectId, setConfirmingObjectId ] = useState(-1);
     const [ groupData, setGroupData ] = useState<GroupFurniContextMenuInfoMessageParser>(null);
     const [ isGroupMember, setIsGroupMember ] = useState(false);
-
     const { roomSession = null, widgetHandler = null } = useRoomContext();
 
     const close = useCallback(() =>
     {
-        setObjectId(-1);
-        setGroupData(null);
-        setIsGroupMember(false);
-        setMode(null);
+        BatchUpdates(() =>
+        {
+            setObjectId(-1);
+            setGroupData(null);
+            setIsGroupMember(false);
+            setMode(null);
+        });
     }, []);
 
-    const closeConfirm = useCallback(() =>
+    const closeConfirm = () =>
     {
         setConfirmMode(null);
         setConfirmingObjectId(-1);
-    }, []);
+    }
 
     const onRoomEngineTriggerWidgetEvent = useCallback((event: RoomEngineTriggerWidgetEvent) =>
     {
@@ -54,47 +56,60 @@ export const FurnitureContextMenuView: FC<{}> = props =>
             case RoomEngineTriggerWidgetEvent.REQUEST_MONSTERPLANT_SEED_PLANT_CONFIRMATION_DIALOG:
                 if(!IsOwnerOfFurniture(object)) return;
 
-                setConfirmingObjectId(object.id);
-                setConfirmMode(MONSTERPLANT_SEED_CONFIRMATION);
+                BatchUpdates(() =>
+                {
+                    setConfirmingObjectId(object.id);
+                    setConfirmMode(MONSTERPLANT_SEED_CONFIRMATION);
+                });
 
                 close();
                 return;
             case RoomEngineTriggerWidgetEvent.REQUEST_EFFECTBOX_OPEN_DIALOG:
                 if(!IsOwnerOfFurniture(object)) return;
-                
-                setConfirmingObjectId(object.id);
-                setConfirmMode(EFFECTBOX_OPEN);
+
+                BatchUpdates(() =>
+                {
+                    setConfirmingObjectId(object.id);
+                    setConfirmMode(EFFECTBOX_OPEN);
+                });
 
                 close();
                 return;
             case RoomEngineTriggerWidgetEvent.REQUEST_PURCHASABLE_CLOTHING_CONFIRMATION_DIALOG:
                 if(!IsOwnerOfFurniture(object)) return;
 
-                setConfirmingObjectId(object.id);
-                setConfirmMode(PURCHASABLE_CLOTHING_CONFIRMATION);
+                BatchUpdates(() =>
+                {
+                    setConfirmingObjectId(object.id);
+                    setConfirmMode(PURCHASABLE_CLOTHING_CONFIRMATION);
+                });
 
                 close();
                 return;
             case RoomEngineTriggerWidgetEvent.OPEN_FURNI_CONTEXT_MENU:
-                setObjectId(object.id);
 
-                switch(event.contextMenu)
+                BatchUpdates(() =>
                 {
-                    case ContextMenuEnum.FRIEND_FURNITURE:
-                        setMode(ContextMenuEnum.FRIEND_FURNITURE);
-                        return;
-                    case ContextMenuEnum.MONSTERPLANT_SEED:
-                        if(IsOwnerOfFurniture(object)) setMode(ContextMenuEnum.MONSTERPLANT_SEED);
-                        return;
-                    case ContextMenuEnum.MYSTERY_BOX:
-                        return;
-                    case ContextMenuEnum.RANDOM_TELEPORT:
-                        setMode(ContextMenuEnum.RANDOM_TELEPORT);
-                        return;
-                    case ContextMenuEnum.PURCHASABLE_CLOTHING:
-                        if(IsOwnerOfFurniture(object)) setMode(ContextMenuEnum.PURCHASABLE_CLOTHING);
-                        return;
-                }
+                    setObjectId(object.id);
+
+                    switch(event.contextMenu)
+                    {
+                        case ContextMenuEnum.FRIEND_FURNITURE:
+                            setMode(ContextMenuEnum.FRIEND_FURNITURE);
+                            return;
+                        case ContextMenuEnum.MONSTERPLANT_SEED:
+                            if(IsOwnerOfFurniture(object)) setMode(ContextMenuEnum.MONSTERPLANT_SEED);
+                            return;
+                        case ContextMenuEnum.MYSTERY_BOX:
+                            return;
+                        case ContextMenuEnum.RANDOM_TELEPORT:
+                            setMode(ContextMenuEnum.RANDOM_TELEPORT);
+                            return;
+                        case ContextMenuEnum.PURCHASABLE_CLOTHING:
+                            if(IsOwnerOfFurniture(object)) setMode(ContextMenuEnum.PURCHASABLE_CLOTHING);
+                            return;
+                    }
+                });
 
                 return;
             case RoomEngineTriggerWidgetEvent.CLOSE_FURNI_CONTEXT_MENU:
@@ -113,15 +128,18 @@ export const FurnitureContextMenuView: FC<{}> = props =>
     {
         const parser = event.getParser();
 
-        setObjectId(parser.objectId);
-        setGroupData(parser);
-        setIsGroupMember(parser.userIsMember);
-        setMode(GROUP_FURNITURE);
+        BatchUpdates(() =>
+        {
+            setObjectId(parser.objectId);
+            setGroupData(parser);
+            setIsGroupMember(parser.userIsMember);
+            setMode(GROUP_FURNITURE);
+        });
     }, []);
 
     CreateMessageHook(GroupFurniContextMenuInfoMessageEvent, onGroupFurniContextMenuInfoMessageEvent);
 
-    const processAction = useCallback((name: string) =>
+    const processAction = (name: string) =>
     {
         if(name)
         {
@@ -152,7 +170,7 @@ export const FurnitureContextMenuView: FC<{}> = props =>
         }
 
         close();
-    }, [ roomSession, widgetHandler, objectId, groupData, close ]);
+    }
 
     return (
         <>
diff --git a/src/views/room/widgets/furniture/context-menu/views/EffectBoxConfirmView.tsx b/src/views/room/widgets/furniture/context-menu/views/EffectBoxConfirmView.tsx
new file mode 100644
index 00000000..0732c592
--- /dev/null
+++ b/src/views/room/widgets/furniture/context-menu/views/EffectBoxConfirmView.tsx
@@ -0,0 +1,41 @@
+import { FC } from 'react';
+import { LocalizeText } from '../../../../../../api';
+import { Button, Column, Flex, Text } from '../../../../../../common';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../layout';
+import { useRoomContext } from '../../../../context/RoomContext';
+
+interface EffectBoxConfirmViewProps
+{
+    objectId: number;
+    close: () => void;
+}
+
+export const EffectBoxConfirmView: FC<EffectBoxConfirmViewProps> = props =>
+{
+    const { objectId = -1, close = null } = props;
+    const { roomSession = null } = useRoomContext();
+
+    const useProduct = () =>
+    {
+        roomSession.useMultistateItem(objectId);
+
+        close();
+    }
+    
+    return (
+        <NitroCardView className="nitro-use-product-confirmation">
+            <NitroCardHeaderView headerText={ LocalizeText('effectbox.header.title') } onCloseClick={ close } />
+            <NitroCardContentView center>
+                <Flex gap={ 2 }>
+                    <Column justifyContent="between">
+                        <Text>{ LocalizeText('effectbox.header.description') }</Text>
+                        <Flex alignItems="center" justifyContent="between">
+                            <Button variant="danger" onClick={ close }>{ LocalizeText('generic.cancel') }</Button>
+                            <Button variant="success" onClick={ useProduct }>{ LocalizeText('generic.ok') }</Button>
+                        </Flex>
+                    </Column>
+                </Flex>
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}
diff --git a/src/views/room/widgets/furniture/context-menu/views/monsterplant-seed/MonsterPlantSeedConfirmView.tsx b/src/views/room/widgets/furniture/context-menu/views/MonsterPlantSeedConfirmView.tsx
similarity index 50%
rename from src/views/room/widgets/furniture/context-menu/views/monsterplant-seed/MonsterPlantSeedConfirmView.tsx
rename to src/views/room/widgets/furniture/context-menu/views/MonsterPlantSeedConfirmView.tsx
index 4d1836c0..f6bc99eb 100644
--- a/src/views/room/widgets/furniture/context-menu/views/monsterplant-seed/MonsterPlantSeedConfirmView.tsx
+++ b/src/views/room/widgets/furniture/context-menu/views/MonsterPlantSeedConfirmView.tsx
@@ -1,10 +1,16 @@
 import { IFurnitureData, RoomObjectCategory } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useEffect, useState } from 'react';
-import { GetFurnitureDataForRoomObject, LocalizeText, RoomWidgetUseProductMessage } from '../../../../../../../api';
-import { FurniCategory } from '../../../../../../../components/inventory/common/FurniCategory';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../../layout';
-import { useRoomContext } from '../../../../../context/RoomContext';
-import { MonsterPlantSeedConfirmViewProps } from './MonsterPlantSeedConfirmView.types';
+import { FC, useEffect, useState } from 'react';
+import { GetFurnitureDataForRoomObject, LocalizeText, RoomWidgetUseProductMessage } from '../../../../../../api';
+import { Base, Button, Column, Flex, Text } from '../../../../../../common';
+import { FurniCategory } from '../../../../../../components/inventory/common/FurniCategory';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../layout';
+import { useRoomContext } from '../../../../context/RoomContext';
+
+interface MonsterPlantSeedConfirmViewProps
+{
+    objectId: number;
+    close: () => void;
+}
 
 const MODE_DEFAULT: number = -1;
 const MODE_MONSTERPLANT_SEED: number = 0;
@@ -16,12 +22,12 @@ export const MonsterPlantSeedConfirmView: FC<MonsterPlantSeedConfirmViewProps> =
     const [ mode, setMode ] = useState(MODE_DEFAULT);
     const { roomSession = null, widgetHandler = null } = useRoomContext();
 
-    const useProduct = useCallback(() =>
+    const useProduct = () =>
     {
         widgetHandler.processWidgetMessage(new RoomWidgetUseProductMessage(RoomWidgetUseProductMessage.MONSTERPLANT_SEED, objectId));
 
         close();
-    }, [ widgetHandler, objectId, close ]);
+    }
 
     useEffect(() =>
     {
@@ -57,24 +63,24 @@ export const MonsterPlantSeedConfirmView: FC<MonsterPlantSeedConfirmViewProps> =
     return (
         <NitroCardView className="nitro-use-product-confirmation">
             <NitroCardHeaderView headerText={ LocalizeText('useproduct.widget.title.plant_seed', [ 'name' ], [ furniData.name ]) } onCloseClick={ close } />
-            <NitroCardContentView className="d-flex">
-                <div className="row">
-                    <div className="w-unset">
-                        <div className="product-preview">
-                            <div className="monsterplant-image" />
-                        </div>
-                    </div>
-                    <div className="col d-flex flex-column justify-content-between">
-                        <div className="d-flex flex-column">
-                            <div className="text-black mb-3">{ LocalizeText('useproduct.widget.text.plant_seed', [ 'productName' ], [ furniData.name ] ) }</div>
-                            <div className="text-black">{ LocalizeText('useproduct.widget.info.plant_seed') }</div>
-                        </div>
-                        <div className="d-flex justify-content-between align-items-end w-100 h-100">
-                            <button type="button" className="btn btn-danger" onClick={ close }>{ LocalizeText('useproduct.widget.cancel') }</button>
-                            <button type="button" className="btn btn-primary" onClick={ useProduct }>{ LocalizeText('widget.monsterplant_seed.button.use') }</button>
-                        </div>
-                    </div>
-                </div>
+            <NitroCardContentView center>
+                <Flex gap={ 2 } overflow="hidden">
+                    <Column>
+                        <Base className="product-preview">
+                            <Base className="monsterplant-image" />
+                        </Base>
+                    </Column>
+                    <Column justifyContent="between" overflow="auto">
+                        <Column gap={ 2 }>
+                            <Text>{ LocalizeText('useproduct.widget.text.plant_seed', [ 'productName' ], [ furniData.name ] ) }</Text>
+                            <Text>{ LocalizeText('useproduct.widget.info.plant_seed') }</Text>
+                        </Column>
+                        <Flex alignItems="center" justifyContent="between">
+                            <Button variant="danger" onClick={ close }>{ LocalizeText('useproduct.widget.cancel') }</Button>
+                            <Button variant="success" onClick={ useProduct }>{ LocalizeText('widget.monsterplant_seed.button.use') }</Button>
+                        </Flex>
+                    </Column>
+                </Flex>
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/views/room/widgets/furniture/context-menu/views/purchaseable-clothing/PurchasableClothingConfirmView.tsx b/src/views/room/widgets/furniture/context-menu/views/PurchasableClothingConfirmView.tsx
similarity index 59%
rename from src/views/room/widgets/furniture/context-menu/views/purchaseable-clothing/PurchasableClothingConfirmView.tsx
rename to src/views/room/widgets/furniture/context-menu/views/PurchasableClothingConfirmView.tsx
index 01cf94c2..fb673709 100644
--- a/src/views/room/widgets/furniture/context-menu/views/purchaseable-clothing/PurchasableClothingConfirmView.tsx
+++ b/src/views/room/widgets/furniture/context-menu/views/PurchasableClothingConfirmView.tsx
@@ -1,12 +1,18 @@
 import { RedeemItemClothingComposer, RoomObjectCategory, UserFigureComposer } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useEffect, useState } from 'react';
-import { GetAvatarRenderManager, GetConnection, GetFurnitureDataForRoomObject, GetSessionDataManager, LocalizeText } from '../../../../../../../api';
-import { FigureData } from '../../../../../../../components/avatar-editor/common/FigureData';
-import { FurniCategory } from '../../../../../../../components/inventory/common/FurniCategory';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../../layout';
-import { AvatarImageView } from '../../../../../../shared/avatar-image/AvatarImageView';
-import { useRoomContext } from '../../../../../context/RoomContext';
-import { PurchasableClothingConfirmViewProps } from './PurchasableClothingConfirmView.types';
+import { FC, useEffect, useState } from 'react';
+import { GetAvatarRenderManager, GetConnection, GetFurnitureDataForRoomObject, GetSessionDataManager, LocalizeText } from '../../../../../../api';
+import { Base, Button, Column, Flex, Text } from '../../../../../../common';
+import { FigureData } from '../../../../../../components/avatar-editor/common/FigureData';
+import { FurniCategory } from '../../../../../../components/inventory/common/FurniCategory';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../layout';
+import { AvatarImageView } from '../../../../../shared/avatar-image/AvatarImageView';
+import { useRoomContext } from '../../../../context/RoomContext';
+
+interface PurchasableClothingConfirmViewProps
+{
+    objectId: number;
+    close: () => void;
+}
 
 const MODE_DEFAULT: number = -1;
 const MODE_PURCHASABLE_CLOTHING: number = 0;
@@ -19,13 +25,13 @@ export const PurchasableClothingConfirmView: FC<PurchasableClothingConfirmViewPr
     const [ newFigure, setNewFigure ] = useState<string>(null);
     const { roomSession = null } = useRoomContext();
 
-    const useProduct = useCallback(() =>
+    const useProduct = () =>
     {
         GetConnection().send(new RedeemItemClothingComposer(objectId));
         GetConnection().send(new UserFigureComposer(gender, newFigure));
 
         close();
-    }, [ objectId, gender, newFigure, close ]);
+    }
 
     useEffect(() =>
     {
@@ -78,24 +84,24 @@ export const PurchasableClothingConfirmView: FC<PurchasableClothingConfirmViewPr
     return (
         <NitroCardView className="nitro-use-product-confirmation">
             <NitroCardHeaderView headerText={ LocalizeText('useproduct.widget.title.bind_clothing') } onCloseClick={ close } />
-            <NitroCardContentView className="d-flex">
-                <div className="row">
-                    <div className="w-unset">
-                        <div className="mannequin-preview">
+            <NitroCardContentView center>
+                <Flex gap={ 2 } overflow="hidden">
+                    <Column>
+                        <Base className="mannequin-preview">
                             <AvatarImageView figure={ newFigure } direction={ 2 } />
-                        </div>
-                    </div>
-                    <div className="col d-flex flex-column justify-content-between">
-                        <div className="d-flex flex-column">
-                            <div className="text-black mb-3">{ LocalizeText('useproduct.widget.text.bind_clothing') }</div>
-                            <div className="text-black">{ LocalizeText('useproduct.widget.info.bind_clothing') }</div>
-                        </div>
-                        <div className="d-flex justify-content-between align-items-end w-100 h-100">
-                            <button type="button" className="btn btn-danger" onClick={ close }>{ LocalizeText('useproduct.widget.cancel') }</button>
-                            <button type="button" className="btn btn-primary" onClick={ useProduct }>{ LocalizeText('useproduct.widget.bind_clothing') }</button>
-                        </div>
-                    </div>
-                </div>
+                        </Base>
+                    </Column>
+                    <Column justifyContent="between" overflow="auto">
+                        <Column gap={ 2 }>
+                            <Text>{ LocalizeText('useproduct.widget.text.bind_clothing') }</Text>
+                            <Text>{ LocalizeText('useproduct.widget.info.bind_clothing') }</Text>
+                        </Column>
+                        <Flex alignItems="center" justifyContent="between">
+                            <Button variant="danger" onClick={ close }>{ LocalizeText('useproduct.widget.cancel') }</Button>
+                            <Button variant="success" onClick={ useProduct }>{ LocalizeText('useproduct.widget.bind_clothing') }</Button>
+                        </Flex>
+                    </Column>
+                </Flex>
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/views/room/widgets/furniture/context-menu/views/effect-box/EffectBoxConfirmView.tsx b/src/views/room/widgets/furniture/context-menu/views/effect-box/EffectBoxConfirmView.tsx
deleted file mode 100644
index 09063d38..00000000
--- a/src/views/room/widgets/furniture/context-menu/views/effect-box/EffectBoxConfirmView.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { FC, useCallback } from 'react';
-import { LocalizeText } from '../../../../../../../api';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../../layout';
-import { useRoomContext } from '../../../../../context/RoomContext';
-import { EffectBoxConfirmViewProps } from './EffectBoxConfirmView.types';
-
-export const EffectBoxConfirmView: FC<EffectBoxConfirmViewProps> = props =>
-{
-    const { objectId = -1, close = null } = props;
-    const { roomSession = null, widgetHandler = null } = useRoomContext();
-
-    const useProduct = useCallback(() =>
-    {
-        roomSession.useMultistateItem(objectId);
-
-        close();
-    }, [ roomSession, objectId, close ]);
-    
-    return (
-        <NitroCardView className="nitro-use-product-confirmation">
-            <NitroCardHeaderView headerText={ LocalizeText('effectbox.header.title') } onCloseClick={ close } />
-            <NitroCardContentView className="d-flex">
-                <div className="row">
-                    <div className="col d-flex flex-column justify-content-between">
-                        <div className="d-flex flex-column">
-                            <div className="text-black">{ LocalizeText('effectbox.header.description') }</div>
-                        </div>
-                        <div className="d-flex justify-content-between align-items-end w-100 h-100">
-                            <button type="button" className="btn btn-danger" onClick={ close }>{ LocalizeText('generic.cancel') }</button>
-                            <button type="button" className="btn btn-primary" onClick={ useProduct }>{ LocalizeText('generic.ok') }</button>
-                        </div>
-                    </div>
-                </div>
-            </NitroCardContentView>
-        </NitroCardView>
-    );
-}
diff --git a/src/views/room/widgets/furniture/context-menu/views/effect-box/EffectBoxConfirmView.types.ts b/src/views/room/widgets/furniture/context-menu/views/effect-box/EffectBoxConfirmView.types.ts
deleted file mode 100644
index 1a8655d9..00000000
--- a/src/views/room/widgets/furniture/context-menu/views/effect-box/EffectBoxConfirmView.types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface EffectBoxConfirmViewProps
-{
-    objectId: number;
-    close: () => void;
-}
diff --git a/src/views/room/widgets/furniture/context-menu/views/monsterplant-seed/MonsterPlantSeedConfirmView.types.ts b/src/views/room/widgets/furniture/context-menu/views/monsterplant-seed/MonsterPlantSeedConfirmView.types.ts
deleted file mode 100644
index 75fded04..00000000
--- a/src/views/room/widgets/furniture/context-menu/views/monsterplant-seed/MonsterPlantSeedConfirmView.types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface MonsterPlantSeedConfirmViewProps
-{
-    objectId: number;
-    close: () => void;
-}
diff --git a/src/views/room/widgets/furniture/context-menu/views/purchaseable-clothing/PurchasableClothingConfirmView.types.ts b/src/views/room/widgets/furniture/context-menu/views/purchaseable-clothing/PurchasableClothingConfirmView.types.ts
deleted file mode 100644
index f6f04211..00000000
--- a/src/views/room/widgets/furniture/context-menu/views/purchaseable-clothing/PurchasableClothingConfirmView.types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface PurchasableClothingConfirmViewProps
-{
-    objectId: number;
-    close: () => void;
-}

From 34bfd96c4f5be26a5a4e35374aacfba1380368f8 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Fri, 25 Feb 2022 22:38:49 -0500
Subject: [PATCH 07/17] More widget updates

---
 .../widgets/furniture/FurnitureWidgets.scss   | 52 ++++++++++-
 .../FurnitureBackgroundColorView.tsx          |  2 +-
 .../FurnitureBadgeDisplayView.tsx             |  2 +-
 .../{views => }/EffectBoxConfirmView.tsx      |  8 +-
 .../context-menu/FurnitureContextMenuView.tsx |  6 +-
 .../MonsterPlantSeedConfirmView.tsx           | 10 +-
 .../PurchasableClothingConfirmView.tsx        | 14 +--
 .../FurnitureCustomStackHeightView.scss       |  4 -
 .../FurnitureCustomStackHeightView.tsx        | 58 ++++++------
 .../furniture/dimmer/FurnitureDimmerView.scss | 19 ----
 .../FurnitureExchangeCreditView.scss          | 10 --
 .../FurnitureExchangeCreditView.tsx           | 33 ++++---
 .../FurnitureExternalImageView.scss           |  7 --
 .../FurnitureExternalImageView.tsx            | 34 ++++---
 .../FurnitureGiftOpeningView.scss             |  3 -
 .../gift-opening/FurnitureGiftOpeningView.tsx | 91 ++++++++++---------
 16 files changed, 176 insertions(+), 177 deletions(-)
 rename src/views/room/widgets/furniture/context-menu/{views => }/EffectBoxConfirmView.tsx (85%)
 rename src/views/room/widgets/furniture/context-menu/{views => }/MonsterPlantSeedConfirmView.tsx (92%)
 rename src/views/room/widgets/furniture/context-menu/{views => }/PurchasableClothingConfirmView.tsx (90%)
 delete mode 100644 src/views/room/widgets/furniture/custom-stack-height/FurnitureCustomStackHeightView.scss
 delete mode 100644 src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.scss
 delete mode 100644 src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.scss
 delete mode 100644 src/views/room/widgets/furniture/external-image/FurnitureExternalImageView.scss
 delete mode 100644 src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.scss

diff --git a/src/views/room/widgets/furniture/FurnitureWidgets.scss b/src/views/room/widgets/furniture/FurnitureWidgets.scss
index 55ebd35f..390c4e14 100644
--- a/src/views/room/widgets/furniture/FurnitureWidgets.scss
+++ b/src/views/room/widgets/furniture/FurnitureWidgets.scss
@@ -2,15 +2,57 @@
     pointer-events: none;
 }
 
-@import './custom-stack-height/FurnitureCustomStackHeightView';
+.nitro-widget-custom-stack-height {
+    width: $nitro-widget-custom-stack-height-width;
+    height: $nitro-widget-custom-stack-height-height;
+}
+
+.nitro-room-widget-dimmer {
+    width: 275px;
+
+    .dimmer-banner {
+        width: 56px;
+        height: 79px;
+        background: url('../../../../assets/images/room-widgets/dimmer-widget/dimmer_banner.png') center no-repeat;
+    }
+
+    .color-swatch {
+        height: 30px;
+        border: 2px solid $white;
+        box-shadow: inset 3px 3px rgba(0, 0, 0, .2);
+
+        &.active {
+            box-shadow: none;
+        }
+    }
+}
+
+.nitro-widget-exchange-credit {
+    width: $nitro-widget-exchange-credit-width;
+    height: $nitro-widget-exchange-credit-height;
+
+    .exchange-image {
+        background-image: url('../../../../assets/images/room-widgets/exchange-credit/exchange-credit-image.png');
+        width: 103px;
+        height: 103px;
+    }
+}
+
+.nitro-external-image-widget {
+
+    .picture-preview {
+        width: 320px;
+        height: 320px;
+    }
+}
+
+.nitro-gift-opening {
+    
+}
 
-@import './dimmer/FurnitureDimmerView';
-@import './exchange-credit/FurnitureExchangeCreditView';
-@import './external-image/FurnitureExternalImageView';
 @import './friend-furni/FurnitureFriendFurniView';
 @import './manipulation-menu/FurnitureManipulationMenuView';
 @import './mannequin/FurnitureMannequinView';
 @import './stickie/FurnitureStickieView';
 @import './high-score/FurnitureHighScoreView';
-@import './gift-opening/FurnitureGiftOpeningView';
 @import './youtube-tv/FurnitureYoutubeDisplayView';
diff --git a/src/views/room/widgets/furniture/background-color/FurnitureBackgroundColorView.tsx b/src/views/room/widgets/furniture/background-color/FurnitureBackgroundColorView.tsx
index 576ac22b..d76b971a 100644
--- a/src/views/room/widgets/furniture/background-color/FurnitureBackgroundColorView.tsx
+++ b/src/views/room/widgets/furniture/background-color/FurnitureBackgroundColorView.tsx
@@ -89,7 +89,7 @@ export const FurnitureBackgroundColorView: FC<{}> = props =>
     return (
         <NitroCardView>
             <NitroCardHeaderView headerText={ LocalizeText('widget.backgroundcolor.title') } onCloseClick={ close } />
-            <NitroCardContentView overflow="hidden">
+            <NitroCardContentView overflow="hidden" justifyContent="between">
                 <Column overflow="auto" gap={ 1 }>
                     <Column>
                         <Text bold>{ LocalizeText('widget.backgroundcolor.hue') }</Text>
diff --git a/src/views/room/widgets/furniture/badge-display/FurnitureBadgeDisplayView.tsx b/src/views/room/widgets/furniture/badge-display/FurnitureBadgeDisplayView.tsx
index 9615bce6..f2398acd 100644
--- a/src/views/room/widgets/furniture/badge-display/FurnitureBadgeDisplayView.tsx
+++ b/src/views/room/widgets/furniture/badge-display/FurnitureBadgeDisplayView.tsx
@@ -9,8 +9,8 @@ import { FurnitureTrophyData } from '../trophy/FurnitureTrophyData';
 
 export const FurnitureBadgeDisplayView: FC<{}> = props =>
 {
-    const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
     const [ trophyData, setTrophyData ] = useState<FurnitureTrophyData>(null);
+    const { widgetHandler = null } = useRoomContext();
 
     const onNitroEvent = useCallback((event: NitroEvent) =>
     {
diff --git a/src/views/room/widgets/furniture/context-menu/views/EffectBoxConfirmView.tsx b/src/views/room/widgets/furniture/context-menu/EffectBoxConfirmView.tsx
similarity index 85%
rename from src/views/room/widgets/furniture/context-menu/views/EffectBoxConfirmView.tsx
rename to src/views/room/widgets/furniture/context-menu/EffectBoxConfirmView.tsx
index 0732c592..ed12a5e4 100644
--- a/src/views/room/widgets/furniture/context-menu/views/EffectBoxConfirmView.tsx
+++ b/src/views/room/widgets/furniture/context-menu/EffectBoxConfirmView.tsx
@@ -1,8 +1,8 @@
 import { FC } from 'react';
-import { LocalizeText } from '../../../../../../api';
-import { Button, Column, Flex, Text } from '../../../../../../common';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../layout';
-import { useRoomContext } from '../../../../context/RoomContext';
+import { LocalizeText } from '../../../../../api';
+import { Button, Column, Flex, Text } from '../../../../../common';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
+import { useRoomContext } from '../../../context/RoomContext';
 
 interface EffectBoxConfirmViewProps
 {
diff --git a/src/views/room/widgets/furniture/context-menu/FurnitureContextMenuView.tsx b/src/views/room/widgets/furniture/context-menu/FurnitureContextMenuView.tsx
index c8b836fd..e018d0ce 100644
--- a/src/views/room/widgets/furniture/context-menu/FurnitureContextMenuView.tsx
+++ b/src/views/room/widgets/furniture/context-menu/FurnitureContextMenuView.tsx
@@ -9,9 +9,9 @@ import { useRoomContext } from '../../../context/RoomContext';
 import { ContextMenuView } from '../../context-menu/ContextMenuView';
 import { ContextMenuHeaderView } from '../../context-menu/views/header/ContextMenuHeaderView';
 import { ContextMenuListItemView } from '../../context-menu/views/list-item/ContextMenuListItemView';
-import { EffectBoxConfirmView } from './views/EffectBoxConfirmView';
-import { MonsterPlantSeedConfirmView } from './views/MonsterPlantSeedConfirmView';
-import { PurchasableClothingConfirmView } from './views/PurchasableClothingConfirmView';
+import { EffectBoxConfirmView } from './EffectBoxConfirmView';
+import { MonsterPlantSeedConfirmView } from './MonsterPlantSeedConfirmView';
+import { PurchasableClothingConfirmView } from './PurchasableClothingConfirmView';
 
 const MONSTERPLANT_SEED_CONFIRMATION: string = 'MONSTERPLANT_SEED_CONFIRMATION';
 const PURCHASABLE_CLOTHING_CONFIRMATION: string = 'PURCHASABLE_CLOTHING_CONFIRMATION';
diff --git a/src/views/room/widgets/furniture/context-menu/views/MonsterPlantSeedConfirmView.tsx b/src/views/room/widgets/furniture/context-menu/MonsterPlantSeedConfirmView.tsx
similarity index 92%
rename from src/views/room/widgets/furniture/context-menu/views/MonsterPlantSeedConfirmView.tsx
rename to src/views/room/widgets/furniture/context-menu/MonsterPlantSeedConfirmView.tsx
index f6bc99eb..0744f514 100644
--- a/src/views/room/widgets/furniture/context-menu/views/MonsterPlantSeedConfirmView.tsx
+++ b/src/views/room/widgets/furniture/context-menu/MonsterPlantSeedConfirmView.tsx
@@ -1,10 +1,10 @@
 import { IFurnitureData, RoomObjectCategory } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import { GetFurnitureDataForRoomObject, LocalizeText, RoomWidgetUseProductMessage } from '../../../../../../api';
-import { Base, Button, Column, Flex, Text } from '../../../../../../common';
-import { FurniCategory } from '../../../../../../components/inventory/common/FurniCategory';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../layout';
-import { useRoomContext } from '../../../../context/RoomContext';
+import { GetFurnitureDataForRoomObject, LocalizeText, RoomWidgetUseProductMessage } from '../../../../../api';
+import { Base, Button, Column, Flex, Text } from '../../../../../common';
+import { FurniCategory } from '../../../../../components/inventory/common/FurniCategory';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
+import { useRoomContext } from '../../../context/RoomContext';
 
 interface MonsterPlantSeedConfirmViewProps
 {
diff --git a/src/views/room/widgets/furniture/context-menu/views/PurchasableClothingConfirmView.tsx b/src/views/room/widgets/furniture/context-menu/PurchasableClothingConfirmView.tsx
similarity index 90%
rename from src/views/room/widgets/furniture/context-menu/views/PurchasableClothingConfirmView.tsx
rename to src/views/room/widgets/furniture/context-menu/PurchasableClothingConfirmView.tsx
index fb673709..aa122d03 100644
--- a/src/views/room/widgets/furniture/context-menu/views/PurchasableClothingConfirmView.tsx
+++ b/src/views/room/widgets/furniture/context-menu/PurchasableClothingConfirmView.tsx
@@ -1,12 +1,12 @@
 import { RedeemItemClothingComposer, RoomObjectCategory, UserFigureComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import { GetAvatarRenderManager, GetConnection, GetFurnitureDataForRoomObject, GetSessionDataManager, LocalizeText } from '../../../../../../api';
-import { Base, Button, Column, Flex, Text } from '../../../../../../common';
-import { FigureData } from '../../../../../../components/avatar-editor/common/FigureData';
-import { FurniCategory } from '../../../../../../components/inventory/common/FurniCategory';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../layout';
-import { AvatarImageView } from '../../../../../shared/avatar-image/AvatarImageView';
-import { useRoomContext } from '../../../../context/RoomContext';
+import { GetAvatarRenderManager, GetConnection, GetFurnitureDataForRoomObject, GetSessionDataManager, LocalizeText } from '../../../../../api';
+import { Base, Button, Column, Flex, Text } from '../../../../../common';
+import { FigureData } from '../../../../../components/avatar-editor/common/FigureData';
+import { FurniCategory } from '../../../../../components/inventory/common/FurniCategory';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
+import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
+import { useRoomContext } from '../../../context/RoomContext';
 
 interface PurchasableClothingConfirmViewProps
 {
diff --git a/src/views/room/widgets/furniture/custom-stack-height/FurnitureCustomStackHeightView.scss b/src/views/room/widgets/furniture/custom-stack-height/FurnitureCustomStackHeightView.scss
deleted file mode 100644
index 755c73d1..00000000
--- a/src/views/room/widgets/furniture/custom-stack-height/FurnitureCustomStackHeightView.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.nitro-widget-custom-stack-height {
-    width: $nitro-widget-custom-stack-height-width;
-    height: $nitro-widget-custom-stack-height-height;
-}
diff --git a/src/views/room/widgets/furniture/custom-stack-height/FurnitureCustomStackHeightView.tsx b/src/views/room/widgets/furniture/custom-stack-height/FurnitureCustomStackHeightView.tsx
index 0b7c7ee1..0b864967 100644
--- a/src/views/room/widgets/furniture/custom-stack-height/FurnitureCustomStackHeightView.tsx
+++ b/src/views/room/widgets/furniture/custom-stack-height/FurnitureCustomStackHeightView.tsx
@@ -2,10 +2,10 @@ import { FurnitureStackHeightComposer, FurnitureStackHeightEvent } from '@nitrot
 import { FC, useCallback, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { LocalizeText, RoomWidgetUpdateCustomStackHeightEvent } from '../../../../../api';
+import { Button, Column, Flex, Text } from '../../../../../common';
 import { BatchUpdates, CreateMessageHook, SendMessageHook } from '../../../../../hooks';
 import { CreateEventDispatcherHook } from '../../../../../hooks/events';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutButton, NitroLayoutFlex, NitroLayoutFlexColumn, NitroLayoutGrid, NitroLayoutGridColumn } from '../../../../../layout';
-import { NitroLayoutBase } from '../../../../../layout/base';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
 import { useRoomContext } from '../../../context/RoomContext';
 
 const MAX_HEIGHT: number = 40;
@@ -17,14 +17,14 @@ export const FurnitureCustomStackHeightView: FC<{}> = props =>
     const [ pendingHeight, setPendingHeight ] = useState(-1);
     const { eventDispatcher = null } = useRoomContext();
 
-    const close = useCallback(() =>
+    const close = () =>
     {
         BatchUpdates(() =>
         {
             setObjectId(-1);
             setHeight(0);
         });
-    }, []);
+    }
 
     const updateHeight = useCallback((height: number, fromServer: boolean = false) =>
     {
@@ -83,35 +83,29 @@ export const FurnitureCustomStackHeightView: FC<{}> = props =>
     if(objectId === -1) return null;
 
     return (
-        <NitroCardView className="nitro-widget-custom-stack-height" simple={ true }>
+        <NitroCardView className="nitro-widget-custom-stack-height" simple>
             <NitroCardHeaderView headerText={ LocalizeText('widget.custom.stack.height.title') } onCloseClick={ close } />
-            <NitroCardContentView>
-                <NitroLayoutGrid>
-                    <NitroLayoutGridColumn className="justify-content-between" size={ 12 }>
-                        <NitroLayoutBase className="text-black" overflow="auto">
-                            { LocalizeText('widget.custom.stack.height.text') }
-                        </NitroLayoutBase>
-                        <NitroLayoutFlexColumn gap={ 2 }>
-                            <NitroLayoutFlex gap={ 2 }>
-                                <ReactSlider
-                                    className="nitro-slider"
-                                    min={ 0 }
-                                    max={ MAX_HEIGHT }
-                                    step={ 0.01 }
-                                    value={ height }
-                                    onChange={ event => updateHeight(event) }
-                                    renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> } />
-                                <input type="number" min={ 0 } max={ MAX_HEIGHT } value={ height } onChange={ event => updateHeight(parseFloat(event.target.value)) } />
-                            </NitroLayoutFlex>
-                            <NitroLayoutButton variant="primary" onClick={ event => sendUpdate(-100) }>
-                                { LocalizeText('furniture.above.stack') }
-                            </NitroLayoutButton>
-                            <NitroLayoutButton variant="primary" onClick={ event => sendUpdate(0) }>
-                                { LocalizeText('furniture.floor.level') }
-                            </NitroLayoutButton>
-                        </NitroLayoutFlexColumn>
-                    </NitroLayoutGridColumn>
-                </NitroLayoutGrid>
+            <NitroCardContentView justifyContent="between">
+                <Text>{ LocalizeText('widget.custom.stack.height.text') }</Text>
+                <Flex gap={ 2 }>
+                    <ReactSlider
+                        className="nitro-slider"
+                        min={ 0 }
+                        max={ MAX_HEIGHT }
+                        step={ 0.01 }
+                        value={ height }
+                        onChange={ event => updateHeight(event) }
+                        renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> } />
+                    <input type="number" min={ 0 } max={ MAX_HEIGHT } value={ height } onChange={ event => updateHeight(parseFloat(event.target.value)) } />
+                </Flex>
+                <Column gap={ 1 }>
+                    <Button onClick={ event => sendUpdate(-100) }>
+                        { LocalizeText('furniture.above.stack') }
+                    </Button>
+                    <Button onClick={ event => sendUpdate(0) }>
+                        { LocalizeText('furniture.floor.level') }
+                    </Button>
+                </Column>
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.scss b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.scss
deleted file mode 100644
index a83b0fe6..00000000
--- a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.nitro-room-widget-dimmer {
-    width: 275px;
-
-    .dimmer-banner {
-        width: 56px;
-        height: 79px;
-        background: url('../../../../../assets/images/room-widgets/dimmer-widget/dimmer_banner.png') center no-repeat;
-    }
-
-    .color-swatch {
-        height: 30px;
-        border: 2px solid $white;
-        box-shadow: inset 3px 3px rgba(0, 0, 0, .2);
-
-        &.active {
-            box-shadow: none;
-        }
-    }
-}
diff --git a/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.scss b/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.scss
deleted file mode 100644
index 4c286c5e..00000000
--- a/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.nitro-widget-exchange-credit {
-    width: $nitro-widget-exchange-credit-width;
-    height: $nitro-widget-exchange-credit-height;
-
-    .exchange-image {
-        background-image: url('../../../../../assets/images/room-widgets/exchange-credit/exchange-credit-image.png');
-        width: 103px;
-        height: 103px;
-    }
-}
diff --git a/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.tsx b/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.tsx
index 81d7ed79..1c9295d9 100644
--- a/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.tsx
+++ b/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.tsx
@@ -1,10 +1,6 @@
 import { FC, useCallback, useState } from 'react';
 import { LocalizeText, RoomWidgetCreditFurniRedeemMessage, RoomWidgetUpdateCreditFurniEvent } from '../../../../../api';
-import { Base } from '../../../../../common/Base';
-import { Button } from '../../../../../common/Button';
-import { Column } from '../../../../../common/Column';
-import { Grid } from '../../../../../common/Grid';
-import { Text } from '../../../../../common/Text';
+import { Base, Button, Column, Flex, Text } from '../../../../../common';
 import { BatchUpdates } from '../../../../../hooks';
 import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
@@ -18,39 +14,42 @@ export const FurnitureExchangeCreditView: FC<{}> = props =>
 
     const onRoomWidgetUpdateCreditFurniEvent = useCallback((event: RoomWidgetUpdateCreditFurniEvent) =>
     {
-        setObjectId(event.objectId);
-        setValue(event.value);
+        BatchUpdates(() =>
+        {
+            setObjectId(event.objectId);
+            setValue(event.value);
+        });
     }, []);
 
     CreateEventDispatcherHook(RoomWidgetUpdateCreditFurniEvent.CREDIT_FURNI_UPDATE, eventDispatcher, onRoomWidgetUpdateCreditFurniEvent);
 
-    const close = useCallback(() =>
+    const close = () =>
     {
         BatchUpdates(() =>
         {
             setObjectId(-1);
             setValue(0);
         });
-    }, []);
+    }
 
-    const redeem = useCallback(() =>
+    const redeem = () =>
     {
         widgetHandler.processWidgetMessage(new RoomWidgetCreditFurniRedeemMessage(RoomWidgetCreditFurniRedeemMessage.REDEEM, objectId));
 
         close();
-    }, [ widgetHandler, objectId, close ]);
+    }
 
     if(objectId === -1) return null;
 
     return (
-        <NitroCardView className="nitro-widget-exchange-credit" simple={ true }>
+        <NitroCardView className="nitro-widget-exchange-credit" simple>
             <NitroCardHeaderView headerText={ LocalizeText('catalog.redeem.dialog.title') } onCloseClick={ close } />
-            <NitroCardContentView>
-                <Grid>
-                    <Column center overflow="hidden" size={ 4 }>
+            <NitroCardContentView center>
+                <Flex overflow="hidden" gap={ 2 }>
+                    <Column center>
                         <Base className="exchange-image" />
                     </Column>
-                    <Column justifyContent="between" overflow="hidden" size={ 8 }>
+                    <Column grow justifyContent="between" overflow="hidden">
                         <Column gap={ 1 } overflow="auto">
                             <Text fontWeight="bold">{ LocalizeText('creditfurni.description', [ 'credits' ], [ value.toString() ]) }</Text>
                             <Text>{ LocalizeText('creditfurni.prompt') }</Text>
@@ -59,7 +58,7 @@ export const FurnitureExchangeCreditView: FC<{}> = props =>
                             { LocalizeText('catalog.redeem.dialog.button.exchange') }
                         </Button>
                     </Column>
-                </Grid>
+                </Flex>
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/views/room/widgets/furniture/external-image/FurnitureExternalImageView.scss b/src/views/room/widgets/furniture/external-image/FurnitureExternalImageView.scss
deleted file mode 100644
index 4e39e9d0..00000000
--- a/src/views/room/widgets/furniture/external-image/FurnitureExternalImageView.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.nitro-external-image-widget {
-
-    .picture-preview {
-        width: 320px;
-        height: 320px;
-    }
-}
diff --git a/src/views/room/widgets/furniture/external-image/FurnitureExternalImageView.tsx b/src/views/room/widgets/furniture/external-image/FurnitureExternalImageView.tsx
index 0729d563..7b6f576b 100644
--- a/src/views/room/widgets/furniture/external-image/FurnitureExternalImageView.tsx
+++ b/src/views/room/widgets/furniture/external-image/FurnitureExternalImageView.tsx
@@ -1,6 +1,7 @@
 import { FC, useCallback, useState } from 'react';
 import { IPhotoData, LocalizeText, RoomWidgetUpdateExternalImageEvent } from '../../../../../api';
-import { CreateEventDispatcherHook } from '../../../../../hooks';
+import { Flex, Text } from '../../../../../common';
+import { BatchUpdates, CreateEventDispatcherHook } from '../../../../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
 import { useRoomContext } from '../../../context/RoomContext';
 
@@ -10,19 +11,23 @@ export const FurnitureExternalImageView: FC<{}> = props =>
     const [ photoData, setPhotoData ] = useState<IPhotoData>(null);
     const { eventDispatcher = null } = useRoomContext();
     
-    const close = useCallback(() =>
+    const close = () =>
     {
         setObjectId(-1);
         setPhotoData(null)
-    }, []);
+    }
 
     const onRoomWidgetUpdateExternalImageEvent = useCallback((event: RoomWidgetUpdateExternalImageEvent) =>
     {
         switch(event.type)
         {
             case RoomWidgetUpdateExternalImageEvent.UPDATE_EXTERNAL_IMAGE: {
-                setObjectId(event.objectId);
-                setPhotoData(event.photoData);
+
+                BatchUpdates(() =>
+                {
+                    setObjectId(event.objectId);
+                    setPhotoData(event.photoData);
+                });
             }
         }
     }, []);
@@ -35,17 +40,16 @@ export const FurnitureExternalImageView: FC<{}> = props =>
         <NitroCardView className="nitro-external-image-widget">
             <NitroCardHeaderView headerText={ '' } onCloseClick={ close } />
             <NitroCardContentView>
-                <div className="d-flex justify-content-center align-items-center picture-preview border mb-2" style={ photoData.w ? { backgroundImage: 'url(' + photoData.w + ')' } : {} }>
+                <Flex center className="picture-preview border border-black" style={ photoData.w ? { backgroundImage: 'url(' + photoData.w + ')' } : {} }>
                     { !photoData.w &&
-                        <div className="text-black fw-bold">
-                            { LocalizeText('camera.loading') }
-                        </div> }
-                </div>
-                <span className="text-center text-black">{ photoData.m && <div>{ photoData.m }</div> }</span>
-                <div className="d-flex align-items-center justify-content-between">
-                    <span className="text-black">{ (photoData.n || '') }</span>
-                    <span className="text-black">{ new Date(photoData.t * 1000).toLocaleDateString() }</span>
-                </div>
+                        <Text bold>{ LocalizeText('camera.loading') }</Text> }
+                </Flex>
+                { photoData.m && photoData.m.length &&
+                    <Text center>{ photoData.m }</Text> }
+                <Flex alignItems="center" justifyContent="between">
+                    <Text>{ (photoData.n || '') }</Text>
+                    <Text>{ new Date(photoData.t * 1000).toLocaleDateString() }</Text>
+                </Flex>
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.scss b/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.scss
deleted file mode 100644
index 9719609c..00000000
--- a/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.nitro-gift-opening {
-    min-width: 340px;
-}
diff --git a/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx b/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx
index 3ded35e9..c76b9112 100644
--- a/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx
+++ b/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx
@@ -1,11 +1,11 @@
 import { RoomObjectCategory, RoomObjectOperationType } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useMemo, useState } from 'react';
+import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { CreateLinkEvent, GetRoomEngine, GetSessionDataManager, LocalizeText, RoomWidgetPresentOpenMessage, RoomWidgetUpdatePresentDataEvent, RoomWidgetUpdateRoomObjectEvent } from '../../../../../api';
+import { Button, Column, Flex, Text } from '../../../../../common';
 import { ProductTypeEnum } from '../../../../../components/catalog/common/ProductTypeEnum';
 import { BatchUpdates } from '../../../../../hooks';
 import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutButton, NitroLayoutFlex, NitroLayoutFlexColumn, NitroLayoutGiftCardView, NitroLayoutGrid, NitroLayoutGridColumn } from '../../../../../layout';
-import { NitroLayoutBase } from '../../../../../layout/base';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutGiftCardView } from '../../../../../layout';
 import { useRoomContext } from '../../../context/RoomContext';
 
 const FLOOR: string = 'floor';
@@ -33,6 +33,11 @@ export const FurnitureGiftOpeningView: FC<{}> = props =>
     const [ openRequested, setOpenRequested ] = useState(false);
     const { roomSession = null, eventDispatcher = null, widgetHandler = null } = useRoomContext();
 
+    useEffect(() =>
+    {
+        console.log(imageUrl);
+    }, [ imageUrl ]);
+
     const clearGift = useCallback(() =>
     {
         if(!openRequested) setObjectId(-1);
@@ -48,6 +53,7 @@ export const FurnitureGiftOpeningView: FC<{}> = props =>
 
     const onRoomWidgetUpdatePresentDataEvent = useCallback((event: RoomWidgetUpdatePresentDataEvent) =>
     {
+        console.log(event.imageUrl, event.type);
         switch(event.type)
         {
             case RoomWidgetUpdatePresentDataEvent.PACKAGEINFO: {
@@ -111,6 +117,7 @@ export const FurnitureGiftOpeningView: FC<{}> = props =>
                     setPlacedItemId(event.placedItemId);
                     setPlacedItemType(event.placedItemType);
                     setPlacedInRoom(event.placedInRoom);
+                    setImageUrl(event.imageUrl);
                 });
                 return;
             }
@@ -215,47 +222,43 @@ export const FurnitureGiftOpeningView: FC<{}> = props =>
     return (
         <NitroCardView className="nitro-gift-opening" simple={ true }>
             <NitroCardHeaderView headerText={ LocalizeText(senderName ? 'widget.furni.present.window.title_from' : 'widget.furni.present.window.title', [ 'name' ], [ senderName ]) } onCloseClick={ close } />
-            <NitroCardContentView>
-                <NitroLayoutGrid>
-                    { (placedItemId === -1) &&
-                        <NitroLayoutGridColumn size={ 12 }>
-                            <NitroLayoutFlex className="justify-content-center align-items-center" overflow="auto">
-                                <NitroLayoutGiftCardView userName={ senderName } figure={ senderFigure } message={ text } />
-                            </NitroLayoutFlex>
-                            <NitroLayoutFlex gap={ 2 }>
-                                { senderName &&
-                                    <NitroLayoutButton className="text-nowrap w-100" variant="primary" onClick={ event => handleAction(ACTION_GIVE_GIFT) }>
-                                        { LocalizeText('widget.furni.present.give_gift', [ 'name' ], [ senderName ]) }
-                                    </NitroLayoutButton> }
-                                <NitroLayoutButton className="text-nowrap w-100" variant="success" onClick={ event => handleAction(ACTION_OPEN) }>
-                                    { LocalizeText('widget.furni.present.open_gift') }
-                                </NitroLayoutButton>
-                            </NitroLayoutFlex>
-                        </NitroLayoutGridColumn> }
-                    { (placedItemId > -1) &&
-                        <NitroLayoutGridColumn size={ 12 }>
-                            <NitroLayoutFlex className="justify-content-center align-items-center" overflow="auto" gap={ 2 }>
-                                <img src={ imageUrl } alt="" />
-                                <NitroLayoutBase className="text-black">
-                                    { LocalizeText(productName, [ 'product' ], [ text ]) }
-                                </NitroLayoutBase>
-                            </NitroLayoutFlex>
-                            <NitroLayoutFlexColumn gap={ 2 }>
-                                <NitroLayoutFlex gap={ 2 }>
-                                    <NitroLayoutButton className="w-100" variant="primary" onClick={ event => handleAction(ACTION_INVENTORY) }>
-                                        { LocalizeText('widget.furni.present.put_in_inventory') }
-                                    </NitroLayoutButton>
-                                    <NitroLayoutButton className="w-100" variant="success" onClick={ event => handleAction(ACTION_PLACE) }>
-                                        { LocalizeText(placedInRoom ? 'widget.furni.present.keep_in_room' : 'widget.furni.present.place_in_room') }
-                                    </NitroLayoutButton>
-                                </NitroLayoutFlex>
-                                { (senderName && senderName.length) &&
-                                    <NitroLayoutButton className="w-100" variant="primary" onClick={ event => handleAction(ACTION_GIVE_GIFT) }>
-                                        { LocalizeText('widget.furni.present.give_gift', [ 'name' ], [ senderName ]) }
-                                    </NitroLayoutButton> }
-                            </NitroLayoutFlexColumn>
-                        </NitroLayoutGridColumn> }
-                </NitroLayoutGrid>
+            <NitroCardContentView center>
+                { (placedItemId === -1) &&
+                    <Column overflow="hidden">
+                        <Flex center overflow="auto">
+                            <NitroLayoutGiftCardView userName={ senderName } figure={ senderFigure } message={ text } />
+                        </Flex>
+                        <Flex gap={ 1 }>
+                            { senderName &&
+                                <Button fullWidth onClick={ event => handleAction(ACTION_GIVE_GIFT) }>
+                                    { LocalizeText('widget.furni.present.give_gift', [ 'name' ], [ senderName ]) }
+                                </Button> }
+                            <Button fullWidth variant="success" onClick={ event => handleAction(ACTION_OPEN) }>
+                                { LocalizeText('widget.furni.present.open_gift') }
+                            </Button>
+                        </Flex>
+                    </Column> }
+                { (placedItemId > -1) &&
+                    <Column overflow="hidden">
+                        <Flex center overflow="auto" gap={ 2 }>
+                            <img src={ imageUrl } className="no-select" alt="" />
+                            <Text wrap>{ LocalizeText(productName, [ 'product' ], [ text ]) }</Text>
+                        </Flex>
+                        <Column grow gap={ 1 }>
+                            <Flex gap={ 1 }>
+                                <Button fullWidth onClick={ event => handleAction(ACTION_INVENTORY) }>
+                                    { LocalizeText('widget.furni.present.put_in_inventory') }
+                                </Button>
+                                <Button fullWidth variant="success" onClick={ event => handleAction(ACTION_PLACE) }>
+                                    { LocalizeText(placedInRoom ? 'widget.furni.present.keep_in_room' : 'widget.furni.present.place_in_room') }
+                                </Button>
+                            </Flex>
+                            { (senderName && senderName.length) &&
+                                <Button fullWidth onClick={ event => handleAction(ACTION_GIVE_GIFT) }>
+                                    { LocalizeText('widget.furni.present.give_gift', [ 'name' ], [ senderName ]) }
+                                </Button> }
+                        </Column>
+                    </Column> }
             </NitroCardContentView>
         </NitroCardView>
     );

From 06bc3f238e324de6a1e6732ca55327fcc578d902 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Sat, 26 Feb 2022 00:23:11 -0500
Subject: [PATCH 08/17] More widget updates

---
 src/views/room/widgets/RoomWidgets.scss       |  99 +++++++++++++-
 .../avatar-info/AvatarInfoWidgetView.scss     |  10 --
 .../widgets/furniture/FurnitureWidgets.scss   |  14 +-
 .../FurnitureMannequinPreviewView.tsx         |  23 ++++
 .../mannequin/FurnitureMannequinView.scss     |   9 --
 .../mannequin/FurnitureMannequinView.tsx      |  62 +++++----
 .../preview/FurnitureMannequinPreviewView.tsx |  17 ---
 .../FurnitureMannequinPreviewView.types.ts    |   5 -
 .../object-location/ObjectLocationView.scss   |   2 -
 .../object-location/ObjectLocationView.tsx    |  18 +--
 .../ObjectLocationView.types.ts               |   8 --
 .../room-tools/RoomToolsWidgetView.scss       |  55 --------
 .../room-tools/RoomToolsWidgetView.tsx        |  45 ++++---
 .../user-location/UserLocationView.tsx        |   7 +-
 .../user-location/UserLocationView.types.ts   |   6 -
 .../word-quiz/WordQuizQuestionView.tsx        |  44 ++++++
 .../widgets/word-quiz/WordQuizVoteView.tsx    |  24 ++++
 .../widgets/word-quiz/WordQuizWidgetView.scss |  39 ------
 .../widgets/word-quiz/WordQuizWidgetView.tsx  | 126 +++++++++---------
 .../word-quiz/views/question/QuestionView.tsx |  24 ----
 .../views/question/QuestionView.types.ts      |   9 --
 .../widgets/word-quiz/views/vote/VoteView.tsx |  16 ---
 .../word-quiz/views/vote/VoteView.types.ts    |   5 -
 23 files changed, 346 insertions(+), 321 deletions(-)
 create mode 100644 src/views/room/widgets/furniture/mannequin/FurnitureMannequinPreviewView.tsx
 delete mode 100644 src/views/room/widgets/furniture/mannequin/FurnitureMannequinView.scss
 delete mode 100644 src/views/room/widgets/furniture/mannequin/views/preview/FurnitureMannequinPreviewView.tsx
 delete mode 100644 src/views/room/widgets/furniture/mannequin/views/preview/FurnitureMannequinPreviewView.types.ts
 delete mode 100644 src/views/room/widgets/object-location/ObjectLocationView.scss
 delete mode 100644 src/views/room/widgets/object-location/ObjectLocationView.types.ts
 delete mode 100644 src/views/room/widgets/room-tools/RoomToolsWidgetView.scss
 delete mode 100644 src/views/room/widgets/user-location/UserLocationView.types.ts
 create mode 100644 src/views/room/widgets/word-quiz/WordQuizQuestionView.tsx
 create mode 100644 src/views/room/widgets/word-quiz/WordQuizVoteView.tsx
 delete mode 100644 src/views/room/widgets/word-quiz/WordQuizWidgetView.scss
 delete mode 100644 src/views/room/widgets/word-quiz/views/question/QuestionView.tsx
 delete mode 100644 src/views/room/widgets/word-quiz/views/question/QuestionView.types.ts
 delete mode 100644 src/views/room/widgets/word-quiz/views/vote/VoteView.tsx
 delete mode 100644 src/views/room/widgets/word-quiz/views/vote/VoteView.types.ts

diff --git a/src/views/room/widgets/RoomWidgets.scss b/src/views/room/widgets/RoomWidgets.scss
index a2f114d6..03b34a57 100644
--- a/src/views/room/widgets/RoomWidgets.scss
+++ b/src/views/room/widgets/RoomWidgets.scss
@@ -1,3 +1,99 @@
+.nitro-room-tools-container {
+    position: absolute;
+    bottom: $toolbar-height + 65px;
+    left: 0;
+
+    .nitro-room-tools {
+        background: rgba($dark,.95);
+        box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
+        border-top-right-radius: $border-radius;
+        border-bottom-right-radius: $border-radius;
+        transition: all .2s ease;
+        z-index: 2;
+    
+        .list-group-item {
+            background: transparent;
+            padding: 3px 0px;
+            color: $white;
+            border-color: rgba($black, 0.3);
+            cursor: pointer;
+    
+            &:hover {
+                text-decoration: underline;
+            }
+    
+            &:first-child {
+                padding-top: 8px;
+            }
+    
+            &:last-child {
+                border-bottom: none;
+                padding-bottom: 8px;
+            }
+        
+            .tools-item {
+                .icon {
+                    width: 22px;
+                    background-repeat: no-repeat;
+                    background-position: center;
+                }
+        
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
+        }
+    }
+    
+    .nitro-room-tools-info {
+        background: rgba($dark,.95);
+        box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
+        transition: all .2s ease;
+        pointer-events: none;
+        max-width: 250px;
+    }
+}
+
+.wordquiz-question {
+    position: absolute;
+    top: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: large;
+    background: rgba($dark, 0.95);
+    box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
+    border-radius: $border-radius;
+    transition: all 0.2s ease;
+    
+    .question {
+        max-width: 300px;
+    }
+}
+
+.word-quiz-dislike {
+    background: url("../../../assets/images/room-widgets/wordquiz-widget/thumbs-down.png");
+    width: 31px;
+    height: 34px;
+}
+
+.word-quiz-like {
+    background: url("../../../assets/images/room-widgets/wordquiz-widget/thumbs-up.png");
+    width: 31px;
+    height: 34px;
+}
+
+.word-quiz-dislike-sm {
+    background: url("../../../assets/images/room-widgets/wordquiz-widget/thumbs-down-small.png");
+    width: 22px;
+    height: 22px;
+}
+
+.word-quiz-like-sm {
+    background: url("../../../assets/images/room-widgets/wordquiz-widget/thumbs-up-small.png");
+    height: 22px;
+    width: 22px;
+}
+
 @import './avatar-info/AvatarInfoWidgetView';
 @import './chat/ChatWidgetView';
 @import './chat-input/ChatInputView';
@@ -6,6 +102,3 @@
 @import './friend-request/FriendRequestDialogView';
 @import './furniture/FurnitureWidgets';
 @import './infostand/InfoStandWidgetView';
-@import './object-location/ObjectLocationView';
-@import './room-tools/RoomToolsWidgetView';
-@import './word-quiz/WordQuizWidgetView';
diff --git a/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.scss b/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.scss
index df009b29..737bf54c 100644
--- a/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.scss
+++ b/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.scss
@@ -20,14 +20,4 @@
             background: url('../../../../assets/images/room-widgets/furni-context-menu/monsterplant-preview.png') no-repeat center;
         }
     }
-
-    .mannequin-preview {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 83px;
-        height: 130px;
-        background-image: url('../../../../assets/images/room-widgets/mannequin-widget/mannequin-spritesheet.png');
-        overflow: hidden;
-    }
 }
diff --git a/src/views/room/widgets/furniture/FurnitureWidgets.scss b/src/views/room/widgets/furniture/FurnitureWidgets.scss
index 390c4e14..425d02fa 100644
--- a/src/views/room/widgets/furniture/FurnitureWidgets.scss
+++ b/src/views/room/widgets/furniture/FurnitureWidgets.scss
@@ -50,9 +50,21 @@
     
 }
 
+.nitro-mannequin {
+}
+
+.mannequin-preview {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 83px;
+    height: 130px;
+    background-image: url('../../../../assets/images/room-widgets/mannequin-widget/mannequin-spritesheet.png');
+    overflow: hidden;
+}
+
 @import './friend-furni/FurnitureFriendFurniView';
 @import './manipulation-menu/FurnitureManipulationMenuView';
-@import './mannequin/FurnitureMannequinView';
 @import './stickie/FurnitureStickieView';
 @import './high-score/FurnitureHighScoreView';
 @import './youtube-tv/FurnitureYoutubeDisplayView';
diff --git a/src/views/room/widgets/furniture/mannequin/FurnitureMannequinPreviewView.tsx b/src/views/room/widgets/furniture/mannequin/FurnitureMannequinPreviewView.tsx
new file mode 100644
index 00000000..a0f6dba2
--- /dev/null
+++ b/src/views/room/widgets/furniture/mannequin/FurnitureMannequinPreviewView.tsx
@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { Base } from '../../../../../common';
+import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
+import { CurrencyIcon } from '../../../../shared/currency-icon/CurrencyIcon';
+
+interface FurnitureMannequinPreviewViewProps
+{
+    figure: string;
+    clubLevel: number;
+}
+
+export const FurnitureMannequinPreviewView: FC<FurnitureMannequinPreviewViewProps> = props =>
+{
+    const { figure = null, clubLevel = 0 } = props;
+
+    return (
+        <Base position="relative" className="mannequin-preview">
+            <AvatarImageView figure={ figure } direction={ 2 } />
+            { (clubLevel > 0) &&
+                <CurrencyIcon className="position-absolute end-2 bottom-2" type="hc" /> }
+        </Base>
+    );
+}
diff --git a/src/views/room/widgets/furniture/mannequin/FurnitureMannequinView.scss b/src/views/room/widgets/furniture/mannequin/FurnitureMannequinView.scss
deleted file mode 100644
index cc16ce4c..00000000
--- a/src/views/room/widgets/furniture/mannequin/FurnitureMannequinView.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.nitro-mannequin {
-    width: 350px;
-
-    .mannequin-preview {
-        width: 83px;
-        height: 130px;
-        background-image: url('../../../../../assets/images/room-widgets/mannequin-widget/mannequin-spritesheet.png');
-    }
-}
diff --git a/src/views/room/widgets/furniture/mannequin/FurnitureMannequinView.tsx b/src/views/room/widgets/furniture/mannequin/FurnitureMannequinView.tsx
index da7848c2..c7591e33 100644
--- a/src/views/room/widgets/furniture/mannequin/FurnitureMannequinView.tsx
+++ b/src/views/room/widgets/furniture/mannequin/FurnitureMannequinView.tsx
@@ -1,16 +1,17 @@
 import { AvatarFigurePartType, FurnitureMannequinSaveLookComposer, FurnitureMannequinSaveNameComposer, FurnitureMultiStateComposer, HabboClubLevelEnum, IAvatarFigureContainer, RoomControllerLevel } from '@nitrots/nitro-renderer';
 import { FC, KeyboardEvent, useCallback, useEffect, useState } from 'react';
 import { GetAvatarRenderManager, GetSessionDataManager, LocalizeText, RoomWidgetUpdateMannequinEvent } from '../../../../../api';
+import { Base } from '../../../../../common';
 import { Button } from '../../../../../common/Button';
 import { Column } from '../../../../../common/Column';
 import { Flex } from '../../../../../common/Flex';
-import { Grid } from '../../../../../common/Grid';
 import { Text } from '../../../../../common/Text';
 import { BatchUpdates, SendMessageHook } from '../../../../../hooks';
 import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
+import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
+import { CurrencyIcon } from '../../../../shared/currency-icon/CurrencyIcon';
 import { useRoomContext } from '../../../context/RoomContext';
-import { FurnitureMannequinPreviewView } from './views/preview/FurnitureMannequinPreviewView';
 
 const MODE_NONE: number = -1;
 const MODE_CONTROLLER: number = 0;
@@ -143,8 +144,11 @@ export const FurnitureMannequinView: FC<{}> = props =>
 
                 transformAsMannequinFigure(figureContainer);
 
-                setRenderedFigure(figureContainer.getFigureString());
-                setRenderedClubLevel(clubLevel);
+                BatchUpdates(() =>
+                {
+                    setRenderedFigure(figureContainer.getFigureString());
+                    setRenderedClubLevel(clubLevel);
+                });
                 break;
             }
             case MODE_UPDATE: {
@@ -152,16 +156,22 @@ export const FurnitureMannequinView: FC<{}> = props =>
 
                 transformAsMannequinFigure(figureContainer);
 
-                setRenderedFigure(figureContainer.getFigureString());
-                setRenderedClubLevel(GetAvatarRenderManager().getFigureClubLevel(figureContainer, GetSessionDataManager().gender, MANNEQUIN_CLOTHING_PART_TYPES));
+                BatchUpdates(() =>
+                {
+                    setRenderedFigure(figureContainer.getFigureString());
+                    setRenderedClubLevel(GetAvatarRenderManager().getFigureClubLevel(figureContainer, GetSessionDataManager().gender, MANNEQUIN_CLOTHING_PART_TYPES));
+                });
                 break;
             }
             case MODE_PEER:
             case MODE_NO_CLUB: {
                 const figureContainer = getMergedFigureContainer(GetSessionDataManager().figure, figure);
 
-                setRenderedFigure(figureContainer.getFigureString());
-                setRenderedClubLevel(clubLevel);
+                BatchUpdates(() =>
+                {
+                    setRenderedFigure(figureContainer.getFigureString());
+                    setRenderedClubLevel(clubLevel);
+                });
                 break;
             }
         }
@@ -170,18 +180,22 @@ export const FurnitureMannequinView: FC<{}> = props =>
     if(mode === MODE_NONE) return null;
 
     return (
-        <NitroCardView className="nitro-mannequin" simple={ true }>
+        <NitroCardView className="nitro-mannequin" simple>
             <NitroCardHeaderView headerText={ LocalizeText('mannequin.widget.title') } onCloseClick={ event => setMode(MODE_NONE) } />
-            <NitroCardContentView>
-                <Grid>
-                    <Column center size={ 4 } overflow="hidden">
-                        <FurnitureMannequinPreviewView figure={ renderedFigure } clubLevel={ renderedClubLevel } />
+            <NitroCardContentView center>
+                <Flex gap={ 2 } overflow="hidden">
+                    <Column>
+                        <Base position="relative" className="mannequin-preview">
+                            <AvatarImageView figure={ renderedFigure } direction={ 2 } />
+                            { (clubLevel > 0) &&
+                                <CurrencyIcon className="position-absolute end-2 bottom-2" type="hc" /> }
+                        </Base>
                     </Column>
-                    <Column size={ 8 } justifyContent="between" overflow="hidden">
+                    <Column justifyContent="between" overflow="auto">
                         { (mode === MODE_CONTROLLER) &&
                             <>
                                 <input type="text" className="form-control" value={ name } onChange={ event => setName(event.target.value) } onKeyDown={ event => handleKeyDown(event) } />
-                                <Column gap={ 1 } overflow="auto">
+                                <Column gap={ 1 }>
                                     <Button variant="success" onClick={ event => setMode(MODE_UPDATE) }>
                                         { LocalizeText('mannequin.widget.style') }
                                     </Button>
@@ -192,9 +206,9 @@ export const FurnitureMannequinView: FC<{}> = props =>
                             </> }
                         { (mode === MODE_UPDATE) &&
                             <>
-                                <Column gap={ 1 } overflow="auto">
-                                    <Text fontWeight="bold">{ name }</Text>
-                                    <Text>{ LocalizeText('mannequin.widget.savetext') }</Text>
+                                <Column gap={ 1 }>
+                                    <Text bold>{ name }</Text>
+                                    <Text wrap>{ LocalizeText('mannequin.widget.savetext') }</Text>
                                 </Column>
                                 <Flex alignItems="center" justifyContent="between">
                                     <Text underline pointer onClick={ event => setMode(MODE_CONTROLLER) }>
@@ -207,18 +221,20 @@ export const FurnitureMannequinView: FC<{}> = props =>
                             </> }
                         { (mode === MODE_PEER) &&
                             <>
-                                <Column gap={ 1 } overflow="auto">
-                                    <Text fontWeight="bold">{ name }</Text>
+                                <Column gap={ 1 }>
+                                    <Text bold>{ name }</Text>
                                     <Text>{ LocalizeText('mannequin.widget.weartext') }</Text>
                                 </Column>
                                 <Button variant="success" onClick={ event => processAction(ACTION_WEAR) }>
                                     { LocalizeText('mannequin.widget.wear') }
                                 </Button>
                             </> }
-                        { (mode === MODE_NO_CLUB) && <Text>{ LocalizeText('mannequin.widget.clubnotification') }</Text> }
-                        { (mode === MODE_WRONG_GENDER) && <Text>{ LocalizeText('mannequin.widget.wronggender') }</Text> }
+                        { (mode === MODE_NO_CLUB) &&
+                            <Text>{ LocalizeText('mannequin.widget.clubnotification') }</Text> }
+                        { (mode === MODE_WRONG_GENDER) &&
+                            <Text>{ LocalizeText('mannequin.widget.wronggender') }</Text> }
                     </Column>
-                </Grid>
+                </Flex>
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/views/room/widgets/furniture/mannequin/views/preview/FurnitureMannequinPreviewView.tsx b/src/views/room/widgets/furniture/mannequin/views/preview/FurnitureMannequinPreviewView.tsx
deleted file mode 100644
index 194700df..00000000
--- a/src/views/room/widgets/furniture/mannequin/views/preview/FurnitureMannequinPreviewView.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { FC } from 'react';
-import { NitroLayoutBase } from '../../../../../../../layout/base';
-import { AvatarImageView } from '../../../../../../shared/avatar-image/AvatarImageView';
-import { CurrencyIcon } from '../../../../../../shared/currency-icon/CurrencyIcon';
-import { FurnitureMannequinPreviewViewProps } from './FurnitureMannequinPreviewView.types';
-
-export const FurnitureMannequinPreviewView: FC<FurnitureMannequinPreviewViewProps> = props =>
-{
-    const { figure = null, clubLevel = 0 } = props;
-
-    return (
-        <NitroLayoutBase className="mannequin-preview" position="relative">
-            <AvatarImageView figure={ figure } direction={ 2 } />
-            { (clubLevel > 0) && <CurrencyIcon className="position-absolute end-2 bottom-2" type="hc" /> }
-        </NitroLayoutBase>
-    );
-}
diff --git a/src/views/room/widgets/furniture/mannequin/views/preview/FurnitureMannequinPreviewView.types.ts b/src/views/room/widgets/furniture/mannequin/views/preview/FurnitureMannequinPreviewView.types.ts
deleted file mode 100644
index 1a5ee3fe..00000000
--- a/src/views/room/widgets/furniture/mannequin/views/preview/FurnitureMannequinPreviewView.types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface FurnitureMannequinPreviewViewProps
-{
-    figure: string;
-    clubLevel: number;
-}
diff --git a/src/views/room/widgets/object-location/ObjectLocationView.scss b/src/views/room/widgets/object-location/ObjectLocationView.scss
deleted file mode 100644
index ab82f870..00000000
--- a/src/views/room/widgets/object-location/ObjectLocationView.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-.object-location {
-}
diff --git a/src/views/room/widgets/object-location/ObjectLocationView.tsx b/src/views/room/widgets/object-location/ObjectLocationView.tsx
index c7df0d2a..d28d2a4e 100644
--- a/src/views/room/widgets/object-location/ObjectLocationView.tsx
+++ b/src/views/room/widgets/object-location/ObjectLocationView.tsx
@@ -1,11 +1,17 @@
 import { FC, useCallback, useEffect, useRef, useState } from 'react';
 import { GetNitroInstance, GetRoomEngine, GetRoomSession } from '../../../../api';
-import { NitroLayoutBase } from '../../../../layout/base';
-import { ObjectLocationViewProps } from './ObjectLocationView.types';
+import { Base, BaseProps } from '../../../../common';
+
+interface ObjectLocationViewProps extends BaseProps<HTMLDivElement>
+{
+    objectId: number;
+    category: number;
+    noFollow?: boolean;
+}
 
 export const ObjectLocationView: FC<ObjectLocationViewProps> = props =>
 {
-    const { objectId = -1, category = -1, noFollow = false, children = null, ...rest } = props;
+    const { objectId = -1, category = -1, noFollow = false, position = 'absolute', ...rest } = props;
     const [ pos, setPos ] = useState<{ x: number, y: number }>({ x: -1, y: -1 });
     const elementRef = useRef<HTMLDivElement>();
 
@@ -50,9 +56,5 @@ export const ObjectLocationView: FC<ObjectLocationViewProps> = props =>
         }
     }, [ updatePosition, noFollow ]);
 
-    return (
-        <NitroLayoutBase innerRef={ elementRef } className={ 'object-location position-absolute ' + ( (pos.x + (elementRef.current ? elementRef.current.offsetWidth : 0 ) )> -1 ? 'visible' : 'invisible') } style={ { left: pos.x, top: pos.y } } { ...rest }>
-            { children }
-        </NitroLayoutBase>
-    );
+    return <Base innerRef={ elementRef } position={ position } visible={ (pos.x + (elementRef.current ? elementRef.current.offsetWidth : 0)) > -1 } className="object-location" style={ { left: pos.x, top: pos.y } } { ...rest } />;
 }
diff --git a/src/views/room/widgets/object-location/ObjectLocationView.types.ts b/src/views/room/widgets/object-location/ObjectLocationView.types.ts
deleted file mode 100644
index 0da23b4b..00000000
--- a/src/views/room/widgets/object-location/ObjectLocationView.types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { NitroLayoutBaseProps } from '../../../../layout/base';
-
-export interface ObjectLocationViewProps extends NitroLayoutBaseProps
-{
-    objectId: number;
-    category: number;
-    noFollow?: boolean;
-}
diff --git a/src/views/room/widgets/room-tools/RoomToolsWidgetView.scss b/src/views/room/widgets/room-tools/RoomToolsWidgetView.scss
deleted file mode 100644
index fe081425..00000000
--- a/src/views/room/widgets/room-tools/RoomToolsWidgetView.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-.nitro-room-tools-container {
-    position: absolute;
-    bottom: $toolbar-height + 65px;
-    left: 0;
-
-    .nitro-room-tools {
-        background: rgba($dark,.95);
-        box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
-        border-top-right-radius: $border-radius;
-        border-bottom-right-radius: $border-radius;
-        transition: all .2s ease;
-    
-        .list-group-item {
-            background: transparent;
-            padding: 3px 0px;
-            color: $white;
-            border-color: rgba($black, 0.3);
-            cursor: pointer;
-    
-            &:hover {
-                text-decoration: underline;
-            }
-    
-            &:first-child {
-                padding-top: 8px;
-            }
-    
-            &:last-child {
-                border-bottom: none;
-                padding-bottom: 8px;
-            }
-        
-            .tools-item {
-                .icon {
-                    width: 22px;
-                    background-repeat: no-repeat;
-                    background-position: center;
-                }
-        
-                &:hover {
-                    text-decoration: underline;
-                }
-            }
-        }
-    }
-    
-    .nitro-room-tools-info {
-        margin-left: 10px;
-        background: rgba($dark,.95);
-        box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
-        transition: all .2s ease;
-        pointer-events: none;
-        max-width: 250px;
-    }
-}
diff --git a/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx b/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx
index 6bf17ef8..19ca05c0 100644
--- a/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx
+++ b/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx
@@ -4,8 +4,10 @@ import { FC, useCallback, useEffect, useState } from 'react';
 import { CreateLinkEvent, LocalizeText, RoomWidgetZoomToggleMessage } from '../../../../api';
 import { Base, Column, Flex, Text } from '../../../../common';
 import { NavigatorEvent } from '../../../../events';
+import { BatchUpdates } from '../../../../hooks';
 import { dispatchUiEvent } from '../../../../hooks/events';
 import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages';
+import { TransitionAnimation, TransitionAnimationTypes } from '../../../../layout';
 import { useRoomContext } from '../../context/RoomContext';
 
 export const RoomToolsWidgetView: FC<{}> = props =>
@@ -13,14 +15,13 @@ export const RoomToolsWidgetView: FC<{}> = props =>
     const [ isZoomedIn, setIsZoomedIn ] = useState(false);
     const [ isLiked, setIsLiked ] = useState(false);
     const { widgetHandler = null } = useRoomContext();
-
     const [ roomName, setRoomName ] = useState(null);
     const [ roomOwner, setRoomOwner ] = useState(null);
     const [ roomTags, setRoomTags ] = useState(null);
     const [ roomInfoDisplay, setRoomInfoDisplay ] = useState(false);
     const [ isOpen, setIsOpen ] = useState(false);
 
-    const handleToolClick = useCallback((action: string) =>
+    const handleToolClick = (action: string) =>
     {
         switch(action)
         {
@@ -44,17 +45,18 @@ export const RoomToolsWidgetView: FC<{}> = props =>
                 dispatchUiEvent(new NavigatorEvent(NavigatorEvent.TOGGLE_ROOM_LINK));
                 return;
         }
-    }, [ isZoomedIn, isLiked, widgetHandler ]);
+    }
 
     const onGetGuestRoomResultEvent = useCallback((event: GetGuestRoomResultEvent) =>
     {
         const parser = event.getParser();
 
-        if(roomName !== parser.data.roomName) setRoomName(parser.data.roomName);
-
-        if(roomOwner !== parser.data.ownerName) setRoomOwner(parser.data.ownerName);
-
-        if(roomTags !== parser.data.tags) setRoomTags(parser.data.tags);
+        BatchUpdates(() =>
+        {
+            if(roomName !== parser.data.roomName) setRoomName(parser.data.roomName);
+            if(roomOwner !== parser.data.ownerName) setRoomOwner(parser.data.ownerName);
+            if(roomTags !== parser.data.tags) setRoomTags(parser.data.tags);
+        });
     }, [ roomName, roomOwner, roomTags ]);
 
     CreateMessageHook(GetGuestRoomResultEvent, onGetGuestRoomResultEvent);
@@ -69,26 +71,29 @@ export const RoomToolsWidgetView: FC<{}> = props =>
     }, [ roomName, roomOwner, roomTags ]);
     
     return (
-        <Flex className="nitro-room-tools-container">
+        <Flex className="nitro-room-tools-container" gap={ 2 }>
             <Column center className="nitro-room-tools p-2">
                 <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={ 'icon ' + classNames({ 'icon-zoom-less': !isZoomedIn, 'icon-zoom-more': isZoomedIn }) } />
                 <Base pointer title={ LocalizeText('room.chathistory.button.text') } onClick={ () => handleToolClick('chat_history') } className="icon icon-chat-history" />
                 { !isLiked && <Base pointer title={ LocalizeText('room.like.button.text') } onClick={ () => handleToolClick('like_room') } className="icon icon-like-room" /> }
             </Column>
-            { isOpen &&
-                <Column center>
-                    <Column className="nitro-room-tools-info rounded py-2 px-3">
-                        <Column gap={ 1 }>
-                            <Text variant="white" fontSize={ 4 }>{ roomName }</Text>
-                            <Text variant="muted" fontSize={ 5 }>{ roomOwner }</Text>
+            <Column justifyContent="center">
+                <TransitionAnimation type={ TransitionAnimationTypes.SLIDE_LEFT } inProp={ isOpen } timeout={ 300 }>
+                    <Column center>
+                        <Column className="nitro-room-tools-info rounded py-2 px-3">
+                            <Column gap={ 1 }>
+                                <Text wrap variant="white" fontSize={ 4 }>{ roomName }</Text>
+                                <Text variant="muted" fontSize={ 5 }>{ roomOwner }</Text>
+                            </Column>
+                            { roomTags && roomTags.length > 0 &&
+                                <Flex gap={ 2 }>
+                                    { roomTags.map((tag: string) => <Text small variant="white" className="rounded bg-primary p-1">#{ tag }</Text>) }
+                                </Flex> }
                         </Column>
-                        { roomTags && roomTags.length > 0 &&
-                            <div className="d-flex gap-2">
-                                { roomTags.map((tag: string) => <div className="rounded bg-primary text-white p-1 text-sm">#{ tag }</div>) }
-                            </div> }
                     </Column>
-                </Column> }
+                </TransitionAnimation>
+            </Column>
         </Flex>
     );
 }
diff --git a/src/views/room/widgets/user-location/UserLocationView.tsx b/src/views/room/widgets/user-location/UserLocationView.tsx
index c8dd2364..61c1cb49 100644
--- a/src/views/room/widgets/user-location/UserLocationView.tsx
+++ b/src/views/room/widgets/user-location/UserLocationView.tsx
@@ -1,8 +1,13 @@
 import { RoomObjectCategory } from '@nitrots/nitro-renderer';
 import { FC } from 'react';
+import { BaseProps } from '../../../../common';
 import { useRoomContext } from '../../context/RoomContext';
 import { ObjectLocationView } from '../object-location/ObjectLocationView';
-import { UserLocationViewProps } from './UserLocationView.types';
+
+interface UserLocationViewProps extends BaseProps<HTMLDivElement>
+{
+    userId: number;
+}
 
 export const UserLocationView: FC<UserLocationViewProps> = props =>
 {
diff --git a/src/views/room/widgets/user-location/UserLocationView.types.ts b/src/views/room/widgets/user-location/UserLocationView.types.ts
deleted file mode 100644
index d5951e2b..00000000
--- a/src/views/room/widgets/user-location/UserLocationView.types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { NitroLayoutBaseProps } from '../../../../layout/base';
-
-export interface UserLocationViewProps extends NitroLayoutBaseProps
-{
-    userId: number;
-}
diff --git a/src/views/room/widgets/word-quiz/WordQuizQuestionView.tsx b/src/views/room/widgets/word-quiz/WordQuizQuestionView.tsx
new file mode 100644
index 00000000..83421ea1
--- /dev/null
+++ b/src/views/room/widgets/word-quiz/WordQuizQuestionView.tsx
@@ -0,0 +1,44 @@
+import { FC } from 'react';
+import { Base, Column, Flex, Text } from '../../../../common';
+import { VALUE_KEY_DISLIKE, VALUE_KEY_LIKE } from './common/VoteValue';
+
+interface WordQuizQuestionViewProps
+{
+    question: string;
+    canVote: boolean;
+    vote(value: string): void;
+    noVotes: number;
+    yesVotes: number;
+}
+
+export const WordQuizQuestionView: FC<WordQuizQuestionViewProps> = props =>
+{
+    const { question = null, canVote = null, vote = null, noVotes = null, yesVotes = null } = props;
+    
+    return (
+        <Column gap={ 2 } className="wordquiz-question p-2">
+            { !canVote &&
+                <Flex fullWidth alignItems="center" gap={ 2 }>
+                    <Flex center pointer className="bg-danger rounded p-2">
+                        <Text variant="white">{ noVotes }</Text>
+                    </Flex>
+                    <Text variant="white" center textBreak>{ question }</Text>
+                    <Flex center pointer className="bg-success rounded p-2">
+                        <Text variant="white">{ yesVotes }</Text>
+                    </Flex>
+                </Flex> }
+            { canVote &&
+                <Column>
+                    <Text variant="white" center textBreak>{ question }</Text>
+                    <Flex fullWidth justifyContent="center" gap={ 1 }>
+                        <Flex center pointer className="bg-danger rounded p-1" onClick={ event => vote(VALUE_KEY_DISLIKE) }>
+                            <Base className="word-quiz-dislike" />
+                        </Flex>
+                        <Flex center pointer className="bg-success rounded p-1" onClick={ event => vote(VALUE_KEY_LIKE) }>
+                            <Base className="word-quiz-like" />
+                        </Flex>
+                    </Flex>
+                </Column> }
+        </Column>
+    );
+}
diff --git a/src/views/room/widgets/word-quiz/WordQuizVoteView.tsx b/src/views/room/widgets/word-quiz/WordQuizVoteView.tsx
new file mode 100644
index 00000000..5511b284
--- /dev/null
+++ b/src/views/room/widgets/word-quiz/WordQuizVoteView.tsx
@@ -0,0 +1,24 @@
+import { RoomObjectCategory } from '@nitrots/nitro-renderer/src';
+import { FC } from 'react';
+import { Base, BaseProps, Flex } from '../../../../common';
+import { ObjectLocationView } from '../object-location/ObjectLocationView';
+import { VALUE_KEY_DISLIKE } from './common/VoteValue';
+
+interface WordQuizVoteViewProps extends BaseProps<HTMLDivElement>
+{
+    userIndex: number;
+    vote: string;
+}
+
+export const WordQuizVoteView: FC<WordQuizVoteViewProps> = props =>
+{
+    const { userIndex = null, vote = null, ...rest } = props;
+
+    return (
+        <ObjectLocationView objectId={ userIndex } category={ RoomObjectCategory.UNIT } { ...rest }>
+            <Flex center pointer className={ `bg-${ (vote === VALUE_KEY_DISLIKE) ? 'danger' : 'success' } rounded p-1` }>
+                <Base className={ `word-quiz-${ (vote === VALUE_KEY_DISLIKE) ? 'dislike' : 'like' }-sm` } />
+            </Flex>
+        </ObjectLocationView>
+    );
+}
diff --git a/src/views/room/widgets/word-quiz/WordQuizWidgetView.scss b/src/views/room/widgets/word-quiz/WordQuizWidgetView.scss
deleted file mode 100644
index 5889d925..00000000
--- a/src/views/room/widgets/word-quiz/WordQuizWidgetView.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-.wordquiz-question {
-    position: absolute;
-    top: 10px;
-    left: 50%;
-    transform: translateX(-50%);
-    font-size: large;
-    background: rgba($dark, 0.9);
-    //box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
-    border-radius: $border-radius;
-    transition: all 0.2s ease;
-    
-    .question {
-        max-width: 300px;
-    }
-}
-
-.word-quiz-dislike {
-    background: url("../../../../assets/images/room-widgets/wordquiz-widget/thumbs-down.png");
-    width: 31px;
-    height: 34px;
-}
-
-.word-quiz-like {
-    background: url("../../../../assets/images/room-widgets/wordquiz-widget/thumbs-up.png");
-    width: 31px;
-    height: 34px;
-}
-
-.word-quiz-dislike-sm {
-    background: url("../../../../assets/images/room-widgets/wordquiz-widget/thumbs-down-small.png");
-    width: 22px;
-    height: 22px;
-}
-
-.word-quiz-like-sm {
-    background: url("../../../../assets/images/room-widgets/wordquiz-widget/thumbs-up-small.png");
-    height: 22px;
-    width: 22px;
-}
diff --git a/src/views/room/widgets/word-quiz/WordQuizWidgetView.tsx b/src/views/room/widgets/word-quiz/WordQuizWidgetView.tsx
index 271853e4..b6b7475e 100644
--- a/src/views/room/widgets/word-quiz/WordQuizWidgetView.tsx
+++ b/src/views/room/widgets/word-quiz/WordQuizWidgetView.tsx
@@ -5,21 +5,21 @@ import { RoomWidgetPollMessage } from '../../../../api/nitro/room/widgets/messag
 import { BatchUpdates, CreateEventDispatcherHook } from '../../../../hooks';
 import { useRoomContext } from '../../context/RoomContext';
 import { VALUE_KEY_DISLIKE, VALUE_KEY_LIKE, VoteValue } from './common/VoteValue';
-import { QuestionView } from './views/question/QuestionView';
-import { VoteView } from './views/vote/VoteView';
+import { WordQuizQuestionView } from './WordQuizQuestionView';
+import { WordQuizVoteView } from './WordQuizVoteView';
 
 const DEFAULT_DISPLAY_DELAY = 4000;
 const SIGN_FADE_DELAY = 3;
 
 export const WordQuizWidgetView: FC<{}> = props =>
 {
+    const [ pollId, setPollId ] = useState(-1);
+    const [ question, setQuestion ] = useState<IQuestion>(null);
+    const [ answerSent, setAnswerSent ] = useState(false);
+    const [ questionClearTimeout, setQuestionClearTimeout ] = useState<number>(null);
+    const [ answerCounts, setAnswerCounts ] = useState<Map<string, number>>(new Map());
+    const [ userAnswers, setUserAnswers ] = useState<Map<number, VoteValue>>(new Map());
     const { eventDispatcher = null, widgetHandler = null, roomSession = null } = useRoomContext();
-    const [pollId, setPollId] = useState(-1);
-    const [question, setQuestion] = useState<IQuestion>(null);
-    const [answerSent, setAnswerSent] = useState(false);
-    const [questionClearTimeout, setQuestionClearTimeout] = useState<number>(null);
-    const [answerCounts, setAnswerCounts] = useState<Map<string, number>>(new Map());
-    const [userAnswers, setUserAnswers] = useState<Map<number, VoteValue>>(new Map());
 
     const clearQuestion = useCallback(() =>
     {
@@ -39,33 +39,47 @@ export const WordQuizWidgetView: FC<{}> = props =>
                     setAnswerSent(false);
                     setAnswerCounts(new Map());
                     setUserAnswers(new Map());
-                    if(questionClearTimeout) clearTimeout(questionClearTimeout);
-                });
 
-                if(event.duration > 0)
-                {
-                    const delay = event.duration < 1000 ? DEFAULT_DISPLAY_DELAY : event.duration;
                     setQuestionClearTimeout(prevValue =>
-                    {
-                        if(prevValue) clearTimeout(prevValue);
+                        {
+                            if(prevValue) clearTimeout(prevValue);
 
-                        return setTimeout((clearQuestion as TimerHandler), delay);
-                    })
-                }
+                            if(event.duration > 0)
+                            {
+                                const delay = event.duration < 1000 ? DEFAULT_DISPLAY_DELAY : event.duration;
+    
+                                return setTimeout(() => clearQuestion(), delay) as unknown as number;
+                            }
+    
+                            return null;
+                        });
+                });
                 break;
-            case RoomWidgetWordQuizUpdateEvent.QUESTION_ANSWERED:
+            case RoomWidgetWordQuizUpdateEvent.QUESTION_ANSWERED: {
                 const userData = roomSession.userDataManager.getUserData(event.userId);
+
                 if(!userData) return;
 
-                setAnswerCounts(event.answerCounts);
-
-                if(!userAnswers.has(userData.roomIndex))
+                BatchUpdates(() =>
                 {
-                    const answersCopy = new Map(userAnswers);
-                    answersCopy.set(userData.roomIndex, { value: event.value, secondsLeft: SIGN_FADE_DELAY });
-                    setUserAnswers(answersCopy);
-                }
+                    setAnswerCounts(event.answerCounts);
+
+                    setUserAnswers(prevValue =>
+                        {
+                            if(!prevValue.has(userData.roomIndex))
+                            {
+                                const newValue = new Map(userAnswers);
+
+                                newValue.set(userData.roomIndex, { value: event.value, secondsLeft: SIGN_FADE_DELAY });
+
+                                return newValue;
+                            }
+
+                            return prevValue;
+                        });
+                });
                 break;
+            }
             case RoomWidgetWordQuizUpdateEvent.QUESTION_FINISHED:
                 if(question && question.id === event.questionId)
                 {
@@ -73,18 +87,20 @@ export const WordQuizWidgetView: FC<{}> = props =>
                     {
                         setAnswerCounts(event.answerCounts);
                         setAnswerSent(true);
+
                         setQuestionClearTimeout(prevValue =>
                         {
                             if(prevValue) clearTimeout(prevValue);
 
-                            return setTimeout((clearQuestion as TimerHandler), DEFAULT_DISPLAY_DELAY);
+                            return setTimeout(() => clearQuestion(), DEFAULT_DISPLAY_DELAY) as unknown as number;
                         });
-                    })
+                    });
                 }
+
                 setUserAnswers(new Map());
                 break;
         }
-    }, [clearQuestion, question, questionClearTimeout, roomSession.userDataManager, userAnswers]);
+    }, [ question, roomSession.userDataManager, userAnswers, clearQuestion ]);
 
     CreateEventDispatcherHook(RoomWidgetWordQuizUpdateEvent.NEW_QUESTION, eventDispatcher, onRoomWidgetWordQuizUpdateEvent);
     CreateEventDispatcherHook(RoomWidgetWordQuizUpdateEvent.QUESTION_ANSWERED, eventDispatcher, onRoomWidgetWordQuizUpdateEvent);
@@ -95,49 +111,44 @@ export const WordQuizWidgetView: FC<{}> = props =>
         if(answerSent || !question) return;
 
         const updateMessage = new RoomWidgetPollMessage(RoomWidgetPollMessage.ANSWER, pollId);
+
         updateMessage.questionId = question.id;
         updateMessage.answers = [vote];
-        widgetHandler.processWidgetMessage(updateMessage);
-        setAnswerSent(true);
 
-    }, [answerSent, pollId, question, widgetHandler]);
+        widgetHandler.processWidgetMessage(updateMessage);
+
+        setAnswerSent(true);
+    }, [ answerSent, pollId, question, widgetHandler ]);
 
     const checkSignFade = useCallback(() =>
     {
-        setUserAnswers(prev =>
+        setUserAnswers(prevValue =>
         {
             const keysToRemove: number[] = [];
-            prev.forEach((value, key) =>
+
+            prevValue.forEach((value, key) =>
             {
                 value.secondsLeft--;
 
-                if(value.secondsLeft <= 0)
-                {
-                    keysToRemove.push(key);
-                }
+                if(value.secondsLeft <= 0) keysToRemove.push(key);
             });
 
-            if(keysToRemove.length === 0) return prev;
+            if(keysToRemove.length === 0) return prevValue;
+
+            const copy = new Map(prevValue);
 
-            const copy = new Map(prev);
             keysToRemove.forEach(key => copy.delete(key));
-            return copy;
-        })
 
+            return copy;
+        });
     }, []);
 
     useEffect(() =>
     {
-        const interval = setInterval(() =>
-        {
-            checkSignFade();
-        }, 1000)
+        const interval = setInterval(() => checkSignFade(), 1000);
 
-        return () =>
-        {
-            clearInterval(interval);
-        }
-    }, [checkSignFade]);
+        return () => clearInterval(interval);
+    }, [ checkSignFade ]);
 
     useEffect(() =>
     {
@@ -154,15 +165,10 @@ export const WordQuizWidgetView: FC<{}> = props =>
 
     return (
         <>
-            {question &&
-                <QuestionView question={question.content} canVote={!answerSent} vote={vote} noVotes={answerCounts.get(VALUE_KEY_DISLIKE) || 0} yesVotes={answerCounts.get(VALUE_KEY_LIKE) || 0} />
-            }
-            {userAnswers &&
-                Array.from(userAnswers.entries()).map(([key, value], index) =>
-                {
-                    return <VoteView key={index} userIndex={key} vote={value.value} />
-                })
-            }
+            { question &&
+                <WordQuizQuestionView question={question.content} canVote={!answerSent} vote={vote} noVotes={answerCounts.get(VALUE_KEY_DISLIKE) || 0} yesVotes={answerCounts.get(VALUE_KEY_LIKE) || 0} /> }
+            { userAnswers &&
+                Array.from(userAnswers.entries()).map(([key, value], index) => <WordQuizVoteView key={index} userIndex={key} vote={value.value} />) }
         </>
     );
 }
diff --git a/src/views/room/widgets/word-quiz/views/question/QuestionView.tsx b/src/views/room/widgets/word-quiz/views/question/QuestionView.tsx
deleted file mode 100644
index 2d2b5d17..00000000
--- a/src/views/room/widgets/word-quiz/views/question/QuestionView.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { FC } from 'react';
-import { VALUE_KEY_DISLIKE, VALUE_KEY_LIKE } from '../../common/VoteValue';
-import { QuestionViewProps } from './QuestionView.types';
-
-export const QuestionView:FC<QuestionViewProps> = props =>
-{
-    const { question = null, canVote = null, vote = null, noVotes = null, yesVotes = null } = props;
-    
-    return (
-        <div className="wordquiz-question p-2 d-flex flex-column gap-2">
-            <div className="w-100 d-flex align-items-center gap-2">
-                { !canVote && <button className="btn btn-danger btn-sm">{noVotes}</button> }
-                <div className="question text-center text-break">{question}</div>
-                { !canVote && <button className="btn btn-success btn-sm">{yesVotes}</button> }
-            </div>
-            {canVote && 
-                <div className="w-100 d-flex justify-content-center gap-2">
-                    <button className="btn btn-danger btn-sm"><div className="word-quiz-dislike" onClick={ () => vote(VALUE_KEY_DISLIKE) }/></button>
-                    <button className="btn btn-success btn-sm"><div className="word-quiz-like" onClick={ () => vote(VALUE_KEY_LIKE) }/></button>
-                </div>
-            }
-        </div>
-    )
-}
diff --git a/src/views/room/widgets/word-quiz/views/question/QuestionView.types.ts b/src/views/room/widgets/word-quiz/views/question/QuestionView.types.ts
deleted file mode 100644
index fde51dba..00000000
--- a/src/views/room/widgets/word-quiz/views/question/QuestionView.types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-
-export interface QuestionViewProps
-{
-    question: string;
-    canVote: boolean;
-    vote(value: string): void;
-    noVotes: number;
-    yesVotes: number;
-}
diff --git a/src/views/room/widgets/word-quiz/views/vote/VoteView.tsx b/src/views/room/widgets/word-quiz/views/vote/VoteView.tsx
deleted file mode 100644
index bee02143..00000000
--- a/src/views/room/widgets/word-quiz/views/vote/VoteView.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { RoomObjectCategory } from '@nitrots/nitro-renderer/src';
-import { FC } from 'react';
-import { ObjectLocationView } from '../../../object-location/ObjectLocationView';
-import { VALUE_KEY_DISLIKE } from '../../common/VoteValue';
-import { VoteViewProps } from './VoteView.types';
-
-export const VoteView:FC<VoteViewProps> = props =>
-{
-    const { userIndex = null , vote = null } = props;
-
-    return (
-        <ObjectLocationView objectId={userIndex} category={RoomObjectCategory.UNIT}>
-            <button className={`btn btn-${(vote === VALUE_KEY_DISLIKE) ? 'danger' : 'success'} btn-sm px-1`}><div className={`word-quiz-${(vote === VALUE_KEY_DISLIKE) ? 'dislike' : 'like'}-sm`} /></button>
-        </ObjectLocationView>
-    )
-}
diff --git a/src/views/room/widgets/word-quiz/views/vote/VoteView.types.ts b/src/views/room/widgets/word-quiz/views/vote/VoteView.types.ts
deleted file mode 100644
index 17062cc6..00000000
--- a/src/views/room/widgets/word-quiz/views/vote/VoteView.types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface VoteViewProps
-{
-    userIndex: number;
-    vote: string;
-}

From c7d3022ccb63fb1c1eec789f4fbbe5e1bd3c6c63 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Sun, 27 Feb 2022 20:58:28 -0500
Subject: [PATCH 09/17] Fix catalog offers

---
 src/components/catalog/common/FurnitureOffer.ts     | 13 ++++++++++++-
 src/components/catalog/common/IPurchasableOffer.ts  |  2 ++
 src/components/catalog/common/Offer.ts              | 10 ++++++++++
 .../page/widgets/CatalogItemGridWidgetView.tsx      |  9 +++++----
 .../page/widgets/CatalogPurchaseWidgetView.tsx      | 12 ++++++------
 5 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/src/components/catalog/common/FurnitureOffer.ts b/src/components/catalog/common/FurnitureOffer.ts
index 85d3216a..9197ae9f 100644
--- a/src/components/catalog/common/FurnitureOffer.ts
+++ b/src/components/catalog/common/FurnitureOffer.ts
@@ -1,5 +1,6 @@
-import { IFurnitureData } from '@nitrots/nitro-renderer';
+import { GetProductOfferComposer, IFurnitureData } from '@nitrots/nitro-renderer';
 import { GetProductDataForLocalization } from '../../../api';
+import { SendMessageHook } from '../../../hooks';
 import { ICatalogPage } from './ICatalogPage';
 import { IProduct } from './IProduct';
 import { IPurchasableOffer } from './IPurchasableOffer';
@@ -18,6 +19,11 @@ export class FurnitureOffer implements IPurchasableOffer
         this._product = (new Product(this._furniData.type, this._furniData.id, this._furniData.customParams, 1, GetProductDataForLocalization(this._furniData.className), this._furniData) as IProduct);
     }
 
+    public activate(): void
+    {
+        SendMessageHook(new GetProductOfferComposer((this._furniData.rentOfferId > -1) ? this._furniData.rentOfferId : this._furniData.purchaseOfferId));
+    }
+
     public get offerId(): number
     {
         return (this.isRentOffer) ? this._furniData.rentOfferId : this._furniData.purchaseOfferId;
@@ -107,4 +113,9 @@ export class FurnitureOffer implements IPurchasableOffer
     {
         return this._furniData.description;
     }
+
+    public get isLazy(): boolean
+    {
+        return true;
+    }
 }
diff --git a/src/components/catalog/common/IPurchasableOffer.ts b/src/components/catalog/common/IPurchasableOffer.ts
index cc2693f7..b1828651 100644
--- a/src/components/catalog/common/IPurchasableOffer.ts
+++ b/src/components/catalog/common/IPurchasableOffer.ts
@@ -3,6 +3,7 @@ import { IProduct } from './IProduct';
 
 export interface IPurchasableOffer
 {
+    activate(): void;
     clubLevel: number;
     page: ICatalogPage;
     offerId: number;
@@ -19,5 +20,6 @@ export interface IPurchasableOffer
     badgeCode: string;
     localizationName: string;
     localizationDescription: string;
+    isLazy: boolean;
     products: IProduct[];
 }
diff --git a/src/components/catalog/common/Offer.ts b/src/components/catalog/common/Offer.ts
index 16e30a0c..b39ed48f 100644
--- a/src/components/catalog/common/Offer.ts
+++ b/src/components/catalog/common/Offer.ts
@@ -59,6 +59,11 @@ export class Offer implements IPurchasableOffer
         }
     }
 
+    public activate(): void
+    {
+        
+    }
+
     public get clubLevel(): number
     {
         return this._clubLevel;
@@ -160,6 +165,11 @@ export class Offer implements IPurchasableOffer
         return LocalizeText(this._localizationId);
     }
 
+    public get isLazy(): boolean
+    {
+        return false;
+    }
+
     public get products(): IProduct[]
     {
         return this._products;
diff --git a/src/components/catalog/views/page/widgets/CatalogItemGridWidgetView.tsx b/src/components/catalog/views/page/widgets/CatalogItemGridWidgetView.tsx
index e41ff311..dbb20b17 100644
--- a/src/components/catalog/views/page/widgets/CatalogItemGridWidgetView.tsx
+++ b/src/components/catalog/views/page/widgets/CatalogItemGridWidgetView.tsx
@@ -21,6 +21,10 @@ export const CatalogItemGridWidgetView: FC<CatalogItemGridWidgetViewProps> = pro
 
     const selectOffer = (offer: IPurchasableOffer) =>
     {
+        offer.activate();
+
+        if(offer.isLazy) return;
+        
         setCurrentOffer(offer);
 
         if(offer.product && (offer.product.productType === ProductTypeEnum.WALL))
@@ -31,10 +35,7 @@ export const CatalogItemGridWidgetView: FC<CatalogItemGridWidgetViewProps> = pro
 
     return (
         <AutoGrid columnCount={ columnCount } { ...rest }>
-            { currentPage.offers && (currentPage.offers.length > 0) && currentPage.offers.map((offer, index) =>
-            {
-                return <CatalogGridOfferView key={ index } itemActive={ (currentOffer && (currentOffer.offerId === offer.offerId)) } offer={ offer } onClick={ event => selectOffer(offer) } />;
-            }) }
+            { currentPage.offers && (currentPage.offers.length > 0) && currentPage.offers.map((offer, index) => <CatalogGridOfferView key={ index } itemActive={ (currentOffer && (currentOffer.offerId === offer.offerId)) } offer={ offer } onClick={ event => selectOffer(offer) } />) }
             { children }
         </AutoGrid>
     );
diff --git a/src/components/catalog/views/page/widgets/CatalogPurchaseWidgetView.tsx b/src/components/catalog/views/page/widgets/CatalogPurchaseWidgetView.tsx
index 9b05d88f..d9df7e86 100644
--- a/src/components/catalog/views/page/widgets/CatalogPurchaseWidgetView.tsx
+++ b/src/components/catalog/views/page/widgets/CatalogPurchaseWidgetView.tsx
@@ -106,15 +106,15 @@ export const CatalogPurchaseWidgetView: FC<CatalogPurchaseWidgetViewProps> = pro
 
         let pageId = currentOffer.page.pageId;
 
-        if(pageId === -1)
-        {
-            const nodes = getNodesByOfferId(currentOffer.offerId);
+        // if(pageId === -1)
+        // {
+        //     const nodes = getNodesByOfferId(currentOffer.offerId);
 
-            if(nodes) pageId = nodes[0].pageId;
-        }
+        //     if(nodes) pageId = nodes[0].pageId;
+        // }
 
         SendMessageHook(new PurchaseFromCatalogComposer(pageId, currentOffer.offerId, extraData, quantity));
-    }, [ currentOffer, purchaseCallback, extraData, quantity, getNodesByOfferId ]);
+    }, [ currentOffer, purchaseCallback, extraData, quantity ]);
 
     useEffect(() =>
     {

From 86d1d8ceba6c47a585af36e9fc96ede6f038e60a Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Tue, 1 Mar 2022 00:09:02 -0500
Subject: [PATCH 10/17] Update infostand

---
 .../infostand/InfoStandWidgetBotView.tsx      |  57 +++++
 .../furni => }/InfoStandWidgetFurniView.tsx   | 237 ++++++++++--------
 .../infostand/InfoStandWidgetPetView.tsx      |  85 +++++++
 .../InfoStandWidgetRentableBotView.tsx        |  89 +++++++
 .../InfoStandWidgetUserRelationshipsView.tsx  |  47 ++++
 .../infostand/InfoStandWidgetUserView.tsx     | 177 +++++++++++++
 .../infostand/InfoStandWidgetView.scss        |   2 +-
 .../widgets/infostand/InfoStandWidgetView.tsx |  15 +-
 .../views/base/InfoStandBaseView.tsx          |  20 --
 .../views/base/InfoStandBaseView.types.ts     |   7 -
 .../views/bot/InfoStandWidgetBotView.tsx      |  44 ----
 .../views/bot/InfoStandWidgetBotView.types.ts |   7 -
 .../furni/InfoStandWidgetFurniView.types.ts   |   7 -
 .../views/pet/InfoStandWidgetPetView.tsx      |  55 ----
 .../views/pet/InfoStandWidgetPetView.types.ts |   7 -
 .../InfoStandWidgetRentableBotView.tsx        |  70 ------
 .../InfoStandWidgetRentableBotView.types.ts   |   7 -
 .../views/user/InfoStandWidgetUserView.tsx    | 159 ------------
 .../user/InfoStandWidgetUserView.types.ts     |   7 -
 19 files changed, 601 insertions(+), 498 deletions(-)
 create mode 100644 src/views/room/widgets/infostand/InfoStandWidgetBotView.tsx
 rename src/views/room/widgets/infostand/{views/furni => }/InfoStandWidgetFurniView.tsx (53%)
 create mode 100644 src/views/room/widgets/infostand/InfoStandWidgetPetView.tsx
 create mode 100644 src/views/room/widgets/infostand/InfoStandWidgetRentableBotView.tsx
 create mode 100644 src/views/room/widgets/infostand/InfoStandWidgetUserRelationshipsView.tsx
 create mode 100644 src/views/room/widgets/infostand/InfoStandWidgetUserView.tsx
 delete mode 100644 src/views/room/widgets/infostand/views/base/InfoStandBaseView.tsx
 delete mode 100644 src/views/room/widgets/infostand/views/base/InfoStandBaseView.types.ts
 delete mode 100644 src/views/room/widgets/infostand/views/bot/InfoStandWidgetBotView.tsx
 delete mode 100644 src/views/room/widgets/infostand/views/bot/InfoStandWidgetBotView.types.ts
 delete mode 100644 src/views/room/widgets/infostand/views/furni/InfoStandWidgetFurniView.types.ts
 delete mode 100644 src/views/room/widgets/infostand/views/pet/InfoStandWidgetPetView.tsx
 delete mode 100644 src/views/room/widgets/infostand/views/pet/InfoStandWidgetPetView.types.ts
 delete mode 100644 src/views/room/widgets/infostand/views/rentable-bot/InfoStandWidgetRentableBotView.tsx
 delete mode 100644 src/views/room/widgets/infostand/views/rentable-bot/InfoStandWidgetRentableBotView.types.ts
 delete mode 100644 src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx
 delete mode 100644 src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.types.ts

diff --git a/src/views/room/widgets/infostand/InfoStandWidgetBotView.tsx b/src/views/room/widgets/infostand/InfoStandWidgetBotView.tsx
new file mode 100644
index 00000000..dac8f179
--- /dev/null
+++ b/src/views/room/widgets/infostand/InfoStandWidgetBotView.tsx
@@ -0,0 +1,57 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FC } from 'react';
+import { LocalizeText, RoomWidgetUpdateInfostandUserEvent } from '../../../../api';
+import { Column, Flex, Text } from '../../../../common';
+import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
+import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
+
+interface InfoStandWidgetBotViewProps
+{
+    botData: RoomWidgetUpdateInfostandUserEvent;
+    close: () => void;
+}
+
+export const InfoStandWidgetBotView: FC<InfoStandWidgetBotViewProps> = props =>
+{
+    const { botData = null, close = null } = props;
+
+    if(!botData) return null;
+
+    return (
+        <Column className="nitro-infostand rounded">
+            <Column overflow="visible" className="container-fluid content-area" gap={ 1 }>
+                <Column gap={ 1 }>
+                    <Flex alignItems="center" justifyContent="between" gap={ 1 }>
+                        <Text variant="white" small wrap>{ botData.name }</Text>
+                        <FontAwesomeIcon icon="times" className="cursor-pointer" onClick={ close } />
+                    </Flex>
+                    <hr className="m-0" />
+                </Column>
+                <Column gap={ 1 }>
+                    <Flex gap={ 1 }>
+                        <Column fullWidth className="body-image bot">
+                            <AvatarImageView figure={ botData.figure } direction={ 4 } />
+                        </Column>
+                        <Column grow center gap={ 0 }>
+                            { (botData.badges.length > 0) && botData.badges.map(result =>
+                            {
+                                return <BadgeImageView key={ result } badgeCode={ result } showInfo={ true } />;
+                            }) }
+                        </Column>
+                    </Flex>
+                    <hr className="m-0" />
+                </Column>
+                <Flex alignItems="center" className="bg-light-dark rounded py-1 px-2">
+                    <Text fullWidth wrap textBreak variant="white" small className="motto-content">{ botData.motto }</Text>
+                </Flex>
+                { (botData.carryItem > 0) &&
+                    <Column gap={ 1 }>
+                        <hr className="m-0" />
+                        <Text variant="white" small wrap>
+                            { LocalizeText('infostand.text.handitem', [ 'item' ], [ LocalizeText('handitem' + botData.carryItem) ]) }
+                        </Text>
+                    </Column> }
+            </Column>
+        </Column>
+    );
+}
diff --git a/src/views/room/widgets/infostand/views/furni/InfoStandWidgetFurniView.tsx b/src/views/room/widgets/infostand/InfoStandWidgetFurniView.tsx
similarity index 53%
rename from src/views/room/widgets/infostand/views/furni/InfoStandWidgetFurniView.tsx
rename to src/views/room/widgets/infostand/InfoStandWidgetFurniView.tsx
index d848327d..eae29e55 100644
--- a/src/views/room/widgets/infostand/views/furni/InfoStandWidgetFurniView.tsx
+++ b/src/views/room/widgets/infostand/InfoStandWidgetFurniView.tsx
@@ -1,14 +1,20 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { CrackableDataType, GroupInformationComposer, GroupInformationEvent, RoomControllerLevel, RoomObjectCategory, RoomObjectVariable, RoomWidgetEnumItemExtradataParameter, RoomWidgetFurniInfoUsagePolicyEnum, SetObjectDataMessageComposer, StringDataType } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
-import { CreateLinkEvent, GetGroupInformation, GetRoomEngine, LocalizeText, RoomWidgetFurniActionMessage } from '../../../../../../api';
-import { CreateMessageHook, SendMessageHook } from '../../../../../../hooks';
-import { UserProfileIconView } from '../../../../../../layout';
-import { BadgeImageView } from '../../../../../shared/badge-image/BadgeImageView';
-import { LimitedEditionCompactPlateView } from '../../../../../shared/limited-edition/LimitedEditionCompactPlateView';
-import { RarityLevelView } from '../../../../../shared/rarity-level/RarityLevelView';
-import { useRoomContext } from '../../../../context/RoomContext';
-import { InfoStandBaseView } from '../base/InfoStandBaseView';
-import { InfoStandWidgetFurniViewProps } from './InfoStandWidgetFurniView.types';
+import { CreateLinkEvent, GetGroupInformation, GetRoomEngine, LocalizeText, RoomWidgetFurniActionMessage, RoomWidgetUpdateInfostandFurniEvent } from '../../../../api';
+import { Button, Column, Flex, Text } from '../../../../common';
+import { BatchUpdates, CreateMessageHook, SendMessageHook } from '../../../../hooks';
+import { UserProfileIconView } from '../../../../layout';
+import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
+import { LimitedEditionCompactPlateView } from '../../../shared/limited-edition/LimitedEditionCompactPlateView';
+import { RarityLevelView } from '../../../shared/rarity-level/RarityLevelView';
+import { useRoomContext } from '../../context/RoomContext';
+
+interface InfoStandWidgetFurniViewProps
+{
+    furniData: RoomWidgetUpdateInfostandFurniEvent;
+    close: () => void;
+}
 
 const PICKUP_MODE_NONE: number = 0;
 const PICKUP_MODE_EJECT: number = 1;
@@ -117,19 +123,22 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
 
         if(furniData.isStickie) pickupMode = PICKUP_MODE_NONE;
 
-        setPickupMode(pickupMode);
-        setCanMove(canMove);
-        setCanRotate(canRotate);
-        setCanUse(canUse);
-        setFurniKeys(furniKeyss);
-        setFurniValues(furniValuess);
-        setCustomKeys(customKeyss);
-        setCustomValues(customValuess);
-        setIsCrackable(isCrackable);
-        setCrackableHits(crackableHits);
-        setCrackableTarget(crackableTarget);
-        setGodMode(godMode);
-        setGroupName(null);
+        BatchUpdates(() =>
+        {
+            setPickupMode(pickupMode);
+            setCanMove(canMove);
+            setCanRotate(canRotate);
+            setCanUse(canUse);
+            setFurniKeys(furniKeyss);
+            setFurniValues(furniValuess);
+            setCustomKeys(customKeyss);
+            setCustomValues(customValuess);
+            setIsCrackable(isCrackable);
+            setCrackableHits(crackableHits);
+            setCrackableTarget(crackableTarget);
+            setGodMode(godMode);
+            setGroupName(null);
+        });
         
         if(furniData.groupId) SendMessageHook(new GroupInformationComposer(furniData.groupId, false));
     }, [ roomSession, furniData ]);
@@ -247,97 +256,125 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
     if(!furniData) return null;
 
     return (
-        <>
-            <InfoStandBaseView headerText={ furniData.name } onCloseClick={ close }>
-                <div className="position-relative w-100">
-                    { furniData.stuffData.isUnique &&
-                        <div className="position-absolute end-0">
-                            <LimitedEditionCompactPlateView uniqueNumber={ furniData.stuffData.uniqueNumber } uniqueSeries={ furniData.stuffData.uniqueSeries } />
-                        </div> }
-                    { (furniData.stuffData.rarityLevel > -1) &&
-                        <div className="position-absolute end-0">
-                            <RarityLevelView level={ furniData.stuffData.rarityLevel } />
-                        </div> }
-                    { furniData.image && furniData.image.src.length && 
-                        <img className="d-block mx-auto" src={ furniData.image.src } alt="" /> }
-                </div>
-                <hr className="m-0 my-1" />
-                <div className="small text-wrap">{ furniData.description }</div>
-                <hr className="m-0 my-1" />
-                <div className="d-flex align-items-center">
-                    <UserProfileIconView userId={ furniData.ownerId } />
-                    <div className="small text-wrap">{ LocalizeText('furni.owner', [ 'name' ], [ furniData.ownerName ]) }</div>
-                </div>
-                { (furniData.purchaseOfferId > 0) && <button type="button" className="btn btn-primary btn-sm mt-1" onClick={ event => processButtonAction('buy_one') }>{ LocalizeText('infostand.button.buy') }</button> }
-                { isCrackable &&
-                    <>
-                        <hr className="m-0 my-1" />
-                        <div className="small text-wrap">{ LocalizeText('infostand.crackable_furni.hits_remaining', [ 'hits', 'target' ], [ crackableHits.toString(), crackableTarget.toString() ]) }</div>
-                    </> }
-                { furniData.groupId > 0 &&
-                    <>
-                        <hr className="m-0 my-1" />
-                        <div className="d-flex align-items-center cursor-pointer text-decoration-underline gap-2" onClick={ () => GetGroupInformation(furniData.groupId) }>
-                            <BadgeImageView badgeCode={ getGroupBadgeCode() } isGroup={ true } />
-                            <div>{ groupName }</div>
-                        </div>
-                    </> }
-                { godMode &&
-                    <>
-                        <hr className="m-0 my-1" />
-                        <div className="small text-wrap">ID: { furniData.id }</div>
-                        { (furniKeys.length > 0) &&
+        <Column gap={ 1 } alignItems="end">
+            <Column className="nitro-infostand rounded">
+                <Column overflow="visible" className="container-fluid content-area" gap={ 1 }>
+                    <Column gap={ 1 }>
+                        <Flex alignItems="center" justifyContent="between" gap={ 1 }>
+                            <Text variant="white" small wrap>{ furniData.name }</Text>
+                            <FontAwesomeIcon icon="times" className="cursor-pointer" onClick={ close } />
+                        </Flex>
+                        <hr className="m-0" />
+                    </Column>
+                    <Column gap={ 1 }>
+                        <Flex position="relative" gap={ 1 }>
+                            { furniData.stuffData.isUnique &&
+                                <div className="position-absolute end-0">
+                                    <LimitedEditionCompactPlateView uniqueNumber={ furniData.stuffData.uniqueNumber } uniqueSeries={ furniData.stuffData.uniqueSeries } />
+                                </div> }
+                            { (furniData.stuffData.rarityLevel > -1) &&
+                                <div className="position-absolute end-0">
+                                    <RarityLevelView level={ furniData.stuffData.rarityLevel } />
+                                </div> }
+                            { furniData.image && furniData.image.src.length && 
+                                <img className="d-block mx-auto" src={ furniData.image.src } alt="" /> }
+                        </Flex>
+                        <hr className="m-0" />
+                    </Column>
+                    <Column gap={ 1 }>
+                        <Text fullWidth wrap textBreak variant="white" small>{ furniData.description }</Text>
+                        <hr className="m-0" />
+                    </Column>
+                    <Column gap={ 1 }>
+                        <Flex alignItems="center" gap={ 1 }>
+                            <UserProfileIconView userId={ furniData.ownerId } />
+                            <Text variant="white" small wrap>
+                                { LocalizeText('furni.owner', [ 'name' ], [ furniData.ownerName ]) }
+                            </Text>
+                        </Flex>
+                        { (furniData.purchaseOfferId > 0) &&
+                            <Flex>
+                                <Text variant="white" small underline pointer onClick={ event => processButtonAction('buy_one') }>
+                                    { LocalizeText('infostand.button.buy') }
+                                </Text>
+                            </Flex> }
+                    </Column>
+                    <Column gap={ 1 }>
+                        { isCrackable &&
+                            <>
+                                <hr className="m-0" />
+                                <Text variant="white" small wrap>{ LocalizeText('infostand.crackable_furni.hits_remaining', [ 'hits', 'target' ], [ crackableHits.toString(), crackableTarget.toString() ]) }</Text>
+                            </> }
+                        { furniData.groupId > 0 &&
+                            <>
+                                <hr className="m-0" />
+                                <Flex pointer alignItems="center" gap={ 2 } onClick={ () => GetGroupInformation(furniData.groupId) }>
+                                    <BadgeImageView badgeCode={ getGroupBadgeCode() } isGroup={ true } />
+                                    <Text variant="white" underline>{ groupName }</Text>
+                                </Flex>
+                            </> }
+                        { godMode &&
+                            <>
+                                <hr className="m-0" />
+                                <Text small wrap variant="white">ID: { furniData.id }</Text>
+                                { (furniKeys.length > 0) &&
+                                    <>
+                                        <hr className="m-0"/>
+                                        <Column gap={ 1 }>
+                                            { furniKeys.map((key, index) =>
+                                                {
+                                                    return (
+                                                        <Flex key={ index } alignItems="center" gap={ 1 }>
+                                                            <Text small wrap align="end" variant="white" className="col-4">{ key }</Text>
+                                                            <input type="text" className="form-control form-control-sm" value={ furniValues[index] } onChange={ event => onFurniSettingChange(index, event.target.value) }/>
+                                                        </Flex>);
+                                                }) }
+                                        </Column>
+                                    </> }
+                            </> }
+                        { (customKeys.length > 0) &&
                             <>
                                 <hr className="m-0 my-1"/>
-                                { furniKeys.map((key, index) =>
-                                    {
-                                        return (
-                                            <div key={ index } className="mb-1">
-                                                <div className="small text-wrap">{ key }</div>
-                                                <input type="text" className="form-control form-control-sm" value={ furniValues[index] } onChange={ event => onFurniSettingChange(index, event.target.value) }/>
-                                            </div>);
-                                    }) }
+                                <Column gap={ 1 }>
+                                    { customKeys.map((key, index) =>
+                                        {
+                                            return (
+                                                <Flex key={ index } alignItems="center" gap={ 1 }>
+                                                    <Text small wrap align="end" variant="white" className="col-4">{ key }</Text>
+                                                    <input type="text" className="form-control form-control-sm" value={ customValues[index] } onChange={ event => onCustomVariableChange(index, event.target.value) }/>
+                                                </Flex>);
+                                        }) }
+                                </Column>
                             </> }
-                    </> }
-                { (customKeys.length > 0) &&
-                    <>
-                        <hr className="m-0 my-1"/>
-                        { customKeys.map((key, index) =>
-                            {
-                                return (
-                                    <div key={ index } className="mb-1">
-                                        <div className="small text-wrap">{ key }</div>
-                                        <input type="text" className="form-control form-control-sm" value={ customValues[index] } onChange={ event => onCustomVariableChange(index, event.target.value) }/>
-                                    </div>);
-                            }) }
-                    </> }
-            </InfoStandBaseView>
-            <div className="button-container mt-2">
+                    </Column>
+                </Column>
+            </Column>
+            <Flex gap={ 1 } justifyContent="end">
                 { canMove &&
-                    <button type="button" className="btn btn-sm btn-dark" onClick={ event => processButtonAction('move') }>
+                    <Button variant="dark" onClick={ event => processButtonAction('move') }>
                         { LocalizeText('infostand.button.move') }
-                    </button> }
+                    </Button> }
                 { canRotate &&
-                    <button type="button" className="btn btn-sm btn-dark ms-1" onClick={ event => processButtonAction('rotate') }>
+                    <Button variant="dark" onClick={ event => processButtonAction('rotate') }>
                         { LocalizeText('infostand.button.rotate') }
-                    </button> }
+                    </Button> }
                 { canUse &&
-                    <button type="button" className="btn btn-sm btn-dark ms-1" onClick={ event => processButtonAction('use') }>
+                    <Button variant="dark" onClick={ event => processButtonAction('use') }>
                         { LocalizeText('infostand.button.use') }
-                    </button>}
+                    </Button>}
                 { (pickupMode !== PICKUP_MODE_NONE) &&
-                    <button type="button" className="btn btn-sm btn-dark ms-1" onClick={ event => processButtonAction('pickup') }>
+                    <Button variant="dark" onClick={ event => processButtonAction('pickup') }>
                         { LocalizeText((pickupMode === PICKUP_MODE_EJECT) ? 'infostand.button.eject' : 'infostand.button.pickup') }
-                    </button> }
+                    </Button> }
                 { ((furniKeys.length > 0 && furniValues.length > 0) && (furniKeys.length === furniValues.length)) &&
-                    <button className="btn btn-sm btn-dark ms-1" onClick={ () => processButtonAction('save_branding_configuration') }>
+                    <Button variant="dark" onClick={ () => processButtonAction('save_branding_configuration') }>
                         { LocalizeText('save') }
-                    </button> }
+                    </Button> }
                 { ((customKeys.length > 0 && customValues.length > 0) && (customKeys.length === customValues.length)) &&
-                    <button className="btn btn-sm btn-dark ms-1" onClick={ () => processButtonAction('save_custom_variables') }>
-                        Set values
-                    </button> }
-            </div>
-        </>
+                    <Button variant="dark" onClick={ () => processButtonAction('save_custom_variables') }>
+                        { LocalizeText('save') }
+                    </Button> }
+            </Flex>
+        </Column>
     );
 }
diff --git a/src/views/room/widgets/infostand/InfoStandWidgetPetView.tsx b/src/views/room/widgets/infostand/InfoStandWidgetPetView.tsx
new file mode 100644
index 00000000..1b6f14d1
--- /dev/null
+++ b/src/views/room/widgets/infostand/InfoStandWidgetPetView.tsx
@@ -0,0 +1,85 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FC } from 'react';
+import { LocalizeText, RoomWidgetUpdateInfostandPetEvent } from '../../../../api';
+import { Base, Column, Flex, Text } from '../../../../common';
+import { UserProfileIconView } from '../../../../layout';
+import { PetImageView } from '../../../shared/pet-image/PetImageView';
+
+interface InfoStandWidgetPetViewProps
+{
+    petData: RoomWidgetUpdateInfostandPetEvent;
+    close: () => void;
+}
+
+export const InfoStandWidgetPetView: FC<InfoStandWidgetPetViewProps> = props =>
+{
+    const { petData = null, close = null } = props;
+
+    if(!petData) return null;
+
+    return (
+        <Column className="nitro-infostand rounded">
+            <Column overflow="visible" className="container-fluid content-area" gap={ 1 }>
+                <Column gap={ 1 }>
+                    <Flex alignItems="center" justifyContent="between" gap={ 1 }>
+                        <Text variant="white" small wrap>{ petData.name }</Text>
+                        <FontAwesomeIcon icon="times" className="cursor-pointer" onClick={ close } />
+                    </Flex>
+                    <Text variant="white" small wrap>{ LocalizeText(`pet.breed.${ petData.petType }.${ petData.petBreed }`) }</Text>
+                    <hr className="m-0" />
+                </Column>
+                <Column gap={ 1 }>
+                    <Flex gap={ 1 }>
+                        <Column fullWidth overflow="hidden" className="body-image pet p-1">
+                            <PetImageView figure={ petData.petFigure } posture={ petData.posture } direction={ 4 } />
+                        </Column>
+                        <Column grow gap={ 1 }>
+                            <Text variant="white" center small wrap>{ LocalizeText('pet.level', [ 'level', 'maxlevel' ], [ petData.level.toString(), petData.maximumLevel.toString() ]) }</Text>
+                            <Column alignItems="center" gap={ 1 }>
+                                <Text variant="white" small truncate>{ LocalizeText('infostand.pet.text.happiness') }</Text>
+                                <Base fullWidth overflow="hidden" position="relative" className="bg-light-dark rounded">
+                                    <Flex fit center position="absolute">
+                                        <Text variant="white" small>{ petData.happyness + '/' + petData.maximumHappyness }</Text>
+                                    </Flex>
+                                    <Base className="bg-info rounded pet-stats" style={{ width: (petData.happyness / petData.maximumHappyness) * 100 + '%' }} />
+                                </Base>
+                            </Column>
+                            <Column alignItems="center" gap={ 1 }>
+                                <Text variant="white" small truncate>{ LocalizeText('infostand.pet.text.experience') }</Text>
+                                <Base fullWidth overflow="hidden" position="relative" className="bg-light-dark rounded">
+                                    <Flex fit center position="absolute">
+                                        <Text variant="white" small>{ petData.experience + '/' + petData.levelExperienceGoal }</Text>
+                                    </Flex>
+                                    <Base className="bg-purple rounded pet-stats" style={{ width: (petData.experience / petData.levelExperienceGoal) * 100 + '%' }} />
+                                </Base>
+                            </Column>
+                            <Column alignItems="center" gap={ 1 }>
+                                <Text variant="white" small truncate>{ LocalizeText('infostand.pet.text.energy') }</Text>
+                                <Base fullWidth overflow="hidden" position="relative" className="bg-light-dark rounded">
+                                    <Flex fit center position="absolute">
+                                        <Text variant="white" small>{ petData.energy + '/' + petData.maximumEnergy }</Text>
+                                    </Flex>
+                                    <Base className="bg-success rounded pet-stats" style={{ width: (petData.energy / petData.maximumEnergy) * 100 + '%' }} />
+                                </Base>
+                            </Column>
+                        </Column>
+                    </Flex>
+                    <hr className="m-0" />
+                </Column>
+                <Column gap={ 1 }>
+                    <Text variant="white" small wrap>{ LocalizeText('infostand.text.petrespect', [ 'count' ], [ petData.respect.toString() ]) }</Text>
+                    <Text variant="white" small wrap>{ LocalizeText('pet.age', [ 'age' ], [ petData.age.toString() ]) }</Text>
+                    <hr className="m-0" />
+                </Column>
+                <Column gap={ 1 }>
+                    <Flex alignItems="center" gap={ 1 }>
+                        <UserProfileIconView userId={ petData.ownerId } />
+                        <Text variant="white" small wrap>
+                            { LocalizeText('infostand.text.petowner', [ 'name' ], [ petData.ownerName ]) }
+                        </Text>
+                    </Flex>
+                </Column>
+            </Column>
+        </Column>
+    );
+}
diff --git a/src/views/room/widgets/infostand/InfoStandWidgetRentableBotView.tsx b/src/views/room/widgets/infostand/InfoStandWidgetRentableBotView.tsx
new file mode 100644
index 00000000..d3847d31
--- /dev/null
+++ b/src/views/room/widgets/infostand/InfoStandWidgetRentableBotView.tsx
@@ -0,0 +1,89 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { BotRemoveComposer } from '@nitrots/nitro-renderer';
+import { FC, useMemo } from 'react';
+import { LocalizeText, RoomWidgetUpdateInfostandRentableBotEvent } from '../../../../api';
+import { Button, Column, Flex, Text } from '../../../../common';
+import { SendMessageHook } from '../../../../hooks';
+import { UserProfileIconView } from '../../../../layout';
+import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
+import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
+import { BotSkillsEnum } from '../avatar-info/common/BotSkillsEnum';
+
+interface InfoStandWidgetRentableBotViewProps
+{
+    rentableBotData: RoomWidgetUpdateInfostandRentableBotEvent;
+    close: () => void;
+}
+
+export const InfoStandWidgetRentableBotView: FC<InfoStandWidgetRentableBotViewProps> = props =>
+{
+    const { rentableBotData = null, close = null } = props;
+
+    const canPickup = useMemo(() =>
+    {
+        if(rentableBotData.botSkills.indexOf(BotSkillsEnum.NO_PICK_UP) >= 0) return false;
+
+        if(!rentableBotData.amIOwner && !rentableBotData.amIAnyRoomController) return false;
+
+        return true;
+    }, [ rentableBotData ]);
+
+    const pickupBot = () => SendMessageHook(new BotRemoveComposer(rentableBotData.webID));
+    
+    if(!rentableBotData) return;
+
+    return (
+        <Column gap={ 1 }>
+            <Column className="nitro-infostand rounded">
+                <Column overflow="visible" className="container-fluid content-area" gap={ 1 }>
+                    <Column gap={ 1 }>
+                        <Flex alignItems="center" justifyContent="between" gap={ 1 }>
+                            <Text variant="white" small wrap>{ rentableBotData.name }</Text>
+                            <FontAwesomeIcon icon="times" className="cursor-pointer" onClick={ close } />
+                        </Flex>
+                        <hr className="m-0" />
+                    </Column>
+                    <Column gap={ 1 }>
+                        <Flex gap={ 1 }>
+                            <Column fullWidth className="body-image bot">
+                                <AvatarImageView figure={ rentableBotData.figure } direction={ 4 } />
+                            </Column>
+                            <Column grow center gap={ 0 }>
+                                { (rentableBotData.badges.length > 0) && rentableBotData.badges.map(result =>
+                                {
+                                    return <BadgeImageView key={ result } badgeCode={ result } showInfo={ true } />;
+                                }) }
+                            </Column>
+                        </Flex>
+                        <hr className="m-0" />
+                    </Column>
+                    <Column gap={ 1 }>
+                        <Flex alignItems="center" className="bg-light-dark rounded py-1 px-2">
+                            <Text fullWidth wrap textBreak variant="white" small className="motto-content">{ rentableBotData.motto }</Text>
+                        </Flex>
+                        <hr className="m-0" />
+                    </Column>
+                    <Column gap={ 1 }>
+                        <Flex alignItems="center" gap={ 1 }>
+                            <UserProfileIconView userId={ rentableBotData.ownerId } />
+                            <Text variant="white" small wrap>
+                                { LocalizeText('infostand.text.botowner', [ 'name' ], [ rentableBotData.ownerName ]) }
+                            </Text>
+                        </Flex>
+                        { (rentableBotData.carryItem > 0) &&
+                            <>
+                                <hr className="m-0" />
+                                <Text variant="white" small wrap>
+                                    { LocalizeText('infostand.text.handitem', [ 'item' ], [ LocalizeText('handitem' + rentableBotData.carryItem) ]) }
+                                </Text>
+                            </> }
+                    </Column>
+                </Column>
+            </Column>
+            { canPickup &&
+                <Flex justifyContent="end">
+                    <Button variant="dark" onClick={ pickupBot }>{ LocalizeText('infostand.button.pickup') }</Button>
+                </Flex> }
+        </Column>
+    );
+}
diff --git a/src/views/room/widgets/infostand/InfoStandWidgetUserRelationshipsView.tsx b/src/views/room/widgets/infostand/InfoStandWidgetUserRelationshipsView.tsx
new file mode 100644
index 00000000..dea72734
--- /dev/null
+++ b/src/views/room/widgets/infostand/InfoStandWidgetUserRelationshipsView.tsx
@@ -0,0 +1,47 @@
+import { RelationshipStatusEnum, RelationshipStatusInfoMessageParser } from '@nitrots/nitro-renderer';
+import { FC } from 'react';
+import { GetUserProfile, LocalizeText } from '../../../../api';
+import { Flex, Text } from '../../../../common';
+
+interface InfoStandWidgetUserRelationshipsViewProps
+{
+    relationships: RelationshipStatusInfoMessageParser;
+}
+
+interface InfoStandWidgetUserRelationshipsRelationshipViewProps
+{
+    type: number;
+}
+
+export const InfoStandWidgetUserRelationshipsView: FC<InfoStandWidgetUserRelationshipsViewProps> = props =>
+{
+    const { relationships = null } = props;
+
+    const RelationshipComponent = ({ type }: InfoStandWidgetUserRelationshipsRelationshipViewProps) =>
+    {
+        const relationshipInfo = (relationships && relationships.relationshipStatusMap.hasKey(type)) ? relationships.relationshipStatusMap.getValue(type) : null;
+
+        if(!relationshipInfo || !relationshipInfo.friendCount) return null;
+
+        const relationshipName = RelationshipStatusEnum.RELATIONSHIP_NAMES[type].toLocaleLowerCase();
+
+        return (
+            <Flex alignItems="center" gap={ 1 }>
+                <i className={`nitro-friends-spritesheet icon-${relationshipName}`} />
+                <Flex alignItems="center" gap={ 0 }>
+                    <Text variant="white" onClick={ event => GetUserProfile(relationshipInfo.randomFriendId) }>{ relationshipInfo.randomFriendName }</Text>
+                    { (relationshipInfo.friendCount > 1) &&
+                        <Text variant="white">{ ' ' + LocalizeText(`extendedprofile.relstatus.others.${ relationshipName }`, [ 'count' ], [ (relationshipInfo.friendCount - 1).toString() ]) }</Text> }
+                </Flex>
+            </Flex>
+        );
+    }
+
+    return (
+        <>
+            <RelationshipComponent type={ RelationshipStatusEnum.HEART } />
+            <RelationshipComponent type={ RelationshipStatusEnum.SMILE } />
+            <RelationshipComponent type={ RelationshipStatusEnum.BOBBA } />
+        </>
+    );
+}
diff --git a/src/views/room/widgets/infostand/InfoStandWidgetUserView.tsx b/src/views/room/widgets/infostand/InfoStandWidgetUserView.tsx
new file mode 100644
index 00000000..f2faaaae
--- /dev/null
+++ b/src/views/room/widgets/infostand/InfoStandWidgetUserView.tsx
@@ -0,0 +1,177 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { RelationshipStatusInfoEvent, RelationshipStatusInfoMessageParser, RoomSessionUserBadgesEvent, UserRelationshipsComposer } from '@nitrots/nitro-renderer';
+import { FC, FocusEvent, KeyboardEvent, useCallback, useEffect, useState } from 'react';
+import { GetConfiguration, GetGroupInformation, LocalizeText, RoomWidgetChangeMottoMessage, RoomWidgetUpdateInfostandUserEvent } from '../../../../api';
+import { Column, Text } from '../../../../common';
+import { Base } from '../../../../common/Base';
+import { Flex } from '../../../../common/Flex';
+import { BatchUpdates, CreateMessageHook, SendMessageHook } from '../../../../hooks';
+import { CreateEventDispatcherHook } from '../../../../hooks/events';
+import { UserProfileIconView } from '../../../../layout';
+import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
+import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
+import { useRoomContext } from '../../context/RoomContext';
+import { InfoStandWidgetUserRelationshipsView } from './InfoStandWidgetUserRelationshipsView';
+
+interface InfoStandWidgetUserViewProps
+{
+    userData: RoomWidgetUpdateInfostandUserEvent;
+    close: () => void;
+}
+
+export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =>
+{
+    const { userData = null, close = null } = props;
+    const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
+    const [ badges, setBadges ] = useState<string[]>([]);
+    const [ motto, setMotto ] = useState(null);
+    const [ isEditingMotto, setIsEditingMotto ] = useState(false);
+    const [ userRelationships, setUserRelationships ] = useState<RelationshipStatusInfoMessageParser>(null);
+
+    const maxBadgeCount = GetConfiguration<number>('user.badges.max.slots', 5);
+
+    const saveMotto = (motto: string) =>
+    {
+        if(motto.length > 38) return;
+
+        widgetHandler.processWidgetMessage(new RoomWidgetChangeMottoMessage(motto));
+
+        setIsEditingMotto(false);
+    }
+
+    const onMottoBlur = (event: FocusEvent<HTMLInputElement>) => saveMotto(event.target.value);
+
+    const onMottoKeyDown = (event: KeyboardEvent<HTMLInputElement>) =>
+    {
+        event.stopPropagation();
+        
+        switch(event.key)
+        {
+            case 'Enter':
+                saveMotto((event.target as HTMLInputElement).value);
+                return;
+        }
+    }
+
+    const onRoomSessionUserBadgesEvent = useCallback((event: RoomSessionUserBadgesEvent) =>
+    {
+        if(!userData || (userData.webID !== event.userId)) return;
+
+        setBadges(event.badges);
+    }, [ userData ]);
+
+    CreateEventDispatcherHook(RoomSessionUserBadgesEvent.RSUBE_BADGES, eventDispatcher, onRoomSessionUserBadgesEvent);
+
+    const onUserRelationshipsEvent = useCallback((event: RelationshipStatusInfoEvent) =>
+    {
+        const parser = event.getParser();
+
+        if(!userData || (userData.webID !== parser.userId)) return;
+        
+        setUserRelationships(parser);
+    }, [ userData ]);
+
+    CreateMessageHook(RelationshipStatusInfoEvent, onUserRelationshipsEvent);
+
+    useEffect(() =>
+    {
+        BatchUpdates(() =>
+        {
+            setBadges(userData.badges);
+            setIsEditingMotto(false);
+            setMotto(userData.motto);
+        });
+        
+        SendMessageHook(new UserRelationshipsComposer(userData.webID));
+
+        return () => 
+        {
+            setBadges([]);
+            setUserRelationships(null);
+        }
+    }, [ userData ]);
+
+    if(!userData) return null;
+
+    return (
+        <Column className="nitro-infostand rounded">
+            <Column overflow="visible" className="container-fluid content-area" gap={ 1 }>
+                <Column gap={ 1 }>
+                    <Flex alignItems="center" justifyContent="between">
+                        <Flex alignItems="center" gap={ 1 }>
+                            <UserProfileIconView userId={ userData.webID } />
+                            <Text variant="white" small wrap>{ userData.name }</Text>
+                        </Flex>
+                        <FontAwesomeIcon icon="times" className="cursor-pointer" onClick={ close } />
+                    </Flex>
+                    <hr className="m-0" />
+                </Column>
+                <Column gap={ 1 }>
+                    <Flex gap={ 1 }>
+                        <Column fullWidth className="body-image">
+                            <AvatarImageView figure={ userData.figure } direction={ 4 } />
+                        </Column>
+                        <Column grow gap={ 0 }>
+                            <Flex gap={ 1 }>
+                                <Base className="badge-image">
+                                    { badges[0] && <BadgeImageView badgeCode={ badges[0] } showInfo={ true } /> }
+                                </Base>
+                                <Base pointer={ ( userData.groupId > 0) } className="badge-image" onClick={ event => GetGroupInformation(userData.groupId) }>
+                                    { userData.groupId > 0 &&
+                                        <BadgeImageView badgeCode={ userData.groupBadgeId } isGroup={ true } showInfo={ true } customTitle={ userData.groupName } /> }
+                                </Base>
+                            </Flex>
+                            <Flex gap={ 1 }>
+                                <Base className="badge-image">
+                                    { badges[1] && <BadgeImageView badgeCode={ badges[1] } showInfo={ true } /> }
+                                </Base>
+                                <Base className="badge-image">
+                                    { badges[2] && <BadgeImageView badgeCode={ badges[2] } showInfo={ true } /> }
+                                </Base>
+                            </Flex>
+                            <Flex gap={ 1 }>
+                                <Base className="badge-image">
+                                    { badges[3] && <BadgeImageView badgeCode={ badges[3] } showInfo={ true } /> }
+                                </Base>
+                                <Base className="badge-image">
+                                    { badges[4] && <BadgeImageView badgeCode={ badges[4] } showInfo={ true } /> }
+                                </Base>
+                            </Flex>
+                        </Column>
+                    </Flex>
+                    <hr className="m-0" />
+                </Column>
+                <Column gap={ 1 }>
+                    <Flex alignItems="center" className="bg-light-dark rounded py-1 px-2">
+                        { (userData.type !== RoomWidgetUpdateInfostandUserEvent.OWN_USER) &&
+                            <Text fullWidth wrap textBreak variant="white" small className="motto-content">{ motto }</Text> }
+                        { userData.type === RoomWidgetUpdateInfostandUserEvent.OWN_USER &&
+                            <Flex grow alignItems="center" gap={ 2 }>
+                                <FontAwesomeIcon icon="pencil-alt" className="small" />
+                                { !isEditingMotto &&
+                                    <Text fullWidth pointer wrap textBreak small variant="white" className="motto-content" onClick={ event => setIsEditingMotto(true) }>{ motto }</Text> }
+                                { isEditingMotto &&
+                                    <input type="text" className="motto-input" maxLength={ 38 } value={ motto } onChange={ event => setMotto(event.target.value) } onBlur={ onMottoBlur } onKeyDown={ onMottoKeyDown } autoFocus={ true } /> }
+                            </Flex> }
+                    </Flex>
+                    <hr className="m-0" />
+                </Column>
+                <Column gap={ 1 }>
+                    <Text variant="white" small wrap>
+                        { LocalizeText('infostand.text.achievement_score') + ' ' + userData.achievementScore }
+                    </Text>
+                    { (userData.carryItem > 0) &&
+                        <>
+                            <hr className="m-0" />
+                            <Text variant="white" small wrap>
+                                { LocalizeText('infostand.text.handitem', [ 'item' ], [ LocalizeText('handitem' + userData.carryItem) ]) }
+                            </Text>
+                        </> }
+                </Column>
+                <Column gap={ 1 }>
+                    <InfoStandWidgetUserRelationshipsView relationships={ userRelationships } />
+                </Column>
+            </Column>
+        </Column>
+    );
+}
diff --git a/src/views/room/widgets/infostand/InfoStandWidgetView.scss b/src/views/room/widgets/infostand/InfoStandWidgetView.scss
index 53ad09d5..2e57c0c0 100644
--- a/src/views/room/widgets/infostand/InfoStandWidgetView.scss
+++ b/src/views/room/widgets/infostand/InfoStandWidgetView.scss
@@ -4,6 +4,7 @@
     bottom: $toolbar-height + 10px;
     pointer-events: none;
     z-index: $infostand-zindex;
+    color: $white;
 
     .nitro-infostand {
         position: relative;
@@ -28,7 +29,6 @@
             width: 100%;
             max-width: 68px;
             border-radius: $border-radius;
-            margin-right: 5px;
 
             &.pet {
                 max-width: 75px;
diff --git a/src/views/room/widgets/infostand/InfoStandWidgetView.tsx b/src/views/room/widgets/infostand/InfoStandWidgetView.tsx
index 4f240121..ef76d03d 100644
--- a/src/views/room/widgets/infostand/InfoStandWidgetView.tsx
+++ b/src/views/room/widgets/infostand/InfoStandWidgetView.tsx
@@ -1,12 +1,13 @@
 import { FC, useCallback, useState } from 'react';
 import { RoomWidgetRoomObjectMessage, RoomWidgetUpdateEvent, RoomWidgetUpdateInfostandEvent, RoomWidgetUpdateInfostandFurniEvent, RoomWidgetUpdateInfostandPetEvent, RoomWidgetUpdateInfostandRentableBotEvent, RoomWidgetUpdateInfostandUserEvent, RoomWidgetUpdateRoomObjectEvent } from '../../../../api';
+import { Column } from '../../../../common';
 import { CreateEventDispatcherHook } from '../../../../hooks/events/event-dispatcher.base';
 import { useRoomContext } from '../../context/RoomContext';
-import { InfoStandWidgetBotView } from './views/bot/InfoStandWidgetBotView';
-import { InfoStandWidgetFurniView } from './views/furni/InfoStandWidgetFurniView';
-import { InfoStandWidgetPetView } from './views/pet/InfoStandWidgetPetView';
-import { InfoStandWidgetRentableBotView } from './views/rentable-bot/InfoStandWidgetRentableBotView';
-import { InfoStandWidgetUserView } from './views/user/InfoStandWidgetUserView';
+import { InfoStandWidgetBotView } from './InfoStandWidgetBotView';
+import { InfoStandWidgetFurniView } from './InfoStandWidgetFurniView';
+import { InfoStandWidgetPetView } from './InfoStandWidgetPetView';
+import { InfoStandWidgetRentableBotView } from './InfoStandWidgetRentableBotView';
+import { InfoStandWidgetUserView } from './InfoStandWidgetUserView';
 
 export const InfoStandWidgetView: FC<{}> = props =>
 {
@@ -116,8 +117,8 @@ export const InfoStandWidgetView: FC<{}> = props =>
     if(!infoStandEvent) return null;
 
     return (
-        <div className="d-flex flex-column align-items-end nitro-infostand-container">
+        <Column alignItems="end" className="nitro-infostand-container">
             { getInfostandView() }
-        </div>
+        </Column>
     );
 }
diff --git a/src/views/room/widgets/infostand/views/base/InfoStandBaseView.tsx b/src/views/room/widgets/infostand/views/base/InfoStandBaseView.tsx
deleted file mode 100644
index 19569bd0..00000000
--- a/src/views/room/widgets/infostand/views/base/InfoStandBaseView.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { FC } from 'react';
-import { InfoStandBaseViewProps } from './InfoStandBaseView.types';
-
-export const InfoStandBaseView: FC<InfoStandBaseViewProps> = props =>
-{
-    const { headerText = null, onCloseClick = null, children = null } = props;
-
-    return (
-        <div className="d-flex flex-column nitro-card nitro-infostand rounded">
-            <div className="container-fluid content-area overflow-visible">
-                <div className="d-flex justify-content-between align-items-center">
-                    <div className="small text-wrap">{ headerText }</div>
-                    <i className="fas fa-times cursor-pointer" onClick={ onCloseClick }></i>
-                </div>
-                <hr className="m-0 my-1" />
-                { children }
-            </div>
-        </div>
-    );
-}
diff --git a/src/views/room/widgets/infostand/views/base/InfoStandBaseView.types.ts b/src/views/room/widgets/infostand/views/base/InfoStandBaseView.types.ts
deleted file mode 100644
index bb775875..00000000
--- a/src/views/room/widgets/infostand/views/base/InfoStandBaseView.types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { MouseEvent, ReactNode } from 'react';
-
-export interface InfoStandBaseViewProps
-{
-    headerText: ReactNode;
-    onCloseClick: (event: MouseEvent) => void;
-}
diff --git a/src/views/room/widgets/infostand/views/bot/InfoStandWidgetBotView.tsx b/src/views/room/widgets/infostand/views/bot/InfoStandWidgetBotView.tsx
deleted file mode 100644
index 682f801c..00000000
--- a/src/views/room/widgets/infostand/views/bot/InfoStandWidgetBotView.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { FC, useCallback } from 'react';
-import { LocalizeText } from '../../../../../../api';
-import { AvatarImageView } from '../../../../../shared/avatar-image/AvatarImageView';
-import { BadgeImageView } from '../../../../../shared/badge-image/BadgeImageView';
-import { InfoStandBaseView } from '../base/InfoStandBaseView';
-import { InfoStandWidgetBotViewProps } from './InfoStandWidgetBotView.types';
-
-export const InfoStandWidgetBotView: FC<InfoStandWidgetBotViewProps> = props =>
-{
-    const { botData = null, close = null } = props;
-
-    const processButtonAction = useCallback((action: string) =>
-    {
-        if(!action || (action === '')) return;
-
-    }, []);
-
-    if(!botData) return null;
-
-    return (
-        <InfoStandBaseView headerText={ botData.name } onCloseClick={ close }>
-            <div className="d-flex">
-                <div className="body-image bot w-100">
-                    <AvatarImageView figure={ botData.figure } direction={ 4 } />
-                </div>
-                <div className="w-100 d-flex justify-content-center align-items-center">
-                    { (botData.badges.length > 0) && botData.badges.map(result =>
-                        {
-                            return <BadgeImageView key={ result } badgeCode={ result } showInfo={ true } />;
-                        }) }
-                </div>
-            </div>
-            <hr className="m-0 my-1" />
-            <div className="motto-content small">{ botData.motto }</div>
-            { (botData.carryItem > 0) &&
-                <>
-                    <hr className="m-0 my-1" />
-                    <div className="small text-wrap">
-                        { LocalizeText('infostand.text.handitem', [ 'item' ], [ LocalizeText('handitem' + botData.carryItem) ]) }
-                    </div>
-                </> }
-        </InfoStandBaseView>
-    );
-}
diff --git a/src/views/room/widgets/infostand/views/bot/InfoStandWidgetBotView.types.ts b/src/views/room/widgets/infostand/views/bot/InfoStandWidgetBotView.types.ts
deleted file mode 100644
index 6691eec4..00000000
--- a/src/views/room/widgets/infostand/views/bot/InfoStandWidgetBotView.types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { RoomWidgetUpdateInfostandUserEvent } from '../../../../../../api';
-
-export interface InfoStandWidgetBotViewProps
-{
-    botData: RoomWidgetUpdateInfostandUserEvent;
-    close: () => void;
-}
diff --git a/src/views/room/widgets/infostand/views/furni/InfoStandWidgetFurniView.types.ts b/src/views/room/widgets/infostand/views/furni/InfoStandWidgetFurniView.types.ts
deleted file mode 100644
index c4a77f9c..00000000
--- a/src/views/room/widgets/infostand/views/furni/InfoStandWidgetFurniView.types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { RoomWidgetUpdateInfostandFurniEvent } from '../../../../../../api';
-
-export interface InfoStandWidgetFurniViewProps
-{
-    furniData: RoomWidgetUpdateInfostandFurniEvent;
-    close: () => void;
-}
diff --git a/src/views/room/widgets/infostand/views/pet/InfoStandWidgetPetView.tsx b/src/views/room/widgets/infostand/views/pet/InfoStandWidgetPetView.tsx
deleted file mode 100644
index a2482ced..00000000
--- a/src/views/room/widgets/infostand/views/pet/InfoStandWidgetPetView.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { FC } from 'react';
-import { LocalizeText } from '../../../../../../api';
-import { UserProfileIconView } from '../../../../../../layout';
-import { PetImageView } from '../../../../../shared/pet-image/PetImageView';
-import { InfoStandBaseView } from '../base/InfoStandBaseView';
-import { InfoStandWidgetPetViewProps } from './InfoStandWidgetPetView.types';
-
-export const InfoStandWidgetPetView: FC<InfoStandWidgetPetViewProps> = props =>
-{
-    const { petData = null, close = null } = props;
-
-    if(!petData) return null;
-
-    return (
-        <InfoStandBaseView headerText={ <>{ petData.name }<br />{ LocalizeText('pet.breed.' + petData.petType + '.' + petData.petBreed) }</> } onCloseClick={ close }>
-            <div className="d-flex">
-                <div className="body-image pet w-100">
-                    <PetImageView figure={ petData.petFigure } posture={ petData.posture } direction={ 4 } />
-                </div>
-                <div className="w-100 d-flex flex-column align-items-center">
-                    <div className="small text-center mb-1">{ LocalizeText('pet.level', ['level', 'maxlevel'], [petData.level.toString(), petData.maximumLevel.toString()]) }</div>
-                    <div className="text-center mb-1 w-100">
-                        <div className="small text-wrap mb-1">{ LocalizeText('infostand.pet.text.happiness') }</div>
-                        <div className="bg-light-dark rounded position-relative overflow-hidden">
-                            <div className="d-flex justify-content-center align-items-center w-100 h-100 position-absolute small top-0">{ petData.happyness + '/' + petData.maximumHappyness }</div>
-                            <div className="bg-info rounded pet-stats" style={{ width: (petData.happyness / petData.maximumHappyness) * 100 + '%' }} />
-                        </div>
-                    </div>
-                    <div className="text-center mb-1 w-100">
-                        <div className="small text-wrap mb-1">{ LocalizeText('infostand.pet.text.experience') }</div>
-                        <div className="bg-light-dark rounded position-relative overflow-hidden">
-                            <div className="d-flex justify-content-center align-items-center w-100 h-100 position-absolute small top-0">{ petData.experience + '/' + petData.levelExperienceGoal }</div>
-                            <div className="small bg-purple rounded pet-stats" style={{ width: ((petData.experience / petData.levelExperienceGoal) * 100 + '%') }} />
-                        </div>
-                    </div>
-                    <div className="text-center w-100">
-                        <div className="small text-wrap mb-1">{ LocalizeText('infostand.pet.text.energy') }</div>
-                        <div className="bg-light-dark rounded position-relative overflow-hidden">
-                            <div className="d-flex justify-content-center align-items-center w-100 h-100 position-absolute small top-0">{ petData.energy + '/' + petData.maximumEnergy }</div>
-                            <div className="small bg-success rounded pet-stats" style={{ width: (petData.energy/petData.maximumEnergy)*100 +'%' }}></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <hr className="m-0 my-1" />
-            <div className="small text-wrap">{ LocalizeText('infostand.text.petrespect', ['count'], [petData.respect.toString()]) }</div>
-            <div className="small text-wrap">{ LocalizeText('pet.age', ['age'], [petData.age.toString()]) }</div>
-            <hr className="m-0 my-1" />
-            <div className="d-flex align-items-center">
-                <UserProfileIconView userId={ petData.ownerId } />
-                <div className="small text-wrap">{ LocalizeText('infostand.text.petowner', ['name'], [petData.ownerName]) }</div>
-            </div>
-        </InfoStandBaseView>
-    );
-}
diff --git a/src/views/room/widgets/infostand/views/pet/InfoStandWidgetPetView.types.ts b/src/views/room/widgets/infostand/views/pet/InfoStandWidgetPetView.types.ts
deleted file mode 100644
index 46d61195..00000000
--- a/src/views/room/widgets/infostand/views/pet/InfoStandWidgetPetView.types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { RoomWidgetUpdateInfostandPetEvent } from '../../../../../../api';
-
-export interface InfoStandWidgetPetViewProps
-{
-    petData: RoomWidgetUpdateInfostandPetEvent;
-    close: () => void;
-}
diff --git a/src/views/room/widgets/infostand/views/rentable-bot/InfoStandWidgetRentableBotView.tsx b/src/views/room/widgets/infostand/views/rentable-bot/InfoStandWidgetRentableBotView.tsx
deleted file mode 100644
index e4214850..00000000
--- a/src/views/room/widgets/infostand/views/rentable-bot/InfoStandWidgetRentableBotView.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { BotRemoveComposer } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useMemo } from 'react';
-import { LocalizeText } from '../../../../../../api';
-import { SendMessageHook } from '../../../../../../hooks';
-import { UserProfileIconView } from '../../../../../../layout';
-import { AvatarImageView } from '../../../../../shared/avatar-image/AvatarImageView';
-import { BadgeImageView } from '../../../../../shared/badge-image/BadgeImageView';
-import { BotSkillsEnum } from '../../../avatar-info/common/BotSkillsEnum';
-import { InfoStandBaseView } from '../base/InfoStandBaseView';
-import { InfoStandWidgetRentableBotViewProps } from './InfoStandWidgetRentableBotView.types';
-
-export const InfoStandWidgetRentableBotView: FC<InfoStandWidgetRentableBotViewProps> = props =>
-{
-    const { rentableBotData = null, close = null } = props;
-
-    const canPickup = useMemo(() =>
-    {
-        if(rentableBotData.botSkills.indexOf(BotSkillsEnum.NO_PICK_UP) >= 0) return false;
-
-        if(!rentableBotData.amIOwner && !rentableBotData.amIAnyRoomController) return false;
-
-        return true;
-    }, [ rentableBotData ]);
-
-    const pickupBot = useCallback(() =>
-    {
-        SendMessageHook(new BotRemoveComposer(rentableBotData.webID));
-    }, [ rentableBotData ]);
-    
-    if(!rentableBotData) return;
-
-    return (
-        <>
-            <InfoStandBaseView headerText={ rentableBotData.name } onCloseClick={ close }>
-                <div className="d-flex">
-                    <div className="body-image bot w-100">
-                        <AvatarImageView figure={ rentableBotData.figure } direction={ 4 } />
-                    </div>
-                    <div className="w-100 d-flex justify-content-center align-items-center">
-                        { (rentableBotData.badges.length > 0) && rentableBotData.badges.map(result =>
-                            {
-                                return <BadgeImageView key={ result } badgeCode={ result } showInfo={ true } />;
-                            }) }
-                    </div>
-                </div>
-                <hr className="m-0 my-1" />
-                <div className="motto-content small">{ rentableBotData.motto }</div>
-                <hr className="m-0 my-1" />
-                <div className="d-flex align-items-center">
-                    <UserProfileIconView userId={ rentableBotData.ownerId } />
-                    <div className="small text-wrap">{ LocalizeText('infostand.text.botowner', [ 'name' ], [ rentableBotData.ownerName ]) }</div>
-                </div>
-                { (rentableBotData.carryItem > 0) &&
-                    <>
-                        <hr className="m-0 my-1"/>
-                        <div className="small text-wrap">
-                            { LocalizeText('infostand.text.handitem', [ 'item' ], [ LocalizeText('handitem' + rentableBotData.carryItem) ]) }
-                        </div>
-                    </> }
-            </InfoStandBaseView>
-            { canPickup &&
-                <div className="button-container mt-2">
-                    <button type="button" className="btn btn-sm btn-danger ms-1" onClick={ pickupBot }>
-                        <i className="me-1 fas fa-box-open"></i>
-                        { LocalizeText('infostand.button.pickup') }
-                    </button>
-                </div> }
-        </>
-    );
-}
diff --git a/src/views/room/widgets/infostand/views/rentable-bot/InfoStandWidgetRentableBotView.types.ts b/src/views/room/widgets/infostand/views/rentable-bot/InfoStandWidgetRentableBotView.types.ts
deleted file mode 100644
index d3480bd1..00000000
--- a/src/views/room/widgets/infostand/views/rentable-bot/InfoStandWidgetRentableBotView.types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { RoomWidgetUpdateInfostandRentableBotEvent } from '../../../../../../api';
-
-export interface InfoStandWidgetRentableBotViewProps
-{
-    rentableBotData: RoomWidgetUpdateInfostandRentableBotEvent;
-    close: () => void;
-}
diff --git a/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx b/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx
deleted file mode 100644
index 44e90e40..00000000
--- a/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { RelationshipStatusInfoEvent, RelationshipStatusInfoMessageParser, RoomSessionUserBadgesEvent, UserRelationshipsComposer } from '@nitrots/nitro-renderer';
-import classNames from 'classnames';
-import { FC, FocusEvent, KeyboardEvent, useCallback, useEffect, useState } from 'react';
-import { GetGroupInformation, LocalizeText, RoomWidgetChangeMottoMessage, RoomWidgetUpdateInfostandUserEvent } from '../../../../../../api';
-import { Base } from '../../../../../../common/Base';
-import { Flex } from '../../../../../../common/Flex';
-import { RelationshipsContainerView } from '../../../../../../components/user-profile/views/RelationshipsContainerView';
-import { CreateMessageHook, SendMessageHook } from '../../../../../../hooks';
-import { CreateEventDispatcherHook } from '../../../../../../hooks/events';
-import { UserProfileIconView } from '../../../../../../layout';
-import { AvatarImageView } from '../../../../../shared/avatar-image/AvatarImageView';
-import { BadgeImageView } from '../../../../../shared/badge-image/BadgeImageView';
-import { useRoomContext } from '../../../../context/RoomContext';
-import { InfoStandWidgetUserViewProps } from './InfoStandWidgetUserView.types';
-
-export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =>
-{
-    const { userData = null, close = null } = props;
-    const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
-    const [ badges, setBadges ] = useState<string[]>([]);
-    const [ motto, setMotto ] = useState(null);
-    const [ isEditingMotto, setIsEditingMotto ] = useState(false);
-    const [ userRelationships, setUserRelationships ] = useState<RelationshipStatusInfoMessageParser>(null);
-
-    const saveMotto = useCallback((motto: string) =>
-    {
-        if(motto.length > 38) return;
-
-        widgetHandler.processWidgetMessage(new RoomWidgetChangeMottoMessage(motto));
-
-        setIsEditingMotto(false);
-    }, [ widgetHandler ]);
-
-    const onMottoBlur = useCallback((event: FocusEvent<HTMLInputElement>) =>
-    {
-        saveMotto(event.target.value);
-    }, [ saveMotto ]);
-
-    const onMottoKeyDown = useCallback((event: KeyboardEvent<HTMLInputElement>) =>
-    {
-        event.stopPropagation();
-        
-        switch(event.key)
-        {
-            case 'Enter':
-                saveMotto((event.target as HTMLInputElement).value);
-                return;
-        }
-    }, [ saveMotto ]);
-
-    const onRoomSessionUserBadgesEvent = useCallback((event: RoomSessionUserBadgesEvent) =>
-    {
-        if(!userData || (userData.webID !== event.userId)) return;
-
-        setBadges(event.badges);
-    }, [ userData ]);
-
-    CreateEventDispatcherHook(RoomSessionUserBadgesEvent.RSUBE_BADGES, eventDispatcher, onRoomSessionUserBadgesEvent);
-
-    const onUserRelationshipsEvent = useCallback((event: RelationshipStatusInfoEvent) =>
-    {
-        const parser = event.getParser();
-
-        if(userData && userData.webID === parser.userId)
-            setUserRelationships(parser);
-    }, [userData]);
-
-    CreateMessageHook(RelationshipStatusInfoEvent, onUserRelationshipsEvent);
-
-    useEffect(() =>
-    {
-        setBadges(userData.badges);
-        setIsEditingMotto(false);
-        setMotto(userData.motto);
-        SendMessageHook(new UserRelationshipsComposer(userData.webID));
-
-        return () => 
-        {
-            setBadges([]);
-            setUserRelationships(null);
-        }
-    }, [ userData ]);
-
-    if(!userData) return null;
-
-    return (
-        <Flex column className="nitro-card nitro-infostand rounded">
-            <div className="container-fluid content-area overflow-visible">
-                <Flex center>
-                    <Flex alignItems="center">
-                        <UserProfileIconView userId={ userData.webID } />
-                        <span className="small text-wrap">{ userData.name }</span>
-                    </Flex>
-                    <FontAwesomeIcon icon="times" className="cursor-pointer" onClick={ close } />
-                </Flex>
-                <hr className="m-0 my-1" />
-                <Flex>
-                    <div className="body-image w-100">
-                        <AvatarImageView figure={ userData.figure } direction={ 4 } />
-                    </div>
-                    <div>
-                        <Flex justifyContent="between">
-                            <div className="badge-image">
-                                { badges[0] && <BadgeImageView badgeCode={ badges[0] } showInfo={ true } /> }
-                            </div>
-                            <div className={ 'badge-image' + classNames({ ' cursor-pointer': userData.groupId > 0 }) } onClick={ () => GetGroupInformation(userData.groupId) }>
-                                { userData.groupId > 0 && <BadgeImageView badgeCode={ userData.groupBadgeId } isGroup={ true } showInfo={ true } customTitle={ userData.groupName } /> }
-                            </div>
-                        </Flex>
-                        <Flex justifyContent="between">
-                            <div className="badge-image">
-                                { badges[1] && <BadgeImageView badgeCode={ badges[1] } showInfo={ true } /> }
-                            </div>
-                            <div className="badge-image">
-                                { badges[2] && <BadgeImageView badgeCode={ badges[2] } showInfo={ true } /> }
-                            </div>
-                        </Flex>
-                        <Flex justifyContent="between">
-                            <div className="badge-image">
-                                { badges[3] && <BadgeImageView badgeCode={ badges[3] } showInfo={ true } /> }
-                            </div>
-                            <div className="badge-image">
-                                { badges[4] && <BadgeImageView badgeCode={ badges[4] } showInfo={ true } /> }
-                            </div>
-                        </Flex>
-                    </div>
-                </Flex>
-                <hr className="m-0 my-1" />
-                <div className="bg-light-dark rounded py-1 px-2 small">
-                    { (userData.type !== RoomWidgetUpdateInfostandUserEvent.OWN_USER) &&
-                        <div className="motto-content w-100 text-wrap text-break">{ motto }</div> }
-                    { userData.type === RoomWidgetUpdateInfostandUserEvent.OWN_USER &&
-                        <Flex justifyContent="between" alignItems="center">
-                            <FontAwesomeIcon icon="pencil-alt" className="small me-2" />
-                            <Base fit>
-                                { !isEditingMotto &&
-                                    <div className="motto-content cursor-pointer w-100 text-wrap text-break" onClick={ event => setIsEditingMotto(true) }>{ motto }</div> }
-                                { isEditingMotto &&
-                                    <input type="text" className="motto-input" maxLength={ 38 } value={ motto } onChange={ event => setMotto(event.target.value) } onBlur={ onMottoBlur } onKeyDown={ onMottoKeyDown } autoFocus={ true } /> }
-                            </Base>
-                        </Flex> }
-                </div>
-                <hr className="m-0 my-1" />
-                <div className="small text-wrap">
-                    { LocalizeText('infostand.text.achievement_score') + ' ' + userData.achievementScore }
-                </div>
-                { (userData.carryItem > 0) &&
-                    <>
-                        <hr className="m-0 my-1" />
-                        <div className="small text-wrap">
-                            { LocalizeText('infostand.text.handitem', [ 'item' ], [ LocalizeText('handitem' + userData.carryItem) ]) }
-                        </div>
-                    </> 
-                }
-                <RelationshipsContainerView relationships={userRelationships} simple={true}/>
-            </div>
-        </Flex>);
-}
diff --git a/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.types.ts b/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.types.ts
deleted file mode 100644
index df69165b..00000000
--- a/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { RoomWidgetUpdateInfostandUserEvent } from '../../../../../../api';
-
-export interface InfoStandWidgetUserViewProps
-{
-    userData: RoomWidgetUpdateInfostandUserEvent;
-    close: () => void;
-}

From 02556310b1c8d59cc18f6c8a3ce96acc863d6ca9 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Tue, 1 Mar 2022 00:50:24 -0500
Subject: [PATCH 11/17] Update chat style selector

---
 .../ChatInputStyleSelectorView.tsx            | 53 +++++++++++--------
 .../widgets/chat-input/ChatInputView.scss     | 31 +++--------
 .../room/widgets/chat-input/ChatInputView.tsx |  2 +-
 .../ChatInputStyleSelectorView.types.ts       |  6 ---
 4 files changed, 38 insertions(+), 54 deletions(-)
 rename src/views/room/widgets/chat-input/{style-selector => }/ChatInputStyleSelectorView.tsx (56%)
 delete mode 100644 src/views/room/widgets/chat-input/style-selector/ChatInputStyleSelectorView.types.ts

diff --git a/src/views/room/widgets/chat-input/style-selector/ChatInputStyleSelectorView.tsx b/src/views/room/widgets/chat-input/ChatInputStyleSelectorView.tsx
similarity index 56%
rename from src/views/room/widgets/chat-input/style-selector/ChatInputStyleSelectorView.tsx
rename to src/views/room/widgets/chat-input/ChatInputStyleSelectorView.tsx
index 04bcb68f..828f762a 100644
--- a/src/views/room/widgets/chat-input/style-selector/ChatInputStyleSelectorView.tsx
+++ b/src/views/room/widgets/chat-input/ChatInputStyleSelectorView.tsx
@@ -1,8 +1,15 @@
-import { FC, MouseEvent, useCallback, useEffect, useState } from 'react';
+import { FC, MouseEvent, useEffect, useState } from 'react';
 import { Overlay, Popover } from 'react-bootstrap';
-import { BatchUpdates } from '../../../../../hooks';
-import { NitroCardContentView, NitroCardGridItemView, NitroCardGridView } from '../../../../../layout';
-import { ChatInputStyleSelectorViewProps } from './ChatInputStyleSelectorView.types';
+import { Base, Flex, Grid } from '../../../../common';
+import { BatchUpdates } from '../../../../hooks';
+import { NitroCardContentView } from '../../../../layout';
+
+interface ChatInputStyleSelectorViewProps
+{
+    chatStyleId: number;
+    chatStyleIds: number[];
+    selectChatStyleId: (styleId: number) => void;
+}
 
 export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = props =>
 {
@@ -10,13 +17,6 @@ export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = p
     const [ target, setTarget ] = useState<(EventTarget & HTMLElement)>(null);
     const [ selectorVisible, setSelectorVisible ] = useState(false);
 
-    useEffect(() =>
-    {
-        if(selectorVisible) return;
-
-        setTarget(null);
-    }, [ selectorVisible ]);
-
     const selectStyle = (styleId: number) =>
     {
         BatchUpdates(() =>
@@ -26,7 +26,7 @@ export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = p
         });
     }
 
-    const toggleSelector = useCallback((event: MouseEvent<HTMLElement>) =>
+    const toggleSelector = (event: MouseEvent<HTMLElement>) =>
     {
         BatchUpdates(() =>
         {
@@ -41,26 +41,33 @@ export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = p
 
             if(visible) setTarget((event.target as (EventTarget & HTMLElement)));
         })
-    }, []);
+    }
+
+    useEffect(() =>
+    {
+        if(selectorVisible) return;
+
+        setTarget(null);
+    }, [ selectorVisible ]);
 
     return (
         <>
-            <i className="icon chatstyles-icon cursor-pointer" onClick={ toggleSelector } />
+            <Base pointer className="icon chatstyles-icon" onClick={ toggleSelector } />
             <Overlay show={ selectorVisible } target={ target } placement="top">
-                <Popover className="nitro-chat-style-selector-container" id="chat-style-selector">
-                    <NitroCardContentView className="bg-transparent overflow-hidden">
-                        <NitroCardGridView>
+                <Popover className="nitro-chat-style-selector-container">
+                    <NitroCardContentView overflow="hidden" className="bg-transparent">
+                        <Grid columnCount={ 3 } overflow="auto">
                             { chatStyleIds && (chatStyleIds.length > 0) && chatStyleIds.map((styleId) =>
                                 {
                                     return (
-                                        <NitroCardGridItemView key={ styleId } itemActive={ (chatStyleId === styleId) } onClick={ event => selectStyle(styleId) }>
-                                            <div className="bubble-container">
-                                                <div className={ 'w-100 chat-bubble bubble-' + styleId }>&nbsp;</div>
-                                            </div>
-                                        </NitroCardGridItemView>
+                                        <Flex center pointer key={ styleId } className="bubble-parent-container" onClick={ event => selectStyle(styleId) }>
+                                            <Base key={ styleId } className="bubble-container">
+                                                <Base className={ `chat-bubble bubble-${ styleId }` }>&nbsp;</Base>
+                                            </Base>
+                                        </Flex>
                                     );
                                 }) }
-                        </NitroCardGridView>
+                        </Grid>
                     </NitroCardContentView>
                 </Popover>
             </Overlay>
diff --git a/src/views/room/widgets/chat-input/ChatInputView.scss b/src/views/room/widgets/chat-input/ChatInputView.scss
index 734dbcd2..f650fa62 100644
--- a/src/views/room/widgets/chat-input/ChatInputView.scss
+++ b/src/views/room/widgets/chat-input/ChatInputView.scss
@@ -4,11 +4,12 @@
     align-items: center;
     position: relative;
     height: 40px;
-    border-radius: $border-radius;
+    border-radius: 8px;
     border: 2px solid rgb(0, 0, 0);
     background: #EDEDED;
     padding-right: 10px;
     width: 100%;
+    overflow: hidden;
 
     @include media-breakpoint-down(sm) {
         display: flex;
@@ -21,9 +22,8 @@
     &:before {
         content: "";
         position: absolute;
-        width: 98%;
+        width: 100%;
         height: 5px;
-        border-radius: $border-radius;
         top: 1px;
         left: 0;
         right: 0;
@@ -65,15 +65,6 @@
     }
 }
 
-.nitro-chat-style-selector-button {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    right: 7px;
-}
-
 .nitro-chat-style-selector-container {
     width: $chat-input-style-selector-widget-width;
     max-height: $chat-input-style-selector-widget-height;
@@ -82,20 +73,12 @@
         max-height: $chat-input-style-selector-widget-height !important;
     }
 
-    .grid-item {
-        font-size: $font-size-sm;
-        height: 30px !important;
-        border-color: unset !important;
-        border: 0 !important;
-        padding: 1px 3px;
-
-        &:not(.active) {
-            background-color: unset !important;
-        }
+    .bubble-parent-container {
+        height: 30px;
 
         .bubble-container {
-            visibility: visible;
-            width: 75%;
+            position: relative;
+            width: 50px;
         }
     }
 }
diff --git a/src/views/room/widgets/chat-input/ChatInputView.tsx b/src/views/room/widgets/chat-input/ChatInputView.tsx
index ca2b54d7..ed1391cc 100644
--- a/src/views/room/widgets/chat-input/ChatInputView.tsx
+++ b/src/views/room/widgets/chat-input/ChatInputView.tsx
@@ -4,7 +4,7 @@ import { createPortal } from 'react-dom';
 import { GetConfiguration, GetSessionDataManager, LocalizeText, RoomWidgetChatMessage, RoomWidgetChatTypingMessage, RoomWidgetUpdateChatInputContentEvent, RoomWidgetUpdateInfostandUserEvent, RoomWidgetUpdateRoomObjectEvent } from '../../../../api';
 import { CreateEventDispatcherHook } from '../../../../hooks/events';
 import { useRoomContext } from '../../context/RoomContext';
-import { ChatInputStyleSelectorView } from './style-selector/ChatInputStyleSelectorView';
+import { ChatInputStyleSelectorView } from './ChatInputStyleSelectorView';
 
 export const ChatInputView: FC<{}> = props =>
 {
diff --git a/src/views/room/widgets/chat-input/style-selector/ChatInputStyleSelectorView.types.ts b/src/views/room/widgets/chat-input/style-selector/ChatInputStyleSelectorView.types.ts
deleted file mode 100644
index 9df829be..00000000
--- a/src/views/room/widgets/chat-input/style-selector/ChatInputStyleSelectorView.types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface ChatInputStyleSelectorViewProps
-{
-    chatStyleId: number;
-    chatStyleIds: number[];
-    selectChatStyleId: (styleId: number) => void;
-}

From c6512be476aaf8c519ff1d1c86e70d91db12c8a3 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Tue, 1 Mar 2022 03:23:20 -0500
Subject: [PATCH 12/17] Update avatar info widget

---
 .../AvatarInfoRentableBotChatView.tsx         | 71 ++++++++++++++
 .../AvatarInfoUseProductConfirmView.tsx       | 76 ++++++++-------
 .../AvatarInfoUseProductView.tsx              | 20 ++--
 .../AvatarInfoWidgetAvatarView.tsx            | 86 +++++++++--------
 .../AvatarInfoWidgetDecorateView.tsx          | 25 ++---
 .../name => }/AvatarInfoWidgetNameView.tsx    | 16 ++--
 .../AvatarInfoWidgetOwnAvatarView.tsx         | 68 +++++++------
 .../AvatarInfoWidgetOwnPetView.tsx            | 81 +++++++++-------
 .../pet => }/AvatarInfoWidgetPetView.tsx      | 83 ++++++++--------
 .../AvatarInfoWidgetRentableBotView.tsx       | 95 ++++++++++---------
 .../avatar-info/AvatarInfoWidgetView.tsx      | 20 ++--
 .../AvatarInfoWidgetAvatarView.types.ts       |  7 --
 .../AvatarInfoWidgetDecorateView.types.ts     |  7 --
 .../name/AvatarInfoWidgetNameView.types.ts    |  7 --
 .../AvatarInfoWidgetOwnAvatarView.types.ts    |  8 --
 .../AvatarInfoWidgetOwnPetView.types.ts       |  7 --
 .../pet/AvatarInfoWidgetPetView.types.ts      |  7 --
 .../AvatarInfoRentableBotChatView.tsx         | 65 -------------
 .../AvatarInfoRentableBotChatView.types.ts    |  7 --
 .../AvatarInfoWidgetRentableBotView.types.ts  | 14 ---
 .../AvatarInfoUseProductConfirmView.types.ts  |  7 --
 .../AvatarInfoUseProductView.types.ts         |  8 --
 .../widgets/context-menu/ContextMenu.scss     |  5 +
 .../context-menu/ContextMenuHeaderView.tsx    | 18 ++++
 .../context-menu/ContextMenuListItemView.tsx  | 32 +++++++
 .../context-menu/ContextMenuListView.tsx      | 18 ++++
 .../widgets/context-menu/ContextMenuView.tsx  | 65 +++++++++----
 .../context-menu/ContextMenuView.types.ts     |  9 --
 .../views/header/ContextMenuHeaderView.tsx    | 13 ---
 .../header/ContextMenuHeaderView.types.ts     |  5 -
 .../list-item/ContextMenuListItemView.tsx     | 20 ----
 .../ContextMenuListItemView.types.ts          |  8 --
 .../views/list/ContextMenuListView.tsx        | 13 ---
 .../views/list/ContextMenuListView.types.ts   |  4 -
 34 files changed, 505 insertions(+), 490 deletions(-)
 create mode 100644 src/views/room/widgets/avatar-info/AvatarInfoRentableBotChatView.tsx
 rename src/views/room/widgets/avatar-info/{views/use-product-confirm => }/AvatarInfoUseProductConfirmView.tsx (73%)
 rename src/views/room/widgets/avatar-info/{views/use-product => }/AvatarInfoUseProductView.tsx (89%)
 rename src/views/room/widgets/avatar-info/{views/avatar => }/AvatarInfoWidgetAvatarView.tsx (89%)
 rename src/views/room/widgets/avatar-info/{views/decorate => }/AvatarInfoWidgetDecorateView.tsx (53%)
 rename src/views/room/widgets/avatar-info/{views/name => }/AvatarInfoWidgetNameView.tsx (58%)
 rename src/views/room/widgets/avatar-info/{views/own-avatar => }/AvatarInfoWidgetOwnAvatarView.tsx (87%)
 rename src/views/room/widgets/avatar-info/{views/own-pet => }/AvatarInfoWidgetOwnPetView.tsx (87%)
 rename src/views/room/widgets/avatar-info/{views/pet => }/AvatarInfoWidgetPetView.tsx (82%)
 rename src/views/room/widgets/avatar-info/{views/rentable-bot => }/AvatarInfoWidgetRentableBotView.tsx (68%)
 delete mode 100644 src/views/room/widgets/avatar-info/views/avatar/AvatarInfoWidgetAvatarView.types.ts
 delete mode 100644 src/views/room/widgets/avatar-info/views/decorate/AvatarInfoWidgetDecorateView.types.ts
 delete mode 100644 src/views/room/widgets/avatar-info/views/name/AvatarInfoWidgetNameView.types.ts
 delete mode 100644 src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.types.ts
 delete mode 100644 src/views/room/widgets/avatar-info/views/own-pet/AvatarInfoWidgetOwnPetView.types.ts
 delete mode 100644 src/views/room/widgets/avatar-info/views/pet/AvatarInfoWidgetPetView.types.ts
 delete mode 100644 src/views/room/widgets/avatar-info/views/rentable-bot-chat/AvatarInfoRentableBotChatView.tsx
 delete mode 100644 src/views/room/widgets/avatar-info/views/rentable-bot-chat/AvatarInfoRentableBotChatView.types.ts
 delete mode 100644 src/views/room/widgets/avatar-info/views/rentable-bot/AvatarInfoWidgetRentableBotView.types.ts
 delete mode 100644 src/views/room/widgets/avatar-info/views/use-product-confirm/AvatarInfoUseProductConfirmView.types.ts
 delete mode 100644 src/views/room/widgets/avatar-info/views/use-product/AvatarInfoUseProductView.types.ts
 create mode 100644 src/views/room/widgets/context-menu/ContextMenuHeaderView.tsx
 create mode 100644 src/views/room/widgets/context-menu/ContextMenuListItemView.tsx
 create mode 100644 src/views/room/widgets/context-menu/ContextMenuListView.tsx
 delete mode 100644 src/views/room/widgets/context-menu/ContextMenuView.types.ts
 delete mode 100644 src/views/room/widgets/context-menu/views/header/ContextMenuHeaderView.tsx
 delete mode 100644 src/views/room/widgets/context-menu/views/header/ContextMenuHeaderView.types.ts
 delete mode 100644 src/views/room/widgets/context-menu/views/list-item/ContextMenuListItemView.tsx
 delete mode 100644 src/views/room/widgets/context-menu/views/list-item/ContextMenuListItemView.types.ts
 delete mode 100644 src/views/room/widgets/context-menu/views/list/ContextMenuListView.tsx
 delete mode 100644 src/views/room/widgets/context-menu/views/list/ContextMenuListView.types.ts

diff --git a/src/views/room/widgets/avatar-info/AvatarInfoRentableBotChatView.tsx b/src/views/room/widgets/avatar-info/AvatarInfoRentableBotChatView.tsx
new file mode 100644
index 00000000..60a34d1e
--- /dev/null
+++ b/src/views/room/widgets/avatar-info/AvatarInfoRentableBotChatView.tsx
@@ -0,0 +1,71 @@
+import { BotSkillSaveComposer } from '@nitrots/nitro-renderer';
+import { FC, useMemo, useState } from 'react';
+import { GetRoomObjectBounds, GetRoomSession, LocalizeText, RoomWidgetUpdateRentableBotChatEvent } from '../../../../api';
+import { Base, Button, Column, Flex, Text } from '../../../../common';
+import { SendMessageHook } from '../../../../hooks';
+import { DraggableWindow, DraggableWindowPosition } from '../../../../layout';
+import { ContextMenuHeaderView } from '../context-menu/ContextMenuHeaderView';
+import { BotSkillsEnum } from './common/BotSkillsEnum';
+
+interface AvatarInfoRentableBotChatViewProps
+{
+    chatEvent: RoomWidgetUpdateRentableBotChatEvent;
+    close(): void;
+}
+
+export const AvatarInfoRentableBotChatView: FC<AvatarInfoRentableBotChatViewProps> = props =>
+{
+    const { chatEvent = null, close = null } = props;
+    // eslint-disable-next-line no-template-curly-in-string
+    const [ newText, setNewText ] = useState<string>(chatEvent.chat === '${bot.skill.chatter.configuration.text.placeholder}' ? '' : chatEvent.chat);
+    const [ automaticChat, setAutomaticChat ] = useState<boolean>(chatEvent.automaticChat);
+    const [ mixSentences, setMixSentences ] = useState<boolean>(chatEvent.mixSentences);
+    const [ chatDelay, setChatDelay ] = useState<number>(chatEvent.chatDelay);
+
+    const getObjectLocation = useMemo(() => GetRoomObjectBounds(GetRoomSession().roomId, chatEvent.objectId, chatEvent.category, 1), [ chatEvent ]);
+
+    const formatChatString = (value: string) => value.replace(/;#;/g, ' ').replace(/\r\n|\r|\n/g, '\r');
+
+    const save = () =>
+    {
+        const chatConfiguration = formatChatString(newText) + ';#;' + automaticChat + ';#;' + chatDelay + ';#;' + mixSentences;
+
+        SendMessageHook(new BotSkillSaveComposer(chatEvent.botId, BotSkillsEnum.SETUP_CHAT, chatConfiguration));
+
+        close();
+    }
+    
+    return (
+        <DraggableWindow position={ DraggableWindowPosition.NOTHING } handleSelector=".drag-handler" style={ { top: getObjectLocation.y, left: getObjectLocation.x } }>
+            <Base className="nitro-context-menu bot-chat">
+                <ContextMenuHeaderView className="drag-handler">
+                    { LocalizeText('bot.skill.chatter.configuration.title') }
+                </ContextMenuHeaderView>
+                <Column className="p-1">
+                    <Column gap={ 1 }>
+                        <Text variant="white">{ LocalizeText('bot.skill.chatter.configuration.chat.text') }</Text>
+                        <textarea className="form-control form-control-sm" placeholder={LocalizeText('bot.skill.chatter.configuration.text.placeholder')} value={newText} rows={7} onChange={e => setNewText(e.target.value)} />
+                    </Column>
+                    <Column gap={ 1 }>
+                        <Flex gap={ 1 } alignItems="center" justifyContent="between">
+                            <Text fullWidth variant="white">{ LocalizeText('bot.skill.chatter.configuration.automatic.chat') }</Text>
+                            <input type="checkbox" className="form-check-input" checked={ automaticChat } onChange={ event => setAutomaticChat(event.target.checked) } />
+                        </Flex>
+                        <Flex gap={ 1 } alignItems="center" justifyContent="between">
+                            <Text fullWidth variant="white">{ LocalizeText('bot.skill.chatter.configuration.markov') }</Text>
+                            <input type="checkbox" className="form-check-input" checked={ mixSentences } onChange={ event => setMixSentences(event.target.checked) } />
+                        </Flex>
+                        <Flex gap={ 1 } alignItems="center" justifyContent="between">
+                            <Text fullWidth variant="white">{ LocalizeText('bot.skill.chatter.configuration.chat.delay') }</Text>
+                            <input type="number" className="form-control form-control-sm" value={ chatDelay } onChange={ event => setChatDelay(event.target.valueAsNumber) }/>
+                        </Flex>
+                    </Column>
+                    <Flex alignItems="center" justifyContent="between" gap={ 1 }>
+                        <Button fullWidth variant="primary" onClick={ close }>{ LocalizeText('cancel') }</Button>
+                        <Button fullWidth variant="success" onClick={ save }>{ LocalizeText('save') }</Button>
+                    </Flex>
+                </Column>
+            </Base>
+        </DraggableWindow>
+    );
+}
diff --git a/src/views/room/widgets/avatar-info/views/use-product-confirm/AvatarInfoUseProductConfirmView.tsx b/src/views/room/widgets/avatar-info/AvatarInfoUseProductConfirmView.tsx
similarity index 73%
rename from src/views/room/widgets/avatar-info/views/use-product-confirm/AvatarInfoUseProductConfirmView.tsx
rename to src/views/room/widgets/avatar-info/AvatarInfoUseProductConfirmView.tsx
index 3f06e3c9..1ecfa537 100644
--- a/src/views/room/widgets/avatar-info/views/use-product-confirm/AvatarInfoUseProductConfirmView.tsx
+++ b/src/views/room/widgets/avatar-info/AvatarInfoUseProductConfirmView.tsx
@@ -1,11 +1,17 @@
 import { IFurnitureData, PetCustomPart, PetFigureData, RoomObjectCategory, RoomObjectVariable, RoomUserData } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { GetFurnitureDataForRoomObject, GetRoomEngine, LocalizeText, RoomWidgetUseProductMessage } from '../../../../../../api';
-import { FurniCategory } from '../../../../../../components/inventory/common/FurniCategory';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../layout';
-import { PetImageView } from '../../../../../shared/pet-image/PetImageView';
-import { useRoomContext } from '../../../../context/RoomContext';
-import { AvatarInfoUseProductConfirmViewProps } from './AvatarInfoUseProductConfirmView.types';
+import { GetFurnitureDataForRoomObject, GetRoomEngine, LocalizeText, RoomWidgetUseProductMessage, UseProductItem } from '../../../../api';
+import { Base, Button, Column, Flex, Text } from '../../../../common';
+import { FurniCategory } from '../../../../components/inventory/common/FurniCategory';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
+import { PetImageView } from '../../../shared/pet-image/PetImageView';
+import { useRoomContext } from '../../context/RoomContext';
+
+interface AvatarInfoUseProductConfirmViewProps
+{
+    item: UseProductItem;
+    close: () => void;
+}
 
 const _Str_5091: number = -1;
 const _Str_11906: number = 0;
@@ -221,57 +227,57 @@ export const AvatarInfoUseProductConfirmView: FC<AvatarInfoUseProductConfirmView
     return (
         <NitroCardView className="nitro-use-product-confirmation">
             <NitroCardHeaderView headerText={ LocalizeText('useproduct.widget.title', [ 'name' ], [ petData.name ]) } onCloseClick={ close } />
-            <NitroCardContentView>
-                <div className="row">
-                    <div className="w-unset">
-                        <div className="product-preview cursor-pointer" onClick={ selectRoomObject }>
+            <NitroCardContentView center>
+                <Flex gap={ 2 } overflow="hidden">
+                    <Column>
+                        <Base pointer className="product-preview" onClick={ selectRoomObject }>
                             { getPetImage }
-                        </div>
-                    </div>
-                    <div className="col d-flex flex-column justify-content-between">
-                        <div className="d-flex flex-column">
+                        </Base>
+                    </Column>
+                    <Column justifyContent="between" overflow="auto">
+                        <Column gap={ 2 }>
                             { (mode === _Str_11906) && 
                                 <>
-                                    <div className="text-black mb-2">{ LocalizeText('useproduct.widget.text.shampoo', [ 'productName' ], [ furniData.name ] ) }</div>
-                                    <div className="text-black">{ LocalizeText('useproduct.widget.info.shampoo') }</div>
+                                    <Text>{ LocalizeText('useproduct.widget.text.shampoo', [ 'productName' ], [ furniData.name ] ) }</Text>
+                                    <Text>{ LocalizeText('useproduct.widget.info.shampoo') }</Text>
                                 </> }
                             { (mode === _Str_11214) && 
                                 <>
-                                    <div className="text-black mb-2">{ LocalizeText('useproduct.widget.text.custompart', [ 'productName' ], [ furniData.name ] ) }</div>
-                                    <div className="text-black">{ LocalizeText('useproduct.widget.info.custompart') }</div>
+                                    <Text>{ LocalizeText('useproduct.widget.text.custompart', [ 'productName' ], [ furniData.name ] ) }</Text>
+                                    <Text>{ LocalizeText('useproduct.widget.info.custompart') }</Text>
                                 </> }
                             { (mode === _Str_11733) && 
                                 <>
-                                    <div className="text-black mb-2">{ LocalizeText('useproduct.widget.text.custompartshampoo', [ 'productName' ], [ furniData.name ] ) }</div>
-                                    <div className="text-black">{ LocalizeText('useproduct.widget.info.custompartshampoo') }</div>
+                                    <Text>{ LocalizeText('useproduct.widget.text.custompartshampoo', [ 'productName' ], [ furniData.name ] ) }</Text>
+                                    <Text>{ LocalizeText('useproduct.widget.info.custompartshampoo') }</Text>
                                 </> }
                             { (mode === _Str_11369) && 
                                 <>
-                                    <div className="text-black mb-2">{ LocalizeText('useproduct.widget.text.saddle', [ 'productName' ], [ furniData.name ] ) }</div>
-                                    <div className="text-black">{ LocalizeText('useproduct.widget.info.saddle') }</div>
+                                    <Text>{ LocalizeText('useproduct.widget.text.saddle', [ 'productName' ], [ furniData.name ] ) }</Text>
+                                    <Text>{ LocalizeText('useproduct.widget.info.saddle') }</Text>
                                 </> }
                             { (mode === _Str_8759) && 
                                 <>
-                                    <div className="text-black mb-2">{ LocalizeText('useproduct.widget.text.revive_monsterplant', [ 'productName' ], [ furniData.name ] ) }</div>
-                                    <div className="text-black">{ LocalizeText('useproduct.widget.info.revive_monsterplant') }</div>
+                                    <Text>{ LocalizeText('useproduct.widget.text.revive_monsterplant', [ 'productName' ], [ furniData.name ] ) }</Text>
+                                    <Text>{ LocalizeText('useproduct.widget.info.revive_monsterplant') }</Text>
                                 </> }
                             { (mode === _Str_8432) && 
                                 <>
-                                    <div className="text-black mb-2">{ LocalizeText('useproduct.widget.text.rebreed_monsterplant', [ 'productName' ], [ furniData.name ] ) }</div>
-                                    <div className="text-black">{ LocalizeText('useproduct.widget.info.rebreed_monsterplant') }</div>
+                                    <Text>{ LocalizeText('useproduct.widget.text.rebreed_monsterplant', [ 'productName' ], [ furniData.name ] ) }</Text>
+                                    <Text>{ LocalizeText('useproduct.widget.info.rebreed_monsterplant') }</Text>
                                 </> }
                             { (mode === _Str_9653) && 
                                 <>
-                                    <div className="text-black mb-2">{ LocalizeText('useproduct.widget.text.fertilize_monsterplant', [ 'productName' ], [ furniData.name ] ) }</div>
-                                    <div className="text-black">{ LocalizeText('useproduct.widget.info.fertilize_monsterplant') }</div>
+                                    <Text>{ LocalizeText('useproduct.widget.text.fertilize_monsterplant', [ 'productName' ], [ furniData.name ] ) }</Text>
+                                    <Text>{ LocalizeText('useproduct.widget.info.fertilize_monsterplant') }</Text>
                                 </> }
-                        </div>
-                        <div className="d-flex justify-content-between align-items-end w-100 h-100">
-                            <button type="button" className="btn btn-danger" onClick={ close }>{ LocalizeText('useproduct.widget.cancel') }</button>
-                            <button type="button" className="btn btn-primary" onClick={ useProduct }>{ LocalizeText('useproduct.widget.use') }</button>
-                        </div>
-                    </div>
-                </div>
+                        </Column>
+                        <Flex alignItems="center" justifyContent="between">
+                            <Button variant="danger" onClick={ close }>{ LocalizeText('useproduct.widget.cancel') }</Button>
+                            <Button variant="success" onClick={ useProduct }>{ LocalizeText('useproduct.widget.use') }</Button>
+                        </Flex>
+                    </Column>
+                </Flex>
             </NitroCardContentView>
         </NitroCardView>
     )
diff --git a/src/views/room/widgets/avatar-info/views/use-product/AvatarInfoUseProductView.tsx b/src/views/room/widgets/avatar-info/AvatarInfoUseProductView.tsx
similarity index 89%
rename from src/views/room/widgets/avatar-info/views/use-product/AvatarInfoUseProductView.tsx
rename to src/views/room/widgets/avatar-info/AvatarInfoUseProductView.tsx
index fe202c16..bbb5c9fb 100644
--- a/src/views/room/widgets/avatar-info/views/use-product/AvatarInfoUseProductView.tsx
+++ b/src/views/room/widgets/avatar-info/AvatarInfoUseProductView.tsx
@@ -1,12 +1,18 @@
 import { RoomObjectCategory, RoomObjectType } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
-import { GetFurnitureDataForRoomObject, LocalizeText } from '../../../../../../api';
-import { FurniCategory } from '../../../../../../components/inventory/common/FurniCategory';
-import { useRoomContext } from '../../../../context/RoomContext';
-import { ContextMenuView } from '../../../context-menu/ContextMenuView';
-import { ContextMenuHeaderView } from '../../../context-menu/views/header/ContextMenuHeaderView';
-import { ContextMenuListItemView } from '../../../context-menu/views/list-item/ContextMenuListItemView';
-import { AvatarInfoUseProductViewProps } from './AvatarInfoUseProductView.types';
+import { GetFurnitureDataForRoomObject, LocalizeText, UseProductItem } from '../../../../api';
+import { FurniCategory } from '../../../../components/inventory/common/FurniCategory';
+import { useRoomContext } from '../../context/RoomContext';
+import { ContextMenuHeaderView } from '../context-menu/ContextMenuHeaderView';
+import { ContextMenuListItemView } from '../context-menu/ContextMenuListItemView';
+import { ContextMenuView } from '../context-menu/ContextMenuView';
+
+interface AvatarInfoUseProductViewProps
+{
+    item: UseProductItem;
+    updateConfirmingProduct: (product: UseProductItem) => void;
+    close: () => void;
+}
 
 const PRODUCT_PAGE_UKNOWN: number = 0;
 const PRODUCT_PAGE_SHAMPOO: number = 1;
diff --git a/src/views/room/widgets/avatar-info/views/avatar/AvatarInfoWidgetAvatarView.tsx b/src/views/room/widgets/avatar-info/AvatarInfoWidgetAvatarView.tsx
similarity index 89%
rename from src/views/room/widgets/avatar-info/views/avatar/AvatarInfoWidgetAvatarView.tsx
rename to src/views/room/widgets/avatar-info/AvatarInfoWidgetAvatarView.tsx
index b926a175..1bcd842e 100644
--- a/src/views/room/widgets/avatar-info/views/avatar/AvatarInfoWidgetAvatarView.tsx
+++ b/src/views/room/widgets/avatar-info/AvatarInfoWidgetAvatarView.tsx
@@ -1,11 +1,18 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { RoomControllerLevel, RoomObjectCategory, RoomObjectVariable } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { GetOwnRoomObject, GetUserProfile, LocalizeText, RoomWidgetMessage, RoomWidgetUserActionMessage } from '../../../../../../api';
-import { useRoomContext } from '../../../../context/RoomContext';
-import { ContextMenuView } from '../../../context-menu/ContextMenuView';
-import { ContextMenuHeaderView } from '../../../context-menu/views/header/ContextMenuHeaderView';
-import { ContextMenuListItemView } from '../../../context-menu/views/list-item/ContextMenuListItemView';
-import { AvatarInfoWidgetAvatarViewProps } from './AvatarInfoWidgetAvatarView.types';
+import { FC, useEffect, useMemo, useState } from 'react';
+import { GetOwnRoomObject, GetUserProfile, LocalizeText, RoomWidgetMessage, RoomWidgetUpdateInfostandUserEvent, RoomWidgetUserActionMessage } from '../../../../api';
+import { BatchUpdates } from '../../../../hooks';
+import { useRoomContext } from '../../context/RoomContext';
+import { ContextMenuHeaderView } from '../context-menu/ContextMenuHeaderView';
+import { ContextMenuListItemView } from '../context-menu/ContextMenuListItemView';
+import { ContextMenuView } from '../context-menu/ContextMenuView';
+
+interface AvatarInfoWidgetAvatarViewProps
+{
+    userData: RoomWidgetUpdateInfostandUserEvent;
+    close: () => void;
+}
 
 const MODE_NORMAL = 0;
 const MODE_MODERATE = 1;
@@ -21,12 +28,6 @@ export const AvatarInfoWidgetAvatarView: FC<AvatarInfoWidgetAvatarViewProps> = p
     const [ respectsLeft, setRespectsLeft ] = useState(0);
     const { widgetHandler = null } = useRoomContext();
 
-    useEffect(() =>
-    {
-        setMode(MODE_NORMAL);
-        setRespectsLeft(userData.respectLeft);
-    }, [ userData ])
-
     const isShowGiveRights = useMemo(() =>
     {
         return (userData.amIOwner && (userData.targetRoomControllerLevel < RoomControllerLevel.GUEST) && !userData.isGuildRoom);
@@ -42,7 +43,23 @@ export const AvatarInfoWidgetAvatarView: FC<AvatarInfoWidgetAvatarViewProps> = p
         return (userData.canBeKicked || userData.canBeBanned || userData.canBeMuted || isShowGiveRights || isShowRemoveRights);
     }, [ isShowGiveRights, isShowRemoveRights, userData ]);
 
-    const processAction = useCallback((name: string) =>
+    const canGiveHandItem = useMemo(() =>
+    {
+        let flag = false;
+
+        const roomObject = GetOwnRoomObject();
+
+        if(roomObject)
+        {
+            const carryId = roomObject.model.getValue<number>(RoomObjectVariable.FIGURE_CARRY_OBJECT);
+
+            if((carryId > 0) && (carryId < 999999)) flag = true;
+        }
+
+        return flag;
+    }, []);
+
+    const processAction = (name: string) =>
     {
         let messageType: string = null;
         let message: RoomWidgetMessage = null;
@@ -173,23 +190,16 @@ export const AvatarInfoWidgetAvatarView: FC<AvatarInfoWidgetAvatarViewProps> = p
         }
 
         if(hideMenu) close();
-    }, [ widgetHandler, userData, close ]);
+    }
 
-    const canGiveHandItem = useMemo(() =>
+    useEffect(() =>
     {
-        let flag = false;
-
-        const roomObject = GetOwnRoomObject();
-
-        if(roomObject)
+        BatchUpdates(() =>
         {
-            const carryId = roomObject.model.getValue<number>(RoomObjectVariable.FIGURE_CARRY_OBJECT);
-
-            if((carryId > 0) && (carryId < 999999)) flag = true;
-        }
-
-        return flag;
-    }, []);
+            setMode(MODE_NORMAL);
+            setRespectsLeft(userData.respectLeft);
+        });
+    }, [ userData ]);
 
     return (
         <ContextMenuView objectId={ userData.roomIndex } category={ RoomObjectCategory.UNIT } userType={ userData.userType } close={ close }>
@@ -225,12 +235,12 @@ export const AvatarInfoWidgetAvatarView: FC<AvatarInfoWidgetAvatarViewProps> = p
                     </ContextMenuListItemView>
                     { moderateMenuHasContent &&
                         <ContextMenuListItemView onClick={ event => processAction('moderate') }>
-                            <i className="fas fa-chevron-right right" />
+                            <FontAwesomeIcon icon="chevron-right" className="right" />
                             { LocalizeText('infostand.link.moderate') }
                         </ContextMenuListItemView> }
                     { userData.isAmbassador &&
                         <ContextMenuListItemView onClick={ event => processAction('ambassador') }>
-                            <i className="fas fa-chevron-right right" />
+                            <FontAwesomeIcon icon="chevron-right" className="right" />
                             { LocalizeText('infostand.link.ambassador') }
                         </ContextMenuListItemView> }
                     { canGiveHandItem && <ContextMenuListItemView onClick={ event => processAction('pass_hand_item') }>
@@ -243,11 +253,11 @@ export const AvatarInfoWidgetAvatarView: FC<AvatarInfoWidgetAvatarViewProps> = p
                         { LocalizeText('infostand.button.kick') }
                     </ContextMenuListItemView>
                     <ContextMenuListItemView onClick={ event => processAction('mute') }>
-                        <i className="fas fa-chevron-right right" />
+                        <FontAwesomeIcon icon="chevron-right" className="right" />
                         { LocalizeText('infostand.button.mute') }
                     </ContextMenuListItemView>
                     <ContextMenuListItemView onClick={ event => processAction('ban') }>
-                        <i className="fas fa-chevron-right right" />
+                        <FontAwesomeIcon icon="chevron-right" className="right" />
                         { LocalizeText('infostand.button.ban') }
                     </ContextMenuListItemView>
                     { isShowGiveRights &&
@@ -259,7 +269,7 @@ export const AvatarInfoWidgetAvatarView: FC<AvatarInfoWidgetAvatarViewProps> = p
                             { LocalizeText('infostand.button.removerights') }
                         </ContextMenuListItemView> }
                     <ContextMenuListItemView onClick={ event => processAction('back') }>
-                        <i className="fas fa-chevron-left left" />
+                        <FontAwesomeIcon icon="chevron-left" className="left" />
                         { LocalizeText('generic.back') }
                     </ContextMenuListItemView>
                 </> }
@@ -275,7 +285,7 @@ export const AvatarInfoWidgetAvatarView: FC<AvatarInfoWidgetAvatarViewProps> = p
                         { LocalizeText('infostand.button.perm_ban') }
                     </ContextMenuListItemView>
                     <ContextMenuListItemView onClick={ event => processAction('back_moderate') }>
-                        <i className="fas fa-chevron-left left" />
+                        <FontAwesomeIcon icon="chevron-left" className="left" />
                         { LocalizeText('generic.back') }
                     </ContextMenuListItemView>
                 </> }
@@ -291,7 +301,7 @@ export const AvatarInfoWidgetAvatarView: FC<AvatarInfoWidgetAvatarViewProps> = p
                         { LocalizeText('infostand.button.mute_10min') }
                     </ContextMenuListItemView>
                     <ContextMenuListItemView onClick={ event => processAction('back_moderate') }>
-                        <i className="fas fa-chevron-left left" />
+                        <FontAwesomeIcon icon="chevron-left" className="left" />
                         { LocalizeText('generic.back') }
                     </ContextMenuListItemView>
                 </> }
@@ -304,11 +314,11 @@ export const AvatarInfoWidgetAvatarView: FC<AvatarInfoWidgetAvatarViewProps> = p
                         { LocalizeText('infostand.button.kick') }
                     </ContextMenuListItemView>
                     <ContextMenuListItemView onClick={ event => processAction('ambassador_mute') }>
-                        <i className="fas fa-chevron-right right" />
                         { LocalizeText('infostand.button.mute') }
+                        <FontAwesomeIcon icon="chevron-right" className="right" />
                     </ContextMenuListItemView>
                     <ContextMenuListItemView onClick={ event => processAction('back') }>
-                        <i className="fas fa-chevron-left left" />
+                        <FontAwesomeIcon icon="chevron-left" className="left" />
                         { LocalizeText('generic.back') }
                     </ContextMenuListItemView>
                 </> }
@@ -327,7 +337,7 @@ export const AvatarInfoWidgetAvatarView: FC<AvatarInfoWidgetAvatarViewProps> = p
                         { LocalizeText('infostand.button.mute_18hour') }
                     </ContextMenuListItemView>
                     <ContextMenuListItemView onClick={ event => processAction('back_ambassador') }>
-                        <i className="fas fa-chevron-left left" />
+                        <FontAwesomeIcon icon="chevron-left" className="left" />
                         { LocalizeText('generic.back') }
                     </ContextMenuListItemView>
                 </> }
diff --git a/src/views/room/widgets/avatar-info/views/decorate/AvatarInfoWidgetDecorateView.tsx b/src/views/room/widgets/avatar-info/AvatarInfoWidgetDecorateView.tsx
similarity index 53%
rename from src/views/room/widgets/avatar-info/views/decorate/AvatarInfoWidgetDecorateView.tsx
rename to src/views/room/widgets/avatar-info/AvatarInfoWidgetDecorateView.tsx
index 95b752b0..e05f32b8 100644
--- a/src/views/room/widgets/avatar-info/views/decorate/AvatarInfoWidgetDecorateView.tsx
+++ b/src/views/room/widgets/avatar-info/AvatarInfoWidgetDecorateView.tsx
@@ -1,21 +1,24 @@
 import { RoomObjectCategory } from '@nitrots/nitro-renderer';
-import { FC, useCallback } from 'react';
-import { LocalizeText, RoomWidgetUpdateDecorateModeEvent } from '../../../../../../api';
-import { useRoomContext } from '../../../../context/RoomContext';
-import { ContextMenuView } from '../../../context-menu/ContextMenuView';
-import { ContextMenuListItemView } from '../../../context-menu/views/list-item/ContextMenuListItemView';
-import { ContextMenuListView } from '../../../context-menu/views/list/ContextMenuListView';
-import { AvatarInfoWidgetDecorateViewProps } from './AvatarInfoWidgetDecorateView.types';
+import { FC } from 'react';
+import { LocalizeText, RoomWidgetUpdateDecorateModeEvent } from '../../../../api';
+import { useRoomContext } from '../../context/RoomContext';
+import { ContextMenuListItemView } from '../context-menu/ContextMenuListItemView';
+import { ContextMenuListView } from '../context-menu/ContextMenuListView';
+import { ContextMenuView } from '../context-menu/ContextMenuView';
+
+interface AvatarInfoWidgetDecorateViewProps
+{
+    userId: number;
+    userName: string;
+    roomIndex: number;
+}
 
 export const AvatarInfoWidgetDecorateView: FC<AvatarInfoWidgetDecorateViewProps> = props =>
 {
     const { userId = -1, userName = '', roomIndex = -1 } = props;
     const { eventDispatcher = null } = useRoomContext();
 
-    const stopDecorating = useCallback(() =>
-    {
-        eventDispatcher.dispatchEvent(new RoomWidgetUpdateDecorateModeEvent(false));
-    }, [ eventDispatcher ]);
+    const stopDecorating = () => eventDispatcher.dispatchEvent(new RoomWidgetUpdateDecorateModeEvent(false));
     
     return (
         <ContextMenuView objectId={ roomIndex } category={ RoomObjectCategory.UNIT } close={ null }>
diff --git a/src/views/room/widgets/avatar-info/views/name/AvatarInfoWidgetNameView.tsx b/src/views/room/widgets/avatar-info/AvatarInfoWidgetNameView.tsx
similarity index 58%
rename from src/views/room/widgets/avatar-info/views/name/AvatarInfoWidgetNameView.tsx
rename to src/views/room/widgets/avatar-info/AvatarInfoWidgetNameView.tsx
index d30da446..85dcf506 100644
--- a/src/views/room/widgets/avatar-info/views/name/AvatarInfoWidgetNameView.tsx
+++ b/src/views/room/widgets/avatar-info/AvatarInfoWidgetNameView.tsx
@@ -1,16 +1,18 @@
 import { FC, useMemo } from 'react';
-import { GetSessionDataManager } from '../../../../../../api';
-import { ContextMenuView } from '../../../context-menu/ContextMenuView';
-import { AvatarInfoWidgetNameViewProps } from './AvatarInfoWidgetNameView.types';
+import { GetSessionDataManager, RoomWidgetObjectNameEvent } from '../../../../api';
+import { ContextMenuView } from '../context-menu/ContextMenuView';
+
+interface AvatarInfoWidgetNameViewProps
+{
+    nameData: RoomWidgetObjectNameEvent;
+    close: () => void;
+}
 
 export const AvatarInfoWidgetNameView: FC<AvatarInfoWidgetNameViewProps> = props =>
 {
     const { nameData = null, close = null } = props;
 
-    const fades = useMemo(() =>
-    {
-        return (nameData.id !== GetSessionDataManager().userId);
-    }, [ nameData ]);
+    const fades = useMemo(() => (nameData.id !== GetSessionDataManager().userId), [ nameData ]);
 
     return (
         <ContextMenuView objectId={ nameData.roomIndex } category={ nameData.category } userType={ nameData.userType } fades={ fades } className="name-only" close= { close }>
diff --git a/src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.tsx b/src/views/room/widgets/avatar-info/AvatarInfoWidgetOwnAvatarView.tsx
similarity index 87%
rename from src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.tsx
rename to src/views/room/widgets/avatar-info/AvatarInfoWidgetOwnAvatarView.tsx
index c83c58b5..5c40631f 100644
--- a/src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.tsx
+++ b/src/views/room/widgets/avatar-info/AvatarInfoWidgetOwnAvatarView.tsx
@@ -1,15 +1,23 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { AvatarAction, AvatarExpressionEnum, RoomControllerLevel, RoomObjectCategory } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useMemo, useState } from 'react';
-import { GetCanStandUp, GetCanUseExpression, GetOwnPosture, GetUserProfile, HasHabboClub, HasHabboVip, IsRidingHorse, LocalizeText, RoomWidgetAvatarExpressionMessage, RoomWidgetChangePostureMessage, RoomWidgetDanceMessage, RoomWidgetMessage, RoomWidgetUpdateDecorateModeEvent, RoomWidgetUserActionMessage } from '../../../../../../api';
-import { AvatarEditorEvent } from '../../../../../../events';
-import { HelpNameChangeEvent } from '../../../../../../events/help/HelpNameChangeEvent';
-import { dispatchUiEvent } from '../../../../../../hooks';
-import { CurrencyIcon } from '../../../../../shared/currency-icon/CurrencyIcon';
-import { useRoomContext } from '../../../../context/RoomContext';
-import { ContextMenuView } from '../../../context-menu/ContextMenuView';
-import { ContextMenuHeaderView } from '../../../context-menu/views/header/ContextMenuHeaderView';
-import { ContextMenuListItemView } from '../../../context-menu/views/list-item/ContextMenuListItemView';
-import { AvatarInfoWidgetOwnAvatarViewProps } from './AvatarInfoWidgetOwnAvatarView.types';
+import { GetCanStandUp, GetCanUseExpression, GetOwnPosture, GetUserProfile, HasHabboClub, HasHabboVip, IsRidingHorse, LocalizeText, RoomWidgetAvatarExpressionMessage, RoomWidgetChangePostureMessage, RoomWidgetDanceMessage, RoomWidgetMessage, RoomWidgetUpdateDecorateModeEvent, RoomWidgetUpdateInfostandUserEvent, RoomWidgetUserActionMessage } from '../../../../api';
+import { Flex } from '../../../../common';
+import { AvatarEditorEvent } from '../../../../events';
+import { HelpNameChangeEvent } from '../../../../events/help/HelpNameChangeEvent';
+import { dispatchUiEvent } from '../../../../hooks';
+import { CurrencyIcon } from '../../../shared/currency-icon/CurrencyIcon';
+import { useRoomContext } from '../../context/RoomContext';
+import { ContextMenuHeaderView } from '../context-menu/ContextMenuHeaderView';
+import { ContextMenuListItemView } from '../context-menu/ContextMenuListItemView';
+import { ContextMenuView } from '../context-menu/ContextMenuView';
+
+interface AvatarInfoWidgetOwnAvatarViewProps
+{
+    userData: RoomWidgetUpdateInfostandUserEvent;
+    isDancing: boolean;
+    close: () => void;
+}
 
 const MODE_NORMAL = 0;
 const MODE_CLUB_DANCES = 1;
@@ -134,7 +142,7 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                     </ContextMenuListItemView>
                     { (HasHabboClub() && !isRidingHorse) &&
                         <ContextMenuListItemView onClick={ event => processAction('dance_menu') }>
-                            <i className="fas fa-chevron-right right" />
+                            <FontAwesomeIcon icon="chevron-right" className="right" />
                             { LocalizeText('widget.memenu.dance') }
                         </ContextMenuListItemView> }
                     { (!isDancing && !HasHabboClub() && !isRidingHorse) &&
@@ -146,11 +154,11 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                             { LocalizeText('widget.memenu.dance.stop') }
                         </ContextMenuListItemView> }
                     <ContextMenuListItemView onClick={ event => processAction('expressions') }>
-                        <i className="fas fa-chevron-right right" />
+                    <FontAwesomeIcon icon="chevron-right" className="right" />
                         { LocalizeText('infostand.link.expressions') }
                     </ContextMenuListItemView>
                     <ContextMenuListItemView onClick={ event => processAction('signs') }>
-                        <i className="fas fa-chevron-right right" />
+                    <FontAwesomeIcon icon="chevron-right" className="right" />
                         { LocalizeText('infostand.show.signs') }
                     </ContextMenuListItemView>
                     { (userData.carryItem > 0) &&
@@ -177,7 +185,7 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                         { LocalizeText('widget.memenu.dance4') }
                     </ContextMenuListItemView>
                     <ContextMenuListItemView onClick={ event => processAction('back') }>
-                        <i className="fas fa-chevron-left left" />
+                        <FontAwesomeIcon icon="chevron-left" className="left" />
                         { LocalizeText('generic.back') }
                     </ContextMenuListItemView>
                 </> }
@@ -196,12 +204,12 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                             { LocalizeText('widget.memenu.wave') }
                         </ContextMenuListItemView> }
                     { GetCanUseExpression() &&
-                        <ContextMenuListItemView canSelect={ HasHabboVip() } onClick={ event => processAction('laugh') }>
+                        <ContextMenuListItemView disabled={ !HasHabboVip() } onClick={ event => processAction('laugh') }>
                             <CurrencyIcon type="hc" />
                             { LocalizeText('widget.memenu.laugh') }
                         </ContextMenuListItemView> }
                     { GetCanUseExpression() &&
-                        <ContextMenuListItemView canSelect={ HasHabboVip() } onClick={ event => processAction('blow') }>
+                        <ContextMenuListItemView disabled={ !HasHabboVip() } onClick={ event => processAction('blow') }>
                             <CurrencyIcon type="hc" />
                             { LocalizeText('widget.memenu.blow') }
                         </ContextMenuListItemView> }
@@ -209,13 +217,13 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                         { LocalizeText('widget.memenu.idle') }
                     </ContextMenuListItemView>
                     <ContextMenuListItemView onClick={ event => processAction('back') }>
-                        <i className="fas fa-chevron-left left" />
+                        <FontAwesomeIcon icon="chevron-left" className="left" />
                         { LocalizeText('generic.back') }
                     </ContextMenuListItemView>
                 </> }
             { (mode === MODE_SIGNS) &&
                 <>
-                    <div className="d-flex menu-list-split-3">
+                    <Flex className="menu-list-split-3">
                         <ContextMenuListItemView onClick={ event => processAction('sign_1') }>
                             1
                         </ContextMenuListItemView>
@@ -225,8 +233,8 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                         <ContextMenuListItemView onClick={ event => processAction('sign_3') }>
                             3
                         </ContextMenuListItemView>
-                    </div>
-                    <div className="d-flex menu-list-split-3">
+                    </Flex>
+                    <Flex className="menu-list-split-3">
                         <ContextMenuListItemView onClick={ event => processAction('sign_4') }>
                             4
                         </ContextMenuListItemView>
@@ -236,8 +244,8 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                         <ContextMenuListItemView onClick={ event => processAction('sign_6') }>
                             6
                         </ContextMenuListItemView>
-                    </div>
-                    <div className="d-flex menu-list-split-3">
+                    </Flex>
+                    <Flex className="menu-list-split-3">
                         <ContextMenuListItemView onClick={ event => processAction('sign_7') }>
                             7
                         </ContextMenuListItemView>
@@ -247,8 +255,8 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                         <ContextMenuListItemView onClick={ event => processAction('sign_9') }>
                             9
                         </ContextMenuListItemView>
-                    </div>
-                    <div className="d-flex menu-list-split-3">
+                    </Flex>
+                    <Flex className="menu-list-split-3">
                         <ContextMenuListItemView onClick={ event => processAction('sign_10') }>
                             10
                         </ContextMenuListItemView>
@@ -258,8 +266,8 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                         <ContextMenuListItemView onClick={ event => processAction('sign_15') }>
                             <i className="icon icon-sign-smile" />
                         </ContextMenuListItemView>
-                    </div>
-                    <div className="d-flex menu-list-split-3">
+                    </Flex>
+                    <Flex className="menu-list-split-3">
                         <ContextMenuListItemView onClick={ event => processAction('sign_12') }>
                             <i className="icon icon-sign-skull" />
                         </ContextMenuListItemView>
@@ -269,8 +277,8 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                         <ContextMenuListItemView onClick={ event => processAction('sign_17') }>
                             <i className="icon icon-sign-yellow" />
                         </ContextMenuListItemView>
-                    </div>
-                    <div className="d-flex menu-list-split-3">
+                    </Flex>
+                    <Flex className="menu-list-split-3">
                         <ContextMenuListItemView onClick={ event => processAction('sign_16') }>
                             <i className="icon icon-sign-red" />
                         </ContextMenuListItemView>
@@ -280,9 +288,9 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                         <ContextMenuListItemView onClick={ event => processAction('sign_11') }>
                             <i className="icon icon-sign-heart" />
                         </ContextMenuListItemView>
-                    </div>
+                    </Flex>
                     <ContextMenuListItemView onClick={ event => processAction('back') }>
-                        <i className="fas fa-chevron-left left" />
+                        <FontAwesomeIcon icon="chevron-left" className="left" />
                         { LocalizeText('generic.back') }
                     </ContextMenuListItemView>
                 </> }
diff --git a/src/views/room/widgets/avatar-info/views/own-pet/AvatarInfoWidgetOwnPetView.tsx b/src/views/room/widgets/avatar-info/AvatarInfoWidgetOwnPetView.tsx
similarity index 87%
rename from src/views/room/widgets/avatar-info/views/own-pet/AvatarInfoWidgetOwnPetView.tsx
rename to src/views/room/widgets/avatar-info/AvatarInfoWidgetOwnPetView.tsx
index 48b775eb..c7acce73 100644
--- a/src/views/room/widgets/avatar-info/views/own-pet/AvatarInfoWidgetOwnPetView.tsx
+++ b/src/views/room/widgets/avatar-info/AvatarInfoWidgetOwnPetView.tsx
@@ -1,11 +1,17 @@
 import { PetType, RoomObjectCategory, RoomObjectType, RoomObjectVariable } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { GetOwnRoomObject, LocalizeText, RoomWidgetMessage, RoomWidgetUserActionMessage } from '../../../../../../api';
-import { useRoomContext } from '../../../../context/RoomContext';
-import { ContextMenuView } from '../../../context-menu/ContextMenuView';
-import { ContextMenuHeaderView } from '../../../context-menu/views/header/ContextMenuHeaderView';
-import { ContextMenuListItemView } from '../../../context-menu/views/list-item/ContextMenuListItemView';
-import { AvatarInfoWidgetOwnPetViewProps } from './AvatarInfoWidgetOwnPetView.types';
+import { FC, useEffect, useMemo, useState } from 'react';
+import { GetOwnRoomObject, LocalizeText, RoomWidgetMessage, RoomWidgetUpdateInfostandPetEvent, RoomWidgetUserActionMessage } from '../../../../api';
+import { BatchUpdates } from '../../../../hooks';
+import { useRoomContext } from '../../context/RoomContext';
+import { ContextMenuHeaderView } from '../context-menu/ContextMenuHeaderView';
+import { ContextMenuListItemView } from '../context-menu/ContextMenuListItemView';
+import { ContextMenuView } from '../context-menu/ContextMenuView';
+
+interface AvatarInfoWidgetOwnPetViewProps
+{
+    petData: RoomWidgetUpdateInfostandPetEvent;
+    close: () => void;
+}
 
 const _Str_2906: number = 0;
 const _Str_5818: number = 1;
@@ -19,21 +25,23 @@ export const AvatarInfoWidgetOwnPetView: FC<AvatarInfoWidgetOwnPetViewProps> = p
     const [ respectsLeft, setRespectsLeft ] = useState(0);
     const { roomSession = null, widgetHandler = null } = useRoomContext();
 
-    useEffect(() =>
+    const canGiveHandItem = useMemo(() =>
     {
-        setMode(prevValue =>
-            {
-                if(petData.petType === PetType.MONSTERPLANT) return _Str_10946;
-                else if(petData.saddle && !petData.rider) return _Str_5818;
-                else if(petData.rider) return _Str_5938;
+        let flag = false;
 
-                return _Str_2906;
-            });
+        const roomObject = GetOwnRoomObject();
 
-        setRespectsLeft(petData.respectsPetLeft);
-    }, [ petData ])
+        if(roomObject)
+        {
+            const carryId = roomObject.model.getValue<number>(RoomObjectVariable.FIGURE_CARRY_OBJECT);
 
-    const processAction = useCallback((name: string) =>
+            if((carryId > 0) && (carryId < 999999)) flag = true;
+        }
+
+        return flag;
+    }, []);
+
+    const processAction = (name: string) =>
     {
         let messageType: string = null;
         let message: RoomWidgetMessage = null;
@@ -118,23 +126,24 @@ export const AvatarInfoWidgetOwnPetView: FC<AvatarInfoWidgetOwnPetViewProps> = p
         }
 
         if(hideMenu) close();
-    }, [ widgetHandler, petData, mode, close ]);
+    }
 
-    const canGiveHandItem = useMemo(() =>
+    useEffect(() =>
     {
-        let flag = false;
-
-        const roomObject = GetOwnRoomObject();
-
-        if(roomObject)
+        BatchUpdates(() =>
         {
-            const carryId = roomObject.model.getValue<number>(RoomObjectVariable.FIGURE_CARRY_OBJECT);
-
-            if((carryId > 0) && (carryId < 999999)) flag = true;
-        }
-
-        return flag;
-    }, []);
+            setMode(prevValue =>
+                {
+                    if(petData.petType === PetType.MONSTERPLANT) return _Str_10946;
+                    else if(petData.saddle && !petData.rider) return _Str_5818;
+                    else if(petData.rider) return _Str_5938;
+    
+                    return _Str_2906;
+                });
+    
+            setRespectsLeft(petData.respectsPetLeft);
+        });
+    }, [ petData ]);
 
     return (
         <ContextMenuView objectId={ petData.roomIndex } category={ RoomObjectCategory.UNIT } userType={ RoomObjectType.PET } close={ close }>
@@ -167,8 +176,8 @@ export const AvatarInfoWidgetOwnPetView: FC<AvatarInfoWidgetOwnPetViewProps> = p
                     <ContextMenuListItemView onClick={ event => processAction('mount') }>
                         { LocalizeText('infostand.button.mount') }
                     </ContextMenuListItemView>
-                    <ContextMenuListItemView onClick={ event => processAction('toggle_riding_permission') }>
-                        <input type="checkbox" className="me-1" checked={ !!petData.publiclyRideable } readOnly={ true }  />
+                    <ContextMenuListItemView onClick={ event => processAction('toggle_riding_permission') } gap={ 1 }>
+                        <input type="checkbox" checked={ !!petData.publiclyRideable } readOnly={ true }  />
                         { LocalizeText('infostand.button.toggle_riding_permission') }
                     </ContextMenuListItemView>
                     { (respectsLeft > 0) &&
@@ -214,8 +223,8 @@ export const AvatarInfoWidgetOwnPetView: FC<AvatarInfoWidgetOwnPetViewProps> = p
                         </ContextMenuListItemView> }
                     { !petData.dead && (petData.level === petData.maximumLevel) && petData.breedable &&
                         <>
-                            <ContextMenuListItemView onClick={ event => processAction('toggle_breeding_permission') }>
-                                <input type="checkbox" className="me-1" checked={ petData.publiclyBreedable } readOnly={ true }  />
+                            <ContextMenuListItemView onClick={ event => processAction('toggle_breeding_permission') } gap={ 1 }>
+                                <input type="checkbox" checked={ petData.publiclyBreedable } readOnly={ true }  />
                                 { LocalizeText('infostand.button.toggle_breeding_permission') }
                             </ContextMenuListItemView>
                             <ContextMenuListItemView onClick={ event => processAction('breed') }>
diff --git a/src/views/room/widgets/avatar-info/views/pet/AvatarInfoWidgetPetView.tsx b/src/views/room/widgets/avatar-info/AvatarInfoWidgetPetView.tsx
similarity index 82%
rename from src/views/room/widgets/avatar-info/views/pet/AvatarInfoWidgetPetView.tsx
rename to src/views/room/widgets/avatar-info/AvatarInfoWidgetPetView.tsx
index fdcd9ff1..1ba9f5c2 100644
--- a/src/views/room/widgets/avatar-info/views/pet/AvatarInfoWidgetPetView.tsx
+++ b/src/views/room/widgets/avatar-info/AvatarInfoWidgetPetView.tsx
@@ -1,11 +1,17 @@
 import { PetType, RoomControllerLevel, RoomObjectCategory, RoomObjectType, RoomObjectVariable } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { GetOwnRoomObject, GetSessionDataManager, LocalizeText, RoomWidgetMessage, RoomWidgetUserActionMessage } from '../../../../../../api';
-import { useRoomContext } from '../../../../context/RoomContext';
-import { ContextMenuView } from '../../../context-menu/ContextMenuView';
-import { ContextMenuHeaderView } from '../../../context-menu/views/header/ContextMenuHeaderView';
-import { ContextMenuListItemView } from '../../../context-menu/views/list-item/ContextMenuListItemView';
-import { AvatarInfoWidgetPetViewProps } from './AvatarInfoWidgetPetView.types';
+import { FC, useEffect, useMemo, useState } from 'react';
+import { GetOwnRoomObject, GetSessionDataManager, LocalizeText, RoomWidgetMessage, RoomWidgetUpdateInfostandPetEvent, RoomWidgetUserActionMessage } from '../../../../api';
+import { BatchUpdates } from '../../../../hooks';
+import { useRoomContext } from '../../context/RoomContext';
+import { ContextMenuHeaderView } from '../context-menu/ContextMenuHeaderView';
+import { ContextMenuListItemView } from '../context-menu/ContextMenuListItemView';
+import { ContextMenuView } from '../context-menu/ContextMenuView';
+
+interface AvatarInfoWidgetPetViewProps
+{
+    petData: RoomWidgetUpdateInfostandPetEvent;
+    close: () => void;
+}
 
 const _Str_2906: number = 0;
 const _Str_5818: number = 1;
@@ -19,21 +25,28 @@ export const AvatarInfoWidgetPetView: FC<AvatarInfoWidgetPetViewProps> = props =
     const [ respectsLeft, setRespectsLeft ] = useState(0);
     const { roomSession = null, widgetHandler = null } = useRoomContext();
 
-    useEffect(() =>
+    const canPickUp = useMemo(() =>
     {
-        setMode(prevValue =>
-            {
-                if(petData.petType === PetType.MONSTERPLANT) return _Str_13388;
-                else if(petData.saddle && !petData.rider) return _Str_5818;
-                else if(petData.rider) return _Str_5938;
+        return (roomSession.isRoomOwner || (roomSession.controllerLevel >= RoomControllerLevel.GUEST) || GetSessionDataManager().isModerator);
+    }, [ roomSession ]);
 
-                return _Str_2906;
-            });
+    const canGiveHandItem = useMemo(() =>
+    {
+        let flag = false;
 
-        setRespectsLeft(petData.respectsPetLeft);
-    }, [ petData ])
+        const roomObject = GetOwnRoomObject();
 
-    const processAction = useCallback((name: string) =>
+        if(roomObject)
+        {
+            const carryId = roomObject.model.getValue<number>(RoomObjectVariable.FIGURE_CARRY_OBJECT);
+
+            if((carryId > 0) && (carryId < 999999)) flag = true;
+        }
+
+        return flag;
+    }, []);
+
+    const processAction = (name: string) =>
     {
         let messageType: string = null;
         let message: RoomWidgetMessage = null;
@@ -80,28 +93,24 @@ export const AvatarInfoWidgetPetView: FC<AvatarInfoWidgetPetViewProps> = props =
         }
 
         if(hideMenu) close();
-    }, [ widgetHandler, petData, close ]);
+    }
 
-    const canPickUp = useMemo(() =>
+    useEffect(() =>
     {
-        return (roomSession.isRoomOwner || (roomSession.controllerLevel >= RoomControllerLevel.GUEST) || GetSessionDataManager().isModerator);
-    }, [ roomSession ]);
-
-    const canGiveHandItem = useMemo(() =>
-    {
-        let flag = false;
-
-        const roomObject = GetOwnRoomObject();
-
-        if(roomObject)
+        BatchUpdates(() =>
         {
-            const carryId = roomObject.model.getValue<number>(RoomObjectVariable.FIGURE_CARRY_OBJECT);
-
-            if((carryId > 0) && (carryId < 999999)) flag = true;
-        }
-
-        return flag;
-    }, []);
+            setMode(prevValue =>
+                {
+                    if(petData.petType === PetType.MONSTERPLANT) return _Str_13388;
+                    else if(petData.saddle && !petData.rider) return _Str_5818;
+                    else if(petData.rider) return _Str_5938;
+    
+                    return _Str_2906;
+                });
+    
+            setRespectsLeft(petData.respectsPetLeft);
+        });
+    }, [ petData ]);
 
     return (
         <ContextMenuView objectId={ petData.roomIndex } category={ RoomObjectCategory.UNIT } userType={ RoomObjectType.PET } close={ close }>
diff --git a/src/views/room/widgets/avatar-info/views/rentable-bot/AvatarInfoWidgetRentableBotView.tsx b/src/views/room/widgets/avatar-info/AvatarInfoWidgetRentableBotView.tsx
similarity index 68%
rename from src/views/room/widgets/avatar-info/views/rentable-bot/AvatarInfoWidgetRentableBotView.tsx
rename to src/views/room/widgets/avatar-info/AvatarInfoWidgetRentableBotView.tsx
index ecbe9c1a..345257e3 100644
--- a/src/views/room/widgets/avatar-info/views/rentable-bot/AvatarInfoWidgetRentableBotView.tsx
+++ b/src/views/room/widgets/avatar-info/AvatarInfoWidgetRentableBotView.tsx
@@ -1,13 +1,19 @@
 import { BotCommandConfigurationEvent, BotRemoveComposer, BotSkillSaveComposer, RequestBotCommandConfigurationComposer, RoomObjectCategory, RoomObjectType } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
-import { GetNitroInstance, LocalizeText, RoomWidgetUpdateRentableBotChatEvent } from '../../../../../../api';
-import { CreateMessageHook, SendMessageHook } from '../../../../../../hooks/messages';
-import { useRoomContext } from '../../../../context/RoomContext';
-import { ContextMenuView } from '../../../context-menu/ContextMenuView';
-import { ContextMenuHeaderView } from '../../../context-menu/views/header/ContextMenuHeaderView';
-import { ContextMenuListItemView } from '../../../context-menu/views/list-item/ContextMenuListItemView';
-import { BotSkillsEnum } from '../../common/BotSkillsEnum';
-import { AvatarInfoWidgetRentableBotViewProps } from './AvatarInfoWidgetRentableBotView.types';
+import { GetNitroInstance, LocalizeText, RoomWidgetUpdateInfostandRentableBotEvent, RoomWidgetUpdateRentableBotChatEvent } from '../../../../api';
+import { Button, Column, Flex, Text } from '../../../../common';
+import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages';
+import { useRoomContext } from '../../context/RoomContext';
+import { ContextMenuHeaderView } from '../context-menu/ContextMenuHeaderView';
+import { ContextMenuListItemView } from '../context-menu/ContextMenuListItemView';
+import { ContextMenuView } from '../context-menu/ContextMenuView';
+import { BotSkillsEnum } from './common/BotSkillsEnum';
+
+interface AvatarInfoWidgetRentableBotViewProps
+{
+    rentableBotData: RoomWidgetUpdateInfostandRentableBotEvent;
+    close: () => void;
+}
 
 const MODE_NORMAL = 0;
 const MODE_CHANGE_NAME = 1;
@@ -21,17 +27,10 @@ export const AvatarInfoWidgetRentableBotView: FC<AvatarInfoWidgetRentableBotView
     const [ newMotto, setNewMotto ] = useState('');
     const { eventDispatcher = null } = useRoomContext();
 
-    useEffect(() =>
-    {
-        setMode(MODE_NORMAL);
-    }, [ rentableBotData ]);
-
     const onBotCommandConfigurationEvent = useCallback((event: BotCommandConfigurationEvent) =>
     {
         const parser = event.getParser();
 
-        if(!parser) return;
-
         if(parser.botId !== rentableBotData.webID) return;
 
         switch(parser.commandId)
@@ -69,12 +68,9 @@ export const AvatarInfoWidgetRentableBotView: FC<AvatarInfoWidgetRentableBotView
 
     CreateMessageHook(BotCommandConfigurationEvent, onBotCommandConfigurationEvent);
 
-    const requestBotCommandConfiguration = useCallback((skillType: number) =>
-    {
-        SendMessageHook(new RequestBotCommandConfigurationComposer(rentableBotData.webID, skillType));
-    }, [ rentableBotData ]);
+    const requestBotCommandConfiguration = (skillType: number) => SendMessageHook(new RequestBotCommandConfigurationComposer(rentableBotData.webID, skillType));
 
-    const processAction = useCallback((name: string) =>
+    const processAction = (name: string) =>
     {
         let hideMenu = true;
 
@@ -130,7 +126,12 @@ export const AvatarInfoWidgetRentableBotView: FC<AvatarInfoWidgetRentableBotView
         }
 
         if(hideMenu) close();
-    }, [ rentableBotData, newName, newMotto, requestBotCommandConfiguration, close ]);
+    }
+
+    useEffect(() =>
+    {
+        setMode(MODE_NORMAL);
+    }, [ rentableBotData ]);
 
     const canControl = (rentableBotData.amIOwner || rentableBotData.amIAnyRoomController);
 
@@ -139,63 +140,63 @@ export const AvatarInfoWidgetRentableBotView: FC<AvatarInfoWidgetRentableBotView
             <ContextMenuHeaderView>
                 { rentableBotData.name }
             </ContextMenuHeaderView>
-            { (mode === MODE_NORMAL) &&
+            { (mode === MODE_NORMAL) && canControl &&
                 <>
-                    { ((rentableBotData.botSkills.indexOf(BotSkillsEnum.DONATE_TO_ALL) >= 0) && canControl) &&
+                    { (rentableBotData.botSkills.indexOf(BotSkillsEnum.DONATE_TO_ALL) >= 0) &&
                         <ContextMenuListItemView onClick={ event => processAction('donate_to_all') }>
                             { LocalizeText('avatar.widget.donate_to_all') }
                         </ContextMenuListItemView> }
-                    { ((rentableBotData.botSkills.indexOf(BotSkillsEnum.DONATE_TO_USER) >= 0) && canControl) &&
+                    { (rentableBotData.botSkills.indexOf(BotSkillsEnum.DONATE_TO_USER) >= 0) &&
                         <ContextMenuListItemView onClick={ event => processAction('donate_to_user') }>
                             { LocalizeText('avatar.widget.donate_to_user') }
                         </ContextMenuListItemView> }
-                    { ((rentableBotData.botSkills.indexOf(BotSkillsEnum.CHANGE_BOT_NAME) >= 0) && canControl) &&
+                    { (rentableBotData.botSkills.indexOf(BotSkillsEnum.CHANGE_BOT_NAME) >= 0) &&
                         <ContextMenuListItemView onClick={ event => processAction('change_bot_name') }>
                             { LocalizeText('avatar.widget.change_bot_name') }
                         </ContextMenuListItemView> }
-                    { ((rentableBotData.botSkills.indexOf(BotSkillsEnum.CHANGE_BOT_MOTTO) >= 0) && canControl) &&
+                    { (rentableBotData.botSkills.indexOf(BotSkillsEnum.CHANGE_BOT_MOTTO) >= 0) &&
                         <ContextMenuListItemView onClick={ event => processAction('change_bot_motto') }>
                             { LocalizeText('avatar.widget.change_bot_motto') }
                         </ContextMenuListItemView> }
-                    { ((rentableBotData.botSkills.indexOf(BotSkillsEnum.DRESS_UP) >= 0) && canControl) &&
+                    { (rentableBotData.botSkills.indexOf(BotSkillsEnum.DRESS_UP) >= 0) &&
                         <ContextMenuListItemView onClick={ event => processAction('dress_up') }>
                             { LocalizeText('avatar.widget.dress_up') }
                         </ContextMenuListItemView> }
-                    { ((rentableBotData.botSkills.indexOf(BotSkillsEnum.RANDOM_WALK) >= 0) && canControl) &&
+                    { (rentableBotData.botSkills.indexOf(BotSkillsEnum.RANDOM_WALK) >= 0) &&
                         <ContextMenuListItemView onClick={ event => processAction('random_walk') }>
                             { LocalizeText('avatar.widget.random_walk') }
                         </ContextMenuListItemView> }
-                    { ((rentableBotData.botSkills.indexOf(BotSkillsEnum.SETUP_CHAT) >= 0) && canControl) &&
+                    { (rentableBotData.botSkills.indexOf(BotSkillsEnum.SETUP_CHAT) >= 0) &&
                         <ContextMenuListItemView onClick={ event => processAction('setup_chat') }>
                             { LocalizeText('avatar.widget.setup_chat') }
                         </ContextMenuListItemView> }
-                    { ((rentableBotData.botSkills.indexOf(BotSkillsEnum.DANCE) >= 0) && canControl) &&
+                    { (rentableBotData.botSkills.indexOf(BotSkillsEnum.DANCE) >= 0) &&
                         <ContextMenuListItemView onClick={ event => processAction('dance') }>
                             { LocalizeText('avatar.widget.dance') }
                         </ContextMenuListItemView> }
-                    { ((rentableBotData.botSkills.indexOf(BotSkillsEnum.NO_PICK_UP) === -1) && canControl) &&
+                    { (rentableBotData.botSkills.indexOf(BotSkillsEnum.NO_PICK_UP) === -1) &&
                         <ContextMenuListItemView onClick={ event => processAction('pick') }>
                             { LocalizeText('avatar.widget.pick_up') }
                         </ContextMenuListItemView> }
                 </> }
             { (mode === MODE_CHANGE_NAME) &&
-                <div className="d-flex flex-column menu-item" onClick={ null }>
-                    <p className="mb-1">{ LocalizeText('bot.skill.name.configuration.new.name') }</p>
-                    <input type="text" className="form-control form-control-sm mb-2" value={ newName } onChange={ event => setNewName(event.target.value) } />
-                    <div className="d-flex justify-content-between align-items-center">
-                        <button type="button" className="btn btn-secondary btn-sm" onClick={ event => processAction(null) }>{ LocalizeText('cancel') }</button>
-                        <button type="button" className="btn btn-success btn-sm"  onClick={ event => processAction('save_bot_name') }>{ LocalizeText('save') }</button>
-                    </div>
-                </div> }
+                <Column className="menu-item" onClick={ null } gap={ 1 }>
+                    <Text variant="white">{ LocalizeText('bot.skill.name.configuration.new.name') }</Text>
+                    <input type="text" className="form-control form-control-sm" value={ newName } onChange={ event => setNewName(event.target.value) } />
+                    <Flex alignItems="center" justifyContent="between" gap={ 1 }>
+                        <Button fullWidth variant="secondary" onClick={ event => processAction(null) }>{ LocalizeText('cancel') }</Button>
+                        <Button fullWidth variant="success" onClick={ event => processAction('save_bot_name') }>{ LocalizeText('save') }</Button>
+                    </Flex>
+                </Column> }
             { (mode === MODE_CHANGE_MOTTO) &&
-                <div className="d-flex flex-column menu-item" onClick={ null }>
-                    <p className="mb-1">{ LocalizeText('bot.skill.name.configuration.new.motto') }</p>
-                    <input type="text" className="form-control form-control-sm mb-2" value={ newMotto } onChange={ event => setNewMotto(event.target.value) } />
-                    <div className="d-flex justify-content-between align-items-center">
-                        <button type="button" className="btn btn-secondary btn-sm" onClick={ event => processAction(null) }>{ LocalizeText('cancel') }</button>
-                        <button type="button" className="btn btn-success btn-sm"  onClick={ event => processAction('save_bot_motto') }>{ LocalizeText('save') }</button>
-                    </div>
-                </div> }
+                <Column className="menu-item" onClick={ null } gap={ 1 }>
+                    <Text variant="white">{ LocalizeText('bot.skill.name.configuration.new.motto') }</Text>
+                    <input type="text" className="form-control form-control-sm" value={ newMotto } onChange={ event => setNewMotto(event.target.value) } />
+                    <Flex alignItems="center" justifyContent="between" gap={ 1 }>
+                        <Button fullWidth variant="secondary" onClick={ event => processAction(null) }>{ LocalizeText('cancel') }</Button>
+                        <Button fullWidth variant="success" onClick={ event => processAction('save_bot_motto') }>{ LocalizeText('save') }</Button>
+                    </Flex>
+                </Column> }
         </ContextMenuView>
     );
 }
diff --git a/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx b/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx
index 5ac5f7a0..6788475a 100644
--- a/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx
+++ b/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx
@@ -3,16 +3,16 @@ import { FC, useCallback, useMemo, useState } from 'react';
 import { GetRoomSession, GetSessionDataManager, RoomWidgetObjectNameEvent, RoomWidgetRoomObjectMessage, RoomWidgetUpdateDanceStatusEvent, RoomWidgetUpdateDecorateModeEvent, RoomWidgetUpdateInfostandEvent, RoomWidgetUpdateInfostandFurniEvent, RoomWidgetUpdateInfostandPetEvent, RoomWidgetUpdateInfostandRentableBotEvent, RoomWidgetUpdateInfostandUserEvent, RoomWidgetUpdateRentableBotChatEvent, RoomWidgetUpdateRoomEngineEvent, RoomWidgetUpdateRoomObjectEvent, RoomWidgetUseProductBubbleEvent, UseProductItem } from '../../../../api';
 import { CreateEventDispatcherHook } from '../../../../hooks/events/event-dispatcher.base';
 import { useRoomContext } from '../../context/RoomContext';
-import { AvatarInfoWidgetAvatarView } from './views/avatar/AvatarInfoWidgetAvatarView';
-import { AvatarInfoWidgetDecorateView } from './views/decorate/AvatarInfoWidgetDecorateView';
-import { AvatarInfoWidgetNameView } from './views/name/AvatarInfoWidgetNameView';
-import { AvatarInfoWidgetOwnAvatarView } from './views/own-avatar/AvatarInfoWidgetOwnAvatarView';
-import { AvatarInfoWidgetOwnPetView } from './views/own-pet/AvatarInfoWidgetOwnPetView';
-import { AvatarInfoWidgetPetView } from './views/pet/AvatarInfoWidgetPetView';
-import { AvatarInfoRentableBotChatView } from './views/rentable-bot-chat/AvatarInfoRentableBotChatView';
-import { AvatarInfoWidgetRentableBotView } from './views/rentable-bot/AvatarInfoWidgetRentableBotView';
-import { AvatarInfoUseProductConfirmView } from './views/use-product-confirm/AvatarInfoUseProductConfirmView';
-import { AvatarInfoUseProductView } from './views/use-product/AvatarInfoUseProductView';
+import { AvatarInfoRentableBotChatView } from './AvatarInfoRentableBotChatView';
+import { AvatarInfoUseProductConfirmView } from './AvatarInfoUseProductConfirmView';
+import { AvatarInfoUseProductView } from './AvatarInfoUseProductView';
+import { AvatarInfoWidgetAvatarView } from './AvatarInfoWidgetAvatarView';
+import { AvatarInfoWidgetDecorateView } from './AvatarInfoWidgetDecorateView';
+import { AvatarInfoWidgetNameView } from './AvatarInfoWidgetNameView';
+import { AvatarInfoWidgetOwnAvatarView } from './AvatarInfoWidgetOwnAvatarView';
+import { AvatarInfoWidgetOwnPetView } from './AvatarInfoWidgetOwnPetView';
+import { AvatarInfoWidgetPetView } from './AvatarInfoWidgetPetView';
+import { AvatarInfoWidgetRentableBotView } from './AvatarInfoWidgetRentableBotView';
 
 export const AvatarInfoWidgetView: FC<{}> = props =>
 {
diff --git a/src/views/room/widgets/avatar-info/views/avatar/AvatarInfoWidgetAvatarView.types.ts b/src/views/room/widgets/avatar-info/views/avatar/AvatarInfoWidgetAvatarView.types.ts
deleted file mode 100644
index 4533b9fb..00000000
--- a/src/views/room/widgets/avatar-info/views/avatar/AvatarInfoWidgetAvatarView.types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { RoomWidgetUpdateInfostandUserEvent } from '../../../../../../api';
-
-export interface AvatarInfoWidgetAvatarViewProps
-{
-    userData: RoomWidgetUpdateInfostandUserEvent;
-    close: () => void;
-}
diff --git a/src/views/room/widgets/avatar-info/views/decorate/AvatarInfoWidgetDecorateView.types.ts b/src/views/room/widgets/avatar-info/views/decorate/AvatarInfoWidgetDecorateView.types.ts
deleted file mode 100644
index 86c19e35..00000000
--- a/src/views/room/widgets/avatar-info/views/decorate/AvatarInfoWidgetDecorateView.types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-
-export interface AvatarInfoWidgetDecorateViewProps
-{
-    userId: number;
-    userName: string;
-    roomIndex: number;
-}
diff --git a/src/views/room/widgets/avatar-info/views/name/AvatarInfoWidgetNameView.types.ts b/src/views/room/widgets/avatar-info/views/name/AvatarInfoWidgetNameView.types.ts
deleted file mode 100644
index f99c0426..00000000
--- a/src/views/room/widgets/avatar-info/views/name/AvatarInfoWidgetNameView.types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { RoomWidgetObjectNameEvent } from '../../../../../../api';
-
-export interface AvatarInfoWidgetNameViewProps
-{
-    nameData: RoomWidgetObjectNameEvent;
-    close: () => void;
-}
diff --git a/src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.types.ts b/src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.types.ts
deleted file mode 100644
index 00db768e..00000000
--- a/src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { RoomWidgetUpdateInfostandUserEvent } from '../../../../../../api';
-
-export interface AvatarInfoWidgetOwnAvatarViewProps
-{
-    userData: RoomWidgetUpdateInfostandUserEvent;
-    isDancing: boolean;
-    close: () => void;
-}
diff --git a/src/views/room/widgets/avatar-info/views/own-pet/AvatarInfoWidgetOwnPetView.types.ts b/src/views/room/widgets/avatar-info/views/own-pet/AvatarInfoWidgetOwnPetView.types.ts
deleted file mode 100644
index 90badc4c..00000000
--- a/src/views/room/widgets/avatar-info/views/own-pet/AvatarInfoWidgetOwnPetView.types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { RoomWidgetUpdateInfostandPetEvent } from '../../../../../../api';
-
-export interface AvatarInfoWidgetOwnPetViewProps
-{
-    petData: RoomWidgetUpdateInfostandPetEvent;
-    close: () => void;
-}
diff --git a/src/views/room/widgets/avatar-info/views/pet/AvatarInfoWidgetPetView.types.ts b/src/views/room/widgets/avatar-info/views/pet/AvatarInfoWidgetPetView.types.ts
deleted file mode 100644
index cfe73cb3..00000000
--- a/src/views/room/widgets/avatar-info/views/pet/AvatarInfoWidgetPetView.types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { RoomWidgetUpdateInfostandPetEvent } from '../../../../../../api';
-
-export interface AvatarInfoWidgetPetViewProps
-{
-    petData: RoomWidgetUpdateInfostandPetEvent;
-    close: () => void;
-}
diff --git a/src/views/room/widgets/avatar-info/views/rentable-bot-chat/AvatarInfoRentableBotChatView.tsx b/src/views/room/widgets/avatar-info/views/rentable-bot-chat/AvatarInfoRentableBotChatView.tsx
deleted file mode 100644
index e4d54eaa..00000000
--- a/src/views/room/widgets/avatar-info/views/rentable-bot-chat/AvatarInfoRentableBotChatView.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { BotSkillSaveComposer } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useMemo, useState } from 'react';
-import { GetRoomObjectBounds, GetRoomSession, LocalizeText } from '../../../../../../api';
-import { SendMessageHook } from '../../../../../../hooks';
-import { DraggableWindow, DraggableWindowPosition } from '../../../../../../layout';
-import { BotSkillsEnum } from '../../common/BotSkillsEnum';
-import { AvatarInfoRentableBotChatViewProps } from './AvatarInfoRentableBotChatView.types';
-
-export const AvatarInfoRentableBotChatView: FC<AvatarInfoRentableBotChatViewProps> = props =>
-{
-    const { chatEvent = null, close = null } = props;
-    // eslint-disable-next-line no-template-curly-in-string
-    const [ newText, setNewText ] = useState<string>(chatEvent.chat === '${bot.skill.chatter.configuration.text.placeholder}' ? '' : chatEvent.chat);
-    const [ automaticChat, setAutomaticChat ] = useState<boolean>(chatEvent.automaticChat);
-    const [ mixSentences, setMixSentences ] = useState<boolean>(chatEvent.mixSentences);
-    const [ chatDelay, setChatDelay ] = useState<number>(chatEvent.chatDelay);
-
-    const getObjectLocation = useMemo(() =>
-    {
-        return GetRoomObjectBounds(GetRoomSession().roomId, chatEvent.objectId, chatEvent.category, 1);
-    }, [ chatEvent ]);
-
-    const formatChatString = useCallback((value: string) =>
-    {
-        return value.replace(/;#;/g, ' ').replace(/\r\n|\r|\n/g, '\r');
-    }, []);
-
-    const save = useCallback(() =>
-    {
-        const chatConfiguration = formatChatString(newText) + ';#;' + automaticChat + ';#;' + chatDelay + ';#;' + mixSentences;
-        SendMessageHook(new BotSkillSaveComposer(chatEvent.botId, BotSkillsEnum.SETUP_CHAT, chatConfiguration));
-        close();
-    }, [automaticChat, chatDelay, chatEvent.botId, close, formatChatString, mixSentences, newText]);
-
-    return (
-        <DraggableWindow position={ DraggableWindowPosition.NOTHING } handleSelector=".drag-handler" style={ { top: getObjectLocation.y, left: getObjectLocation.x } }>
-            <div className="nitro-context-menu">
-                <div className="drag-handler">
-                <div className="px-2">
-                    <div className="d-flex flex-column menu-item">
-                        <p className="mb-1">{ LocalizeText('bot.skill.chatter.configuration.chat.text') }</p>
-                        <textarea className="form-control form-control-sm mb-2" placeholder={LocalizeText('bot.skill.chatter.configuration.text.placeholder')} value={newText} rows={7} onChange={e => setNewText(e.target.value)}/>
-                    </div>
-                    <div className="d-flex flex-row menu-item">
-                        <p className="mb-1 me-2">{ LocalizeText('bot.skill.chatter.configuration.automatic.chat') }</p>
-                        <input type="checkbox" className="form-check-input" checked={automaticChat} onChange={e => setAutomaticChat(e.target.checked)} />
-                    </div>
-                    <div className="d-flex flex-row menu-item">
-                        <p className="mb-1 me-2">{ LocalizeText('bot.skill.chatter.configuration.markov')}</p>
-                        <input type="checkbox" className="form-check-input" checked={mixSentences} onChange={ e => setMixSentences(e.target.checked)} />
-                    </div>
-                    <div className="d-flex flex-row menu-item">
-                        <p className="mb-1 me-2">{ LocalizeText('bot.skill.chatter.configuration.chat.delay') }</p>
-                        <input type="number" className="form-control form-control-sm mb-2" value={chatDelay} onChange={e => setChatDelay(e.target.valueAsNumber)}/>
-                    </div>
-                    <div className="d-flex flex-row justify-content-between mt-1">
-                        <button type="button" className="btn btn-secondary btn-sm" onClick={close}>{ LocalizeText('cancel')}</button>
-                        <button type="button" className="btn btn-success btn-sm" onClick={save}>{ LocalizeText('save') }</button>
-                    </div>
-                </div>
-                </div>
-            </div>
-        </DraggableWindow>
-    );
-}
diff --git a/src/views/room/widgets/avatar-info/views/rentable-bot-chat/AvatarInfoRentableBotChatView.types.ts b/src/views/room/widgets/avatar-info/views/rentable-bot-chat/AvatarInfoRentableBotChatView.types.ts
deleted file mode 100644
index ce82b743..00000000
--- a/src/views/room/widgets/avatar-info/views/rentable-bot-chat/AvatarInfoRentableBotChatView.types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { RoomWidgetUpdateRentableBotChatEvent } from '../../../../../../api';
-
-export interface AvatarInfoRentableBotChatViewProps
-{
-    chatEvent: RoomWidgetUpdateRentableBotChatEvent;
-    close(): void;
-}
diff --git a/src/views/room/widgets/avatar-info/views/rentable-bot/AvatarInfoWidgetRentableBotView.types.ts b/src/views/room/widgets/avatar-info/views/rentable-bot/AvatarInfoWidgetRentableBotView.types.ts
deleted file mode 100644
index cedb2d4a..00000000
--- a/src/views/room/widgets/avatar-info/views/rentable-bot/AvatarInfoWidgetRentableBotView.types.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { RoomWidgetUpdateInfostandRentableBotEvent } from '../../../../../../api';
-
-export interface AvatarInfoWidgetRentableBotViewProps
-{
-    rentableBotData: RoomWidgetUpdateInfostandRentableBotEvent;
-    close: () => void;
-}
-
-export interface BotChatOptions
-{
-    automaticChat: boolean;
-    chatDelay: number;
-    mixSentences: boolean;
-}
diff --git a/src/views/room/widgets/avatar-info/views/use-product-confirm/AvatarInfoUseProductConfirmView.types.ts b/src/views/room/widgets/avatar-info/views/use-product-confirm/AvatarInfoUseProductConfirmView.types.ts
deleted file mode 100644
index 9cae4f3f..00000000
--- a/src/views/room/widgets/avatar-info/views/use-product-confirm/AvatarInfoUseProductConfirmView.types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { UseProductItem } from '../../../../../../api';
-
-export interface AvatarInfoUseProductConfirmViewProps
-{
-    item: UseProductItem;
-    close: () => void;
-}
diff --git a/src/views/room/widgets/avatar-info/views/use-product/AvatarInfoUseProductView.types.ts b/src/views/room/widgets/avatar-info/views/use-product/AvatarInfoUseProductView.types.ts
deleted file mode 100644
index b242e789..00000000
--- a/src/views/room/widgets/avatar-info/views/use-product/AvatarInfoUseProductView.types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { UseProductItem } from '../../../../../../api';
-
-export interface AvatarInfoUseProductViewProps
-{
-    item: UseProductItem;
-    updateConfirmingProduct: (product: UseProductItem) => void;
-    close: () => void;
-}
diff --git a/src/views/room/widgets/context-menu/ContextMenu.scss b/src/views/room/widgets/context-menu/ContextMenu.scss
index a78566cf..cb7351d7 100644
--- a/src/views/room/widgets/context-menu/ContextMenu.scss
+++ b/src/views/room/widgets/context-menu/ContextMenu.scss
@@ -9,6 +9,11 @@
     z-index: $context-menu-zindex;
     pointer-events: all;
 
+    &.bot-chat {
+        max-width: 250px;
+        width: 250px;
+    }
+
     &.name-only {
         background-color: rgba($black, 0.5);
         padding: 1px 8px;
diff --git a/src/views/room/widgets/context-menu/ContextMenuHeaderView.tsx b/src/views/room/widgets/context-menu/ContextMenuHeaderView.tsx
new file mode 100644
index 00000000..db1f5448
--- /dev/null
+++ b/src/views/room/widgets/context-menu/ContextMenuHeaderView.tsx
@@ -0,0 +1,18 @@
+import { FC, useMemo } from 'react';
+import { Flex, FlexProps } from '../../../../common';
+
+export const ContextMenuHeaderView: FC<FlexProps> = props =>
+{
+    const { justifyContent = 'center', alignItems = 'center', classNames = [], ...rest } = props;
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = [ 'menu-header', 'p-1' ];
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ classNames ]);
+
+    return <Flex justifyContent={ justifyContent } alignItems={ alignItems } classNames={ getClassNames } { ...rest } />;
+}
diff --git a/src/views/room/widgets/context-menu/ContextMenuListItemView.tsx b/src/views/room/widgets/context-menu/ContextMenuListItemView.tsx
new file mode 100644
index 00000000..01d3df80
--- /dev/null
+++ b/src/views/room/widgets/context-menu/ContextMenuListItemView.tsx
@@ -0,0 +1,32 @@
+import { FC, MouseEvent, useMemo } from 'react';
+import { Flex, FlexProps } from '../../../../common';
+
+interface ContextMenuListItemViewProps extends FlexProps
+{
+    disabled?: boolean;
+}
+
+export const ContextMenuListItemView: FC<ContextMenuListItemViewProps> = props =>
+{
+    const { disabled = false, fullWidth = true, justifyContent = 'center', alignItems = 'center', classNames = [], onClick = null, ...rest } = props;
+
+    const handleClick = (event: MouseEvent<HTMLDivElement>) =>
+    {
+        if(disabled) return;
+
+        if(onClick) onClick(event);
+    }
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = [ 'menu-item', 'list-item' ];
+
+        if(disabled) newClassNames.push('disabled');
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ disabled, classNames ]);
+
+    return <Flex fullWidth={ fullWidth } justifyContent={ justifyContent } alignItems={ alignItems } classNames={ getClassNames } onClick={ handleClick } { ...rest } />;
+}
diff --git a/src/views/room/widgets/context-menu/ContextMenuListView.tsx b/src/views/room/widgets/context-menu/ContextMenuListView.tsx
new file mode 100644
index 00000000..6c38cf11
--- /dev/null
+++ b/src/views/room/widgets/context-menu/ContextMenuListView.tsx
@@ -0,0 +1,18 @@
+import { FC, useMemo } from 'react';
+import { Column, ColumnProps } from '../../../../common';
+
+export const ContextMenuListView: FC<ColumnProps> = props =>
+{
+    const { classNames = [], ...rest } = props;
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = [ 'menu-list' ];
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ classNames ]);
+
+    return <Column classNames={ getClassNames } { ...rest } />
+}
diff --git a/src/views/room/widgets/context-menu/ContextMenuView.tsx b/src/views/room/widgets/context-menu/ContextMenuView.tsx
index 81a28b5a..7a10c8ee 100644
--- a/src/views/room/widgets/context-menu/ContextMenuView.tsx
+++ b/src/views/room/widgets/context-menu/ContextMenuView.tsx
@@ -1,7 +1,17 @@
 import { FixedSizeStack, NitroPoint, NitroRectangle, RoomObjectType } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useEffect, useRef, useState } from 'react';
+import { CSSProperties, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { GetNitroInstance, GetRoomEngine, GetRoomObjectBounds, GetRoomSession, GetTicker } from '../../../../api';
-import { ContextMenuViewProps } from './ContextMenuView.types';
+import { Base, BaseProps } from '../../../../common';
+import { BatchUpdates } from '../../../../hooks';
+
+interface ContextMenuViewProps extends BaseProps<HTMLDivElement>
+{
+    objectId: number;
+    category: number;
+    userType?: number;
+    fades?: boolean;
+    close: () => void;
+}
 
 const LOCATION_STACK_SIZE: number = 25;
 const BUBBLE_DROP_SPEED: number = 3;
@@ -11,7 +21,7 @@ const SPACE_AROUND_EDGES = 10;
 
 export const ContextMenuView: FC<ContextMenuViewProps> = props =>
 {
-    const { objectId = -1, category = -1, userType = -1, fades = false, className = '', close = null, children = null } = props;
+    const { objectId = -1, category = -1, userType = -1, fades = false, close = null, position = 'absolute', classNames = [], style = {}, ...rest } = props;
     const [ pos, setPos ] = useState<{ x: number, y: number }>({ x: null, y: null });
     const [ deltaYStack, setDeltaYStack ] = useState<FixedSizeStack>(null);
     const [ currentDeltaY, setCurrentDeltaY ] = useState(-1000000);
@@ -92,8 +102,11 @@ export const ContextMenuView: FC<ContextMenuViewProps> = props =>
         if(y < SPACE_AROUND_EDGES) y = SPACE_AROUND_EDGES;
         else if(y > maxTop) y = maxTop;
 
-        setCurrentDeltaY(maxStack);
-        setPos({ x, y });
+        BatchUpdates(() =>
+        {
+            setCurrentDeltaY(maxStack);
+            setPos({ x, y });
+        });
     }, [ deltaYStack, currentDeltaY, getOffset ]);
 
     const update = useCallback((time: number) =>
@@ -106,10 +119,37 @@ export const ContextMenuView: FC<ContextMenuViewProps> = props =>
         updatePosition(bounds, location);
     }, [ objectId, category, updateFade, updatePosition ]);
 
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = [ 'nitro-context-menu' ];
+
+        newClassNames.push((pos.x !== null) ? 'visible' : 'invisible');
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ pos, classNames ]);
+
+    const getStyle = useMemo(() =>
+    {
+        let newStyle: CSSProperties = {};
+
+        newStyle.left = (pos.x || 0);
+        newStyle.top = (pos.y || 0);
+        newStyle.opacity = opacity;
+
+        if(Object.keys(style).length) newStyle = { ...newStyle, ...style };
+
+        return newStyle;
+    }, [ pos, opacity, style ]);
+
     useEffect(() =>
     {
-        setDeltaYStack(new FixedSizeStack(LOCATION_STACK_SIZE));
-        setCurrentDeltaY(-1000000);
+        BatchUpdates(() =>
+        {
+            setDeltaYStack(new FixedSizeStack(LOCATION_STACK_SIZE));
+            setCurrentDeltaY(-1000000);
+        });
     }, []);
 
     useEffect(() =>
@@ -135,15 +175,8 @@ export const ContextMenuView: FC<ContextMenuViewProps> = props =>
 
         const timeout = setTimeout(() => setIsFading(true), fadeDelay);
 
-        return () =>
-        {
-            clearTimeout(timeout);
-        }
+        return () => clearTimeout(timeout);
     }, [ fades ]);
 
-    return (
-        <div ref={ elementRef } className={ `position-absolute nitro-context-menu ${ className }${ (pos.x !== null ? ' visible' : ' invisible') }` } style={ { left: (pos.x || 0), top: (pos.y || 0), opacity: opacity } }>
-            { children }
-        </div>
-    );
+    return <Base innerRef={ elementRef } position={ position } classNames={ getClassNames } style={ getStyle } { ...rest } />;
 }
diff --git a/src/views/room/widgets/context-menu/ContextMenuView.types.ts b/src/views/room/widgets/context-menu/ContextMenuView.types.ts
deleted file mode 100644
index c1527ad9..00000000
--- a/src/views/room/widgets/context-menu/ContextMenuView.types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export interface ContextMenuViewProps
-{
-    objectId: number;
-    category: number;
-    userType?: number;
-    fades?: boolean;
-    className?: string;
-    close: () => void;
-}
diff --git a/src/views/room/widgets/context-menu/views/header/ContextMenuHeaderView.tsx b/src/views/room/widgets/context-menu/views/header/ContextMenuHeaderView.tsx
deleted file mode 100644
index 2a1adf1f..00000000
--- a/src/views/room/widgets/context-menu/views/header/ContextMenuHeaderView.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { FC } from 'react';
-import { ContextMenuHeaderViewProps } from './ContextMenuHeaderView.types';
-
-export const ContextMenuHeaderView: FC<ContextMenuHeaderViewProps> = props =>
-{
-    const { className = null, onClick = null, children = null } = props;
-
-    return (
-        <div className={ 'd-flex justify-content-center align-items-center menu-header p-1' + (className ? ' ' + className : '') } onClick={ onClick }>
-            { children }
-        </div>
-    );
-}
diff --git a/src/views/room/widgets/context-menu/views/header/ContextMenuHeaderView.types.ts b/src/views/room/widgets/context-menu/views/header/ContextMenuHeaderView.types.ts
deleted file mode 100644
index 11d98094..00000000
--- a/src/views/room/widgets/context-menu/views/header/ContextMenuHeaderView.types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface ContextMenuHeaderViewProps
-{
-    className?: string;
-    onClick?: (e) => void;
-}
diff --git a/src/views/room/widgets/context-menu/views/list-item/ContextMenuListItemView.tsx b/src/views/room/widgets/context-menu/views/list-item/ContextMenuListItemView.tsx
deleted file mode 100644
index 29cc7658..00000000
--- a/src/views/room/widgets/context-menu/views/list-item/ContextMenuListItemView.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { FC, MouseEvent, useCallback } from 'react';
-import { ContextMenuListItemViewProps } from './ContextMenuListItemView.types';
-
-export const ContextMenuListItemView: FC<ContextMenuListItemViewProps> = props =>
-{
-    const { className = '', canSelect = true, onClick = null, children = null } = props;
-
-    const handleClick = useCallback((event: MouseEvent<HTMLDivElement>) =>
-    {
-        if(!canSelect) return;
-
-        onClick(event);
-    }, [ canSelect, onClick ]);
-
-    return (
-        <div className={ `d-flex justify-content-center align-items-center w-100 menu-item list-item ${ !canSelect ? 'disabled ' : '' }${ className }` } onClick={ handleClick }>
-            { children }
-        </div>
-    )
-}
diff --git a/src/views/room/widgets/context-menu/views/list-item/ContextMenuListItemView.types.ts b/src/views/room/widgets/context-menu/views/list-item/ContextMenuListItemView.types.ts
deleted file mode 100644
index 32b49235..00000000
--- a/src/views/room/widgets/context-menu/views/list-item/ContextMenuListItemView.types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { MouseEvent } from 'react';
-
-export interface ContextMenuListItemViewProps
-{
-    className?: string;
-    canSelect?: boolean;
-    onClick: (event: MouseEvent) => void;
-}
diff --git a/src/views/room/widgets/context-menu/views/list/ContextMenuListView.tsx b/src/views/room/widgets/context-menu/views/list/ContextMenuListView.tsx
deleted file mode 100644
index c4e8f42d..00000000
--- a/src/views/room/widgets/context-menu/views/list/ContextMenuListView.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { FC } from 'react';
-import { ContextMenuListViewProps } from './ContextMenuListView.types';
-
-export const ContextMenuListView: FC<ContextMenuListViewProps> = props =>
-{
-    const { columns = 1, children = null } = props;
-
-    return (
-        <div className={ 'd-flex flex-column menu-list' }>
-            { children }
-        </div>
-    );
-}
diff --git a/src/views/room/widgets/context-menu/views/list/ContextMenuListView.types.ts b/src/views/room/widgets/context-menu/views/list/ContextMenuListView.types.ts
deleted file mode 100644
index 6a62d64b..00000000
--- a/src/views/room/widgets/context-menu/views/list/ContextMenuListView.types.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface ContextMenuListViewProps
-{
-    columns?: number;
-}

From 0dfb3649b8de30075053cdb30b1c52fdbde3bbe0 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Tue, 1 Mar 2022 03:23:44 -0500
Subject: [PATCH 13/17] Update common layout components

---
 src/common/Base.tsx              | 7 +++++--
 src/common/Grid.tsx              | 3 +--
 src/common/types/OverflowType.ts | 2 +-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/common/Base.tsx b/src/common/Base.tsx
index f5fd00fe..f31ac413 100644
--- a/src/common/Base.tsx
+++ b/src/common/Base.tsx
@@ -13,13 +13,14 @@ export interface BaseProps<T = HTMLElement> extends DetailedHTMLProps<HTMLAttrib
     position?: PositionType;
     float?: FloatType;
     pointer?: boolean;
+    visible?: boolean;
     textColor?: ColorVariantType;
     classNames?: string[];
 }
 
 export const Base: FC<BaseProps<HTMLDivElement>> = props =>
 {
-    const { ref = null, innerRef = null, fit = false, grow = false, shrink = false, fullWidth = false, fullHeight = false, overflow = null, position = null, float = null, pointer = false, textColor = null, classNames = [], className = '', style = {}, ...rest } = props;
+    const { ref = null, innerRef = null, fit = false, grow = false, shrink = false, fullWidth = false, fullHeight = false, overflow = null, position = null, float = null, pointer = false, visible = null, textColor = null, classNames = [], className = '', style = {}, ...rest } = props;
 
     const getClassNames = useMemo(() =>
     {
@@ -41,12 +42,14 @@ export const Base: FC<BaseProps<HTMLDivElement>> = props =>
 
         if(pointer) newClassNames.push('cursor-pointer');
 
+        if(visible !== null) newClassNames.push(visible ? 'visible' : 'invisible');
+
         if(textColor) newClassNames.push('text-' + textColor);
 
         if(classNames.length) newClassNames.push(...classNames);
 
         return newClassNames;
-    }, [ fit, grow, shrink, fullWidth, fullHeight, overflow, position, float, pointer, textColor, classNames ]);
+    }, [ fit, grow, shrink, fullWidth, fullHeight, overflow, position, float, pointer, visible, textColor, classNames ]);
 
     const getClassName = useMemo(() =>
     {
diff --git a/src/common/Grid.tsx b/src/common/Grid.tsx
index ed59d47a..860a89ca 100644
--- a/src/common/Grid.tsx
+++ b/src/common/Grid.tsx
@@ -1,5 +1,4 @@
-import { FC, useMemo } from 'react';
-import { CSSProperties } from 'styled-components';
+import { CSSProperties, FC, useMemo } from 'react';
 import { Base, BaseProps } from './Base';
 import { GridContextProvider } from './GridContext';
 import { AlignItemType, AlignSelfType, JustifyContentType, SpacingType } from './types';
diff --git a/src/common/types/OverflowType.ts b/src/common/types/OverflowType.ts
index a8a793db..7c9e3b15 100644
--- a/src/common/types/OverflowType.ts
+++ b/src/common/types/OverflowType.ts
@@ -1 +1 @@
-export type OverflowType = 'hidden' | 'auto' | 'unset';
+export type OverflowType = 'auto' | 'hidden' | 'visible' | 'scroll' | 'unset';

From 526d50d9dc3b643f42960b8c3471c01858b0af3e Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Tue, 1 Mar 2022 03:44:32 -0500
Subject: [PATCH 14/17] Update friend request widget

---
 .../FriendRequestDialogView.tsx               | 51 ++++++++-----------
 .../FriendRequestDialogView.types.ts          |  7 ---
 .../FriendRequestWidgetView.tsx               |  2 +-
 3 files changed, 23 insertions(+), 37 deletions(-)
 delete mode 100644 src/views/room/widgets/friend-request/FriendRequestDialogView.types.ts

diff --git a/src/views/room/widgets/friend-request/FriendRequestDialogView.tsx b/src/views/room/widgets/friend-request/FriendRequestDialogView.tsx
index 1b9d4a82..0238a8c3 100644
--- a/src/views/room/widgets/friend-request/FriendRequestDialogView.tsx
+++ b/src/views/room/widgets/friend-request/FriendRequestDialogView.tsx
@@ -1,47 +1,40 @@
-import { FC, useCallback } from 'react';
+import { FC } from 'react';
 import { LocalizeText, RoomWidgetFriendRequestMessage } from '../../../../api';
-import { NitroLayoutButton, NitroLayoutFlex, NitroLayoutFlexColumn } from '../../../../layout';
-import { NitroLayoutBase } from '../../../../layout/base';
+import { Base, Button, Column, Flex, Text } from '../../../../common';
 import { useRoomContext } from '../../context/RoomContext';
 import { UserLocationView } from '../user-location/UserLocationView';
-import { FriendRequestDialogViewProps } from './FriendRequestDialogView.types';
+
+interface FriendRequestDialogViewProps
+{
+    requestId: number;
+    userId: number;
+    userName: string;
+    close: () => void;
+}
 
 export const FriendRequestDialogView: FC<FriendRequestDialogViewProps> = props =>
 {
     const { requestId = -1, userId = -1, userName = null, close = null } = props;
     const { widgetHandler = null } = useRoomContext();
 
-    const accept = useCallback(() =>
+    const respond = (flag: boolean) =>
     {
-        widgetHandler.processWidgetMessage(new RoomWidgetFriendRequestMessage(RoomWidgetFriendRequestMessage.ACCEPT, requestId));
+        widgetHandler.processWidgetMessage(new RoomWidgetFriendRequestMessage((flag ? RoomWidgetFriendRequestMessage.ACCEPT : RoomWidgetFriendRequestMessage.DECLINE), requestId));
 
         close();
-    }, [ requestId, widgetHandler, close ]);
-
-    const decline = useCallback(() =>
-    {
-        widgetHandler.processWidgetMessage(new RoomWidgetFriendRequestMessage(RoomWidgetFriendRequestMessage.ACCEPT, requestId));
-
-        close();
-    }, [ requestId, widgetHandler, close ]);
+    }
 
     return (
         <UserLocationView userId={ userId }>
-            <NitroLayoutBase className="nitro-friend-request-dialog nitro-context-menu p-2">
-                <NitroLayoutFlexColumn>
-                    <NitroLayoutBase className="h6">
-                        { LocalizeText('widget.friendrequest.from', [ 'username' ], [ userName ]) }
-                    </NitroLayoutBase>
-                    <NitroLayoutFlex className="justify-content-end align-items-center" gap={ 2 }>
-                        <NitroLayoutButton variant="danger" size="sm" onClick={ decline }>
-                            { LocalizeText('widget.friendrequest.decline') }
-                        </NitroLayoutButton>
-                        <NitroLayoutButton variant="success" size="sm" onClick={ accept }>
-                            { LocalizeText('widget.friendrequest.accept') }
-                        </NitroLayoutButton>
-                    </NitroLayoutFlex>
-                </NitroLayoutFlexColumn>
-            </NitroLayoutBase>
+            <Base className="nitro-friend-request-dialog nitro-context-menu p-2">
+                <Column>
+                    <Text variant="white" fontSize={ 6 }>{ LocalizeText('widget.friendrequest.from', [ 'username' ], [ userName ]) }</Text>
+                    <Flex justifyContent="end" gap={ 1 }>
+                        <Button variant="danger" onClick={ event => respond(false) }>{ LocalizeText('widget.friendrequest.decline') }</Button>
+                        <Button variant="success" onClick={ event => respond(true) }>{ LocalizeText('widget.friendrequest.accept') }</Button>
+                    </Flex>
+                </Column>
+            </Base>
         </UserLocationView>
     );
 }
diff --git a/src/views/room/widgets/friend-request/FriendRequestDialogView.types.ts b/src/views/room/widgets/friend-request/FriendRequestDialogView.types.ts
deleted file mode 100644
index c9deed82..00000000
--- a/src/views/room/widgets/friend-request/FriendRequestDialogView.types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export interface FriendRequestDialogViewProps
-{
-    requestId: number;
-    userId: number;
-    userName: string;
-    close: () => void;
-}
diff --git a/src/views/room/widgets/friend-request/FriendRequestWidgetView.tsx b/src/views/room/widgets/friend-request/FriendRequestWidgetView.tsx
index 9a0bf147..fa53b347 100644
--- a/src/views/room/widgets/friend-request/FriendRequestWidgetView.tsx
+++ b/src/views/room/widgets/friend-request/FriendRequestWidgetView.tsx
@@ -38,7 +38,7 @@ export const FriendRequestWidgetView: FC<{}> = props =>
                 newValue.splice(index, 1);
 
                 return newValue;
-            })
+            });
     }, [ friendRequests ]);
 
     const onRoomWidgetUpdateFriendRequestEvent = useCallback((event: RoomWidgetUpdateFriendRequestEvent) =>

From 26c047b2955d0e7d0502939ecc597865953d8bc3 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Tue, 1 Mar 2022 04:07:39 -0500
Subject: [PATCH 15/17] Update highscore widget

---
 .../high-score/FurnitureHighScoreView.tsx     | 70 ++++++++-----------
 1 file changed, 29 insertions(+), 41 deletions(-)

diff --git a/src/views/room/widgets/furniture/high-score/FurnitureHighScoreView.tsx b/src/views/room/widgets/furniture/high-score/FurnitureHighScoreView.tsx
index 16f59ba4..bd18c6d9 100644
--- a/src/views/room/widgets/furniture/high-score/FurnitureHighScoreView.tsx
+++ b/src/views/room/widgets/furniture/high-score/FurnitureHighScoreView.tsx
@@ -1,12 +1,11 @@
 import { HighScoreDataType, ObjectDataFactory, RoomEngineTriggerWidgetEvent, RoomObjectCategory, RoomObjectVariable } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { GetRoomEngine, LocalizeText } from '../../../../../api';
+import { Column, Flex, Text } from '../../../../../common';
 import { useRoomEngineEvent } from '../../../../../hooks';
-import { NitroLayoutGrid, NitroLayoutGridColumn } from '../../../../../layout';
-import { NitroLayoutBase } from '../../../../../layout/base';
 import { useRoomContext } from '../../../context/RoomContext';
-import { ContextMenuHeaderView } from '../../context-menu/views/header/ContextMenuHeaderView';
-import { ContextMenuListView } from '../../context-menu/views/list/ContextMenuListView';
+import { ContextMenuHeaderView } from '../../context-menu/ContextMenuHeaderView';
+import { ContextMenuListView } from '../../context-menu/ContextMenuListView';
 import { ObjectLocationView } from '../../object-location/ObjectLocationView';
 
 const SCORE_TYPES = ['perteam', 'mostwins', 'classic'];
@@ -57,49 +56,38 @@ export const FurnitureHighScoreView: FC<{}> = props =>
     if((objectId === -1) || !stuffData) return null;
 
     return (
-        <ObjectLocationView objectId={objectId} category={RoomObjectCategory.FLOOR} >
+        <ObjectLocationView objectId={ objectId } category={ RoomObjectCategory.FLOOR }>
             <div className="nitro-widget-high-score nitro-context-menu">
                 <ContextMenuHeaderView>
-                    {LocalizeText('high.score.display.caption', ['scoretype', 'cleartype'], [LocalizeText(`high.score.display.scoretype.${SCORE_TYPES[stuffData.scoreType]}`), LocalizeText(`high.score.display.cleartype.${CLEAR_TYPES[stuffData.clearType]}`)])}
+                    { LocalizeText('high.score.display.caption', [ 'scoretype', 'cleartype' ], [ LocalizeText(`high.score.display.scoretype.${ SCORE_TYPES[stuffData.scoreType] }`), LocalizeText(`high.score.display.cleartype.${ CLEAR_TYPES[stuffData.clearType] }`)]) }
                 </ContextMenuHeaderView>
-                <ContextMenuListView>
-                    <NitroLayoutGrid>
-                        <NitroLayoutGridColumn size={6}>
-                            <NitroLayoutBase className="text-center fw-bold">
-                                {LocalizeText('high.score.display.users.header')}
-                            </NitroLayoutBase>
-                        </NitroLayoutGridColumn>
-                        <NitroLayoutGridColumn size={6}>
-                            <NitroLayoutBase className="text-center fw-bold">
-                                {LocalizeText('high.score.display.score.header')}
-                            </NitroLayoutBase>
-                        </NitroLayoutGridColumn>
-                    </NitroLayoutGrid>
-                    <hr className="m-0 my-1" />
-                    <NitroLayoutGrid overflow="hidden">
-                        <NitroLayoutGridColumn size={6}>
-                            {stuffData.entries.map((entry, index) =>
+                <ContextMenuListView overflow="hidden" gap={ 1 }>
+                    <Column gap={ 1 }>
+                        <Flex alignItems="center">
+                            <Text center bold variant="white" className="col-8">
+                                { LocalizeText('high.score.display.users.header') }
+                            </Text>
+                            <Text center bold variant="white" className="col-4">
+                                { LocalizeText('high.score.display.score.header') }
+                            </Text>
+                        </Flex>
+                        <hr className="m-0" />
+                    </Column>
+                    <Column overflow="auto" gap={ 1 }>
+                        { stuffData.entries.map((entry, index) =>
                             {
                                 return (
-                                    <NitroLayoutBase key={index} className="text-center">
-                                        {entry.users.join(', ')}
-                                    </NitroLayoutBase>
+                                    <Flex key={ index } alignItems="center">
+                                        <Text center variant="white" className="col-8">
+                                            { entry.users.join(', ') }
+                                        </Text>
+                                        <Text center variant="white" className="col-4">
+                                            { entry.score }
+                                        </Text>
+                                    </Flex>
                                 );
-                            })
-                            }
-                        </NitroLayoutGridColumn>
-                        <NitroLayoutGridColumn size={6}>
-                            {stuffData.entries.map((entry, index) =>
-                            {
-                                return (
-                                    <NitroLayoutBase key={index} className="text-center">
-                                        {entry.score}
-                                    </NitroLayoutBase>
-                                );
-                            })
-                            }
-                        </NitroLayoutGridColumn>
-                    </NitroLayoutGrid>
+                            }) }
+                    </Column>
                 </ContextMenuListView>
             </div>
         </ObjectLocationView>

From f67943f36436f862d753462886d14a5411b4bd01 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Tue, 1 Mar 2022 04:12:27 -0500
Subject: [PATCH 16/17] More updates

---
 public/ui-config.json.example                       |  1 +
 src/App.scss                                        |  2 +-
 src/assets/styles/utils.scss                        |  4 ++++
 src/components/chat-history/ChatHistoryView.scss    |  4 ----
 .../inventory/views/badge/InventoryBadgeView.tsx    |  7 ++++---
 src/layout/card/content/NitroCardContentView.tsx    |  6 +++---
 .../views/calendar-item/CalendarItemView.tsx        | 10 +++++++++-
 .../views/calendar-item/CalendarItemView.types.ts   |  8 --------
 src/views/campaign/views/calendar/CalendarView.tsx  | 13 ++++++++++++-
 .../campaign/views/calendar/CalendarView.types.ts   | 11 -----------
 .../context-menu/FurnitureContextMenuView.tsx       |  4 ++--
 .../room/widgets/room-tools/RoomToolsWidgetView.tsx |  2 +-
 12 files changed, 37 insertions(+), 35 deletions(-)
 delete mode 100644 src/views/campaign/views/calendar-item/CalendarItemView.types.ts
 delete mode 100644 src/views/campaign/views/calendar/CalendarView.types.ts

diff --git a/public/ui-config.json.example b/public/ui-config.json.example
index 6b3a26c6..d8ae0939 100644
--- a/public/ui-config.json.example
+++ b/public/ui-config.json.example
@@ -11,6 +11,7 @@
     "chat.viewer.height.percentage": 0.40,
     "widget.dimmer.colorwheel": false,
     "avatar.wardrobe.max.slots": 10,
+    "user.badges.max.slots": 5,
     "hotelview": {
         "widgets": {
             "slot.1.widget": "promoarticle",
diff --git a/src/App.scss b/src/App.scss
index 30fce560..5bc604ea 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -32,7 +32,7 @@ $inventory-height: 320px;
 $navigator-width: 400px;
 $navigator-height: 420px;
 
-$chat-input-style-selector-widget-width: 200px;
+$chat-input-style-selector-widget-width: 210px;
 $chat-input-style-selector-widget-height: 200px;
 
 $user-profile-width: 560px;
diff --git a/src/assets/styles/utils.scss b/src/assets/styles/utils.scss
index 8db17555..c1a3be5b 100644
--- a/src/assets/styles/utils.scss
+++ b/src/assets/styles/utils.scss
@@ -114,3 +114,7 @@ ul {
        transform: scale(1);
     }
 }
+
+.btn {
+    pointer-events: all;
+}
diff --git a/src/components/chat-history/ChatHistoryView.scss b/src/components/chat-history/ChatHistoryView.scss
index 8c3838e4..f18f91b5 100644
--- a/src/components/chat-history/ChatHistoryView.scss
+++ b/src/components/chat-history/ChatHistoryView.scss
@@ -1,8 +1,4 @@
 .nitro-chat-history {
     width: $chat-history-width;
     height: $chat-history-height;
-
-    .content-area {
-        min-height: 200px;
-    }
 }
diff --git a/src/components/inventory/views/badge/InventoryBadgeView.tsx b/src/components/inventory/views/badge/InventoryBadgeView.tsx
index 73300e10..8aab5cbf 100644
--- a/src/components/inventory/views/badge/InventoryBadgeView.tsx
+++ b/src/components/inventory/views/badge/InventoryBadgeView.tsx
@@ -1,6 +1,6 @@
 import { RequestBadgesComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect } from 'react';
-import { LocalizeBadgeName, LocalizeText } from '../../../../api';
+import { GetConfiguration, LocalizeBadgeName, LocalizeText } from '../../../../api';
 import { AutoGrid } from '../../../../common/AutoGrid';
 import { Button } from '../../../../common/Button';
 import { Column } from '../../../../common/Column';
@@ -22,9 +22,10 @@ export const InventoryBadgeView: FC<InventoryBadgeViewProps> = props =>
     const { badgeState = null, dispatchBadgeState = null } = useInventoryContext();
     const { needsBadgeUpdate = false, badge = null, badges = [], activeBadges = [] } = badgeState;
 
-    const isWearingBadge = (badgeCode: string) => (activeBadges.indexOf(badgeCode) >= 0);
+    const maxBadgeCount = GetConfiguration<number>('user.badges.max.slots', 5);
 
-    const canWearBadges = () => (activeBadges.length < 5);
+    const isWearingBadge = (badgeCode: string) => (activeBadges.indexOf(badgeCode) >= 0);
+    const canWearBadges = () => (activeBadges.length < maxBadgeCount);
 
     const toggleBadge = () =>
     {
diff --git a/src/layout/card/content/NitroCardContentView.tsx b/src/layout/card/content/NitroCardContentView.tsx
index 2ada5f99..85c93343 100644
--- a/src/layout/card/content/NitroCardContentView.tsx
+++ b/src/layout/card/content/NitroCardContentView.tsx
@@ -4,8 +4,8 @@ import { useNitroCardContext } from '../context';
 
 export const NitroCardContentView: FC<ColumnProps> = props =>
 {
-    const { classNames = [], ...rest } = props;
-    const { theme = 'primary', simple = false } = useNitroCardContext();
+    const { overflow = 'auto', classNames = [], ...rest } = props;
+    const { simple = false } = useNitroCardContext();
 
     const getClassNames = useMemo(() =>
     {
@@ -18,5 +18,5 @@ export const NitroCardContentView: FC<ColumnProps> = props =>
         return newClassNames;
     }, [ simple, classNames ]);
 
-    return <Column classNames={ getClassNames } overflow="auto" { ...rest } />;
+    return <Column classNames={ getClassNames } overflow={ overflow } { ...rest } />;
 }
diff --git a/src/views/campaign/views/calendar-item/CalendarItemView.tsx b/src/views/campaign/views/calendar-item/CalendarItemView.tsx
index fe2eba0c..bf5e9607 100644
--- a/src/views/campaign/views/calendar-item/CalendarItemView.tsx
+++ b/src/views/campaign/views/calendar-item/CalendarItemView.tsx
@@ -2,7 +2,15 @@ import { FC, useCallback } from 'react';
 import { GetRoomEngine, GetSessionDataManager } from '../../../../api';
 import { NitroLayoutFlexColumn } from '../../../../layout';
 import { CalendarItemState } from '../../common/CalendarItemState';
-import { CalendarItemViewProps } from './CalendarItemView.types';
+
+interface CalendarItemViewProps
+{
+    id: number;
+    productName?: string;
+    state: number;
+    active?: boolean;
+    onClick(itemId: number): void;
+}
 
 export const CalendarItemView: FC<CalendarItemViewProps> = props =>
 {
diff --git a/src/views/campaign/views/calendar-item/CalendarItemView.types.ts b/src/views/campaign/views/calendar-item/CalendarItemView.types.ts
deleted file mode 100644
index 038dc03c..00000000
--- a/src/views/campaign/views/calendar-item/CalendarItemView.types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export interface CalendarItemViewProps
-{
-    id: number;
-    productName?: string;
-    state: number;
-    active?: boolean;
-    onClick(itemId: number): void;
-}
diff --git a/src/views/campaign/views/calendar/CalendarView.tsx b/src/views/campaign/views/calendar/CalendarView.tsx
index b6566791..a7d77d4a 100644
--- a/src/views/campaign/views/calendar/CalendarView.tsx
+++ b/src/views/campaign/views/calendar/CalendarView.tsx
@@ -4,7 +4,18 @@ import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutFl
 import { CalendarItemState } from '../../common/CalendarItemState';
 import { getNumItemsDisplayed } from '../../common/Utils';
 import { CalendarItemView } from '../calendar-item/CalendarItemView';
-import { CalendarViewProps } from './CalendarView.types';
+
+interface CalendarViewProps
+{
+    close(): void;
+    openPackage(id: number, asStaff: boolean): void;
+    receivedProducts: Map<number, string>;
+    campaignName: string;
+    currentDay: number;
+    numDays: number;
+    openedDays: number[];
+    missedDays: number[];
+}
 
 export const CalendarView: FC<CalendarViewProps> = props =>
 {
diff --git a/src/views/campaign/views/calendar/CalendarView.types.ts b/src/views/campaign/views/calendar/CalendarView.types.ts
deleted file mode 100644
index 454021e3..00000000
--- a/src/views/campaign/views/calendar/CalendarView.types.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export interface CalendarViewProps
-{
-    close(): void;
-    openPackage(id: number, asStaff: boolean): void;
-    receivedProducts: Map<number, string>;
-    campaignName: string;
-    currentDay: number;
-    numDays: number;
-    openedDays: number[];
-    missedDays: number[];
-}
diff --git a/src/views/room/widgets/furniture/context-menu/FurnitureContextMenuView.tsx b/src/views/room/widgets/furniture/context-menu/FurnitureContextMenuView.tsx
index e018d0ce..872460cd 100644
--- a/src/views/room/widgets/furniture/context-menu/FurnitureContextMenuView.tsx
+++ b/src/views/room/widgets/furniture/context-menu/FurnitureContextMenuView.tsx
@@ -6,9 +6,9 @@ import { TryJoinGroup } from '../../../../../api/groups/TryJoinGroup';
 import { BatchUpdates, CreateMessageHook } from '../../../../../hooks';
 import { useRoomEngineEvent } from '../../../../../hooks/events';
 import { useRoomContext } from '../../../context/RoomContext';
+import { ContextMenuHeaderView } from '../../context-menu/ContextMenuHeaderView';
+import { ContextMenuListItemView } from '../../context-menu/ContextMenuListItemView';
 import { ContextMenuView } from '../../context-menu/ContextMenuView';
-import { ContextMenuHeaderView } from '../../context-menu/views/header/ContextMenuHeaderView';
-import { ContextMenuListItemView } from '../../context-menu/views/list-item/ContextMenuListItemView';
 import { EffectBoxConfirmView } from './EffectBoxConfirmView';
 import { MonsterPlantSeedConfirmView } from './MonsterPlantSeedConfirmView';
 import { PurchasableClothingConfirmView } from './PurchasableClothingConfirmView';
diff --git a/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx b/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx
index 19ca05c0..b13b29b1 100644
--- a/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx
+++ b/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx
@@ -14,12 +14,12 @@ export const RoomToolsWidgetView: FC<{}> = props =>
 {
     const [ isZoomedIn, setIsZoomedIn ] = useState(false);
     const [ isLiked, setIsLiked ] = useState(false);
-    const { widgetHandler = null } = useRoomContext();
     const [ roomName, setRoomName ] = useState(null);
     const [ roomOwner, setRoomOwner ] = useState(null);
     const [ roomTags, setRoomTags ] = useState(null);
     const [ roomInfoDisplay, setRoomInfoDisplay ] = useState(false);
     const [ isOpen, setIsOpen ] = useState(false);
+    const { widgetHandler = null } = useRoomContext();
 
     const handleToolClick = (action: string) =>
     {

From 22fc19da2b64502c43e8439db856c6136a5d3464 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Tue, 1 Mar 2022 04:13:54 -0500
Subject: [PATCH 17/17] Remove console logs

---
 .../views/page/layout/pets/CatalogLayoutPetView.tsx       | 2 --
 src/components/inventory/InventoryMessageHandler.tsx      | 4 ----
 .../notification-center/common/NotificationUtilities.ts   | 2 --
 src/views/room/widgets/chat-input/ChatInputView.tsx       | 1 -
 .../furniture/gift-opening/FurnitureGiftOpeningView.tsx   | 8 +-------
 5 files changed, 1 insertion(+), 16 deletions(-)

diff --git a/src/components/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx b/src/components/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx
index e18f6220..6b35eba7 100644
--- a/src/components/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx
+++ b/src/components/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx
@@ -78,8 +78,6 @@ export const CatalogLayoutPetView: FC<CatalogLayoutProps> = props =>
     {
         let key: string = '';
 
-        console.log(approvalResult);
-
         switch(approvalResult)
         {
             case 1:
diff --git a/src/components/inventory/InventoryMessageHandler.tsx b/src/components/inventory/InventoryMessageHandler.tsx
index e313bc7b..1cef493b 100644
--- a/src/components/inventory/InventoryMessageHandler.tsx
+++ b/src/components/inventory/InventoryMessageHandler.tsx
@@ -227,8 +227,6 @@ export const InventoryMessageHandler: FC<{}> = props =>
     {
         const parser = event.getParser();
 
-        console.log(parser);
-
         dispatchFurnitureState({
             type: InventoryFurnitureActions.UPDATE_TRADE,
             payload: {
@@ -292,8 +290,6 @@ export const InventoryMessageHandler: FC<{}> = props =>
     {
         const parser = event.getParser();
 
-        console.log(parser);
-
         NotificationUtilities.simpleAlert(LocalizeText(`inventory.trading.openfail.${ parser.reason }`, [ 'otherusername' ], [ parser.otherUserName ]), null, null, null, LocalizeText('inventory.trading.openfail.title'));
     }, []);
 
diff --git a/src/views/notification-center/common/NotificationUtilities.ts b/src/views/notification-center/common/NotificationUtilities.ts
index 86c73b5e..d751a68f 100644
--- a/src/views/notification-center/common/NotificationUtilities.ts
+++ b/src/views/notification-center/common/NotificationUtilities.ts
@@ -73,8 +73,6 @@ export class NotificationUtilities
 
         if(configuration) for(const key in configuration) options.set(key, configuration[key]);
 
-        console.log(options);
-
         const title = this.getNotificationPart(options, type, 'title', true);
         const message = this.getNotificationPart(options, type, 'message', true).replace(/\\r/g, '\r');
         const linkTitle = this.getNotificationPart(options, type, 'linkTitle', false);
diff --git a/src/views/room/widgets/chat-input/ChatInputView.tsx b/src/views/room/widgets/chat-input/ChatInputView.tsx
index ed1391cc..063231f7 100644
--- a/src/views/room/widgets/chat-input/ChatInputView.tsx
+++ b/src/views/room/widgets/chat-input/ChatInputView.tsx
@@ -118,7 +118,6 @@ export const ChatInputView: FC<{}> = props =>
         {
             if(needsChatStyleUpdate)
             {
-                console.log('send')
                 GetSessionDataManager().sendChatStyleUpdate(chatStyleId);
 
                 setNeedsChatStyleUpdate(false);
diff --git a/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx b/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx
index c76b9112..9442f123 100644
--- a/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx
+++ b/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx
@@ -1,5 +1,5 @@
 import { RoomObjectCategory, RoomObjectOperationType } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import { FC, useCallback, useMemo, useState } from 'react';
 import { CreateLinkEvent, GetRoomEngine, GetSessionDataManager, LocalizeText, RoomWidgetPresentOpenMessage, RoomWidgetUpdatePresentDataEvent, RoomWidgetUpdateRoomObjectEvent } from '../../../../../api';
 import { Button, Column, Flex, Text } from '../../../../../common';
 import { ProductTypeEnum } from '../../../../../components/catalog/common/ProductTypeEnum';
@@ -33,11 +33,6 @@ export const FurnitureGiftOpeningView: FC<{}> = props =>
     const [ openRequested, setOpenRequested ] = useState(false);
     const { roomSession = null, eventDispatcher = null, widgetHandler = null } = useRoomContext();
 
-    useEffect(() =>
-    {
-        console.log(imageUrl);
-    }, [ imageUrl ]);
-
     const clearGift = useCallback(() =>
     {
         if(!openRequested) setObjectId(-1);
@@ -53,7 +48,6 @@ export const FurnitureGiftOpeningView: FC<{}> = props =>
 
     const onRoomWidgetUpdatePresentDataEvent = useCallback((event: RoomWidgetUpdatePresentDataEvent) =>
     {
-        console.log(event.imageUrl, event.type);
         switch(event.type)
         {
             case RoomWidgetUpdatePresentDataEvent.PACKAGEINFO: {