From b486f17e3fbaad31f8a89fe778cd673b8c3d598e Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Sat, 4 Dec 2021 01:27:54 -0500
Subject: [PATCH] Update inventory

---
 .../furniture/InventoryFurnitureView.tsx      | 28 +++++++++----------
 .../results/InventoryFurnitureResultsView.tsx |  8 +++---
 .../InventoryFurnitureResultsView.types.ts    |  1 -
 .../search/InventoryFurnitureSearchView.tsx   | 19 ++++++-------
 4 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/src/views/inventory/views/furniture/InventoryFurnitureView.tsx b/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
index bdddaf0f..fce5f0ff 100644
--- a/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
+++ b/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
@@ -1,12 +1,12 @@
 import { FurnitureListComposer, RoomObjectVariable, Vector3d } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { GetRoomEngine, GetSessionDataManager, LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Grid } from '../../../../common/Grid';
+import { Text } from '../../../../common/Text';
 import { SendMessageHook } from '../../../../hooks/messages';
 import { NitroLayoutButton } from '../../../../layout';
 import { NitroLayoutBase } from '../../../../layout/base';
-import { NitroLayoutFlexColumn } from '../../../../layout/flex-column/NitroLayoutFlexColumn';
-import { NitroLayoutGridColumn } from '../../../../layout/grid/column/NitroLayoutGridColumn';
-import { NitroLayoutGrid } from '../../../../layout/grid/NitroLayoutGrid';
 import { LimitedEditionCompactPlateView } from '../../../shared/limited-edition/compact-plate/LimitedEditionCompactPlateView';
 import { RarityLevelView } from '../../../shared/rarity-level/RarityLevelView';
 import { RoomPreviewerView } from '../../../shared/room-previewer/RoomPreviewerView';
@@ -107,13 +107,13 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
     if(!groupItems || !groupItems.length) return <InventoryCategoryEmptyView title={ LocalizeText('inventory.empty.title') } desc={ LocalizeText('inventory.empty.desc') } />;
 
     return (
-        <NitroLayoutGrid>
-            <NitroLayoutGridColumn size={ 7 }>
+        <Grid>
+            <Column size={ 7 } overflow="hidden">
                 <InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
                 <InventoryFurnitureResultsView groupItems={ filteredGroupItems }  />
-            </NitroLayoutGridColumn>
-            <NitroLayoutGridColumn size={ 5 } overflow="auto">
-                <NitroLayoutFlexColumn overflow="hidden" position="relative">
+            </Column>
+            <Column size={ 5 } overflow="auto">
+                <Column overflow="hidden" position="relative">
                     <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
                     { groupItem && groupItem.stuffData.isUnique &&
                         <NitroLayoutBase className="top-2 end-2" position="absolute">
@@ -123,16 +123,16 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
                         <NitroLayoutBase className="top-2 end-2" position="absolute">
                             <RarityLevelView level={ groupItem.stuffData.rarityLevel } />
                         </NitroLayoutBase> }
-                </NitroLayoutFlexColumn>
+                </Column>
                 { groupItem &&
-                    <NitroLayoutFlexColumn className="flex-grow-1" gap={ 2 }>
-                        <NitroLayoutBase className="flex-grow-1 text-black text-truncate">{ groupItem.name }</NitroLayoutBase>
+                    <Column grow justifyContent="between" gap={ 2 }>
+                        <Text>{ groupItem.name }</Text>
                         { !!roomSession &&
                             <NitroLayoutButton variant="success" size="sm" onClick={ event => attemptItemPlacement(groupItem) }>
                                 { LocalizeText('inventory.furni.placetoroom') }
                             </NitroLayoutButton> }
-                    </NitroLayoutFlexColumn> }
-            </NitroLayoutGridColumn>
-        </NitroLayoutGrid>
+                    </Column> }
+            </Column>
+        </Grid>
     );
 }
diff --git a/src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.tsx b/src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.tsx
index 34564f89..54e9ef36 100644
--- a/src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.tsx
+++ b/src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.tsx
@@ -1,18 +1,18 @@
 import { FC } from 'react';
-import { NitroCardGridView } from '../../../../../layout/card/grid/NitroCardGridView';
+import { Grid } from '../../../../../common/Grid';
 import { InventoryFurnitureItemView } from '../item/InventoryFurnitureItemView';
 import { InventoryFurnitureResultsViewProps } from './InventoryFurnitureResultsView.types';
 
 export const InventoryFurnitureResultsView: FC<InventoryFurnitureResultsViewProps> = props =>
 {
-    const { groupItems = [], columns = 5 } = props;
+    const { groupItems = [] } = props;
 
     return (
-        <NitroCardGridView>
+        <Grid grow columnCount={ 5 } overflow="auto">
             { groupItems && (groupItems.length > 0) && groupItems.map((item, index) =>
                 {
                     return <InventoryFurnitureItemView key={ index } groupItem={ item } />
                 }) }
-        </NitroCardGridView>
+        </Grid>
     );
 }
diff --git a/src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.types.ts b/src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.types.ts
index 9ee28fe5..a0bc56bd 100644
--- a/src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.types.ts
+++ b/src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.types.ts
@@ -3,5 +3,4 @@ import { GroupItem } from '../../../common/GroupItem';
 export interface InventoryFurnitureResultsViewProps
 {
     groupItems: GroupItem[];
-    columns?: number;
 }
diff --git a/src/views/inventory/views/furniture/search/InventoryFurnitureSearchView.tsx b/src/views/inventory/views/furniture/search/InventoryFurnitureSearchView.tsx
index f7934a19..c2fceb8d 100644
--- a/src/views/inventory/views/furniture/search/InventoryFurnitureSearchView.tsx
+++ b/src/views/inventory/views/furniture/search/InventoryFurnitureSearchView.tsx
@@ -1,5 +1,8 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../../api';
+import { Button } from '../../../../../common/Button';
+import { Flex } from '../../../../../common/Flex';
 import { InventoryFurnitureSearchViewProps } from './InventoryFurnitureSearchView.types';
 
 export const InventoryFurnitureSearchView: FC<InventoryFurnitureSearchViewProps> = props =>
@@ -30,15 +33,11 @@ export const InventoryFurnitureSearchView: FC<InventoryFurnitureSearchViewProps>
     }, [ groupItems, setGroupItems, searchValue ]);
 
     return (
-        <div className="d-flex">
-            <div className="d-flex flex-grow-1 me-1">
-                <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={ searchValue } onChange={ event => setSearchValue(event.target.value) } />
-            </div>
-            <div className="d-flex">
-                <button type="button" className="btn btn-primary btn-sm">
-                    <i className="fas fa-search"></i>
-                </button>
-            </div>
-        </div>
+        <Flex gap={ 1 }>
+            <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={ searchValue } onChange={ event => setSearchValue(event.target.value) } />
+            <Button variant="primary" size="sm">
+                <FontAwesomeIcon icon="search" />
+            </Button>
+        </Flex>
     );
 }