From b7be05f48877c4815a553069c7078ed8bc837b97 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Fri, 4 Mar 2022 12:26:37 -0500
Subject: [PATCH] Move more stuff around

---
 src/common/index.scss                         | 59 +++++++++++++++++++
 .../layout/LayoutAvatarImageView.tsx}         |  8 +--
 src/common/layout/LayoutGiftTagView.tsx       |  4 +-
 .../layout/LayoutPetImageView.tsx}            |  6 +-
 .../layout/LayoutRoomPreviewerView.tsx}       |  6 +-
 src/common/layout/index.ts                    |  3 +
 .../AvatarEditorFigurePreviewView.tsx         |  6 +-
 .../wardrobe/AvatarEditorWardrobeView.tsx     |  5 +-
 .../CatalogRoomPreviewerView.tsx              |  6 +-
 .../page/layout/pets/CatalogLayoutPetView.tsx |  5 +-
 .../widgets/CatalogViewProductWidgetView.tsx  |  7 +--
 .../groups/views/GroupMembersView.tsx         |  5 +-
 .../guide-tool/views/GuideToolOngoingView.tsx | 10 ++--
 .../views/bot/InventoryBotItemView.tsx        |  5 +-
 .../inventory/views/bot/InventoryBotView.tsx  |  5 +-
 .../furniture/InventoryFurnitureView.tsx      |  5 +-
 .../views/pet/InventoryPetItemView.tsx        |  5 +-
 .../inventory/views/pet/InventoryPetView.tsx  |  5 +-
 .../AvatarInfoUseProductConfirmView.tsx       | 13 ++--
 .../PurchasableClothingConfirmView.tsx        |  5 +-
 .../friend-furni/FurnitureFriendFurniView.tsx |  7 +--
 .../FurnitureMannequinPreviewView.tsx         |  5 +-
 .../mannequin/FurnitureMannequinView.tsx      |  5 +-
 .../infostand/InfoStandWidgetBotView.tsx      |  5 +-
 .../infostand/InfoStandWidgetPetView.tsx      |  5 +-
 .../InfoStandWidgetRentableBotView.tsx        |  5 +-
 .../infostand/InfoStandWidgetUserView.tsx     |  5 +-
 src/components/toolbar/ToolbarView.tsx        |  5 +-
 .../views/RelationshipsContainerView.tsx      |  4 +-
 .../user-profile/views/UserContainerView.tsx  |  4 +-
 .../WiredActionBotChangeFigureView.tsx        |  8 +--
 .../views/friend-bar/FriendBarItemView.tsx    |  5 +-
 .../messenger/FriendsMessengerThreadGroup.tsx |  9 ++-
 .../views/messenger/FriendsMessengerView.tsx  |  5 +-
 src/views/hc-center/HcCenterView.tsx          |  5 +-
 .../hall-of-fame-item/HallOfFameItemView.tsx  |  5 +-
 src/views/shared/Shared.scss                  |  2 -
 .../shared/avatar-image/AvatarImage.scss      | 14 -----
 src/views/shared/pet-image/PetImage.scss      |  7 ---
 39 files changed, 144 insertions(+), 139 deletions(-)
 rename src/{views/shared/avatar-image/AvatarImageView.tsx => common/layout/LayoutAvatarImageView.tsx} (91%)
 rename src/{views/shared/pet-image/PetImageView.tsx => common/layout/LayoutPetImageView.tsx} (94%)
 rename src/{views/shared/room-previewer/RoomPreviewerView.tsx => common/layout/LayoutRoomPreviewerView.tsx} (93%)
 delete mode 100644 src/views/shared/avatar-image/AvatarImage.scss
 delete mode 100644 src/views/shared/pet-image/PetImage.scss

diff --git a/src/common/index.scss b/src/common/index.scss
index 46bc7aa8..1348db61 100644
--- a/src/common/index.scss
+++ b/src/common/index.scss
@@ -339,6 +339,65 @@
     }
 }
 
+.avatar-image {
+    position: relative;
+    width: 90px;
+    height: 130px;
+    background-repeat: no-repeat;
+    background-position: center -8px;
+    pointer-events: none;
+    image-rendering: pixelated;
+
+    &.scale-0-5,
+    &.scale-0-75 {
+        image-rendering: -webkit-optimize-contrast;
+    }
+}
+
+.pet-image {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.room-preview-container {
+    position: relative;
+    width: 100%;
+
+    .room-preview-image {
+        position: relative;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        border-radius: $border-radius;
+        background-color: $light;
+        background-repeat: no-repeat;
+        background-position: center;
+        overflow: hidden;
+    
+        &.border-0 {
+            &::after {
+                content: none;
+            }
+        }
+
+        &::after {
+            position: absolute;
+            content: '';
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            border-radius: $border-radius;
+            border-bottom: 2px solid white;
+            border-right: 2px solid white;
+            box-shadow: -2px -2px rgba(0, 0, 0, .4), inset 3px 3px rgba(0, 0, 0, .2);
+        }
+    }
+}
 
 
 @import './card/NitroCardView';
diff --git a/src/views/shared/avatar-image/AvatarImageView.tsx b/src/common/layout/LayoutAvatarImageView.tsx
similarity index 91%
rename from src/views/shared/avatar-image/AvatarImageView.tsx
rename to src/common/layout/LayoutAvatarImageView.tsx
index 54aa79e1..814b201e 100644
--- a/src/views/shared/avatar-image/AvatarImageView.tsx
+++ b/src/common/layout/LayoutAvatarImageView.tsx
@@ -1,9 +1,9 @@
 import { AvatarScaleType, AvatarSetType } from '@nitrots/nitro-renderer';
 import { CSSProperties, FC, useEffect, useMemo, useRef, useState } from 'react';
-import { GetAvatarRenderManager } from '../../../api';
-import { Base, BaseProps } from '../../../common/Base';
+import { GetAvatarRenderManager } from '../../api';
+import { Base, BaseProps } from '../Base';
 
-export interface AvatarImageViewProps extends BaseProps<HTMLDivElement>
+export interface LayoutAvatarImageViewProps extends BaseProps<HTMLDivElement>
 {
     figure: string;
     gender?: string;
@@ -12,7 +12,7 @@ export interface AvatarImageViewProps extends BaseProps<HTMLDivElement>
     scale?: number;
 }
 
-export const AvatarImageView: FC<AvatarImageViewProps> = props =>
+export const LayoutAvatarImageView: FC<LayoutAvatarImageViewProps> = props =>
 {
     const { figure = '', gender = 'M', headOnly = false, direction = 0, scale = 1, classNames = [], style = {}, ...rest } = props;
     const [ avatarUrl, setAvatarUrl ] = useState<string>(null);
diff --git a/src/common/layout/LayoutGiftTagView.tsx b/src/common/layout/LayoutGiftTagView.tsx
index f522df5d..41bb1b2e 100644
--- a/src/common/layout/LayoutGiftTagView.tsx
+++ b/src/common/layout/LayoutGiftTagView.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { LocalizeText } from '../../api';
-import { AvatarImageView } from '../../views/shared/avatar-image/AvatarImageView';
+import { LayoutAvatarImageView } from './LayoutAvatarImageView';
 
 interface LayoutGiftTagViewProps
 {
@@ -20,7 +20,7 @@ export const LayoutGiftTagView: FC<LayoutGiftTagViewProps> = props =>
             <div className="d-flex align-items-center justify-content-center gift-face flex-shrink-0">
                 { !userName && <div className="gift-incognito"></div> }
                 { figure && <div className="gift-avatar">
-                    <AvatarImageView figure={ figure } direction={ 2 } headOnly={ true } />
+                    <LayoutAvatarImageView figure={ figure } direction={ 2 } headOnly={ true } />
                 </div> }
             </div>
             <div className="d-flex flex-column w-100 pt-4 pb-4 pe-4 ps-3">
diff --git a/src/views/shared/pet-image/PetImageView.tsx b/src/common/layout/LayoutPetImageView.tsx
similarity index 94%
rename from src/views/shared/pet-image/PetImageView.tsx
rename to src/common/layout/LayoutPetImageView.tsx
index 07eb1f64..ffe6c2d4 100644
--- a/src/views/shared/pet-image/PetImageView.tsx
+++ b/src/common/layout/LayoutPetImageView.tsx
@@ -1,8 +1,8 @@
 import { PetCustomPart, PetFigureData, TextureUtils, Vector3d } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useRef, useState } from 'react';
-import { GetRoomEngine } from '../../../api';
+import { GetRoomEngine } from '../../api';
 
-interface PetImageViewProps
+interface LayoutPetImageViewProps
 {
     figure?: string;
     typeId?: number;
@@ -15,7 +15,7 @@ interface PetImageViewProps
     scale?: number;
 }
 
-export const PetImageView: FC<PetImageViewProps> = props =>
+export const LayoutPetImageView: FC<LayoutPetImageViewProps> = props =>
 {
     const { figure = '', typeId = -1, paletteId = -1, color = 0xFFFFFF, customParts = [], posture = 'std', headOnly = false, direction = 0, scale = 1 } = props;
     const [ petUrl, setPetUrl ] = useState<string>(null);
diff --git a/src/views/shared/room-previewer/RoomPreviewerView.tsx b/src/common/layout/LayoutRoomPreviewerView.tsx
similarity index 93%
rename from src/views/shared/room-previewer/RoomPreviewerView.tsx
rename to src/common/layout/LayoutRoomPreviewerView.tsx
index b1c9761b..a7722c73 100644
--- a/src/views/shared/room-previewer/RoomPreviewerView.tsx
+++ b/src/common/layout/LayoutRoomPreviewerView.tsx
@@ -1,14 +1,14 @@
 import { ColorConverter, IRoomRenderingCanvas, RoomPreviewer, TextureUtils } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useRef, useState } from 'react';
-import { GetNitroInstance } from '../../../api';
+import { GetNitroInstance } from '../../api';
 
-export interface RoomPreviewerViewProps
+export interface LayoutRoomPreviewerViewProps
 {
     roomPreviewer: RoomPreviewer;
     height?: number;
 }
 
-export const RoomPreviewerView: FC<RoomPreviewerViewProps> = props =>
+export const LayoutRoomPreviewerView: FC<LayoutRoomPreviewerViewProps> = props =>
 {
     const { roomPreviewer = null, height = 0 } = props;
     const [ renderingCanvas, setRenderingCanvas ] = useState<IRoomRenderingCanvas>(null);
diff --git a/src/common/layout/index.ts b/src/common/layout/index.ts
index 8a3facd3..5d29b15f 100644
--- a/src/common/layout/index.ts
+++ b/src/common/layout/index.ts
@@ -1,3 +1,4 @@
+export * from './LayoutAvatarImageView';
 export * from './LayoutBadgeImageView';
 export * from './LayoutCurrencyIcon';
 export * from './LayoutFurniImageView';
@@ -9,7 +10,9 @@ export * from './LayoutLoadingSpinnerView';
 export * from './LayoutMiniCameraView';
 export * from './LayoutNotificationAlertView';
 export * from './LayoutNotificationBubbleView';
+export * from './LayoutPetImageView';
 export * from './LayoutRarityLevelView';
+export * from './LayoutRoomPreviewerView';
 export * from './LayoutRoomThumbnailView';
 export * from './LayoutTrophyView';
 export * from './UserProfileIconView';
diff --git a/src/components/avatar-editor/views/figure-preview/AvatarEditorFigurePreviewView.tsx b/src/components/avatar-editor/views/figure-preview/AvatarEditorFigurePreviewView.tsx
index fcf1fe4e..abe2866f 100644
--- a/src/components/avatar-editor/views/figure-preview/AvatarEditorFigurePreviewView.tsx
+++ b/src/components/avatar-editor/views/figure-preview/AvatarEditorFigurePreviewView.tsx
@@ -1,8 +1,6 @@
 import { AvatarDirectionAngle } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
-import { Base } from '../../../../common/Base';
-import { Column } from '../../../../common/Column';
-import { AvatarImageView } from '../../../../views/shared/avatar-image/AvatarImageView';
+import { Base, Column, LayoutAvatarImageView } from '../../../../common';
 import { FigureData } from '../../common/FigureData';
 import { AvatarEditorIcon } from '../AvatarEditorIcon';
 
@@ -50,7 +48,7 @@ export const AvatarEditorFigurePreviewView: FC<AvatarEditorFigurePreviewViewProp
 
     return (
         <Column className="figure-preview-container" overflow="hidden" position="relative">
-            <AvatarImageView figure={ figureData.getFigureString() } direction={ figureData.direction } scale={ 2 } />
+            <LayoutAvatarImageView figure={ figureData.getFigureString() } direction={ figureData.direction } scale={ 2 } />
             <AvatarEditorIcon className="avatar-spotlight" icon="spotlight" />
             <Base className="avatar-shadow" />
             <Base className="arrow-container">
diff --git a/src/components/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx b/src/components/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx
index 47083c64..b35eec9c 100644
--- a/src/components/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx
+++ b/src/components/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx
@@ -1,8 +1,7 @@
 import { IAvatarFigureContainer, SaveWardrobeOutfitMessageComposer } from '@nitrots/nitro-renderer';
 import { Dispatch, FC, SetStateAction, useCallback, useMemo } from 'react';
 import { GetAvatarRenderManager, GetSessionDataManager, SendMessageComposer } from '../../../../api';
-import { AutoGrid, Base, Button, Flex, LayoutCurrencyIcon, LayoutGridItem } from '../../../../common';
-import { AvatarImageView } from '../../../../views/shared/avatar-image/AvatarImageView';
+import { AutoGrid, Base, Button, Flex, LayoutAvatarImageView, LayoutCurrencyIcon, LayoutGridItem } from '../../../../common';
 import { FigureData } from '../../common/FigureData';
 
 export interface AvatarEditorWardrobeViewProps
@@ -56,7 +55,7 @@ export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props
                 items.push(
                     <LayoutGridItem key={ index } position="relative" overflow="hidden" className="nitro-avatar-editor-wardrobe-figure-preview">
                         { figureContainer &&
-                            <AvatarImageView figure={ figureContainer.getFigureString() } gender={ gender } direction={ 2 } /> }
+                            <LayoutAvatarImageView figure={ figureContainer.getFigureString() } gender={ gender } direction={ 2 } /> }
                         <Base className="avatar-shadow" />
                         { (clubLevel > 0) && <LayoutCurrencyIcon className="position-absolute top-1 start-1" type="hc" /> }
                         <Flex gap={ 1 } className="button-container">
diff --git a/src/components/catalog/views/catalog-room-previewer/CatalogRoomPreviewerView.tsx b/src/components/catalog/views/catalog-room-previewer/CatalogRoomPreviewerView.tsx
index 89e7f5ea..24f2f073 100644
--- a/src/components/catalog/views/catalog-room-previewer/CatalogRoomPreviewerView.tsx
+++ b/src/components/catalog/views/catalog-room-previewer/CatalogRoomPreviewerView.tsx
@@ -1,11 +1,11 @@
 import { NitroToolbarAnimateIconEvent, TextureUtils, ToolbarIconEnum } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useRef } from 'react';
 import { GetRoomEngine } from '../../../../api';
+import { LayoutRoomPreviewerView, LayoutRoomPreviewerViewProps } from '../../../../common';
 import { CatalogPurchasedEvent } from '../../../../events';
 import { UseUiEvent } from '../../../../hooks';
-import { RoomPreviewerView, RoomPreviewerViewProps } from '../../../../views/shared/room-previewer/RoomPreviewerView';
 
-export const CatalogRoomPreviewerView: FC<RoomPreviewerViewProps> = props =>
+export const CatalogRoomPreviewerView: FC<LayoutRoomPreviewerViewProps> = props =>
 {
     const { roomPreviewer = null } = props;
     const elementRef = useRef<HTMLDivElement>(null);
@@ -43,7 +43,7 @@ export const CatalogRoomPreviewerView: FC<RoomPreviewerViewProps> = props =>
 
     return (
         <div ref={ elementRef }>
-            <RoomPreviewerView { ...props } />
+            <LayoutRoomPreviewerView { ...props } />
         </div>
     );
 }
diff --git a/src/components/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx b/src/components/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx
index 4d215caf..2a6d38bb 100644
--- a/src/components/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx
+++ b/src/components/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx
@@ -2,10 +2,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { ApproveNameMessageComposer, ColorConverter, GetSellablePetPalettesComposer, PurchaseFromCatalogComposer, SellablePetPaletteData } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { LocalizeText, SendMessageComposer } from '../../../../../../api';
-import { AutoGrid, Base, Button, Column, Flex, Grid, LayoutGridItem, Text } from '../../../../../../common';
+import { AutoGrid, Base, Button, Column, Flex, Grid, LayoutGridItem, LayoutPetImageView, Text } from '../../../../../../common';
 import { CatalogNameResultEvent, CatalogPurchaseFailureEvent, CatalogWidgetEvent } from '../../../../../../events';
 import { BatchUpdates, DispatchUiEvent, UseUiEvent } from '../../../../../../hooks';
-import { PetImageView } from '../../../../../../views/shared/pet-image/PetImageView';
 import { useCatalogContext } from '../../../../CatalogContext';
 import { GetPetAvailableColors, GetPetIndexFromLocalization } from '../../../../common/CatalogUtilities';
 import { CatalogAddOnBadgeWidgetView } from '../../widgets/CatalogAddOnBadgeWidgetView';
@@ -213,7 +212,7 @@ export const CatalogLayoutPetView: FC<CatalogLayoutProps> = props =>
                         {
                             return (
                                 <LayoutGridItem key={ index } itemActive={ (selectedPaletteIndex === index) } onClick={ event => setSelectedPaletteIndex(index) }>
-                                    <PetImageView typeId={ petIndex } paletteId={ palette.paletteId } direction={ 2 } headOnly={ true } />
+                                    <LayoutPetImageView typeId={ petIndex } paletteId={ palette.paletteId } direction={ 2 } headOnly={ true } />
                                 </LayoutGridItem>
                             );
                         })}
diff --git a/src/components/catalog/views/page/widgets/CatalogViewProductWidgetView.tsx b/src/components/catalog/views/page/widgets/CatalogViewProductWidgetView.tsx
index 739d1428..f6a709af 100644
--- a/src/components/catalog/views/page/widgets/CatalogViewProductWidgetView.tsx
+++ b/src/components/catalog/views/page/widgets/CatalogViewProductWidgetView.tsx
@@ -1,10 +1,7 @@
 import { Vector3d } from '@nitrots/nitro-renderer';
 import { FC, useEffect } from 'react';
 import { GetAvatarRenderManager, GetSessionDataManager } from '../../../../../api';
-import { AutoGrid } from '../../../../../common/AutoGrid';
-import { Column } from '../../../../../common/Column';
-import { LayoutGridItem } from '../../../../../common/layout/LayoutGridItem';
-import { RoomPreviewerView } from '../../../../../views/shared/room-previewer/RoomPreviewerView';
+import { AutoGrid, Column, LayoutGridItem, LayoutRoomPreviewerView } from '../../../../../common';
 import { useCatalogContext } from '../../../CatalogContext';
 import { FurniCategory } from '../../../common/FurniCategory';
 import { Offer } from '../../../common/Offer';
@@ -102,5 +99,5 @@ export const CatalogViewProductWidgetView: FC<{}> = props =>
         );
     }
     
-    return <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />;
+    return <LayoutRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />;
 }
diff --git a/src/components/groups/views/GroupMembersView.tsx b/src/components/groups/views/GroupMembersView.tsx
index d9323384..13fa17a2 100644
--- a/src/components/groups/views/GroupMembersView.tsx
+++ b/src/components/groups/views/GroupMembersView.tsx
@@ -2,10 +2,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { GroupAdminGiveComposer, GroupAdminTakeComposer, GroupConfirmMemberRemoveEvent, GroupConfirmRemoveMemberComposer, GroupMemberParser, GroupMembersComposer, GroupMembersEvent, GroupMembershipAcceptComposer, GroupMembershipDeclineComposer, GroupMembersParser, GroupRank, GroupRemoveMemberComposer, ILinkEventTracker } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { AddEventLinkTracker, GetSessionDataManager, GetUserProfile, LocalizeText, RemoveLinkEventTracker, SendMessageComposer } from '../../../api';
-import { Base, Button, Column, Flex, Grid, LayoutBadgeImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
+import { Base, Button, Column, Flex, Grid, LayoutAvatarImageView, LayoutBadgeImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
 import { BatchUpdates, UseMessageEventHook } from '../../../hooks';
 import { NotificationUtilities } from '../../../views/notification-center/common/NotificationUtilities';
-import { AvatarImageView } from '../../../views/shared/avatar-image/AvatarImageView';
 
 export const GroupMembersView: FC<{}> = props =>
 {
@@ -183,7 +182,7 @@ export const GroupMembersView: FC<{}> = props =>
                             return (
                                 <Flex key={ index } gap={ 2 } alignItems="center" overflow="hidden" className="member-list-item bg-white rounded p-2">
                                     <div className="avatar-head cursor-pointer" onClick={ () => GetUserProfile(member.id) }>
-                                        <AvatarImageView figure={ member.figure } headOnly={ true } direction={ 2 } />
+                                        <LayoutAvatarImageView figure={ member.figure } headOnly={ true } direction={ 2 } />
                                     </div>
                                     <Column grow gap={ 1 }>
                                         <Text bold small pointer onClick={ event => GetUserProfile(member.id) }>{ member.name }</Text>
diff --git a/src/components/guide-tool/views/GuideToolOngoingView.tsx b/src/components/guide-tool/views/GuideToolOngoingView.tsx
index f22f6347..21ef8ce3 100644
--- a/src/components/guide-tool/views/GuideToolOngoingView.tsx
+++ b/src/components/guide-tool/views/GuideToolOngoingView.tsx
@@ -1,10 +1,8 @@
-import { GuideSessionGetRequesterRoomMessageComposer, GuideSessionInviteRequesterMessageComposer, GuideSessionRequesterRoomMessageEvent, GuideSessionResolvedMessageComposer } from '@nitrots/nitro-renderer';
-import { GuideSessionMessageMessageComposer } from '@nitrots/nitro-renderer/src';
+import { GuideSessionGetRequesterRoomMessageComposer, GuideSessionInviteRequesterMessageComposer, GuideSessionMessageMessageComposer, GuideSessionRequesterRoomMessageEvent, GuideSessionResolvedMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, KeyboardEvent, useCallback, useState } from 'react';
 import { GetSessionDataManager, LocalizeText, SendMessageComposer, TryVisitRoom } from '../../../api';
-import { Base, Button, ButtonGroup, Column, Flex, Text } from '../../../common';
+import { Base, Button, ButtonGroup, Column, Flex, LayoutAvatarImageView, Text } from '../../../common';
 import { UseMessageEventHook } from '../../../hooks';
-import { AvatarImageView } from '../../../views/shared/avatar-image/AvatarImageView';
 import { GuideToolMessageGroup } from '../common/GuideToolMessageGroup';
 
 interface GuideToolOngoingViewProps
@@ -90,7 +88,7 @@ export const GuideToolOngoingView: FC<GuideToolOngoingViewProps> = props =>
                                 <Flex fullWidth justifyContent={ isOwnChat(group.userId) ? 'end' : 'start' } gap={ 2 }>
                                     <Base shrink className="message-avatar">
                                         { (!isOwnChat(group.userId)) &&
-                                            <AvatarImageView figure={ userFigure } direction={ 2 } /> }
+                                            <LayoutAvatarImageView figure={ userFigure } direction={ 2 } /> }
                                     </Base>
                                     <Base className={ 'bg-light text-black border-radius mb-2 rounded py-1 px-2 messages-group-' + (isOwnChat(group.userId) ? 'right' : 'left') }>
                                         <Text bold>
@@ -101,7 +99,7 @@ export const GuideToolOngoingView: FC<GuideToolOngoingViewProps> = props =>
                                     </Base>
                                     { (isOwnChat(group.userId)) &&
                                         <Base className="message-avatar flex-shrink-0">
-                                            <AvatarImageView figure={ GetSessionDataManager().figure } direction={ 4 } />
+                                            <LayoutAvatarImageView figure={ GetSessionDataManager().figure } direction={ 4 } />
                                         </Base> }
                                 </Flex>
                             );
diff --git a/src/components/inventory/views/bot/InventoryBotItemView.tsx b/src/components/inventory/views/bot/InventoryBotItemView.tsx
index 0e5157f7..f91840cb 100644
--- a/src/components/inventory/views/bot/InventoryBotItemView.tsx
+++ b/src/components/inventory/views/bot/InventoryBotItemView.tsx
@@ -1,7 +1,6 @@
 import { MouseEventType } from '@nitrots/nitro-renderer';
 import { FC, MouseEvent, useEffect, useState } from 'react';
-import { LayoutGridItem } from '../../../../common';
-import { AvatarImageView } from '../../../../views/shared/avatar-image/AvatarImageView';
+import { LayoutAvatarImageView, LayoutGridItem } from '../../../../common';
 import { BotItem } from '../../common/BotItem';
 import { attemptBotPlacement } from '../../common/BotUtilities';
 import { useInventoryContext } from '../../InventoryContext';
@@ -51,7 +50,7 @@ export const InventoryBotItemView: FC<InventoryBotItemViewProps> = props =>
 
     return (
         <LayoutGridItem itemActive={ isActive } itemUnseen={ botItem.isUnseen } onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent }>
-            <AvatarImageView figure={ botItem.botData.figure } direction={ 3 } headOnly={ true } />
+            <LayoutAvatarImageView figure={ botItem.botData.figure } direction={ 3 } headOnly={ true } />
         </LayoutGridItem>
     );
 }
diff --git a/src/components/inventory/views/bot/InventoryBotView.tsx b/src/components/inventory/views/bot/InventoryBotView.tsx
index d36fc9b6..063c02fb 100644
--- a/src/components/inventory/views/bot/InventoryBotView.tsx
+++ b/src/components/inventory/views/bot/InventoryBotView.tsx
@@ -1,8 +1,7 @@
 import { GetBotInventoryComposer, IRoomSession, RoomObjectVariable, RoomPreviewer } from '@nitrots/nitro-renderer';
 import { FC, useEffect } from 'react';
 import { GetRoomEngine, LocalizeText, SendMessageComposer } from '../../../../api';
-import { AutoGrid, Button, Column, Grid, Text } from '../../../../common';
-import { RoomPreviewerView } from '../../../../views/shared/room-previewer/RoomPreviewerView';
+import { AutoGrid, Button, Column, Grid, LayoutRoomPreviewerView, Text } from '../../../../common';
 import { attemptBotPlacement } from '../../common/BotUtilities';
 import { useInventoryContext } from '../../InventoryContext';
 import { InventoryBotActions } from '../../reducers/InventoryBotReducer';
@@ -79,7 +78,7 @@ export const InventoryBotView: FC<InventoryBotViewProps> = props =>
             </Column>
             <Column size={ 5 } overflow="auto">
                 <Column overflow="hidden" position="relative">
-                    <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
+                    <LayoutRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
                 </Column>
                 { botItem &&
                     <Column grow justifyContent="between" gap={ 2 }>
diff --git a/src/components/inventory/views/furniture/InventoryFurnitureView.tsx b/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
index cea8c942..37fdb3f6 100644
--- a/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
+++ b/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
@@ -1,9 +1,8 @@
 import { FurnitureListComposer, IRoomSession, RoomObjectVariable, RoomPreviewer, Vector3d } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { GetRoomEngine, GetSessionDataManager, LocalizeText, SendMessageComposer } from '../../../../api';
-import { AutoGrid, Button, Column, Grid, LayoutRarityLevelView, Text } from '../../../../common';
+import { AutoGrid, Button, Column, Grid, LayoutRarityLevelView, LayoutRoomPreviewerView, Text } from '../../../../common';
 import { LimitedEditionCompactPlateView } from '../../../../views/shared/limited-edition/LimitedEditionCompactPlateView';
-import { RoomPreviewerView } from '../../../../views/shared/room-previewer/RoomPreviewerView';
 import { FurniCategory } from '../../common/FurniCategory';
 import { attemptItemPlacement, attemptPlaceMarketplaceOffer } from '../../common/FurnitureUtilities';
 import { GroupItem } from '../../common/GroupItem';
@@ -115,7 +114,7 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
             </Column>
             <Column size={ 5 } overflow="auto">
                 <Column overflow="hidden" position="relative">
-                    <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
+                    <LayoutRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
                     { groupItem && groupItem.stuffData.isUnique &&
                         <LimitedEditionCompactPlateView className="top-2 end-2" position="absolute" uniqueNumber={ groupItem.stuffData.uniqueNumber } uniqueSeries={ groupItem.stuffData.uniqueSeries } /> }
                     { (groupItem && groupItem.stuffData.rarityLevel > -1) &&
diff --git a/src/components/inventory/views/pet/InventoryPetItemView.tsx b/src/components/inventory/views/pet/InventoryPetItemView.tsx
index d8a49f95..6e6ecb2a 100644
--- a/src/components/inventory/views/pet/InventoryPetItemView.tsx
+++ b/src/components/inventory/views/pet/InventoryPetItemView.tsx
@@ -1,7 +1,6 @@
 import { MouseEventType } from '@nitrots/nitro-renderer';
 import { FC, MouseEvent, useEffect, useState } from 'react';
-import { LayoutGridItem } from '../../../../common';
-import { PetImageView } from '../../../../views/shared/pet-image/PetImageView';
+import { LayoutGridItem, LayoutPetImageView } from '../../../../common';
 import { PetItem } from '../../common/PetItem';
 import { attemptPetPlacement } from '../../common/PetUtilities';
 import { useInventoryContext } from '../../InventoryContext';
@@ -51,7 +50,7 @@ export const InventoryPetItemView: FC<InventoryPetItemViewProps> = props =>
     
     return (
         <LayoutGridItem itemActive={ isActive } itemUnseen={ petItem.isUnseen } onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent }>
-            <PetImageView figure={ petItem.petData.figureData.figuredata } direction={ 3 } headOnly={ true } />
+            <LayoutPetImageView figure={ petItem.petData.figureData.figuredata } direction={ 3 } headOnly={ true } />
         </LayoutGridItem>
     );
 }
diff --git a/src/components/inventory/views/pet/InventoryPetView.tsx b/src/components/inventory/views/pet/InventoryPetView.tsx
index e76029ce..d7b84250 100644
--- a/src/components/inventory/views/pet/InventoryPetView.tsx
+++ b/src/components/inventory/views/pet/InventoryPetView.tsx
@@ -1,8 +1,7 @@
 import { IRoomSession, RequestPetsComposer, RoomObjectVariable, RoomPreviewer } from '@nitrots/nitro-renderer';
 import { FC, useEffect } from 'react';
 import { GetRoomEngine, LocalizeText, SendMessageComposer } from '../../../../api';
-import { AutoGrid, Button, Column, Grid, Text } from '../../../../common';
-import { RoomPreviewerView } from '../../../../views/shared/room-previewer/RoomPreviewerView';
+import { AutoGrid, Button, Column, Grid, LayoutRoomPreviewerView, Text } from '../../../../common';
 import { attemptPetPlacement } from '../../common/PetUtilities';
 import { useInventoryContext } from '../../InventoryContext';
 import { InventoryPetActions } from '../../reducers/InventoryPetReducer';
@@ -78,7 +77,7 @@ export const InventoryPetView: FC<InventoryPetViewProps> = props =>
             </Column>
             <Column size={ 5 } overflow="auto">
                 <Column overflow="hidden" position="relative">
-                    <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
+                    <LayoutRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
                 </Column>
                 { petItem &&
                     <Column grow justifyContent="between" gap={ 2 }>
diff --git a/src/components/room/widgets/avatar-info/AvatarInfoUseProductConfirmView.tsx b/src/components/room/widgets/avatar-info/AvatarInfoUseProductConfirmView.tsx
index 5306a722..d3f45e88 100644
--- a/src/components/room/widgets/avatar-info/AvatarInfoUseProductConfirmView.tsx
+++ b/src/components/room/widgets/avatar-info/AvatarInfoUseProductConfirmView.tsx
@@ -1,8 +1,7 @@
 import { IFurnitureData, PetCustomPart, PetFigureData, RoomObjectCategory, RoomObjectVariable, RoomUserData } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { GetFurnitureDataForRoomObject, GetRoomEngine, LocalizeText, RoomWidgetUseProductMessage, UseProductItem } from '../../../../api';
-import { Base, Button, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
-import { PetImageView } from '../../../../views/shared/pet-image/PetImageView';
+import { Base, Button, Column, Flex, LayoutPetImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 import { FurniCategory } from '../../../inventory/common/FurniCategory';
 import { useRoomContext } from '../../RoomContext';
 
@@ -71,7 +70,7 @@ export const AvatarInfoUseProductConfirmView: FC<AvatarInfoUseProductConfirmView
                     }
                 }
 
-                return <PetImageView typeId={ petFigureData.typeId } paletteId={ paletteId } color={ petFigureData.color } customParts={ petFigureData.customParts } direction={ 2 } />
+                return <LayoutPetImageView typeId={ petFigureData.typeId } paletteId={ paletteId } color={ petFigureData.color } customParts={ petFigureData.customParts } direction={ 2 } />
             }
             case FurniCategory.PET_CUSTOM_PART: {
                 if(customParts.length < 4) return null;
@@ -98,7 +97,7 @@ export const AvatarInfoUseProductConfirmView: FC<AvatarInfoUseProductConfirmView
                     _local_10++;
                 }
 
-                return <PetImageView typeId={ petFigureData.typeId } paletteId={ petFigureData.paletteId } color={ petFigureData.color } customParts={ newCustomParts } direction={ 2 } />;
+                return <LayoutPetImageView typeId={ petFigureData.typeId } paletteId={ petFigureData.paletteId } color={ petFigureData.color } customParts={ newCustomParts } direction={ 2 } />;
             }
             case FurniCategory.PET_CUSTOM_PART_SHAMPOO: {
                 if(customParts.length < 3) return null;
@@ -124,7 +123,7 @@ export const AvatarInfoUseProductConfirmView: FC<AvatarInfoUseProductConfirmView
                     _local_10++;
                 }
 
-                return <PetImageView typeId={ petFigureData.typeId } paletteId={ petFigureData.paletteId } color={ petFigureData.color } customParts={ newCustomParts } direction={ 2 } />;
+                return <LayoutPetImageView typeId={ petFigureData.typeId } paletteId={ petFigureData.paletteId } color={ petFigureData.color } customParts={ newCustomParts } direction={ 2 } />;
             }
             case FurniCategory.PET_SADDLE: {
                 if(customParts.length < 4) return null;
@@ -152,7 +151,7 @@ export const AvatarInfoUseProductConfirmView: FC<AvatarInfoUseProductConfirmView
                     }
                 }
 
-                return <PetImageView typeId={ petFigureData.typeId } paletteId={ petFigureData.paletteId } color={ petFigureData.color } customParts={ newCustomParts } direction={ 2 } />;
+                return <LayoutPetImageView typeId={ petFigureData.typeId } paletteId={ petFigureData.paletteId } color={ petFigureData.color } customParts={ newCustomParts } direction={ 2 } />;
             }
             case FurniCategory.MONSTERPLANT_REBREED:
             case FurniCategory.MONSTERPLANT_REVIVAL:
@@ -174,7 +173,7 @@ export const AvatarInfoUseProductConfirmView: FC<AvatarInfoUseProductConfirmView
                     }
                 }
 
-                return <PetImageView typeId={ petFigureData.typeId } paletteId={ petFigureData.paletteId } color={ petFigureData.color } customParts={ petFigureData.customParts } posture={ posture } direction={ 2 } />;
+                return <LayoutPetImageView typeId={ petFigureData.typeId } paletteId={ petFigureData.paletteId } color={ petFigureData.color } customParts={ petFigureData.customParts } posture={ posture } direction={ 2 } />;
             }
         }
     }, [ petData, furniData, roomSession ]);
diff --git a/src/components/room/widgets/furniture/context-menu/PurchasableClothingConfirmView.tsx b/src/components/room/widgets/furniture/context-menu/PurchasableClothingConfirmView.tsx
index 4e3144b8..0ca105cb 100644
--- a/src/components/room/widgets/furniture/context-menu/PurchasableClothingConfirmView.tsx
+++ b/src/components/room/widgets/furniture/context-menu/PurchasableClothingConfirmView.tsx
@@ -1,8 +1,7 @@
 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, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../common';
-import { AvatarImageView } from '../../../../../views/shared/avatar-image/AvatarImageView';
+import { Base, Button, Column, Flex, LayoutAvatarImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../common';
 import { FigureData } from '../../../../avatar-editor/common/FigureData';
 import { FurniCategory } from '../../../../inventory/common/FurniCategory';
 import { useRoomContext } from '../../../RoomContext';
@@ -87,7 +86,7 @@ export const PurchasableClothingConfirmView: FC<PurchasableClothingConfirmViewPr
                 <Flex gap={ 2 } overflow="hidden">
                     <Column>
                         <Base className="mannequin-preview">
-                            <AvatarImageView figure={ newFigure } direction={ 2 } />
+                            <LayoutAvatarImageView figure={ newFigure } direction={ 2 } />
                         </Base>
                     </Column>
                     <Column justifyContent="between" overflow="auto">
diff --git a/src/components/room/widgets/furniture/friend-furni/FurnitureFriendFurniView.tsx b/src/components/room/widgets/furniture/friend-furni/FurnitureFriendFurniView.tsx
index 1ff28e42..bb2176bb 100644
--- a/src/components/room/widgets/furniture/friend-furni/FurnitureFriendFurniView.tsx
+++ b/src/components/room/widgets/furniture/friend-furni/FurnitureFriendFurniView.tsx
@@ -1,9 +1,8 @@
 import { FriendFurniConfirmLockMessageComposer, LoveLockFurniFinishedEvent, LoveLockFurniFriendConfirmedEvent, LoveLockFurniStartEvent, NitroEvent, RoomEngineTriggerWidgetEvent, RoomObjectVariable } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { GetRoomEngine, GetRoomSession, LocalizeText, RoomWidgetUpdateRoomObjectEvent } from '../../../../../api';
-import { DraggableWindow, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../common';
+import { DraggableWindow, LayoutAvatarImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../common';
 import { UseEventDispatcherHook, UseMessageEventHook, UseRoomEngineEvent } from '../../../../../hooks';
-import { AvatarImageView } from '../../../../../views/shared/avatar-image/AvatarImageView';
 import { useRoomContext } from '../../../RoomContext';
 import { FurnitureEngravingLockData } from './FriendFurniLockData';
 
@@ -119,10 +118,10 @@ export const FurnitureFriendFurniView: FC<{}> = props =>
                     <div className="engraving-lock-close" onClick={ event => processAction('close_view') }></div>
                     <div className="d-flex justify-content-center">
                         <div className="engraving-lock-avatar">
-                            <AvatarImageView figure={ engravingLockData.figures[0] } direction={ 2 } />
+                            <LayoutAvatarImageView figure={ engravingLockData.figures[0] } direction={ 2 } />
                         </div>
                         <div className="engraving-lock-avatar">
-                            <AvatarImageView figure={ engravingLockData.figures[1] } direction={ 4 } />
+                            <LayoutAvatarImageView figure={ engravingLockData.figures[1] } direction={ 4 } />
                         </div>
                     </div>
                     <div className="text-center mt-1">
diff --git a/src/components/room/widgets/furniture/mannequin/FurnitureMannequinPreviewView.tsx b/src/components/room/widgets/furniture/mannequin/FurnitureMannequinPreviewView.tsx
index f30d0824..4b5732db 100644
--- a/src/components/room/widgets/furniture/mannequin/FurnitureMannequinPreviewView.tsx
+++ b/src/components/room/widgets/furniture/mannequin/FurnitureMannequinPreviewView.tsx
@@ -1,6 +1,5 @@
 import { FC } from 'react';
-import { Base, LayoutCurrencyIcon } from '../../../../../common';
-import { AvatarImageView } from '../../../../../views/shared/avatar-image/AvatarImageView';
+import { Base, LayoutAvatarImageView, LayoutCurrencyIcon } from '../../../../../common';
 
 interface FurnitureMannequinPreviewViewProps
 {
@@ -14,7 +13,7 @@ export const FurnitureMannequinPreviewView: FC<FurnitureMannequinPreviewViewProp
 
     return (
         <Base position="relative" className="mannequin-preview">
-            <AvatarImageView figure={ figure } direction={ 2 } />
+            <LayoutAvatarImageView figure={ figure } direction={ 2 } />
             { (clubLevel > 0) &&
                 <LayoutCurrencyIcon className="position-absolute end-2 bottom-2" type="hc" /> }
         </Base>
diff --git a/src/components/room/widgets/furniture/mannequin/FurnitureMannequinView.tsx b/src/components/room/widgets/furniture/mannequin/FurnitureMannequinView.tsx
index a92d60d9..862f5381 100644
--- a/src/components/room/widgets/furniture/mannequin/FurnitureMannequinView.tsx
+++ b/src/components/room/widgets/furniture/mannequin/FurnitureMannequinView.tsx
@@ -1,9 +1,8 @@
 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, SendMessageComposer } from '../../../../../api';
-import { Base, Button, Column, Flex, LayoutCurrencyIcon, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../common';
+import { Base, Button, Column, Flex, LayoutAvatarImageView, LayoutCurrencyIcon, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../common';
 import { BatchUpdates, UseEventDispatcherHook } from '../../../../../hooks';
-import { AvatarImageView } from '../../../../../views/shared/avatar-image/AvatarImageView';
 import { useRoomContext } from '../../../RoomContext';
 
 const MODE_NONE: number = -1;
@@ -179,7 +178,7 @@ export const FurnitureMannequinView: FC<{}> = props =>
                 <Flex gap={ 2 } overflow="hidden">
                     <Column>
                         <Base position="relative" className="mannequin-preview">
-                            <AvatarImageView figure={ renderedFigure } direction={ 2 } />
+                            <LayoutAvatarImageView figure={ renderedFigure } direction={ 2 } />
                             { (clubLevel > 0) &&
                                 <LayoutCurrencyIcon className="position-absolute end-2 bottom-2" type="hc" /> }
                         </Base>
diff --git a/src/components/room/widgets/infostand/InfoStandWidgetBotView.tsx b/src/components/room/widgets/infostand/InfoStandWidgetBotView.tsx
index 7369d301..4a8c81a7 100644
--- a/src/components/room/widgets/infostand/InfoStandWidgetBotView.tsx
+++ b/src/components/room/widgets/infostand/InfoStandWidgetBotView.tsx
@@ -1,8 +1,7 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { FC } from 'react';
 import { LocalizeText, RoomWidgetUpdateInfostandUserEvent } from '../../../../api';
-import { Column, Flex, LayoutBadgeImageView, Text } from '../../../../common';
-import { AvatarImageView } from '../../../../views/shared/avatar-image/AvatarImageView';
+import { Column, Flex, LayoutAvatarImageView, LayoutBadgeImageView, Text } from '../../../../common';
 
 interface InfoStandWidgetBotViewProps
 {
@@ -29,7 +28,7 @@ export const InfoStandWidgetBotView: FC<InfoStandWidgetBotViewProps> = props =>
                 <Column gap={ 1 }>
                     <Flex gap={ 1 }>
                         <Column fullWidth className="body-image bot">
-                            <AvatarImageView figure={ botData.figure } direction={ 4 } />
+                            <LayoutAvatarImageView figure={ botData.figure } direction={ 4 } />
                         </Column>
                         <Column grow center gap={ 0 }>
                             { (botData.badges.length > 0) && botData.badges.map(result =>
diff --git a/src/components/room/widgets/infostand/InfoStandWidgetPetView.tsx b/src/components/room/widgets/infostand/InfoStandWidgetPetView.tsx
index 0ff4dc5c..7495eb82 100644
--- a/src/components/room/widgets/infostand/InfoStandWidgetPetView.tsx
+++ b/src/components/room/widgets/infostand/InfoStandWidgetPetView.tsx
@@ -1,8 +1,7 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { FC } from 'react';
 import { LocalizeText, RoomWidgetUpdateInfostandPetEvent } from '../../../../api';
-import { Base, Column, Flex, Text, UserProfileIconView } from '../../../../common';
-import { PetImageView } from '../../../../views/shared/pet-image/PetImageView';
+import { Base, Column, Flex, LayoutPetImageView, Text, UserProfileIconView } from '../../../../common';
 
 interface InfoStandWidgetPetViewProps
 {
@@ -30,7 +29,7 @@ export const InfoStandWidgetPetView: FC<InfoStandWidgetPetViewProps> = props =>
                 <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 } />
+                            <LayoutPetImageView 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>
diff --git a/src/components/room/widgets/infostand/InfoStandWidgetRentableBotView.tsx b/src/components/room/widgets/infostand/InfoStandWidgetRentableBotView.tsx
index 12f56403..5ed2d011 100644
--- a/src/components/room/widgets/infostand/InfoStandWidgetRentableBotView.tsx
+++ b/src/components/room/widgets/infostand/InfoStandWidgetRentableBotView.tsx
@@ -2,8 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { BotRemoveComposer } from '@nitrots/nitro-renderer';
 import { FC, useMemo } from 'react';
 import { LocalizeText, RoomWidgetUpdateInfostandRentableBotEvent, SendMessageComposer } from '../../../../api';
-import { Button, Column, Flex, LayoutBadgeImageView, Text, UserProfileIconView } from '../../../../common';
-import { AvatarImageView } from '../../../../views/shared/avatar-image/AvatarImageView';
+import { Button, Column, Flex, LayoutAvatarImageView, LayoutBadgeImageView, Text, UserProfileIconView } from '../../../../common';
 import { BotSkillsEnum } from '../avatar-info/common/BotSkillsEnum';
 
 interface InfoStandWidgetRentableBotViewProps
@@ -43,7 +42,7 @@ export const InfoStandWidgetRentableBotView: FC<InfoStandWidgetRentableBotViewPr
                     <Column gap={ 1 }>
                         <Flex gap={ 1 }>
                             <Column fullWidth className="body-image bot">
-                                <AvatarImageView figure={ rentableBotData.figure } direction={ 4 } />
+                                <LayoutAvatarImageView figure={ rentableBotData.figure } direction={ 4 } />
                             </Column>
                             <Column grow center gap={ 0 }>
                                 { (rentableBotData.badges.length > 0) && rentableBotData.badges.map(result =>
diff --git a/src/components/room/widgets/infostand/InfoStandWidgetUserView.tsx b/src/components/room/widgets/infostand/InfoStandWidgetUserView.tsx
index ef0aac7f..309f8a8d 100644
--- a/src/components/room/widgets/infostand/InfoStandWidgetUserView.tsx
+++ b/src/components/room/widgets/infostand/InfoStandWidgetUserView.tsx
@@ -2,9 +2,8 @@ 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, SendMessageComposer } from '../../../../api';
-import { Base, Column, Flex, LayoutBadgeImageView, Text, UserProfileIconView } from '../../../../common';
+import { Base, Column, Flex, LayoutAvatarImageView, LayoutBadgeImageView, Text, UserProfileIconView } from '../../../../common';
 import { BatchUpdates, UseEventDispatcherHook, UseMessageEventHook } from '../../../../hooks';
-import { AvatarImageView } from '../../../../views/shared/avatar-image/AvatarImageView';
 import { useRoomContext } from '../../RoomContext';
 import { InfoStandWidgetUserRelationshipsView } from './InfoStandWidgetUserRelationshipsView';
 
@@ -104,7 +103,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
                 <Column gap={ 1 }>
                     <Flex gap={ 1 }>
                         <Column fullWidth className="body-image">
-                            <AvatarImageView figure={ userData.figure } direction={ 4 } />
+                            <LayoutAvatarImageView figure={ userData.figure } direction={ 4 } />
                         </Column>
                         <Column grow gap={ 0 }>
                             <Flex gap={ 1 }>
diff --git a/src/components/toolbar/ToolbarView.tsx b/src/components/toolbar/ToolbarView.tsx
index 1fb93624..bbb5ee6a 100644
--- a/src/components/toolbar/ToolbarView.tsx
+++ b/src/components/toolbar/ToolbarView.tsx
@@ -1,10 +1,9 @@
 import { Dispose, DropBounce, EaseOut, FigureUpdateEvent, JumpBy, Motions, NitroToolbarAnimateIconEvent, PerkAllowancesMessageEvent, PerkEnum, Queue, UserInfoDataParser, UserInfoEvent, Wait } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { CreateLinkEvent, GetRoomSession, GetRoomSessionManager, GetSessionDataManager, GetUserProfile, GoToDesktop, OpenMessengerChat } from '../../api';
-import { Base, Flex, LayoutItemCountView, TransitionAnimation, TransitionAnimationTypes } from '../../common';
+import { Base, Flex, LayoutAvatarImageView, LayoutItemCountView, TransitionAnimation, TransitionAnimationTypes } from '../../common';
 import { AchievementsUIEvent, AchievementsUIUnseenCountEvent, FriendsEvent, FriendsMessengerIconEvent, FriendsRequestCountEvent, GuideToolEvent, InventoryEvent, ModToolsEvent, NavigatorEvent, UnseenItemTrackerUpdateEvent, UserSettingsUIEvent } from '../../events';
 import { BatchUpdates, DispatchUiEvent, UseMessageEventHook, UseRoomEngineEvent, UseUiEvent } from '../../hooks';
-import { AvatarImageView } from '../../views/shared/avatar-image/AvatarImageView';
 import { ToolbarViewItems } from './common/ToolbarViewItems';
 import { ToolbarMeView } from './ToolbarMeView';
 
@@ -196,7 +195,7 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
                 <Flex gap={ 2 } alignItems="center">
                     <Flex alignItems="center" gap={ 2 }>
                         <Flex center pointer className={ 'navigation-item item-avatar ' + (isMeExpanded ? 'active ' : '') } onClick={ event => setMeExpanded(!isMeExpanded) }>
-                            <AvatarImageView figure={ userFigure } direction={ 2 } />
+                            <LayoutAvatarImageView figure={ userFigure } direction={ 2 } />
                             { (unseenAchievementCount > 0) &&
                                 <LayoutItemCountView count={ unseenAchievementCount } /> }
                         </Flex>
diff --git a/src/components/user-profile/views/RelationshipsContainerView.tsx b/src/components/user-profile/views/RelationshipsContainerView.tsx
index 7f89d42d..3ed16601 100644
--- a/src/components/user-profile/views/RelationshipsContainerView.tsx
+++ b/src/components/user-profile/views/RelationshipsContainerView.tsx
@@ -1,7 +1,7 @@
 import { RelationshipStatusEnum, RelationshipStatusInfo, RelationshipStatusInfoMessageParser } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
 import { GetUserProfile, LocalizeText } from '../../../api';
-import { AvatarImageView } from '../../../views/shared/avatar-image/AvatarImageView';
+import { LayoutAvatarImageView } from '../../../common';
 
 interface RelationshipsContainerViewProps
 {
@@ -46,7 +46,7 @@ export const RelationshipsContainerView: FC<RelationshipsContainerViewProps> = p
                         }
                         {
                             (!simple && relationshipInfo && relationshipInfo.friendCount > 0) &&
-                            <AvatarImageView figure={relationshipInfo.randomFriendFigure} headOnly={true} direction={4} />
+                            <LayoutAvatarImageView figure={relationshipInfo.randomFriendFigure} headOnly={true} direction={4} />
                         }
                     </span>
 
diff --git a/src/components/user-profile/views/UserContainerView.tsx b/src/components/user-profile/views/UserContainerView.tsx
index bcd3e359..99847ef8 100644
--- a/src/components/user-profile/views/UserContainerView.tsx
+++ b/src/components/user-profile/views/UserContainerView.tsx
@@ -1,7 +1,7 @@
 import { FriendlyTime, UserProfileParser } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
 import { GetSessionDataManager, LocalizeText } from '../../../api';
-import { AvatarImageView } from '../../../views/shared/avatar-image/AvatarImageView';
+import { LayoutAvatarImageView } from '../../../common';
 
 interface UserContainerViewProps
 {
@@ -32,7 +32,7 @@ export const UserContainerView: FC<UserContainerViewProps> = props =>
     return (
         <div className="row">
             <div className="col-auto px-0 d-flex align-items-center">
-                <AvatarImageView figure={userProfile.figure} direction={2} />
+                <LayoutAvatarImageView figure={userProfile.figure} direction={2} />
             </div>
             <div className="col">
                 <div className="user-info-container">
diff --git a/src/components/wired/views/actions/WiredActionBotChangeFigureView.tsx b/src/components/wired/views/actions/WiredActionBotChangeFigureView.tsx
index 6a3cd9fc..06ada2ef 100644
--- a/src/components/wired/views/actions/WiredActionBotChangeFigureView.tsx
+++ b/src/components/wired/views/actions/WiredActionBotChangeFigureView.tsx
@@ -1,11 +1,7 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { GetSessionDataManager, LocalizeText } from '../../../../api';
-import { Button } from '../../../../common/Button';
-import { Column } from '../../../../common/Column';
-import { Flex } from '../../../../common/Flex';
-import { Text } from '../../../../common/Text';
+import { Button, Column, Flex, LayoutAvatarImageView, Text } from '../../../../common';
 import { BatchUpdates } from '../../../../hooks';
-import { AvatarImageView } from '../../../../views/shared/avatar-image/AvatarImageView';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { WIRED_STRING_DELIMETER } from '../../common/WiredStringDelimeter';
 import { useWiredContext } from '../../context/WiredContext';
@@ -47,7 +43,7 @@ export const WiredActionBotChangeFigureView: FC<{}> = props =>
                 <input type="text" className="form-control form-control-sm" maxLength={ 32 } value={ botName } onChange={ event => setBotName(event.target.value) } />
             </Column>
             <Flex center>
-                <AvatarImageView figure={ figure } direction={ 4 } />
+                <LayoutAvatarImageView figure={ figure } direction={ 4 } />
                 <Button onClick={ copyLooks }>{ LocalizeText('wiredfurni.params.capture.figure') }</Button>
             </Flex>
         </WiredActionBaseView>
diff --git a/src/views/friends/views/friend-bar/FriendBarItemView.tsx b/src/views/friends/views/friend-bar/FriendBarItemView.tsx
index 69635738..c48d6ca9 100644
--- a/src/views/friends/views/friend-bar/FriendBarItemView.tsx
+++ b/src/views/friends/views/friend-bar/FriendBarItemView.tsx
@@ -1,8 +1,7 @@
 import { FollowFriendMessageComposer, MouseEventType } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useRef, useState } from 'react';
 import { GetUserProfile, LocalizeText, OpenMessengerChat, SendMessageComposer } from '../../../../api';
-import { Base, LayoutBadgeImageView } from '../../../../common';
-import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
+import { Base, LayoutAvatarImageView, LayoutBadgeImageView } from '../../../../common';
 import { MessengerFriend } from '../../common/MessengerFriend';
 
 interface FriendBarItemViewProps
@@ -63,7 +62,7 @@ export const FriendBarItemView: FC<FriendBarItemViewProps> = props =>
     return (
         <div ref={ elementRef } className={'btn btn-success friend-bar-item ' + (isVisible ? 'friend-bar-item-active' : '')} onClick={ event => setVisible(prevValue => !prevValue) }>
             <div className={`friend-bar-item-head position-absolute ${friend.id > 0 ? 'avatar': 'group'}`}>
-                { friend.id > 0 && <AvatarImageView headOnly={ true } figure={ friend.figure } direction={ 2 } /> }
+                { friend.id > 0 && <LayoutAvatarImageView headOnly={ true } figure={ friend.figure } direction={ 2 } /> }
                 { friend.id <= 0 && <LayoutBadgeImageView isGroup={ true } badgeCode={ friend.figure} />} 
             </div>
             <div className="text-truncate">{ friend.name }</div>
diff --git a/src/views/friends/views/messenger/FriendsMessengerThreadGroup.tsx b/src/views/friends/views/messenger/FriendsMessengerThreadGroup.tsx
index a7d5a8c7..83bc054a 100644
--- a/src/views/friends/views/messenger/FriendsMessengerThreadGroup.tsx
+++ b/src/views/friends/views/messenger/FriendsMessengerThreadGroup.tsx
@@ -1,7 +1,6 @@
 import { FC, useMemo } from 'react';
 import { GetSessionDataManager } from '../../../../api';
-import { Base, Flex } from '../../../../common';
-import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
+import { Base, Flex, LayoutAvatarImageView } from '../../../../common';
 import { GroupType } from '../../common/GroupType';
 import { MessengerThread } from '../../common/MessengerThread';
 import { MessengerThreadChat } from '../../common/MessengerThreadChat';
@@ -55,10 +54,10 @@ export const FriendsMessengerThreadGroup: FC<FriendsMessengerThreadGroupProps> =
         <Flex className={ 'w-100 justify-content-' + (isOwnChat ? 'end' : 'start') } gap={ 2 }>
                 <Base className="message-avatar flex-shrink-0">
                 { (group.type === GroupType.PRIVATE_CHAT && !isOwnChat) &&
-                    <AvatarImageView figure={ thread.participant.figure } direction={ 2 } />
+                    <LayoutAvatarImageView figure={ thread.participant.figure } direction={ 2 } />
                 }
                 { (group.type === GroupType.GROUP_CHAT && !isOwnChat) &&
-                    <AvatarImageView figure={ getGroupChatData(group.chats[0].extraData).figure } direction={ 2} />
+                    <LayoutAvatarImageView figure={ getGroupChatData(group.chats[0].extraData).figure } direction={ 2} />
                 }
                 </Base>
             <Base className={ 'bg-light text-black border-radius mb-2 rounded py-1 px-2 messages-group-' + (isOwnChat ? 'right' : 'left') }>
@@ -73,7 +72,7 @@ export const FriendsMessengerThreadGroup: FC<FriendsMessengerThreadGroupProps> =
             </Base>
             { (isOwnChat) &&
                 <Base className="message-avatar flex-shrink-0">
-                    <AvatarImageView figure={ GetSessionDataManager().figure } direction={ 4 } />
+                    <LayoutAvatarImageView figure={ GetSessionDataManager().figure } direction={ 4 } />
                 </Base> }
         </Flex>
     );
diff --git a/src/views/friends/views/messenger/FriendsMessengerView.tsx b/src/views/friends/views/messenger/FriendsMessengerView.tsx
index bf7f9171..1f4368b5 100644
--- a/src/views/friends/views/messenger/FriendsMessengerView.tsx
+++ b/src/views/friends/views/messenger/FriendsMessengerView.tsx
@@ -1,10 +1,9 @@
 import { FollowFriendMessageComposer, ILinkEventTracker, NewConsoleMessageEvent, RoomInviteEvent, SendMessageComposer as SendMessageComposerPacket } from '@nitrots/nitro-renderer';
 import { FC, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { AddEventLinkTracker, GetSessionDataManager, GetUserProfile, LocalizeText, MESSENGER_MESSAGE_RECEIVED, MESSENGER_NEW_THREAD, PlaySound, RemoveLinkEventTracker, SendMessageComposer } from '../../../../api';
-import { Base, Button, ButtonGroup, Column, Flex, Grid, LayoutBadgeImageView, LayoutItemCountView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
+import { Base, Button, ButtonGroup, Column, Flex, Grid, LayoutAvatarImageView, LayoutBadgeImageView, LayoutItemCountView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
 import { FriendsMessengerIconEvent } from '../../../../events';
 import { BatchUpdates, DispatchUiEvent, UseMessageEventHook } from '../../../../hooks';
-import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
 import { MessengerThread } from '../../common/MessengerThread';
 import { MessengerThreadChat } from '../../common/MessengerThreadChat';
 import { useFriendsContext } from '../../FriendsContext';
@@ -269,7 +268,7 @@ export const FriendsMessengerView: FC<{}> = props =>
                                     }
                                     <div className="friend-head rounded flex-shrink-0">
                                         
-                                        {thread.participant.id > 0 && <AvatarImageView figure={thread.participant.figure} headOnly={true} direction={3} />}
+                                        {thread.participant.id > 0 && <LayoutAvatarImageView figure={thread.participant.figure} headOnly={true} direction={3} />}
                                         {thread.participant.id <= 0 && <LayoutBadgeImageView isGroup={true} badgeCode={thread.participant.figure} />}
 
                                     </div>
diff --git a/src/views/hc-center/HcCenterView.tsx b/src/views/hc-center/HcCenterView.tsx
index e94533d0..ba899712 100644
--- a/src/views/hc-center/HcCenterView.tsx
+++ b/src/views/hc-center/HcCenterView.tsx
@@ -2,10 +2,9 @@ import { BadgesEvent, ClubGiftInfoEvent, FigureUpdateEvent, FriendlyTime, GetClu
 import { FC, useCallback, useEffect, useState } from 'react';
 import { OverlayTrigger, Popover } from 'react-bootstrap';
 import { AddEventLinkTracker, CreateLinkEvent, GetConfiguration, LocalizeText, RemoveLinkEventTracker, SendMessageComposer } from '../../api';
-import { LayoutBadgeImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
+import { LayoutAvatarImageView, LayoutBadgeImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
 import { HcCenterEvent } from '../../events';
 import { UseMessageEventHook, UseUiEvent } from '../../hooks';
-import { AvatarImageView } from '../shared/avatar-image/AvatarImageView';
 import { BadgeResolver } from './util/BadgeResolver';
 import { ClubStatus } from './util/ClubStatus';
 
@@ -213,7 +212,7 @@ export const HcCenterView: FC<{}> = props =>
                     {LocalizeText(clubStatus === ClubStatus.ACTIVE ? 'hccenter.btn.extend' : 'hccenter.btn.buy')}
                 </button>
                 <div className="position-absolute end-0 p-4 top-0 habbo-avatar">
-                    <AvatarImageView figure={userFigure} direction={4} scale={2} />
+                    <LayoutAvatarImageView figure={userFigure} direction={4} scale={2} />
                 </div>
             </div>
             <NitroCardContentView>
diff --git a/src/views/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx b/src/views/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx
index 2c203ac9..becee467 100644
--- a/src/views/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx
+++ b/src/views/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx
@@ -1,7 +1,6 @@
 import { FC } from 'react';
 import { LocalizeFormattedNumber, LocalizeText } from '../../../../../api';
-import { UserProfileIconView } from '../../../../../common';
-import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
+import { LayoutAvatarImageView, UserProfileIconView } from '../../../../../common';
 import { HallOfFameItemViewProps } from './HallOfFameItemView.types';
 
 export const HallOfFameItemView: FC<HallOfFameItemViewProps> = props =>
@@ -16,7 +15,7 @@ export const HallOfFameItemView: FC<HallOfFameItemViewProps> = props =>
                 </div>
                 <div className="small text-center text-white">{ LocalizeText('landing.view.competition.hof.points', [ 'points' ], [ LocalizeFormattedNumber(data.currentScore).toString() ])}</div>
             </div>
-            <AvatarImageView figure={ data.figure } direction={ 2 } />
+            <LayoutAvatarImageView figure={ data.figure } direction={ 2 } />
         </div>
     );
 }
diff --git a/src/views/shared/Shared.scss b/src/views/shared/Shared.scss
index 2fc3fc01..cdcc03ed 100644
--- a/src/views/shared/Shared.scss
+++ b/src/views/shared/Shared.scss
@@ -1,4 +1,2 @@
-@import "./avatar-image/AvatarImage";
 @import "./limited-edition/LimitedEdition";
-@import "./pet-image/PetImage";
 @import "./room-previewer/RoomPreviewerView";
diff --git a/src/views/shared/avatar-image/AvatarImage.scss b/src/views/shared/avatar-image/AvatarImage.scss
deleted file mode 100644
index 07022cae..00000000
--- a/src/views/shared/avatar-image/AvatarImage.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.avatar-image {
-    position: relative;
-    width: 90px;
-    height: 130px;
-    background-repeat: no-repeat;
-    background-position: center -8px;
-    pointer-events: none;
-    image-rendering: pixelated;
-
-    &.scale-0-5,
-    &.scale-0-75 {
-        image-rendering: -webkit-optimize-contrast;
-    }
-}
diff --git a/src/views/shared/pet-image/PetImage.scss b/src/views/shared/pet-image/PetImage.scss
deleted file mode 100644
index 0df12c76..00000000
--- a/src/views/shared/pet-image/PetImage.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.pet-image {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    background-repeat: no-repeat;
-    background-position: center;
-}