From 26f5445971697ccadd15df072823f24b0e27e7ad Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Sun, 2 May 2021 00:16:03 -0400
Subject: [PATCH] Inventory updates

---
 src/views/inventory/InventoryView.tsx         | 31 ++++++-------------
 .../views/badge/InventoryBadgeView.tsx        |  2 +-
 .../inventory/views/bot/InventoryBotView.tsx  |  2 +-
 .../furniture/InventoryFurnitureView.tsx      |  4 +--
 .../inventory/views/pet/InventoryPetView.tsx  |  2 +-
 5 files changed, 15 insertions(+), 26 deletions(-)

diff --git a/src/views/inventory/InventoryView.tsx b/src/views/inventory/InventoryView.tsx
index 630abf4a..87f39996 100644
--- a/src/views/inventory/InventoryView.tsx
+++ b/src/views/inventory/InventoryView.tsx
@@ -1,12 +1,11 @@
-import classNames from 'classnames';
 import { IRoomSession, RoomEngineObjectEvent, RoomEngineObjectPlacedEvent, RoomPreviewer, RoomSessionEvent } from 'nitro-renderer';
 import { FC, useCallback, useEffect, useReducer, useState } from 'react';
 import { GetRoomEngine } from '../../api';
 import { InventoryEvent } from '../../events';
-import { DraggableWindow } from '../../hooks/draggable-window/DraggableWindow';
 import { useRoomEngineEvent } from '../../hooks/events/nitro/room/room-engine-event';
 import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
 import { useUiEvent } from '../../hooks/events/ui/ui-event';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../layout';
 import { LocalizeText } from '../../utils/LocalizeText';
 import { InventoryContextProvider } from './context/InventoryContext';
 import { InventoryMessageHandler } from './InventoryMessageHandler';
@@ -100,25 +99,16 @@ export const InventoryView: FC<InventoryViewProps> = props =>
     return (
         <InventoryContextProvider value={ { furnitureState, dispatchFurnitureState, botState, dispatchBotState, petState, dispatchPetState, badgeState, dispatchBadgeState } }>
             <InventoryMessageHandler />
-            { isVisible && <DraggableWindow handle=".drag-handler">
-                <div className="nitro-inventory d-flex flex-column">
-                    <div className="drag-handler d-flex align-items-center bg-primary border border-bottom-0 rounded-top px-3 py-1">
-                        <div className="d-flex flex-grow-1 justify-content-center align-items-center">
-                            <div className="h4 m-0 text-white text-shadow">{ LocalizeText('inventory.title') }</div>
-                        </div>
-                        <div className="cursor-pointer" onClick={ event => setIsVisible(false) }>
-                            <i className="fas fa-times"></i>
-                        </div>
-                    </div>
-                    <ul className="nav nav-tabs justify-content-center bg-secondary border-start border-end px-3 pt-1">
+            { isVisible &&
+                <NitroCardView className="nitro-inventory">
+                    <NitroCardHeaderView headerText={ LocalizeText('inventory.title') } onCloseClick={ event => setIsVisible(false) } />
+                    <NitroCardTabsView>
                         { tabs.map((name, index) =>
                             {
-                                return <li key={ index } className="nav-item me-1 cursor-pointer" onClick={ event => setCurrentTab(name) } >
-                                    <span className={ 'nav-link ' + classNames({ 'active': (currentTab === name) }) }>{ LocalizeText(name) }</span>
-                                </li>;
+                                return <NitroCardTabsItemView key={ index } tabText={ LocalizeText(name) } isActive={ (currentTab === name) } onClick={ event => setCurrentTab(name) } />
                             }) }
-                    </ul>
-                    <div className="bg-light rounded-bottom border border-top-0 px-3 py-2 shadow overflow-hidden content-area">
+                    </NitroCardTabsView>
+                    <NitroCardContentView>
                         { (currentTab === InventoryTabs.FURNITURE ) &&
                             <InventoryFurnitureView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
                         { (currentTab === InventoryTabs.BOTS ) &&
@@ -127,9 +117,8 @@ export const InventoryView: FC<InventoryViewProps> = props =>
                             <InventoryPetView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
                         { (currentTab === InventoryTabs.BADGES ) && 
                             <InventoryBadgeView /> }
-                    </div>
-                </div>
-            </DraggableWindow> }
+                    </NitroCardContentView>
+                </NitroCardView> }
         </InventoryContextProvider>
     );
 }
diff --git a/src/views/inventory/views/badge/InventoryBadgeView.tsx b/src/views/inventory/views/badge/InventoryBadgeView.tsx
index 4f0eeaf4..b5509284 100644
--- a/src/views/inventory/views/badge/InventoryBadgeView.tsx
+++ b/src/views/inventory/views/badge/InventoryBadgeView.tsx
@@ -80,7 +80,7 @@ export const InventoryBadgeView: FC<InventoryBadgeViewProps> = props =>
                 <div className="col-7">
                     <InventoryBadgeResultsView badges={ badges } activeBadges={ activeBadges }  />
                 </div>
-                <div className="col-5">
+                <div className="col">
                     <p className="mb-1 text-black">{ LocalizeText('inventory.badges.activebadges') }</p>
                     <InventoryActiveBadgeResultsView badges={ activeBadges }  />
                 </div>
diff --git a/src/views/inventory/views/bot/InventoryBotView.tsx b/src/views/inventory/views/bot/InventoryBotView.tsx
index 09600141..bfcb5589 100644
--- a/src/views/inventory/views/bot/InventoryBotView.tsx
+++ b/src/views/inventory/views/bot/InventoryBotView.tsx
@@ -85,7 +85,7 @@ export const InventoryBotView: FC<InventoryBotViewProps> = props =>
             <div className="col-7">
                 <InventoryBotResultsView botItems={ botItems }  />
             </div>
-            <div className="d-flex flex-column col-5 justify-space-between">
+            <div className="d-flex flex-column col justify-space-between">
                 <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
                 { botItem && <div className="d-flex flex-column flex-grow-1">
                     <p className="flex-grow-1 fs-6 text-black my-2">{ botItem.botData.name }</p>
diff --git a/src/views/inventory/views/furniture/InventoryFurnitureView.tsx b/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
index 487e9027..67609c41 100644
--- a/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
+++ b/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
@@ -116,11 +116,11 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
 
     return (
         <div className="row h-100">
-            <div className="col col-7">
+            <div className="col-7">
                 <InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
                 <InventoryFurnitureResultsView groupItems={ filteredGroupItems }  />
             </div>
-            <div className="d-flex flex-column col col-5 justify-space-between">
+            <div className="d-flex flex-column col justify-space-between">
                 <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
                 { groupItem && <div className="d-flex flex-column flex-grow-1">
                     <p className="flex-grow-1 fs-6 text-black my-2">{ groupItem.name }</p>
diff --git a/src/views/inventory/views/pet/InventoryPetView.tsx b/src/views/inventory/views/pet/InventoryPetView.tsx
index 8e5fa8af..036bb532 100644
--- a/src/views/inventory/views/pet/InventoryPetView.tsx
+++ b/src/views/inventory/views/pet/InventoryPetView.tsx
@@ -85,7 +85,7 @@ export const InventoryPetView: FC<InventoryPetViewProps> = props =>
             <div className="col-7">
                 <InventoryPetResultsView petItems={ petItems }  />
             </div>
-            <div className="d-flex flex-column col-5 justify-space-between">
+            <div className="d-flex flex-column col justify-space-between">
                 <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
                 { petItem && <div className="d-flex flex-column flex-grow-1">
                     <p className="flex-grow-1 fs-6 text-black my-2">{ petItem.petData.name }</p>