🆙 Move CSS into componets as we use Tailwind

src/common/layout/LayoutMiniCameraView.tsx

@@ -33,14 +33,14 @@ export const LayoutMiniCameraView: FC<LayoutMiniCameraViewProps> = props => {
 
     return (
         <DraggableWindow handleSelector=".nitro-room-thumbnail-camera">
-            <div className="nitro-room-thumbnail-camera px-2">
+            <div className="nitro-room-thumbnail-camera w-[132px] h-[192px] bg-[url('@/assets/images/room-widgets/thumbnail-widget/thumbnail-camera-spritesheet.png')] px-2">
                 <div
                     style={{
                         position: 'relative',
                         paddingBottom: '192px', // Matches the space needed to position buttons as per the design
                     }}
                 >
-                    <div ref={elementRef} className="camera-frame" />
+                    <div ref={elementRef} className="absolute mt-[30px] ml-[3px] w-[110px] h-[110px]" />
                     <div
                         style={{
                             position: 'absolute',

src/components/chat-history/ChatHistoryView.tsx

@@ -74,9 +74,9 @@ export const ChatHistoryView: FC<{}> = props => {
     if (!isVisible) return null;
 
     return (
-        <NitroCardView className="nitro-chat-history" theme="primary-slim" uniqueKey="chat-history">
+        <NitroCardView className="w-[400px] h-[400px] bg-[#f0f0f0]" theme="primary-slim" uniqueKey="chat-history">
             <NitroCardHeaderView headerText={LocalizeText('room.chathistory.button.text')} onCloseClick={event => setIsVisible(false)} />
-            <NitroCardContentView className="nitro-card-content" gap={2} overflow="hidden" style={{ height: 'calc(100% - 40px)', display: 'flex', flexDirection: 'column' }}>
+            <NitroCardContentView className="h-full bg-[#f0f0f0] bg-[url('@/assets/images/chat/chathistory_background.png')] bg-repeat bg-auto" gap={2} overflow="hidden" style={{ height: 'calc(100% - 40px)', display: 'flex', flexDirection: 'column' }}>
                 <NitroInput placeholder={LocalizeText('generic.search')} type="text" value={searchText} onChange={event => setSearchText(event.target.value)} />
                 <div ref={elementRef} style={{ flex: 1, overflowY: 'auto', background: 'inherit' }}>
                     {filteredChatHistory.map((row, index) => (

src/components/floorplan-editor/FloorplanEditorView.tsx

@@ -142,7 +142,7 @@ export const FloorplanEditorView: FC<{}> = props =>
     return (
         <FloorplanEditorContextProvider value={ { originalFloorplanSettings: originalFloorplanSettings, setOriginalFloorplanSettings: setOriginalFloorplanSettings, visualizationSettings: visualizationSettings, setVisualizationSettings: setVisualizationSettings } }>
             { isVisible &&
-                <NitroCardView uniqueKey="floorpan-editor" className="nitro-floorplan-editor" theme="primary-slim">
+                <NitroCardView uniqueKey="floorpan-editor" className="w-[760px] h-[500px]" theme="primary-slim">
                     <NitroCardHeaderView headerText={ LocalizeText('floor.plan.editor.title') } onCloseClick={ () => setIsVisible(false) } />
                     <NitroCardContentView overflow="hidden">
                         <FloorplanOptionsView onCanvasScroll={ direction => canvasScrollHandler && canvasScrollHandler(direction) } />

src/components/floorplan-editor/views/FloorplanImportExportView.tsx

@@ -37,7 +37,7 @@ export const FloorplanImportExportView: FC<FloorplanImportExportViewProps> = pro
     }, []);
 
     return (
-        <NitroCardView theme="primary-slim" className="floorplan-import-export">
+        <NitroCardView theme="primary-slim" className="w-[630px] h-[475px]">
             <NitroCardHeaderView headerText={ LocalizeText('floor.plan.editor.import.export') } onCloseClick={ onCloseClick } />
             <NitroCardContentView>
                 <textarea className="h-100" value={ map } onChange={ event => setMap(event.target.value) } />

src/components/floorplan-editor/views/FloorplanOptionsView.tsx

@@ -171,7 +171,7 @@ export const FloorplanOptionsView: FC<FloorplanOptionsViewProps> = props =>
                     <Text bold>{ LocalizeText('floor.editor.wall.height') }</Text>
                     <Flex alignItems="center" gap={ 1 }>
                         <FaCaretLeft className="cursor-pointer fa-icon" onClick={ decreaseWallHeight } />
-                        <input type="number" className="form-control form-control-sm quantity-input" value={ visualizationSettings.wallHeight } onChange={ event => onWallHeightChange(event.target.valueAsNumber) } />
+                        <input type="number" className="form-control form-control-sm w-[49px]" value={ visualizationSettings.wallHeight } onChange={ event => onWallHeightChange(event.target.valueAsNumber) } />
                         <FaCaretRight className="cursor-pointer fa-icon" onClick={ increaseWallHeight } />
                     </Flex>
                 </Column>

src/components/inventory/InventoryView.tsx

@@ -127,7 +127,7 @@ export const InventoryView: FC<{}> = props =>
 
     return (
         <>
-            <NitroCardView className="nitro-inventory" uniqueKey="inventory">
+            <NitroCardView className="w-[528px] h-[420px] min-w-[528px] min-h-[420px]" uniqueKey="inventory">
                 <NitroCardHeaderView
                     headerText={ LocalizeText('inventory.title') }
                     onCloseClick={ onClose } />

src/components/inventory/views/InventoryCategoryEmptyView.tsx

@@ -14,7 +14,7 @@ export const InventoryCategoryEmptyView: FC<InventoryCategoryEmptyViewProps> = p
     return (
         <Grid { ...rest }>
             <Column center overflow="hidden" size={ 5 }>
-                <div className="empty-image" />
+                <div className="w-[129px] h-[181px] bg-[url('@/assets/images/inventory/empty.png')] bg-no-repeat" />
             </Column>
             <Column justifyContent="center" overflow="hidden" size={ 7 }>
                 <Text truncate fontSize={ 5 } fontWeight="bold" overflow="unset">{ title }</Text>

src/components/inventory/views/furniture/InventoryFurnitureDeleteView.tsx

@@ -84,7 +84,7 @@ export const InventoryFurnitureDeleteView: FC<{}> = props =>
                                 className="cursor-pointer text-black fa-icon shrink-0"
                                 onClick={ () => updateAmount((amount - 1).toString()) } />
                             <NitroInput
-                                className="quantity-input text-center py-0.5!"
+                                className="w-[49px] text-center py-0.5!"
                                 type="number"
                                 min={ 1 }
                                 max={ maxAmount }

src/components/inventory/views/furniture/InventoryTradeView.tsx

@@ -189,7 +189,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
                             return (
                                 <LayoutGridItem key={ index } className={ !count ? 'opacity-0-5 ' : '' } itemActive={ (groupItem === item) } itemCount={ count } itemImage={ item.iconUrl } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => (count && setGroupItem(item)) } onDoubleClick={ event => attemptItemOffer(1) }>
                                     { ((count > 0) && (groupItem === item)) &&
-                                        <Button className="trade-button bottom-1 inset-e-1" position="absolute" variant="success" onClick={ event => attemptItemOffer(1) }>
+                                        <Button className="bottom-1 inset-e-1 z-[5] min-h-0 text-[8px] px-[2px] py-[1px]" position="absolute" variant="success" onClick={ event => attemptItemOffer(1) }>
                                             <FaChevronRight className="fa-icon" />
                                         </Button>
                                     }
@@ -200,7 +200,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
                     <Column alignItems="end" gap={ 1 }>
                         <Grid overflow="hidden">
                             <Column overflow="hidden" size={ 6 }>
-                                <input className="min-h-[calc(1.5em+ .5rem+2px)] px-[.5rem] py-[.25rem]  rounded-[.2rem] form-control-sm quantity-input" disabled={ !groupItem } placeholder={ LocalizeText('catalog.bundlewidget.spinner.select.amount') } type="number" value={ quantity } onChange={ event => setQuantity(event.target.valueAsNumber) } />
+                                <input className="w-[49px] min-h-[calc(1.5em+ .5rem+2px)] px-[.5rem] py-[.25rem] rounded-[.2rem] form-control-sm" disabled={ !groupItem } placeholder={ LocalizeText('catalog.bundlewidget.spinner.select.amount') } type="number" value={ quantity } onChange={ event => setQuantity(event.target.valueAsNumber) } />
                             </Column>
                             <Column overflow="hidden" size={ 6 }>
                                 <Button disabled={ !groupItem } variant="secondary" onClick={ event => changeCount(groupItem.getUnlockedCount()) }>{ LocalizeText('inventory.trading.areoffering') }</Button>
@@ -229,7 +229,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
                                 return (
                                     <LayoutGridItem key={ i } itemActive={ (ownGroupItem === item) } itemCount={ item.getTotalCount() } itemImage={ item.iconUrl } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOwnGroupItem(item) } onDoubleClick={ event => removeItem(item) }>
                                         { (ownGroupItem === item) &&
-                                            <Button className="trade-button bottom-1 inset-s-1" position="absolute" variant="danger" onClick={ event => removeItem(item) }>
+                                            <Button className="bottom-1 inset-s-1 z-[5] min-h-0 text-[8px] px-[2px] py-[1px]" position="absolute" variant="danger" onClick={ event => removeItem(item) }>
                                                 <FaChevronLeft className="fa-icon" />
                                             </Button> }
                                     </LayoutGridItem>

src/components/loading/LoadingView.tsx

@@ -10,15 +10,15 @@ export const LoadingView: FC<LoadingViewProps> = props => {
     const { isError = false, message = '' } = props;
     
     return (
-        <Column fullHeight position="relative" className="nitro-loading">
+        <Column fullHeight position="relative" className="relative z-[100] bg-[radial-gradient(#1d1a24,#003a6b)]">
             <Base fullHeight className="container h-100">
                 <Column fullHeight alignItems="center" justifyContent="center">
-                    <Base className="nitro-loading_animation" />
+                    <Base className="absolute inset-0 m-auto w-[84px] h-[84px] [zoom:1.5] [image-rendering:pixelated] bg-[url('@/assets/images/loading/loading.gif')] bg-no-repeat bg-left-top" />
-                    <Base className="nitro-loading_logo" />
+                    <Base className="absolute top-[20px] left-[20px] z-[2] w-[150px] h-[100px] bg-[url('@/assets/images/notifications/coolui.png')] bg-no-repeat bg-left-top" />
                     { isError && (message && message.length) ?
-                        <Base className="fs-4 nitro-loading_text">{ message }</Base>
+                        <Base className="fs-4 absolute bottom-[20px] left-1/2 z-[3] -translate-x-1/2 [text-shadow:0px_4px_4px_rgba(0,0,0,0.25)]">{ message }</Base>
                         :
-                        <Text fontSizeCustom={32} variant="white" className="nitro-loading_text">
+                        <Text fontSizeCustom={32} variant="white" className="absolute bottom-[20px] left-1/2 z-[3] -translate-x-1/2 [text-shadow:0px_4px_4px_rgba(0,0,0,0.25)]">
                             The hotel is loading ...
                         </Text>
                     }

src/css/chat/ChatHistoryView.css

@@ -1,28 +0,0 @@
-.nitro-chat-history {
-	background-color: #f0f0f0;
-	width: 400px;
-    height: 400px;
-	}
-
-.nitro-chat-history .nitro-card-content {
-	height: 100%;
-	background-image: url('@/assets/images/chat/chathistory_background.png');
-	background-repeat: repeat;
-	background-size: auto;
-	background-color: #f0f0f0;
-}
-
-.nitro-chat-history .p-1.slide-in {
-    animation: slideIn 0.3s ease-out;
-}
-
-@keyframes slideIn {
-    0% {
-        transform: translateY(-20px);
-        opacity: 0;
-    }
-    100% {
-        transform: translateY(0);
-        opacity: 1;
-    }
-}

src/css/common/MiniCamera.css

@@ -1,13 +0,0 @@
-.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: 30px;
-        margin-left: 3px;
-    }
-}

src/css/floorplan/FloorplanEditorView.css

@@ -1,9 +0,0 @@
-.nitro-floorplan-editor {
-    width: 760px;
-    height: 500px;
-}
-
-.floorplan-import-export {
-    width: 630px;
-    height: 475px;
-}

src/css/inventory/Inventory.css

@@ -1,29 +0,0 @@
-:root {
-    --inventory-width: 528px;
-    --inventory-height: 420px;
-}
-
-.nitro-inventory {
-    width: var(--inventory-width);
-    height: var(--inventory-height);
-    min-width: var(--inventory-width);
-    min-height: var(--inventory-height);
-}
-
-.empty-image {
-    background: url("@/assets/images/inventory/empty.png");
-    background-repeat: no-repeat;
-    width: 129px;
-    height: 181px;
-}
-
-.trade-button {
-    min-height: 0;
-    font-size: 8px;
-    padding: 1px 2px;
-    z-index: 5;
-}
-
-.quantity-input {
-    width: 49px;
-}

src/css/loading/loading.css

@@ -1,38 +0,0 @@
-.nitro-loading {
-    position: relative;
-    background-image: radial-gradient(#1d1a24, #003a6b);
-    z-index: 100;
-}
-
-.nitro-loading_animation {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    margin: auto;
-    right: 0;
-    left: 0;
-    background: url('@/assets/images/loading/loading.gif') no-repeat top left;
-    width: 84px;
-    height: 84px;
-    zoom: 1.5;
-    image-rendering: pixelated;
-}
-
-.nitro-loading_logo {
-    position: absolute;
-    top: 20px;
-    left: 20px;
-    background: url('@/assets/images/notifications/coolui.png') no-repeat top left;
-    width: 150px;
-    height: 100px;
-	z-index: 2;
-}
-
-.nitro-loading_text {
-    position: absolute;
-    bottom: 20px;
-    left: 50%;
-    transform: translateX(-50%);
-    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-    z-index: 3;
-}

src/css/room/ChatHistoryView.css

@@ -1,4 +0,0 @@
-.nitro-chat-history {
-    width: 300px;
-    height: 200px;
-}

src/index.tsx

@@ -6,12 +6,9 @@ import './css/index.css';
 import './css/backgrounds/BackgroundsView.css';
 
 import './css/chat/Chats.css';
-import './css/chat/ChatHistoryView.css';
 
-import './css/common/MiniCamera.css';
 import './css/common/Buttons.css';
 
-import './css/floorplan/FloorplanEditorView.css';
 
 import './css/forms/form_select.css';
 
@@ -19,11 +16,9 @@ import './css/hotelview/HotelView.css';
 
 import './css/icons/icons.css';
 
-import './css/inventory/Inventory.css';
 
 import './css/layout/LayoutTrophy.css';
 
-import './css/loading/loading.css';
 
 import './css/nitrocard/NitroCardView.css';