Update literally everything

2025-01-18 21:36:27 +01:00 · 2022-03-03 02:23:01 -05:00 · 2022-03-03 02:23:01 -05:00 · d2ed02668b
commit d2ed02668b
parent 87f1ee4c5d
241 changed files with 999 additions and 1572 deletions
--- a/src/App.scss
+++ b/src/App.scss
@ -89,6 +89,5 @@ $nitro-guide-tool-width: 250px;
 }

@import './common';
-@import "./layout/Layout";
@import './components';
@import "./views/Styles";
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,14 +1,13 @@
 import { ConfigurationEvent, HabboWebTools, LegacyExternalInterface, Nitro, NitroCommunicationDemoEvent, NitroEvent, NitroLocalizationEvent, NitroVersion, RoomEngineEvent, WebGL } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { GetCommunication, GetConfiguration, GetNitroInstance } from './api';
-import { Base } from './common';
+import { Base, TransitionAnimation, TransitionAnimationTypes } from './common';
 import { LoadingView } from './components/loading/LoadingView';
 import { MainView } from './components/main/MainView';
 import { useConfigurationEvent } from './hooks/events/core/configuration/configuration-event';
 import { useLocalizationEvent } from './hooks/events/nitro/localization/localization-event';
 import { dispatchMainEvent, useMainEvent } from './hooks/events/nitro/main-event';
 import { useRoomEngineEvent } from './hooks/events/nitro/room/room-engine-event';
-import { TransitionAnimation, TransitionAnimationTypes } from './layout';

 export const App: FC<{}> = props =>
 {
--- a/src/api/utils/index.ts
+++ b/src/api/utils/index.ts
@ -4,4 +4,5 @@ export * from './LocalizeBageName';
 export * from './LocalizeFormattedNumber';
 export * from './LocalizeShortNumber';
 export * from './LocalizeText';
+export * from './PlaySound';
 export * from './Randomizer';
--- a/src/layout/card/content/NitroCardContentView.tsx
+++ b/src/layout/card/content/NitroCardContentView.tsx
@ -1,6 +1,6 @@
 import { FC, useMemo } from 'react';
-import { Column, ColumnProps } from '../../../common';
-import { useNitroCardContext } from '../context';
+import { Column, ColumnProps } from '..';
+import { useNitroCardContext } from './NitroCardContext';

 export const NitroCardContentView: FC<ColumnProps> = props =>
 {
--- a/src/layout/card/context/NitroCardContext.tsx
+++ b/src/layout/card/context/NitroCardContext.tsx
@ -1,12 +1,17 @@
-import { createContext, FC, useContext } from 'react';
-import { INitroCardContext, NitroCardContextProps } from './NitroCardContext.types';
+import { createContext, FC, ProviderProps, useContext } from 'react';
+
+interface INitroCardContext
+{
+    theme: string;
+    simple: boolean;
+}

 const NitroCardContext = createContext<INitroCardContext>({
    theme: null,
    simple: false
 });

-export const NitroCardContextProvider: FC<NitroCardContextProps> = props =>
+export const NitroCardContextProvider: FC<ProviderProps<INitroCardContext>> = props =>
 {
    return <NitroCardContext.Provider value={ props.value }>{ props.children }</NitroCardContext.Provider>
 }
--- a/src/common/card/NitroCardHeaderView.tsx
+++ b/src/common/card/NitroCardHeaderView.tsx
@ -0,0 +1,46 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FC, MouseEvent, useCallback, useMemo } from 'react';
+import { Base, Column, ColumnProps, Flex } from '..';
+import { useNitroCardContext } from './NitroCardContext';
+
+interface NitroCardHeaderViewProps extends ColumnProps
+{
+    headerText: string;
+    theme?: string;
+    noCloseButton?: boolean;
+    onCloseClick: (event: MouseEvent) => void;
+}
+
+export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
+{
+    const { headerText = null, noCloseButton = false, onCloseClick = null, overflow = 'hidden', justifyContent = 'center', alignItems = 'center', classNames = [], children = null, ...rest } = props;
+    const { simple = false } = useNitroCardContext();
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = [ 'drag-handler', 'container-fluid', 'nitro-card-header' ];
+
+        if(simple) newClassNames.push('bg-tertiary-split');
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ simple, classNames ]);
+
+    const onMouseDown = useCallback((event: MouseEvent<HTMLDivElement>) =>
+    {
+        event.stopPropagation();
+        event.nativeEvent.stopImmediatePropagation();
+    }, []);
+
+    return (
+        <Column center overflow={ overflow } classNames={ getClassNames } { ...rest }>
+            <Flex fullWidth center position="relative">
+                <span className="nitro-card-header-text">{ headerText }</span>
+                <Base position="absolute" className="header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>
+                    <FontAwesomeIcon icon="times" />
+                </Base>
+            </Flex>
+        </Column>
+    );
+}
--- a/src/layout/card/sub-header/NitroCardSubHeaderView.tsx
+++ b/src/layout/card/sub-header/NitroCardSubHeaderView.tsx
@ -1,5 +1,5 @@
 import { FC, useMemo } from 'react';
-import { Flex, FlexProps } from '../../../common';
+import { Flex, FlexProps } from '..';

 export const NitroCardSubHeaderView: FC<FlexProps> = props =>
 {
@ -14,7 +14,5 @@ export const NitroCardSubHeaderView: FC<FlexProps> = props =>
        return newClassNames;
    }, [ classNames ]);

-    return (
-        <Flex justifyContent={ justifyContent } classNames={ getClassNames } { ...rest } />
-    );
+    return <Flex justifyContent={ justifyContent } classNames={ getClassNames } { ...rest } />;
 }
--- a/src/common/card/NitroCardView.scss
+++ b/src/common/card/NitroCardView.scss
@ -0,0 +1,124 @@
+$nitro-card-header-height: 33px;
+$nitro-card-tabs-height: 33px;
+
+.nitro-card {
+    resize: both;
+
+    @include media-breakpoint-down(lg) {
+        max-width: 100vw !important;
+        max-height: 100vh !important;
+    }
+
+    &.theme-primary {
+        border: $border-width solid $border-color;
+
+        .nitro-card-header {
+            min-height: 33px;
+            max-height: 33px;
+            background-color: $primary;
+
+            &.bg-tertiary-split {
+                position: relative;
+                border-bottom: 2px solid darken($quaternary, 5);
+                box-shadow: 0 2px white;
+                width: 100%;
+                margin: 0;
+        
+                &:before {
+                    position: absolute;
+                    content: " ";
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 2px;
+                    background-color: rgba($white, 0.3);
+                }
+            }
+
+            .nitro-card-header-text {
+                color: $white;
+                text-shadow: 0px 4px 4px rgba($black, 0.25);
+                @include font-size($h4-font-size);
+            }
+        }
+
+        .nitro-card-tabs {
+            background-color: $secondary;
+        }
+
+        .content-area {
+            background-color: $light;
+        }
+    }
+}
+
+.content-area {
+    height: 100%;
+    padding-top: $container-padding-x;
+    padding-bottom: $container-padding-x;
+    overflow: auto;
+
+    &.theme-dark {
+        background-color: #1C323F !important;
+    }
+}
+
+@include media-breakpoint-down(lg) {
+    .content-area {
+        height: 100% !important;
+        min-height: auto !important;
+        max-height: 100% !important;
+    }
+}
+
+.nitro-card-header {
+    height: 100%;
+
+    .header-close {
+        right: 6px;
+        border-radius: $border-radius;
+        box-shadow: 0 0 0 1.5px $white;
+        border: 2px solid #921911;
+        background: repeating-linear-gradient(
+            rgba(245, 80, 65, 1),
+            rgba(245, 80, 65, 1) 50%,
+            rgba(194, 48, 39, 1) 50%,
+            rgba(194, 48, 39, 1) 100%
+        );
+        cursor: pointer;
+        line-height: 1;
+        padding: 1px 3px;
+
+        &:hover {
+            filter: brightness(1.2);
+        }
+
+        &:active {
+            filter: brightness(0.8);
+        }
+    }
+}
+
+.nitro-card-tabs {
+    min-height: $nitro-card-tabs-height;
+    max-height: $nitro-card-tabs-height;
+    border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
+}
+
+.nitro-card-accordion {
+    display: flex;
+    height: 100%;
+}
+
+.nitro-card-accordion-set {
+
+    &.active {
+        height: 100%;
+        background: rgba($white, 0.5);
+        border-bottom: 1px solid rgba($black, 0.2);
+    }
+
+    .nitro-card-accordion-set-header {
+        border-bottom: 1px solid rgba($black, 0.2);
+    }
+}
--- a/src/common/card/NitroCardView.tsx
+++ b/src/common/card/NitroCardView.tsx
@ -0,0 +1,36 @@
+import { FC, useMemo } from 'react';
+import { Column, ColumnProps } from '..';
+import { DraggableWindow, DraggableWindowPosition, DraggableWindowProps } from '../draggable-window';
+import { NitroCardContextProvider } from './NitroCardContext';
+
+export interface NitroCardViewProps extends DraggableWindowProps, ColumnProps
+{
+    simple?: boolean;
+    theme?: string;
+}
+
+export const NitroCardView: FC<NitroCardViewProps> = props =>
+{
+    const { simple = false, theme = 'primary', uniqueKey = null, handleSelector = '.drag-handler', windowPosition = DraggableWindowPosition.CENTER, disableDrag = false, overflow = 'hidden', position = 'relative', gap = 0, classNames = [], ...rest } = props;
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = [ 'nitro-card', 'rounded', 'shadow', ];
+
+        if(simple) newClassNames.push('bg-tertiary-split');
+
+        newClassNames.push(`theme-${ theme || 'primary' }`);
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ simple, theme, classNames ]);
+
+    return (
+        <NitroCardContextProvider value={ { theme, simple } }>
+            <DraggableWindow uniqueKey={ uniqueKey } handleSelector={ handleSelector } windowPosition={ windowPosition } disableDrag={ disableDrag }>
+                <Column overflow={ overflow } position={ position } gap={ gap } classNames={ getClassNames } { ...rest } />
+            </DraggableWindow>
+        </NitroCardContextProvider>
+    );
+}
--- a/src/common/card/accordion/NitroCardAccordionContext.tsx
+++ b/src/common/card/accordion/NitroCardAccordionContext.tsx
--- a/src/common/card/accordion/NitroCardAccordionItemView.tsx
+++ b/src/common/card/accordion/NitroCardAccordionItemView.tsx
@ -0,0 +1,22 @@
+import { FC, useMemo } from 'react';
+import { Flex, FlexProps } from '../..';
+
+export const NitroCardAccordionItemView: FC<FlexProps> = props =>
+{
+    const { alignItems = 'center', gap = 1, classNames = [], children = null, ...rest } = props;
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = [ 'px-2, py-1' ];
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ classNames ]);
+
+    return (
+        <Flex alignItems={ alignItems } gap={ gap } classNames={ getClassNames } { ...rest }>
+            { children }
+        </Flex>
+    );
+}
--- a/src/layout/card/accordion/set/NitroCardAccordionSetView.tsx
+++ b/src/layout/card/accordion/set/NitroCardAccordionSetView.tsx
@ -1,9 +1,13 @@
 import classNames from 'classnames';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { NitroLayoutFlex } from '../../..';
-import { NitroLayoutBase } from '../../../base';
-import { useNitroCardAccordionContext } from '../NitroCardAccordionContext';
-import { NitroCardAccordionSetViewProps } from './NitroCardAccordionSetView.types';
+import { Base, BaseProps, Flex } from '../..';
+import { useNitroCardAccordionContext } from './NitroCardAccordionContext';
+
+interface NitroCardAccordionSetViewProps extends BaseProps<HTMLDivElement>
+{
+    headerText: string;
+    isExpanded?: boolean;
+}

 export const NitroCardAccordionSetView: FC<NitroCardAccordionSetViewProps> = props =>
 {
@ -80,18 +84,18 @@ export const NitroCardAccordionSetView: FC<NitroCardAccordionSetViewProps> = pro
    }, [ close, setClosers ]);

    return (
-        <NitroLayoutBase className={ getClassName } { ...rest }>
-            <NitroLayoutFlex className="nitro-card-accordion-set-header px-2 py-1" onClick={ onClick }>
+        <Base className={ getClassName } { ...rest }>
+            <Flex className="nitro-card-accordion-set-header px-2 py-1" onClick={ onClick }>
                <div className="w-100">
                    { headerText }
                </div>
                <div className="justify-self-center">
                    <i className={ 'fas fa-caret-' + (isOpen ? 'up' : 'down') } />
                </div>
-            </NitroLayoutFlex>
-            <NitroLayoutBase className={ 'nitro-card-accordion-set-content ' + classNames({ 'd-none': !isOpen }) }>
+            </Flex>
+            <Base className={ 'nitro-card-accordion-set-content ' + classNames({ 'd-none': !isOpen }) }>
                { children }
-            </NitroLayoutBase>
-        </NitroLayoutBase>
+            </Base>
+        </Base>
    );
 }
--- a/src/common/card/accordion/NitroCardAccordionView.tsx
+++ b/src/common/card/accordion/NitroCardAccordionView.tsx
@ -1,7 +1,11 @@
 import { FC, useCallback, useMemo, useState } from 'react';
-import { NitroLayoutFlexColumn } from '../..';
+import { Column, ColumnProps } from '../..';
 import { NitroCardAccordionContextProvider } from './NitroCardAccordionContext';
-import { NitroCardAccordionViewProps } from './NitroCardAccordionView.types';
+
+interface NitroCardAccordionViewProps extends ColumnProps
+{
+    
+}

 export const NitroCardAccordionView: FC<NitroCardAccordionViewProps> = props =>
 {
@ -24,9 +28,9 @@ export const NitroCardAccordionView: FC<NitroCardAccordionViewProps> = props =>

    return (
        <NitroCardAccordionContextProvider value={ { closers, setClosers, closeAll } }>
-            <NitroLayoutFlexColumn className={ getClassName } { ...rest }>
+            <Column className={ getClassName } { ...rest }>
                { children }
-            </NitroLayoutFlexColumn>
+            </Column>
        </NitroCardAccordionContextProvider>
    );
 }
--- a/src/common/card/accordion/index.ts
+++ b/src/common/card/accordion/index.ts
@ -0,0 +1,4 @@
+export * from './NitroCardAccordionContext';
+export * from './NitroCardAccordionItemView';
+export * from './NitroCardAccordionSetView';
+export * from './NitroCardAccordionView';
--- a/src/common/card/index.ts
+++ b/src/common/card/index.ts
@ -0,0 +1,7 @@
+export * from './accordion';
+export * from './NitroCardContentView';
+export * from './NitroCardContext';
+export * from './NitroCardHeaderView';
+export * from './NitroCardSubHeaderView';
+export * from './NitroCardView';
+export * from './tabs';
--- a/src/layout/card/tabs/tabs-item/NitroCardTabsItemView.tsx
+++ b/src/layout/card/tabs/tabs-item/NitroCardTabsItemView.tsx
@ -1,7 +1,13 @@
 import classNames from 'classnames';
-import { FC } from 'react';
-import { ItemCountView } from '../../../../views/shared/item-count/ItemCountView';
-import { NitroCardTabsItemViewProps } from './NitroCardTabsItemView.types';
+import { FC, MouseEventHandler } from 'react';
+import { ItemCountView } from '../../../views/shared/item-count/ItemCountView';
+
+interface NitroCardTabsItemViewProps
+{
+    isActive?: boolean;
+    count?: number;
+    onClick?: MouseEventHandler<HTMLLIElement>;
+}

 export const NitroCardTabsItemView: FC<NitroCardTabsItemViewProps> = props =>
 {
--- a/src/common/card/tabs/NitroCardTabsView.tsx
+++ b/src/common/card/tabs/NitroCardTabsView.tsx
@ -0,0 +1,24 @@
+import { FC, useMemo } from 'react';
+import { Flex, FlexProps } from '../..';
+
+export const NitroCardTabsView: FC<FlexProps> = props =>
+{
+    const { justifyContent = 'center', classNames = [], children = null, ...rest } = props;
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = [ 'container-fluid', 'nitro-card-tabs', 'pt-1' ];
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ classNames ]);
+
+    return (
+        <Flex justifyContent={ justifyContent } classNames={ getClassNames } { ...rest }>
+            <ul className="nav nav-tabs border-0 gap-1">
+                { children }
+            </ul>
+        </Flex>
+    );
+}
--- a/src/common/card/tabs/index.ts
+++ b/src/common/card/tabs/index.ts
@ -0,0 +1,2 @@
+export * from './NitroCardTabsItemView';
+export * from './NitroCardTabsView';
--- a/src/common/draggable-window/DraggableWindow.tsx
+++ b/src/common/draggable-window/DraggableWindow.tsx
@ -1,25 +1,27 @@
 import { MouseEventType, TouchEventType } from '@nitrots/nitro-renderer';
-import { DetailedHTMLProps, FC, HTMLAttributes, Key, MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent, useCallback, useEffect, useRef, useState } from 'react';
+import { CSSProperties, FC, Key, MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
+import { Base } from '..';
 import { BatchUpdates } from '../../hooks';
-import { DraggableWindowPosition } from './DraggableWindow.types';
+import { DraggableWindowPosition } from './DraggableWindowPosition';

 const CURRENT_WINDOWS: HTMLElement[] = [];
 const POS_MEMORY: Map<Key, { x: number, y: number }> = new Map();
 const BOUNDS_THRESHOLD_TOP: number = 0;
 const BOUNDS_THRESHOLD_LEFT: number = 0;

-export interface DraggableWindowProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+export interface DraggableWindowProps
 {
    uniqueKey?: Key;
    handleSelector?: string;
-    position?: string;
+    windowPosition?: string;
    disableDrag?: boolean;
+    dragStyle?: CSSProperties
 }

 export const DraggableWindow: FC<DraggableWindowProps> = props =>
 {
-    const { uniqueKey = null, handleSelector = '.drag-handler', position = DraggableWindowPosition.CENTER, disableDrag = false, children = null, ...rest } = props;
+    const { uniqueKey = null, handleSelector = '.drag-handler', windowPosition = DraggableWindowPosition.CENTER, disableDrag = false, dragStyle = {}, children = null } = props;
    const [ delta, setDelta ] = useState<{ x: number, y: number }>(null);
    const [ offset, setOffset ] = useState<{ x: number, y: number }>(null);
    const [ start, setStart ] = useState<{ x: number, y: number }>({ x: 0, y: 0 });
@ -170,7 +172,7 @@ export const DraggableWindow: FC<DraggableWindowProps> = props =>
        let offsetX = 0;
        let offsetY = 0;

-        switch(position)
+        switch(windowPosition)
        {
            case DraggableWindowPosition.TOP_CENTER:
                element.style.top = '50px';
@ -205,7 +207,7 @@ export const DraggableWindow: FC<DraggableWindowProps> = props =>

            if(index >= 0) CURRENT_WINDOWS.splice(index, 1);
        }
-    }, [ handleSelector, position, uniqueKey, disableDrag, bringToTop ]);
+    }, [ handleSelector, windowPosition, uniqueKey, disableDrag, bringToTop ]);

    useEffect(() =>
    {
@ -253,8 +255,8 @@ export const DraggableWindow: FC<DraggableWindowProps> = props =>

    return (
        createPortal(
-        <div ref={ elementRef } className="position-absolute draggable-window" onMouseDownCapture={ onMouseDown } onTouchStartCapture={ onTouchStart } { ...rest }>
+        <Base position="absolute" innerRef={ elementRef } className="draggable-window" onMouseDownCapture={ onMouseDown } onTouchStartCapture={ onTouchStart } style={ dragStyle }>
            { children }
-        </div>, document.getElementById('draggable-windows-container'))
+        </Base>, document.getElementById('draggable-windows-container'))
    );
 }
--- a/src/common/draggable-window/DraggableWindowPosition.ts
+++ b/src/common/draggable-window/DraggableWindowPosition.ts
--- a/src/common/draggable-window/index.ts
+++ b/src/common/draggable-window/index.ts
@ -0,0 +1,2 @@
+export * from './DraggableWindow';
+export * from './DraggableWindowPosition';
--- a/src/common/index.scss
+++ b/src/common/index.scss
@ -44,3 +44,213 @@
        }
    }
 }
+
+.nitro-room-thumbnail-camera {
+    width: 132px;
+    height: 192px;
+    background-image: url('../assets/images/room-widgets/thumbnail-widget/thumbnail-camera-spritesheet.png');
+
+    .camera-frame {
+        position: absolute;
+        width: 110px;
+        height: 110px;
+        margin-top: 38px;
+        margin-left: 3px;
+    }
+}
+
+.nitro-layout-trophy {
+    position: relative;
+    width: 340px;
+    height: 173px;
+    color: black;
+    pointer-events: all;
+    
+    background-position: 0px 0px;
+    background-image: url('../assets/images/room-widgets/trophy-widget/trophy-spritesheet.png');
+    
+    &.trophy-2 {
+        background-position: 0px 173px;
+    }
+
+    &.trophy-3 {
+        background-position: 0px 346px;
+    }
+
+    .trophy-header {
+        .trophy-close {
+            position: absolute;
+            cursor: pointer;
+            width: 15px;
+            height: 15px;
+            top: 5px;
+            right: 5px;
+        }
+
+        .trophy-title {
+            padding-top: 3px;
+        }
+    }
+
+    .trophy-content {
+        width: 297px;
+        height: 110px;
+        margin-top: 3px;
+        margin-left: 23px;
+        white-space: pre-wrap;
+    }
+
+    .trophy-footer {
+        width: 297px;
+        margin-top: 5px;
+        margin-left: 23px;
+    }
+}
+
+.nitro-gift-card {
+    width: 306px;
+    height: 159px;
+    background: url('../assets/images/gift/gift_tag.png') center no-repeat;
+
+    .gift-face {
+        width: 65px;
+
+        .gift-incognito {
+            width: 37px;
+            height: 48px;
+            background: url('../assets/images/gift/incognito.png') center no-repeat;
+        }
+
+        .gift-avatar {
+            position: relative;
+            overflow: hidden;
+            width: 40px;
+            height: 50px;
+
+            .avatar-image {
+                position: absolute;
+                left: -25px;
+                top: -20px;
+            }
+        }
+    }
+
+    .gift-message {
+        width: 100%;
+        min-width: 100%;
+        max-width: 100%;
+        height: 90px;
+        min-height: 90px;
+        max-height: 90px;
+        border: none;
+        resize: none;
+        outline: none;
+        line-height: 17px;
+    }
+}
+
+.spinner-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .spinner {
+        margin: 2px;
+        width: 10px;
+        height: 10px;
+        border: $border-width solid $white;
+        background-color: rgba($white, 0.8);
+        border-radius: 100%;
+        display: inline-block;
+        -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+
+        &:nth-child(1) {
+            -webkit-animation-delay: -0.32s;
+            animation-delay: -0.32s;
+        }
+
+        &:nth-child(2) {
+            -webkit-animation-delay: -0.16s;
+            animation-delay: -0.16s;
+        }
+    }
+}
+
+@-webkit-keyframes sk-bouncedelay {
+    0%, 80%, 100% { -webkit-transform: scale(0) }
+    40% { -webkit-transform: scale(1.0) }
+}
+  
+@keyframes sk-bouncedelay {
+    0%, 80%, 100% { 
+      -webkit-transform: scale(0);
+      transform: scale(0);
+    } 40% { 
+      -webkit-transform: scale(1.0);
+      transform: scale(1.0);
+    }
+}
+
+.room-thumbnail {
+    position: relative;
+    width: 110px;
+    height: 110px;
+    background: url("../assets/images/navigator/thumbnail_placeholder.png") no-repeat center;
+    background-color: rgba($black, .125);
+}
+
+.nitro-alert {
+    width: 350px;
+
+    .content-area {
+        min-height: 125px;
+        max-height: 300px;
+    }
+}
+
+.nitro-notification-bubble {
+    pointer-events: all;
+    padding: 6px 5px;
+    background-color: rgba($dark,.95);
+    box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
+    font-size: $font-size-sm;
+    margin-bottom: 5px;
+
+    .bubble-image {
+        width: 30px;
+        height: 30px;
+        overflow: hidden;
+        object-fit: none;
+        margin-right: 5px;
+    }
+}
+
+#draggable-windows-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    overflow: hidden;
+
+    @include media-breakpoint-down(lg) {
+        display: flex;
+        justify-content: center;
+
+        .draggable-window {
+            top: unset !important;
+            left: unset !important;
+            transform: none !important;
+        }
+    }
+
+    .draggable-window {
+        display: inline-block;
+        visibility: hidden;
+        pointer-events: all;
+    }
+}
+
+@import './card/NitroCardView';
--- a/src/common/index.ts
+++ b/src/common/index.ts
@ -2,7 +2,11 @@ export * from './AutoGrid';
 export * from './Base';
 export * from './Button';
 export * from './ButtonGroup';
+export * from './card';
+export * from './card/accordion';
+export * from './card/tabs';
 export * from './Column';
+export * from './draggable-window';
 export * from './Flex';
 export * from './FormGroup';
 export * from './Grid';
@ -10,5 +14,6 @@ export * from './GridContext';
 export * from './HorizontalRule';
 export * from './layout';
 export * from './Text';
+export * from './transitions';
 export * from './types';
 export * from './utils';
--- a/src/layout/gift-card/NitroLayoutGiftCardView.tsx
+++ b/src/layout/gift-card/NitroLayoutGiftCardView.tsx
@ -1,9 +1,17 @@
 import { FC } from 'react';
 import { LocalizeText } from '../../api';
 import { AvatarImageView } from '../../views/shared/avatar-image/AvatarImageView';
-import { NitroLayoutGiftCardViewProps } from './NitroLayoutGiftCardView.types';

-export const NitroLayoutGiftCardView: FC<NitroLayoutGiftCardViewProps> = props =>
+interface LayoutGiftTagViewProps
+{
+    figure?: string;
+    userName?: string;
+    message?: string;
+    editable?: boolean;
+    onChange?: (value: string) => void;
+}
+
+export const LayoutGiftTagView: FC<LayoutGiftTagViewProps> = props =>
 {
    const { figure = null, userName = null, message = null, editable = false, onChange = null } = props;
    
--- a/src/common/layout/LayoutLoadingSpinnerView.tsx
+++ b/src/common/layout/LayoutLoadingSpinnerView.tsx
@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { Base, BaseProps } from '../Base';
+
+export const LayoutLoadingSpinnerView: FC<BaseProps<HTMLDivElement>> = props =>
+{
+    const { ...rest } = props;
+    
+    return (
+        <Base classNames={ [ 'spinner-container' ] } { ...rest } >
+            <Base className="spinner" />
+            <Base className="spinner" />
+            <Base className="spinner" />
+        </Base>
+    );
+}
--- a/src/layout/mini-camera/NitroLayoutMiniCameraView.tsx
+++ b/src/layout/mini-camera/NitroLayoutMiniCameraView.tsx
@ -1,11 +1,17 @@
-import { NitroRectangle } from '@nitrots/nitro-renderer';
+import { NitroRectangle, NitroRenderTexture } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useRef } from 'react';
 import { GetRoomEngine, LocalizeText } from '../../api';
 import { CAMERA_SHUTTER, PlaySound } from '../../api/utils/PlaySound';
 import { DraggableWindow } from '../draggable-window';
-import { NitroLayoutMiniCameraViewProps } from './NitroLayoutMiniCameraView.types';

-export const NitroLayoutMiniCameraView: FC<NitroLayoutMiniCameraViewProps> = props =>
+interface LayoutMiniCameraViewProps
+{
+    roomId: number;
+    textureReceiver: (texture: NitroRenderTexture) => void;
+    onClose: () => void;
+}
+
+export const LayoutMiniCameraView: FC<LayoutMiniCameraViewProps> = props =>
 {
    const { roomId = -1, textureReceiver = null, onClose = null } = props;
    const elementRef = useRef<HTMLDivElement>();
--- a/src/common/layout/LayoutNotificationAlertView.tsx
+++ b/src/common/layout/LayoutNotificationAlertView.tsx
@ -0,0 +1,31 @@
+import { FC, useMemo } from 'react';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroCardViewProps } from '../card';
+
+interface LayoutNotificationAlertViewProps extends NitroCardViewProps
+{
+    title: string;
+    close: () => void;
+}
+
+export const LayoutNotificationAlertView: FC<LayoutNotificationAlertViewProps> = props =>
+{
+    const { title = '', close = null, simple = true, classNames = [], children = null, ...rest } = props;
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = [ 'nitro-alert' ];
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ classNames ]);
+
+    return (
+        <NitroCardView classNames={ getClassNames } simple={ simple } { ...rest }>
+            <NitroCardHeaderView headerText={ title } onCloseClick={ close } />
+            <NitroCardContentView justifyContent="between" className="text-black">
+                { children }
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}
--- a/src/layout/notification-bubble/NotificationBubbleView.tsx
+++ b/src/layout/notification-bubble/NotificationBubbleView.tsx
@ -1,15 +1,15 @@
 import { FC, useEffect, useMemo, useState } from 'react';
-import { Base, BaseProps } from '../../common';
+import { Base, BaseProps } from '..';
 import { TransitionAnimation, TransitionAnimationTypes } from '../transitions';

-interface NotificationBubbleViewProps extends BaseProps<HTMLDivElement>
+interface LayoutNotificationBubbleViewProps extends BaseProps<HTMLDivElement>
 {
    fadesOut?: boolean;
    timeoutMs?: number;
    close: () => void;
 }

-export const NotificationBubbleView: FC<NotificationBubbleViewProps> = props =>
+export const LayoutNotificationBubbleView: FC<LayoutNotificationBubbleViewProps> = props =>
 {
    const { fadesOut = true, timeoutMs = 8000, close = null, classNames = [], ...rest } = props;
    const [ isVisible, setIsVisible ] = useState(false);
--- a/src/layout/room-thumbnail/RoomThumbnailView.tsx
+++ b/src/layout/room-thumbnail/RoomThumbnailView.tsx
@ -1,14 +1,14 @@
 import { FC, useMemo } from 'react';
 import { GetConfiguration } from '../../api';
-import { Base, BaseProps } from '../../common/Base';
+import { Base, BaseProps } from '../Base';

-export interface RoomThumbnailViewProps extends BaseProps<HTMLDivElement>
+export interface LayoutRoomThumbnailViewProps extends BaseProps<HTMLDivElement>
 {
    roomId?: number;
    customUrl?: string;
 }

-export const RoomThumbnailView: FC<RoomThumbnailViewProps> = props =>
+export const LayoutRoomThumbnailView: FC<LayoutRoomThumbnailViewProps> = props =>
 {
    const { roomId = -1, customUrl = null, shrink = true, overflow = 'hidden', classNames = [], children = null, ...rest } = props;

--- a/src/layout/trophy/NitroLayoutTrophyView.tsx
+++ b/src/layout/trophy/NitroLayoutTrophyView.tsx
@ -1,9 +1,18 @@
 import { FC } from 'react';
 import { LocalizeText } from '../../api';
 import { DraggableWindow } from '../draggable-window';
-import { NitroLayoutTrophyViewProps } from './NitroLayoutTrophyView.types';

-export const NitroLayoutTrophyView: FC<NitroLayoutTrophyViewProps> = props =>
+interface LayoutTrophyViewProps
+{
+    color: string;
+    message: string;
+    date: string;
+    senderName: string;
+    customTitle?: string;
+    onCloseClick: () => void;
+}
+
+export const LayoutTrophyView: FC<LayoutTrophyViewProps> = props =>
 {
    const { color = '', message = '', date = '', senderName = '', customTitle = null, onCloseClick = null } = props;

--- a/src/layout/user-profile-icon/UserProfileIconView.tsx
+++ b/src/layout/user-profile-icon/UserProfileIconView.tsx
@ -1,6 +1,6 @@
 import { FC, useMemo } from 'react';
 import { GetUserProfile } from '../../api';
-import { Base, BaseProps } from '../../common/Base';
+import { Base, BaseProps } from '../Base';

 export interface UserProfileIconViewProps extends BaseProps<HTMLDivElement>
 {
--- a/src/common/layout/index.ts
+++ b/src/common/layout/index.ts
@ -1,2 +1,10 @@
+export * from './LayoutGiftTagView';
 export * from './LayoutGridItem';
 export * from './LayoutImage';
+export * from './LayoutLoadingSpinnerView';
+export * from './LayoutMiniCameraView';
+export * from './LayoutNotificationAlertView';
+export * from './LayoutNotificationBubbleView';
+export * from './LayoutRoomThumbnailView';
+export * from './LayoutTrophyView';
+export * from './UserProfileIconView';
--- a/src/common/transitions/TransitionAnimation.tsx
+++ b/src/common/transitions/TransitionAnimation.tsx
@ -1,8 +1,15 @@
 import { FC, useEffect, useState } from 'react';
 import { Transition } from 'react-transition-group';
-import { TransitionAnimationProps } from './TransitionAnimation.types';
 import { getTransitionAnimationStyle } from './TransitionAnimationStyles';

+interface TransitionAnimationProps
+{
+    type: string;
+    inProp: boolean;
+    timeout?: number;
+    className?: string;
+}
+
 export const TransitionAnimation: FC<TransitionAnimationProps> = props =>
 {
    const { type = null, inProp = false, timeout = 300, className = null, children = null } = props;
--- a/src/common/transitions/TransitionAnimationStyles.ts
+++ b/src/common/transitions/TransitionAnimationStyles.ts
@ -1,7 +1,7 @@
 import { CSSProperties } from 'react';
 import { TransitionStatus } from 'react-transition-group';
 import { ENTERING, EXITING } from 'react-transition-group/Transition';
-import { TransitionAnimationTypes } from './TransitionAnimation.types';
+import { TransitionAnimationTypes } from './TransitionAnimationTypes';

 export function getTransitionAnimationStyle(type: string, transition: TransitionStatus, timeout: number = 300): Partial<CSSProperties>
 {
--- a/src/layout/transitions/TransitionAnimation.types.ts
+++ b/src/layout/transitions/TransitionAnimation.types.ts
@ -1,11 +1,3 @@
-export interface TransitionAnimationProps
-{
-    type: string;
-    inProp: boolean;
-    timeout?: number;
-    className?: string;
-}
-
 export class TransitionAnimationTypes
 {
    public static BOUNCE: string = 'bounce';
--- a/src/common/transitions/index.ts
+++ b/src/common/transitions/index.ts
@ -1,3 +1,3 @@
 export * from './TransitionAnimation';
-export * from './TransitionAnimation.types';
 export * from './TransitionAnimationStyles';
+export * from './TransitionAnimationTypes';
--- a/src/components/achievements/AchievementsView.tsx
+++ b/src/components/achievements/AchievementsView.tsx
@ -1,6 +1,7 @@
 import { AchievementData, AchievementEvent, AchievementsEvent, AchievementsScoreEvent, RequestAchievementsMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { GetConfiguration, LocalizeText } from '../../api';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardSubHeaderView, NitroCardView } from '../../common';
 import { Base } from '../../common/Base';
 import { Column } from '../../common/Column';
 import { Flex } from '../../common/Flex';
@ -8,8 +9,6 @@ import { Text } from '../../common/Text';
 import { AchievementsUIEvent, AchievementsUIUnseenCountEvent } from '../../events/achievements';
 import { BatchUpdates, CreateMessageHook, dispatchUiEvent, SendMessageHook } from '../../hooks';
 import { useUiEvent } from '../../hooks/events';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardSubHeaderView, NitroCardView } from '../../layout';
-import { NitroLayoutBase } from '../../layout/base';
 import { AchievementCategory } from './common/AchievementCategory';
 import { AchievementUtilities } from './common/AchievementUtilities';
 import { AchievementsCategoryListView } from './views/category-list/AchievementsCategoryListView';
@ -220,7 +219,7 @@ export const AchievementsView: FC<{}> = props =>
            <NitroCardHeaderView headerText={ LocalizeText('inventory.achievements') } onCloseClick={ event => setIsVisible(false) } />
            { getSelectedCategory &&
                <NitroCardSubHeaderView position="relative" className="justify-content-center align-items-center cursor-pointer" gap={ 3 }>
-                    <NitroLayoutBase onClick={ event => setSelectedCategoryCode(null) } className="nitro-achievements-back-arrow" />
+                    <Base onClick={ event => setSelectedCategoryCode(null) } className="nitro-achievements-back-arrow" />
                    <Column grow gap={ 0 }>
                        <Text fontSize={ 4 } fontWeight="bold" className="text-small">{ LocalizeText(`quests.${ getSelectedCategory.code }.name`) }</Text>
                        <Text>{ LocalizeText('achievements.details.categoryprogress', [ 'progress', 'limit' ], [ getSelectedCategory.getProgress().toString(), getSelectedCategory.getMaxProgress().toString() ]) }</Text>
--- a/src/components/avatar-editor/AvatarEditorView.tsx
+++ b/src/components/avatar-editor/AvatarEditorView.tsx
@ -2,6 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { AvatarEditorFigureCategory, FigureSetIdsMessageEvent, GetWardrobeMessageComposer, IAvatarFigureContainer, UserFigureComposer, UserWardrobePageEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { GetAvatarRenderManager, GetClubMemberLevel, GetConfiguration, GetSessionDataManager, LocalizeText } from '../../api';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
 import { Button } from '../../common/Button';
 import { ButtonGroup } from '../../common/ButtonGroup';
 import { Column } from '../../common/Column';
@ -9,7 +10,6 @@ import { Grid } from '../../common/Grid';
 import { AvatarEditorEvent } from '../../events/avatar-editor';
 import { CreateMessageHook, SendMessageHook } from '../../hooks';
 import { useUiEvent } from '../../hooks/events/ui/ui-event';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../layout';
 import { AvatarEditorAction } from './common/AvatarEditorAction';
 import { AvatarEditorUtilities } from './common/AvatarEditorUtilities';
 import { BodyModel } from './common/BodyModel';
--- a/src/components/camera/views/capture/CameraWidgetCaptureView.tsx
+++ b/src/components/camera/views/capture/CameraWidgetCaptureView.tsx
@ -1,11 +1,8 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { NitroRectangle, TextureUtils } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useRef } from 'react';
-import { GetRoomEngine, GetRoomSession, LocalizeText } from '../../../../api';
-import { CAMERA_SHUTTER, PlaySound } from '../../../../api/utils/PlaySound';
-import { Column } from '../../../../common/Column';
-import { Flex } from '../../../../common/Flex';
-import { DraggableWindow } from '../../../../layout';
+import { CAMERA_SHUTTER, GetRoomEngine, GetRoomSession, LocalizeText, PlaySound } from '../../../../api';
+import { Column, DraggableWindow, Flex } from '../../../../common';
 import { NotificationUtilities } from '../../../../views/notification-center/common/NotificationUtilities';
 import { useCameraWidgetContext } from '../../CameraWidgetContext';
 import { CameraPicture } from '../../common/CameraPicture';
--- a/src/components/camera/views/checkout/CameraWidgetCheckoutView.tsx
+++ b/src/components/camera/views/checkout/CameraWidgetCheckoutView.tsx
@ -1,14 +1,9 @@
 import { CameraPublishStatusMessageEvent, CameraPurchaseOKMessageEvent, CameraStorageUrlMessageEvent, PublishPhotoMessageComposer, PurchasePhotoMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { GetConfiguration, GetRoomEngine, LocalizeText } from '../../../../api';
-import { Button } from '../../../../common/Button';
-import { Column } from '../../../../common/Column';
-import { Flex } from '../../../../common/Flex';
-import { LayoutImage } from '../../../../common/layout/LayoutImage';
-import { Text } from '../../../../common/Text';
+import { Button, Column, Flex, LayoutImage, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 import { InventoryEvent } from '../../../../events';
 import { BatchUpdates, CreateMessageHook, dispatchUiEvent, SendMessageHook } from '../../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 import { CurrencyIcon } from '../../../../views/shared/currency-icon/CurrencyIcon';

 export interface CameraWidgetCheckoutViewProps
--- a/src/components/camera/views/editor/CameraWidgetEditorView.tsx
+++ b/src/components/camera/views/editor/CameraWidgetEditorView.tsx
@ -3,14 +3,7 @@ import { IRoomCameraWidgetEffect, IRoomCameraWidgetSelectedEffect, RoomCameraWid
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { GetRoomCameraWidgetManager, LocalizeText } from '../../../../api';
-import { Button } from '../../../../common/Button';
-import { ButtonGroup } from '../../../../common/ButtonGroup';
-import { Column } from '../../../../common/Column';
-import { Flex } from '../../../../common/Flex';
-import { Grid } from '../../../../common/Grid';
-import { LayoutImage } from '../../../../common/layout/LayoutImage';
-import { Text } from '../../../../common/Text';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../layout';
+import { Button, ButtonGroup, Column, Flex, Grid, LayoutImage, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Text } from '../../../../common';
 import { CameraEditorTabs } from '../../common/CameraEditorTabs';
 import { CameraPicture } from '../../common/CameraPicture';
 import { CameraPictureThumbnail } from '../../common/CameraPictureThumbnail';
--- a/src/components/catalog/CatalogView.tsx
+++ b/src/components/catalog/CatalogView.tsx
@ -2,13 +2,13 @@ import { FrontPageItem, GetCatalogIndexComposer, GetCatalogPageComposer, GetClub
 import { FC, useCallback, useEffect, useState } from 'react';
 import { AddEventLinkTracker, GetRoomEngine, LocalizeText, RemoveLinkEventTracker } from '../../api';
 import { CREDITS, PlaySound } from '../../api/utils/PlaySound';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
 import { Column } from '../../common/Column';
 import { Grid } from '../../common/Grid';
 import { CatalogPurchasedEvent } from '../../events';
 import { BatchUpdates } from '../../hooks';
 import { useUiEvent } from '../../hooks/events/ui/ui-event';
 import { SendMessageHook } from '../../hooks/messages/message-event';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../layout';
 import { CatalogContextProvider } from './CatalogContext';
 import { CatalogMessageHandler } from './CatalogMessageHandler';
 import { CatalogPage } from './common/CatalogPage';
--- a/src/components/catalog/views/gift/CatalogGiftView.tsx
+++ b/src/components/catalog/views/gift/CatalogGiftView.tsx
@ -3,17 +3,10 @@ import { PurchaseFromCatalogAsGiftComposer } from '@nitrots/nitro-renderer';
 import classNames from 'classnames';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { GetSessionDataManager, LocalizeText } from '../../../../api';
-import { Base } from '../../../../common/Base';
-import { Button } from '../../../../common/Button';
-import { ButtonGroup } from '../../../../common/ButtonGroup';
-import { Column } from '../../../../common/Column';
-import { Flex } from '../../../../common/Flex';
-import { FormGroup } from '../../../../common/FormGroup';
-import { Text } from '../../../../common/Text';
+import { Base, Button, ButtonGroup, Column, Flex, FormGroup, LayoutGiftTagView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 import { CatalogEvent, CatalogPurchasedEvent } from '../../../../events';
 import { CatalogInitGiftEvent } from '../../../../events/catalog/CatalogInitGiftEvent';
 import { BatchUpdates, SendMessageHook, useUiEvent } from '../../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutGiftCardView } from '../../../../layout';
 import { CurrencyIcon } from '../../../../views/shared/currency-icon/CurrencyIcon';
 import { FurniImageView } from '../../../../views/shared/furni-image/FurniImageView';
 import { useCatalogContext } from '../../CatalogContext';
@ -184,7 +177,7 @@ export const CatalogGiftView: FC<{}> = props =>
                    { receiverNotFound &&
                        <Base className="invalid-feedback">{ LocalizeText('catalog.gift_wrapping.receiver_not_found.title') }</Base> }
                </FormGroup>
-                <NitroLayoutGiftCardView figure={ GetSessionDataManager().figure } userName={ GetSessionDataManager().userName } message={ message } editable={ true } onChange={ (value) => setMessage(value) } />
+                <LayoutGiftTagView figure={ GetSessionDataManager().figure } userName={ GetSessionDataManager().userName } message={ message } editable={ true } onChange={ (value) => setMessage(value) } />
                <Base className="form-check">
                    <input className="form-check-input" type="checkbox" name="showMyFace" checked={ showMyFace } onChange={ (e) => setShowMyFace(value => !value) } />
                    <label className="form-check-label">{ LocalizeText('catalog.gift_wrapping.show_face.title') }</label>
--- a/src/components/catalog/views/page/layout/CatalogLayoutVipBuyView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutVipBuyView.tsx
@ -7,12 +7,12 @@ import { Column } from '../../../../../common/Column';
 import { Flex } from '../../../../../common/Flex';
 import { Grid } from '../../../../../common/Grid';
 import { LayoutGridItem } from '../../../../../common/layout/LayoutGridItem';
+import { LayoutLoadingSpinnerView } from '../../../../../common/layout/LayoutLoadingSpinnerView';
 import { Text } from '../../../../../common/Text';
 import { CatalogPurchasedEvent, CatalogPurchaseFailureEvent } from '../../../../../events';
 import { CatalogEvent } from '../../../../../events/catalog/CatalogEvent';
 import { useUiEvent } from '../../../../../hooks';
 import { SendMessageHook } from '../../../../../hooks/messages/message-event';
-import { LoadingSpinnerView } from '../../../../../layout/loading-spinner/LoadingSpinnerView';
 import { CurrencyIcon } from '../../../../../views/shared/currency-icon/CurrencyIcon';
 import { GetCurrencyAmount } from '../../../../purse/common/CurrencyHelper';
 import { GLOBAL_PURSE } from '../../../../purse/PurseView';
@ -131,7 +131,7 @@ export const CatalogLayoutVipBuyView: FC<CatalogLayoutProps> = props =>
            case CatalogPurchaseState.CONFIRM:
                return <Button fullWidth variant="warning" size="sm" onClick={ purchaseSubscription }>{ LocalizeText('catalog.marketplace.confirm_title') }</Button>;
            case CatalogPurchaseState.PURCHASE:
-                return <Button fullWidth variant="primary" size="sm" disabled><LoadingSpinnerView /></Button>;
+                return <Button fullWidth variant="primary" size="sm" disabled><LayoutLoadingSpinnerView /></Button>;
            case CatalogPurchaseState.FAILED:
                return <Button fullWidth variant="danger" size="sm" disabled>{ LocalizeText('generic.failed') }</Button>;
            case CatalogPurchaseState.NONE:
--- a/src/components/catalog/views/page/layout/marketplace/MarketplacePostOfferView.tsx
+++ b/src/components/catalog/views/page/layout/marketplace/MarketplacePostOfferView.tsx
@ -1,15 +1,9 @@
 import { ImageResult, MakeOfferMessageComposer, Vector3d } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { GetRoomEngine, LocalizeText } from '../../../../../../api';
-import { Base } from '../../../../../../common/Base';
-import { Button } from '../../../../../../common/Button';
-import { Column } from '../../../../../../common/Column';
-import { Grid } from '../../../../../../common/Grid';
-import { LayoutImage } from '../../../../../../common/layout/LayoutImage';
-import { Text } from '../../../../../../common/Text';
-import { CatalogPostMarketplaceOfferEvent } from '../../../../../../events/catalog/CatalogPostMarketplaceOfferEvent';
+import { Base, Button, Column, Grid, LayoutImage, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../../common';
+import { CatalogPostMarketplaceOfferEvent } from '../../../../../../events';
 import { BatchUpdates, SendMessageHook, useUiEvent } from '../../../../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../layout';
 import { NotificationUtilities } from '../../../../../../views/notification-center/common/NotificationUtilities';
 import { FurnitureItem } from '../../../../../inventory/common/FurnitureItem';
 import { useCatalogContext } from '../../../../CatalogContext';
--- a/src/components/catalog/views/page/widgets/CatalogPurchaseWidgetView.tsx
+++ b/src/components/catalog/views/page/widgets/CatalogPurchaseWidgetView.tsx
@ -1,13 +1,9 @@
 import { PurchaseFromCatalogComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { CreateLinkEvent, GetClubMemberLevel, LocalizeText } from '../../../../../api';
-import { Button } from '../../../../../common/Button';
-import { CatalogEvent, CatalogPurchasedEvent, CatalogPurchaseFailureEvent, CatalogPurchaseNotAllowedEvent, CatalogPurchaseSoldOutEvent } from '../../../../../events';
-import { CatalogInitGiftEvent } from '../../../../../events/catalog/CatalogInitGiftEvent';
-import { CatalogInitPurchaseEvent } from '../../../../../events/catalog/CatalogInitPurchaseEvent';
-import { CatalogWidgetEvent } from '../../../../../events/catalog/CatalogWidgetEvent';
+import { Button, LayoutLoadingSpinnerView } from '../../../../../common';
+import { CatalogEvent, CatalogInitGiftEvent, CatalogInitPurchaseEvent, CatalogPurchasedEvent, CatalogPurchaseFailureEvent, CatalogPurchaseNotAllowedEvent, CatalogPurchaseSoldOutEvent, CatalogWidgetEvent } from '../../../../../events';
 import { dispatchUiEvent, SendMessageHook, useUiEvent } from '../../../../../hooks';
-import { LoadingSpinnerView } from '../../../../../layout';
 import { GetCurrencyAmount } from '../../../../purse/common/CurrencyHelper';
 import { useCatalogContext } from '../../../CatalogContext';
 import { CatalogPurchaseState } from '../../../common/CatalogPurchaseState';
@ -162,7 +158,7 @@ export const CatalogPurchaseWidgetView: FC<CatalogPurchaseWidgetViewProps> = pro
            case CatalogPurchaseState.CONFIRM:
                return <Button onClick={ event => purchase() }>{ LocalizeText('catalog.marketplace.confirm_title') }</Button>;
            case CatalogPurchaseState.PURCHASE:
-                return <Button disabled><LoadingSpinnerView /></Button>;
+                return <Button disabled><LayoutLoadingSpinnerView /></Button>;
            case CatalogPurchaseState.FAILED:
                return <Button variant="danger">{ LocalizeText('generic.failed') }</Button>;
            case CatalogPurchaseState.SOLD_OUT:
--- a/src/components/chat-history/ChatHistoryView.tsx
+++ b/src/components/chat-history/ChatHistoryView.tsx
@ -3,9 +3,8 @@ import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { AutoSizer, CellMeasurer, CellMeasurerCache, List, ListRowProps, ListRowRenderer, Size } from 'react-virtualized';
 import { RenderedRows } from 'react-virtualized/dist/es/List';
 import { AddEventLinkTracker, LocalizeText, RemoveLinkEventTracker } from '../../api';
-import { Flex, Text } from '../../common';
+import { Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
 import { BatchUpdates } from '../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
 import { ChatHistoryContextProvider } from './ChatHistoryContext';
 import { ChatHistoryMessageHandler } from './ChatHistoryMessageHandler';
 import { ChatEntryType } from './common/ChatEntryType';
--- a/src/components/groups/views/GroupCreatorView.tsx
+++ b/src/components/groups/views/GroupCreatorView.tsx
@ -1,9 +1,8 @@
 import { GroupBuyComposer, GroupBuyDataComposer, GroupBuyDataEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { HasHabboClub, LocalizeText } from '../../../api';
-import { Base, Button, Column, Flex, Text } from '../../../common';
+import { Base, Button, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
 import { BatchUpdates, CreateMessageHook, SendMessageHook } from '../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../layout';
 import { IGroupData } from '../common/IGroupData';
 import { GroupTabBadgeView } from './tabs/GroupTabBadgeView';
 import { GroupTabColorsView } from './tabs/GroupTabColorsView';
--- a/src/components/groups/views/GroupInformationStandaloneView.tsx
+++ b/src/components/groups/views/GroupInformationStandaloneView.tsx
@ -1,8 +1,8 @@
 import { GroupInformationEvent, GroupInformationParser } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { LocalizeText } from '../../../api';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../common';
 import { CreateMessageHook } from '../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../layout';
 import { GroupInformationView } from './GroupInformationView';

 export const GroupInformationStandaloneView: FC<{}> = props =>
--- a/src/components/groups/views/GroupManagerView.tsx
+++ b/src/components/groups/views/GroupManagerView.tsx
@ -1,9 +1,8 @@
 import { GroupBadgePart, GroupInformationEvent, GroupSettingsEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { LocalizeText } from '../../../api';
-import { Base, Column, Flex, Text } from '../../../common';
+import { Base, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Text } from '../../../common';
 import { CreateMessageHook } from '../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../layout';
 import { IGroupData } from '../common/IGroupData';
 import { GroupTabBadgeView } from './tabs/GroupTabBadgeView';
 import { GroupTabColorsView } from './tabs/GroupTabColorsView';
--- a/src/components/groups/views/GroupMembersView.tsx
+++ b/src/components/groups/views/GroupMembersView.tsx
@ -2,9 +2,8 @@ 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 } from '../../../api';
-import { Base, Button, Column, Flex, Grid, Text } from '../../../common';
+import { Base, Button, Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
 import { BatchUpdates, CreateMessageHook, SendMessageHook } from '../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../layout';
 import { NotificationUtilities } from '../../../views/notification-center/common/NotificationUtilities';
 import { AvatarImageView } from '../../../views/shared/avatar-image/AvatarImageView';
 import { BadgeImageView } from '../../../views/shared/badge-image/BadgeImageView';
--- a/src/components/groups/views/GroupRoomInformationView.tsx
+++ b/src/components/groups/views/GroupRoomInformationView.tsx
@ -5,7 +5,6 @@ import { GetGroupInformation, GetSessionDataManager, LocalizeText, TryJoinGroup
 import { GetGroupManager } from '../../../api/groups/GetGroupManager';
 import { Base, Button, Column, Flex, Text } from '../../../common';
 import { CreateMessageHook, SendMessageHook } from '../../../hooks';
-import { NotificationBubbleView } from '../../../layout';
 import { NotificationUtilities } from '../../../views/notification-center/common/NotificationUtilities';
 import { BadgeImageView } from '../../../views/shared/badge-image/BadgeImageView';
 import { GroupMembershipType } from '../common/GroupMembershipType';
@ -120,7 +119,7 @@ export const GroupRoomInformationView: FC<{}> = props =>
    if(!groupInformation) return null;

    return (
-        <NotificationBubbleView fadesOut={ false } close={ null }>
+        <Base className="nitro-notification-bubble rounded">
            <Column>
                <Flex alignItems="center" justifyContent="between" pointer onClick={ event => setIsOpen(value => !value) }>
                    <Text variant="white">{ LocalizeText('group.homeroominfo.title') }</Text>
@ -141,6 +140,6 @@ export const GroupRoomInformationView: FC<{}> = props =>
                            }
                    </> }
            </Column>
-        </NotificationBubbleView>
+        </Base>
    );
 };
--- a/src/components/guide-tool/GuideToolView.tsx
+++ b/src/components/guide-tool/GuideToolView.tsx
@ -1,9 +1,9 @@
 import { GuideOnDutyStatusMessageEvent, GuideSessionAttachedMessageEvent, GuideSessionDetachedMessageEvent, GuideSessionEndedMessageEvent, GuideSessionInvitedToGuideRoomMessageEvent, GuideSessionMessageMessageEvent, GuideSessionOnDutyUpdateMessageComposer, GuideSessionPartnerIsTypingMessageEvent, GuideSessionStartedMessageEvent, ILinkEventTracker, PerkAllowancesMessageEvent, PerkEnum } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { AddEventLinkTracker, GetConfiguration, GetSessionDataManager, LocalizeText, RemoveLinkEventTracker } from '../../api';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
 import { GuideToolEvent, NotificationAlertEvent } from '../../events';
 import { CreateMessageHook, dispatchUiEvent, SendMessageHook, useUiEvent } from '../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
 import { GuideSessionState } from './common/GuideSessionState';
 import { GuideToolMessage } from './common/GuideToolMessage';
 import { GuideToolMessageGroup } from './common/GuideToolMessageGroup';
--- a/src/components/guide-tool/views/GuideToolOngoingView.tsx
+++ b/src/components/guide-tool/views/GuideToolOngoingView.tsx
@ -4,7 +4,6 @@ import { FC, KeyboardEvent, useCallback, useState } from 'react';
 import { GetSessionDataManager, LocalizeText, TryVisitRoom } from '../../../api';
 import { Base, Button, ButtonGroup, Column, Flex, Text } from '../../../common';
 import { CreateMessageHook, SendMessageHook } from '../../../hooks';
-import { NitroLayoutBase } from '../../../layout/base';
 import { AvatarImageView } from '../../../views/shared/avatar-image/AvatarImageView';
 import { GuideToolMessageGroup } from '../common/GuideToolMessageGroup';

@ -101,9 +100,9 @@ export const GuideToolOngoingView: FC<GuideToolOngoingViewProps> = props =>
                                        { group.messages.map((chat, index) => <Base key={ index } className="text-break">{ chat.message }</Base>) }
                                    </Base>
                                    { (isOwnChat(group.userId)) &&
-                                        <NitroLayoutBase className="message-avatar flex-shrink-0">
+                                        <Base className="message-avatar flex-shrink-0">
                                            <AvatarImageView figure={ GetSessionDataManager().figure } direction={ 4 } />
-                                        </NitroLayoutBase> }
+                                        </Base> }
                                </Flex>
                            );
                        }) } 
--- a/src/components/help/HelpView.tsx
+++ b/src/components/help/HelpView.tsx
@ -1,10 +1,9 @@
 import { ILinkEventTracker } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { AddEventLinkTracker, LocalizeText, RemoveLinkEventTracker } from '../../api';
-import { Base, Column, Grid } from '../../common';
+import { Base, Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
 import { HelpReportUserEvent } from '../../events/help/HelpReportUserEvent';
 import { useUiEvent } from '../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
 import { IHelpReportState } from './common/IHelpReportState';
 import { HelpContextProvider } from './HelpContext';
 import { HelpMessageHandler } from './HelpMessageHandler';
--- a/src/components/help/views/SanctionStatusView.tsx
+++ b/src/components/help/views/SanctionStatusView.tsx
@ -1,9 +1,8 @@
 import { SanctionStatusEvent, SanctionStatusMessageParser } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { LocalizeText } from '../../../api';
-import { Base, Button, Column, Grid } from '../../../common';
+import { Base, Button, Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../common';
 import { CreateMessageHook } from '../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../layout';

 export const SanctionSatusView:FC<{}> = props =>
 {
--- a/src/components/help/views/name-change/NameChangeView.tsx
+++ b/src/components/help/views/name-change/NameChangeView.tsx
@ -1,8 +1,8 @@
 import { FC, useCallback, useMemo, useState } from 'react';
 import { LocalizeText } from '../../../../api';
-import { HelpNameChangeEvent } from '../../../../events/help/HelpNameChangeEvent';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
+import { HelpNameChangeEvent } from '../../../../events';
 import { useUiEvent } from '../../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 import { NameChangeConfirmationView } from './NameChangeConfirmationView';
 import { NameChangeInitView } from './NameChangeInitView';
 import { NameChangeInputView } from './NameChangeInputView';
--- a/src/components/inventory/InventoryView.tsx
+++ b/src/components/inventory/InventoryView.tsx
@ -1,12 +1,12 @@
 import { IRoomSession, RoomEngineObjectEvent, RoomEngineObjectPlacedEvent, RoomPreviewer, RoomSessionEvent, TradingCancelComposer, TradingCloseComposer, TradingOpenComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useReducer, useState } from 'react';
 import { GetRoomEngine, LocalizeText } from '../../api';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
 import { InventoryBadgesUpdatedEvent, InventoryEvent, InventoryTradeRequestEvent } from '../../events';
 import { useRoomEngineEvent } from '../../hooks/events/nitro/room/room-engine-event';
 import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
 import { dispatchUiEvent, useUiEvent } from '../../hooks/events/ui/ui-event';
 import { SendMessageHook } from '../../hooks/messages';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../layout';
 import { isObjectMoverRequested, setObjectMoverRequested } from './common/InventoryUtilities';
 import { TradeState } from './common/TradeState';
 import { IUnseenItemTracker } from './common/unseen/IUnseenItemTracker';
--- a/src/components/main/MainView.tsx
+++ b/src/components/main/MainView.tsx
@ -1,9 +1,8 @@
 import { HabboWebTools, RoomSessionEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { AddEventLinkTracker, GetCommunication, RemoveLinkEventTracker } from '../../api';
-import { Base } from '../../common';
+import { Base, TransitionAnimation, TransitionAnimationTypes } from '../../common';
 import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
-import { TransitionAnimation, TransitionAnimationTypes } from '../../layout';
 import { CampaignView } from '../../views/campaign/CampaignView';
 import { FloorplanEditorView } from '../../views/floorplan-editor/FloorplanEditorView';
 import { FriendsView } from '../../views/friends/FriendsView';
--- a/src/components/mod-tools/ModToolsView.tsx
+++ b/src/components/mod-tools/ModToolsView.tsx
@ -2,14 +2,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { RoomEngineObjectEvent, RoomObjectCategory } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useReducer, useState } from 'react';
 import { GetRoomSession } from '../../api';
-import { Button } from '../../common';
+import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
 import { ModToolsEvent } from '../../events/mod-tools/ModToolsEvent';
 import { ModToolsOpenRoomChatlogEvent } from '../../events/mod-tools/ModToolsOpenRoomChatlogEvent';
 import { ModToolsOpenRoomInfoEvent } from '../../events/mod-tools/ModToolsOpenRoomInfoEvent';
 import { ModToolsOpenUserInfoEvent } from '../../events/mod-tools/ModToolsOpenUserInfoEvent';
 import { useRoomEngineEvent } from '../../hooks/events';
 import { dispatchUiEvent, useUiEvent } from '../../hooks/events/ui/ui-event';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
 import { ModToolsContextProvider } from './ModToolsContext';
 import { ModToolsMessageHandler } from './ModToolsMessageHandler';
 import { initialModTools, ModToolsActions, ModToolsReducer } from './reducers/ModToolsReducer';
--- a/src/components/mod-tools/views/room/ModToolsChatlogView.tsx
+++ b/src/components/mod-tools/views/room/ModToolsChatlogView.tsx
@ -1,7 +1,7 @@
 import { ChatRecordData, GetRoomChatlogMessageComposer, RoomChatlogEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
 import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 import { ChatlogView } from '../chatlog/ChatlogView';

 interface ModToolsChatlogViewProps
--- a/src/components/mod-tools/views/room/ModToolsRoomView.tsx
+++ b/src/components/mod-tools/views/room/ModToolsRoomView.tsx
@ -1,11 +1,10 @@
 import { GetModeratorRoomInfoMessageComposer, ModerateRoomMessageComposer, ModeratorActionMessageComposer, ModeratorRoomInfoEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { TryVisitRoom } from '../../../../api';
-import { Button, Column, Flex, Text } from '../../../../common';
+import { Button, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 import { ModToolsOpenRoomChatlogEvent } from '../../../../events/mod-tools/ModToolsOpenRoomChatlogEvent';
 import { BatchUpdates, dispatchUiEvent } from '../../../../hooks';
 import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';

 interface ModToolsRoomViewProps
 {
--- a/src/components/mod-tools/views/tickets/CfhChatlogView.tsx
+++ b/src/components/mod-tools/views/tickets/CfhChatlogView.tsx
@ -1,7 +1,7 @@
 import { CfhChatlogData, CfhChatlogEvent, GetCfhChatlogMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
 import { CreateMessageHook, SendMessageHook } from '../../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 import { ChatlogView } from '../chatlog/ChatlogView';

 interface CfhChatlogViewProps
--- a/src/components/mod-tools/views/tickets/ModToolsIssueInfoView.tsx
+++ b/src/components/mod-tools/views/tickets/ModToolsIssueInfoView.tsx
@ -1,10 +1,9 @@
 import { CloseIssuesMessageComposer, ReleaseIssuesMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useMemo, useState } from 'react';
 import { LocalizeText } from '../../../../api';
-import { Button, Column, Grid, Text } from '../../../../common';
+import { Button, Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 import { ModToolsOpenUserInfoEvent } from '../../../../events/mod-tools/ModToolsOpenUserInfoEvent';
 import { dispatchUiEvent, SendMessageHook } from '../../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 import { getSourceName } from '../../common/IssueCategoryNames';
 import { useModToolsContext } from '../../ModToolsContext';
 import { CfhChatlogView } from './CfhChatlogView';
--- a/src/components/mod-tools/views/tickets/ModToolsTicketsView.tsx
+++ b/src/components/mod-tools/views/tickets/ModToolsTicketsView.tsx
@ -1,7 +1,7 @@
 import { IssueMessageData } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useMemo, useState } from 'react';
 import { GetSessionDataManager } from '../../../../api';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../layout';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../common';
 import { useModToolsContext } from '../../ModToolsContext';
 import { ModToolsIssueInfoView } from './ModToolsIssueInfoView';
 import { ModToolsMyIssuesTabView } from './ModToolsMyIssuesTabView';
--- a/src/components/mod-tools/views/user/ModToolsUserChatlogView.tsx
+++ b/src/components/mod-tools/views/user/ModToolsUserChatlogView.tsx
@ -1,7 +1,7 @@
 import { ChatRecordData, GetUserChatlogMessageComposer, UserChatlogEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
 import { BatchUpdates, CreateMessageHook, SendMessageHook } from '../../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 import { ChatlogView } from '../chatlog/ChatlogView';

 interface ModToolsUserChatlogViewProps
--- a/src/components/mod-tools/views/user/ModToolsUserModActionView.tsx
+++ b/src/components/mod-tools/views/user/ModToolsUserModActionView.tsx
@ -1,9 +1,8 @@
 import { CallForHelpTopicData, DefaultSanctionMessageComposer, ModAlertMessageComposer, ModBanMessageComposer, ModKickMessageComposer, ModMessageMessageComposer, ModMuteMessageComposer, ModTradingLockMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useMemo, useState } from 'react';
 import { LocalizeText } from '../../../../api';
-import { Button, Column, Flex, Text } from '../../../../common';
+import { Button, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 import { SendMessageHook } from '../../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 import { NotificationAlertType } from '../../../../views/notification-center/common/NotificationAlertType';
 import { NotificationUtilities } from '../../../../views/notification-center/common/NotificationUtilities';
 import { useModToolsContext } from '../../ModToolsContext';
--- a/src/components/mod-tools/views/user/ModToolsUserRoomVisitsView.tsx
+++ b/src/components/mod-tools/views/user/ModToolsUserRoomVisitsView.tsx
@ -2,9 +2,8 @@ import { GetRoomVisitsMessageComposer, RoomVisitsData, RoomVisitsEvent } from '@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { AutoSizer, List, ListRowProps } from 'react-virtualized';
 import { TryVisitRoom } from '../../../../api';
-import { Base, Column, Grid, Text } from '../../../../common';
+import { Base, Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 import { CreateMessageHook, SendMessageHook } from '../../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';

 interface ModToolsUserRoomVisitsViewProps
 {
--- a/src/components/mod-tools/views/user/ModToolsUserSendMessageView.tsx
+++ b/src/components/mod-tools/views/user/ModToolsUserSendMessageView.tsx
@ -1,9 +1,8 @@
 import { ModMessageMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
-import { Button, Text } from '../../../../common';
+import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 import { NotificationAlertEvent } from '../../../../events';
 import { dispatchUiEvent, SendMessageHook } from '../../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 import { ISelectedUser } from '../../utils/ISelectedUser';

 interface ModToolsUserSendMessageViewProps
--- a/src/components/mod-tools/views/user/ModToolsUserView.tsx
+++ b/src/components/mod-tools/views/user/ModToolsUserView.tsx
@ -1,10 +1,9 @@
 import { FriendlyTime, GetModeratorUserInfoMessageComposer, ModeratorUserInfoData, ModeratorUserInfoEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { LocalizeText } from '../../../../api';
-import { Button, Column, Grid } from '../../../../common';
+import { Button, Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
 import { ModToolsOpenUserChatlogEvent } from '../../../../events/mod-tools/ModToolsOpenUserChatlogEvent';
 import { CreateMessageHook, dispatchUiEvent, SendMessageHook } from '../../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 import { ModToolsUserModActionView } from './ModToolsUserModActionView';
 import { ModToolsUserRoomVisitsView } from './ModToolsUserRoomVisitsView';
 import { ModToolsUserSendMessageView } from './ModToolsUserSendMessageView';
--- a/src/components/navigator/NavigatorView.tsx
+++ b/src/components/navigator/NavigatorView.tsx
@ -2,13 +2,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { ConvertGlobalRoomIdMessageComposer, HabboWebTools, ILinkEventTracker, LegacyExternalInterface, NavigatorInitComposer, NavigatorSearchComposer, RoomDataParser, RoomSessionEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useReducer, useState } from 'react';
 import { AddEventLinkTracker, GoToDesktop, LocalizeText, RemoveLinkEventTracker, TryVisitRoom } from '../../api';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
 import { Column } from '../../common/Column';
 import { NavigatorEvent, UpdateDoorStateEvent } from '../../events';
 import { UseMountEffect } from '../../hooks';
 import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
 import { useUiEvent } from '../../hooks/events/ui/ui-event';
 import { SendMessageHook } from '../../hooks/messages/message-event';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../layout';
 import { NavigatorContextProvider } from './NavigatorContext';
 import { NavigatorMessageHandler } from './NavigatorMessageHandler';
 import { initialNavigator, NavigatorActions, NavigatorReducer } from './reducers/NavigatorReducer';
--- a/src/components/navigator/views/room-doorbell/NavigatorRoomDoorbellView.tsx
+++ b/src/components/navigator/views/room-doorbell/NavigatorRoomDoorbellView.tsx
@ -1,11 +1,11 @@
 import { RoomDataParser } from '@nitrots/nitro-renderer';
 import { FC } from 'react';
 import { CreateRoomSession, GoToDesktop, LocalizeText } from '../../../../api';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
 import { Button } from '../../../../common/Button';
 import { Column } from '../../../../common/Column';
 import { Text } from '../../../../common/Text';
 import { UpdateDoorStateEvent } from '../../../../events';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';

 export interface NavigatorRoomDoorbellViewProps
 {
--- a/src/components/navigator/views/room-info/NavigatorRoomInfoView.tsx
+++ b/src/components/navigator/views/room-info/NavigatorRoomInfoView.tsx
@ -3,18 +3,9 @@ import { RoomMuteComposer, RoomSettingsComposer, RoomStaffPickComposer, Security
 import classNames from 'classnames';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { GetConfiguration, GetGroupInformation, 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 { NavigatorEvent } from '../../../../events';
-import { FloorplanEditorEvent } from '../../../../events/floorplan-editor/FloorplanEditorEvent';
-import { RoomWidgetThumbnailEvent } from '../../../../events/room-widgets/thumbnail';
-import { BatchUpdates } from '../../../../hooks';
-import { dispatchUiEvent } from '../../../../hooks/events';
-import { SendMessageHook } from '../../../../hooks/messages';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView, UserProfileIconView } from '../../../../layout';
-import { RoomThumbnailView } from '../../../../layout/room-thumbnail/RoomThumbnailView';
+import { Button, Column, Flex, LayoutRoomThumbnailView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, UserProfileIconView } from '../../../../common';
+import { FloorplanEditorEvent, NavigatorEvent, RoomWidgetThumbnailEvent } from '../../../../events';
+import { BatchUpdates, dispatchUiEvent, SendMessageHook } from '../../../../hooks';
 import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageView';
 import { useNavigatorContext } from '../../NavigatorContext';
 import { NavigatorActions } from '../../reducers/NavigatorReducer';
@ -132,9 +123,9 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
                { roomInfoData.enteredGuestRoom &&
                    <>
                        <Flex gap={ 2 } overflow="hidden">
-                            <RoomThumbnailView customUrl={ roomInfoData.enteredGuestRoom.officialRoomPicRef }>
+                            <LayoutRoomThumbnailView customUrl={ roomInfoData.enteredGuestRoom.officialRoomPicRef }>
                                { hasPermission('settings') && <i className="icon icon-camera-small position-absolute b-0 r-0 m-1 cursor-pointer" onClick={ () => processAction('open_room_thumbnail_camera') } /> }
-                            </RoomThumbnailView>
+                            </LayoutRoomThumbnailView>
                            <Column grow gap={ 1 } overflow="hidden">
                                <Flex gap={ 1 }>
                                    <Column grow gap={ 1 }>
--- a/src/components/navigator/views/room-link/NavigatorRoomLinkView.tsx
+++ b/src/components/navigator/views/room-link/NavigatorRoomLinkView.tsx
@ -1,10 +1,6 @@
 import { FC, useCallback, useEffect, useRef, useState } from 'react';
 import { GetConfiguration, GetNitroInstance, LocalizeText } from '../../../../api';
-import { Column } from '../../../../common/Column';
-import { Flex } from '../../../../common/Flex';
-import { Text } from '../../../../common/Text';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
-import { RoomThumbnailView } from '../../../../layout/room-thumbnail/RoomThumbnailView';
+import { Column, Flex, LayoutRoomThumbnailView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 import { useNavigatorContext } from '../../NavigatorContext';

 export class NavigatorRoomLinkViewProps
@ -59,7 +55,7 @@ export const NavigatorRoomLinkView: FC<NavigatorRoomLinkViewProps> = props =>
            <NitroCardHeaderView headerText={ LocalizeText('navigator.embed.title') } onCloseClick={ onCloseClick } />
            <NitroCardContentView className="text-black d-flex align-items-center">
                <Flex gap={ 2 }>
-                    <RoomThumbnailView customUrl={ roomInfoData.enteredGuestRoom.officialRoomPicRef } />
+                    <LayoutRoomThumbnailView customUrl={ roomInfoData.enteredGuestRoom.officialRoomPicRef } />
                    <Column>
                        <Text bold fontSize={ 5 }>{ LocalizeText('navigator.embed.headline') }</Text>
                        <Text>{ LocalizeText('navigator.embed.info') }</Text>
--- a/src/components/navigator/views/room-password/NavigatorRoomPasswordView.tsx
+++ b/src/components/navigator/views/room-password/NavigatorRoomPasswordView.tsx
@ -1,11 +1,11 @@
 import { RoomDataParser } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { CreateRoomSession, LocalizeText } from '../../../../api';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
 import { Button } from '../../../../common/Button';
 import { Column } from '../../../../common/Column';
 import { Text } from '../../../../common/Text';
 import { UpdateDoorStateEvent } from '../../../../events';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';

 export interface NavigatorRoomPasswordViewProps
 {
--- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsView.tsx
+++ b/src/components/navigator/views/room-settings/NavigatorRoomSettingsView.tsx
@ -1,8 +1,8 @@
 import { RoomBannedUsersComposer, RoomBannedUsersEvent, RoomSettingsEvent, RoomUsersWithRightsComposer, RoomUsersWithRightsEvent, SaveRoomSettingsComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../common';
 import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../layout';
 import RoomSettingsData from '../../common/RoomSettingsData';
 import { NavigatorRoomSettingsAccessTabView } from './views/NavigatorRoomSettingsAccessTabView';
 import { NavigatorRoomSettingsBasicTabView } from './views/NavigatorRoomSettingsBasicTabView';
--- a/src/components/navigator/views/room-settings/views/NavigatorRoomSettingsRightsTabView.tsx
+++ b/src/components/navigator/views/room-settings/views/NavigatorRoomSettingsRightsTabView.tsx
@ -1,13 +1,13 @@
 import { RemoveAllRightsMessageComposer, RoomTakeRightsComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
 import { LocalizeText } from '../../../../../api';
+import { UserProfileIconView } 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 { SendMessageHook } from '../../../../../hooks';
-import { UserProfileIconView } from '../../../../../layout';
 import { NavigatorRoomSettingsTabViewProps } from './NavigatorRoomSettingsTabViewProps.types';

 export const NavigatorRoomSettingsRightsTabView: FC<NavigatorRoomSettingsTabViewProps> = props =>
--- a/src/components/room-host/RoomHostView.tsx
+++ b/src/components/room-host/RoomHostView.tsx
@ -1,10 +1,9 @@
 import { IRoomSession, RoomEngineEvent, RoomId, RoomSessionEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { GetRoomSession, SetActiveRoomId, StartRoomSession } from '../../api';
-import { Base } from '../../common';
+import { Base, TransitionAnimation, TransitionAnimationTypes } from '../../common';
 import { useRoomEngineEvent } from '../../hooks/events/nitro/room/room-engine-event';
 import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
-import { TransitionAnimation, TransitionAnimationTypes } from '../../layout';
 import { RoomView } from '../../views/room/RoomView';

 export const RoomHostView: FC<{}> = props =>
--- a/src/components/toolbar/ToolbarView.tsx
+++ b/src/components/toolbar/ToolbarView.tsx
@ -1,7 +1,8 @@
 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 } from '../../common';
+import { Base, Flex, TransitionAnimationTypes } from '../../common';
+import { TransitionAnimation } from '../../common/transitions/TransitionAnimation';
 import { AvatarEditorEvent, FriendsEvent, FriendsMessengerIconEvent, FriendsRequestCountEvent, GuideToolEvent, InventoryEvent, NavigatorEvent, RoomWidgetCameraEvent } from '../../events';
 import { AchievementsUIEvent, AchievementsUIUnseenCountEvent } from '../../events/achievements';
 import { UnseenItemTrackerUpdateEvent } from '../../events/inventory/UnseenItemTrackerUpdateEvent';
@ -9,8 +10,6 @@ import { ModToolsEvent } from '../../events/mod-tools/ModToolsEvent';
 import { UserSettingsUIEvent } from '../../events/user-settings/UserSettingsUIEvent';
 import { BatchUpdates, dispatchUiEvent, useRoomEngineEvent, useUiEvent } from '../../hooks';
 import { CreateMessageHook } from '../../hooks/messages/message-event';
-import { TransitionAnimation } from '../../layout/transitions/TransitionAnimation';
-import { TransitionAnimationTypes } from '../../layout/transitions/TransitionAnimation.types';
 import { AvatarImageView } from '../../views/shared/avatar-image/AvatarImageView';
 import { ItemCountView } from '../../views/shared/item-count/ItemCountView';
 import { ToolbarViewItems } from './common/ToolbarViewItems';
--- a/src/components/user-profile/UserProfileView.tsx
+++ b/src/components/user-profile/UserProfileView.tsx
@ -1,9 +1,8 @@
 import { RelationshipStatusInfoEvent, RelationshipStatusInfoMessageParser, UserCurrentBadgesComposer, UserCurrentBadgesEvent, UserProfileEvent, UserProfileParser, UserRelationshipsComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { GetSessionDataManager, GetUserProfile, LocalizeText } from '../../api';
-import { Column, Flex, Grid } from '../../common';
+import { Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
 import { BatchUpdates, CreateMessageHook, SendMessageHook } from '../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
 import { BadgesContainerView } from './views/BadgesContainerView';
 import { FriendsContainerView } from './views/FriendsContainerView';
 import { GroupsContainerView } from './views/GroupsContainerView';
--- a/src/components/user-profile/views/BadgesContainerView.tsx
+++ b/src/components/user-profile/views/BadgesContainerView.tsx
@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { NitroCardGridItemView, NitroCardGridView } from '../../../layout';
+import { Grid, LayoutGridItem } from '../../../common';
 import { BadgeImageView } from '../../../views/shared/badge-image/BadgeImageView';

 interface BadgesContainerViewProps
@ -13,16 +13,16 @@ export const BadgesContainerView: FC<BadgesContainerViewProps> = props =>

    return (
        <div className="row">
-            <NitroCardGridView>
+            <Grid>
                { badges && (badges.length > 0) && badges.map((badge, index) =>
                        {
                            return (
-                                <NitroCardGridItemView key={ index }>
+                                <LayoutGridItem key={ index }>
                                    <BadgeImageView badgeCode={ badge }/>
-                                </NitroCardGridItemView>
+                                </LayoutGridItem>
                            )
                        }) }
-            </NitroCardGridView>
+            </Grid>
        </div>
    )
 }
--- a/src/components/user-settings/UserSettingsView.tsx
+++ b/src/components/user-settings/UserSettingsView.tsx
@ -2,11 +2,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { NitroSettingsEvent, UserSettingsCameraFollowComposer, UserSettingsEvent, UserSettingsOldChatComposer, UserSettingsRoomInvitesComposer, UserSettingsSoundComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../api';
-import { Column, Flex, Text } from '../../common';
+import { Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
 import { UserSettingsUIEvent } from '../../events/user-settings/UserSettingsUIEvent';
 import { CreateMessageHook, dispatchMainEvent, SendMessageHook, useUiEvent } from '../../hooks';
-import { NitroCardContentView, NitroCardHeaderView } from '../../layout';
-import { NitroCardView } from '../../layout/card/NitroCardView';

 export const UserSettingsView: FC<{}> = props =>
 {
--- a/src/components/wired/views/WiredBaseView.tsx
+++ b/src/components/wired/views/WiredBaseView.tsx
@ -1,5 +1,6 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { GetSessionDataManager, LocalizeText } from '../../../api';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../common';
 import { Button } from '../../../common/Button';
 import { Column } from '../../../common/Column';
 import { Flex } from '../../../common/Flex';
@ -7,7 +8,6 @@ import { Text } from '../../../common/Text';
 import { WiredEvent } from '../../../events';
 import { BatchUpdates } from '../../../hooks';
 import { dispatchUiEvent } from '../../../hooks/events';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../layout';
 import { WiredFurniType } from '../common/WiredFurniType';
 import { WiredSelectionVisualizer } from '../common/WiredSelectionVisualizer';
 import { useWiredContext } from '../context/WiredContext';
--- a/src/events/catalog/index.ts
+++ b/src/events/catalog/index.ts
@ -1,8 +1,15 @@
 export * from './CatalogEvent';
+export * from './CatalogGiftReceiverNotFoundEvent';
+export * from './CatalogInitGiftEvent';
+export * from './CatalogInitPurchaseEvent';
 export * from './CatalogNameResultEvent';
+export * from './CatalogPostMarketplaceOfferEvent';
 export * from './CatalogPurchasedEvent';
 export * from './CatalogPurchaseFailureEvent';
 export * from './CatalogPurchaseNotAllowedEvent';
+export * from './CatalogPurchaseOverrideEvent';
 export * from './CatalogPurchaseSoldOutEvent';
 export * from './CatalogSetExtraPurchaseParameterEvent';
+export * from './CatalogSetRoomPreviewerStuffDataEvent';
+export * from './CatalogWidgetEvent';
 export * from './SetRoomPreviewerStuffDataEvent';
--- a/src/events/floorplan-editor/index.ts
+++ b/src/events/floorplan-editor/index.ts
@ -0,0 +1 @@
+export * from './FloorplanEditorEvent';
--- a/src/events/hc-center/index.ts
+++ b/src/events/hc-center/index.ts
@ -0,0 +1 @@
+export * from './HcCenterEvent';
--- a/src/events/help/index.ts
+++ b/src/events/help/index.ts
@ -0,0 +1,2 @@
+export * from './HelpNameChangeEvent';
+export * from './HelpReportUserEvent';
--- a/src/events/index.ts
+++ b/src/events/index.ts
@ -1,10 +1,17 @@
+export * from './achievements';
 export * from './avatar-editor';
 export * from './camera';
 export * from './catalog';
+export * from './floorplan-editor';
 export * from './friends';
 export * from './guide-tool';
+export * from './hc-center';
+export * from './help';
 export * from './inventory';
+export * from './mod-tools';
 export * from './navigator';
 export * from './notification-center';
 export * from './room-widgets';
+export * from './room-widgets/thumbnail';
+export * from './user-settings';
 export * from './wired';
--- a/src/events/inventory/index.ts
+++ b/src/events/inventory/index.ts
@ -1,3 +1,4 @@
+export * from './InventoryBadgesRequestEvent';
 export * from './InventoryBadgesUpdatedEvent';
 export * from './InventoryEvent';
 export * from './InventoryTradeRequestEvent';
--- a/src/events/mod-tools/index.ts
+++ b/src/events/mod-tools/index.ts
@ -0,0 +1,5 @@
+export * from './ModToolsEvent';
+export * from './ModToolsOpenRoomChatlogEvent';
+export * from './ModToolsOpenRoomInfoEvent';
+export * from './ModToolsOpenUserChatlogEvent';
+export * from './ModToolsOpenUserInfoEvent';
--- a/src/events/user-settings/index.ts
+++ b/src/events/user-settings/index.ts
@ -0,0 +1 @@
+export * from './UserSettingsUIEvent';
--- a/src/layout/Layout.scss
+++ b/src/layout/Layout.scss
@ -1,34 +0,0 @@
-.nitro-text-shadow {
-    text-shadow: 2px 2px 0px rgba(0, 0, 0, .2)
-}
-
-.nitro-close {
-    right: 5px;
-    border-radius: $border-radius;
-    box-shadow: inset 0 0 0 1.5px #921911, inset 0 2px rgba($white, .2);
-    border: 1px solid $white;
-    background: rgb(245,80,65);
-    background: linear-gradient(180deg, rgba(245,80,65,1) 0%, rgba(245,80,65,1) 50%, rgba(194,48,39,1) 50%, rgba(194,48,39,1) 100%);
-    cursor: pointer;
-    line-height: 1;
-    padding: 4px 6px;
-
-    &:hover {
-        filter: brightness(1.2);
-    }
-
-    &:active {
-        filter: brightness(0.8);
-    }
-}
-
-@import './card/NitroCardView';
-@import './draggable-window/DraggableWindow';
-@import './loading-habbos/LoadingHabbosView';
-@import './loading-spinner/LoadingSpinnerView';
-@import './mini-camera/NitroLayoutMiniCameraView';
-@import './notification-alert/NotificationAlertView';
-@import './notification-bubble/NotificationBubbleView';
-@import './room-thumbnail/RoomThumbnailView';
-@import './trophy/NitroLayoutTrophyView';
-@import './gift-card/NitroLayoutGiftCardView';
--- a/src/layout/base/NitroLayoutBase.tsx
+++ b/src/layout/base/NitroLayoutBase.tsx
@ -1,28 +0,0 @@
-import { FC, useMemo } from 'react';
-import { NitroLayoutBaseProps } from './NitroLayoutBase.types';
-
-export const NitroLayoutBase: FC<NitroLayoutBaseProps> = props =>
-{
-    const { className = '', overflow = null, position = null, gap = null, ref = null, innerRef = null, children = null, ...rest } = props;
-
-    const getClassName = useMemo(() =>
-    {
-        let newClassName = '';
-
-        if(overflow && overflow.length) newClassName += ` overflow-${ overflow }`;
-
-        if(position && position.length) newClassName += ` position-${ position }`;
-
-        if(gap && gap >= 1) newClassName += ` gap-${ gap }`;
-
-        if(className && className.length) newClassName += ` ${ className }`;
-
-        return newClassName;
-    }, [ className, overflow, position, gap ]);
-
-    return (
-        <div className={ getClassName } ref={ innerRef } { ...rest }>
-            { children }
-        </div>
-    );
-}
--- a/src/layout/base/NitroLayoutBase.types.ts
+++ b/src/layout/base/NitroLayoutBase.types.ts
@ -1,10 +0,0 @@
-import { DetailedHTMLProps, HTMLAttributes, LegacyRef } from 'react';
-import { NitroLayoutOverflow, NitroLayoutPosition, NitroLayoutSpacing } from '../common';
-
-export interface NitroLayoutBaseProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
-{
-    innerRef?: LegacyRef<HTMLDivElement>;
-    overflow?: NitroLayoutOverflow;
-    position?: NitroLayoutPosition;
-    gap?: NitroLayoutSpacing;
-}
--- a/src/layout/base/index.ts
+++ b/src/layout/base/index.ts
@ -1,2 +0,0 @@
-export * from './NitroLayoutBase';
-export * from './NitroLayoutBase.types';
--- a/src/layout/button-group/NitroLayoutButtonGroup.tsx
+++ b/src/layout/button-group/NitroLayoutButtonGroup.tsx
@ -1,19 +0,0 @@
-import { FC, useMemo } from 'react';
-import { NitroLayoutBase } from '../base';
-import { NitroLayoutButtonGroupProps } from './NitroLayoutButtonGroup.types';
-
-export const NitroLayoutButtonGroup: FC<NitroLayoutButtonGroupProps> = props =>
-{
-    const { className = '', ...rest } = props;
-
-    const getClassName = useMemo(() =>
-    {
-        let newClassName = 'btn-group';
-
-        if(className && className.length) newClassName += ` ${ className }`;
-
-        return newClassName;
-    }, [ className ]);
-
-    return <NitroLayoutBase className={ getClassName } { ...rest } />;
-}
--- a/src/layout/button-group/NitroLayoutButtonGroup.types.ts
+++ b/src/layout/button-group/NitroLayoutButtonGroup.types.ts
@ -1,6 +0,0 @@
-import { NitroLayoutBaseProps } from '../base';
-
-export interface NitroLayoutButtonGroupProps extends NitroLayoutBaseProps
-{
-
-}
--- a/src/layout/button-group/index.ts
+++ b/src/layout/button-group/index.ts
@ -1,2 +0,0 @@
-export * from './NitroLayoutButtonGroup';
-export * from './NitroLayoutButtonGroup.types';
--- a/src/layout/button/NitroLayoutButton.tsx
+++ b/src/layout/button/NitroLayoutButton.tsx
@ -1,26 +0,0 @@
-import { FC, useMemo } from 'react';
-import { NitroLayoutButtonProps } from './NitroLayoutButton.types';
-
-export const NitroLayoutButton: FC<NitroLayoutButtonProps> = props =>
-{
-    const { className = '', variant = 'primary', size = null, children = null, ...rest } = props;
-
-    const getClassName = useMemo(() =>
-    {
-        let newClassName = 'd-flex justify-content-center align-items-center btn';
-
-        if(variant && variant.length) newClassName += ` btn-${ variant }`;
-
-        if(size && size.length) newClassName += ` btn-${ size }`;
-
-        if(className && className.length) newClassName += ` ${ className }`;
-
-        return newClassName;
-    }, [ className, variant, size ]);
-
-    return (
-        <button type="button" className={ getClassName } { ...rest }>
-            { children }
-        </button>
-    );
-}
--- a/src/layout/button/NitroLayoutButton.types.ts
+++ b/src/layout/button/NitroLayoutButton.types.ts
@ -1,8 +0,0 @@
-import { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
-import { NitroLayoutButtonSize, NitroLayoutVariant } from '../common';
-
-export interface NitroLayoutButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
-{
-    variant?: NitroLayoutVariant;
-    size?: NitroLayoutButtonSize;
-}
--- a/Show More
+++ b/Show More