More inventory changes

src/views/inventory/views/badge/InventoryBadgeView.tsx

@@ -2,6 +2,8 @@ import { RequestBadgesComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect } from 'react';
 import { LocalizeBadgeName, LocalizeText } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks/messages/message-event';
+import { NitroLayoutButton, NitroLayoutFlex } 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';
@@ -83,18 +85,18 @@ export const InventoryBadgeView: FC<InventoryBadgeViewProps> = props =>
             </NitroLayoutGridColumn>
             <NitroLayoutGridColumn className="justify-content-between" size={ 5 } gap={ 2 } overflow="auto">
                 <NitroLayoutFlexColumn overflow="hidden" gap={ 2 }>
-                    <div className="text-black text-truncate">{ LocalizeText('inventory.badges.activebadges') }</div>
+                    <NitroLayoutBase className="text-black text-truncate">{ LocalizeText('inventory.badges.activebadges') }</NitroLayoutBase>
                     <InventoryActiveBadgeResultsView badges={ activeBadges }  />
                 </NitroLayoutFlexColumn>
                 { badge && (badge.length > 0) &&
                     <NitroLayoutFlexColumn gap={ 2 }>
-                        <div className="d-flex justify-content-between align-items-center">
+                        <NitroLayoutFlex className="justify-content-between align-items-center">
-                            <div className="d-flex flex-grow-1 gap-2 align-items-center overflow-hidden">
+                            <NitroLayoutFlex className="flex-grow-1 align-items-center" gap={ 2 } overflow="hidden">
                                 <BadgeImageView badgeCode={ badge } />
-                                <div className="flex-grow-1 text-black text-truncate">{ LocalizeBadgeName(badge) }</div>
+                                <NitroLayoutBase className="flex-grow-1 text-black text-truncate">{ LocalizeBadgeName(badge) }</NitroLayoutBase>
-                            </div>
+                            </NitroLayoutFlex>
-                        </div>
+                        </NitroLayoutFlex>
-                        <button type="button" className={ 'btn btn-sm btn-' + (isWearingBadge(badge) ? 'danger' : 'success') } disabled={ !isWearingBadge(badge) && !canWearBadges() } onClick={ toggleBadge }>{ LocalizeText(isWearingBadge(badge) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge')}</button>
+                        <NitroLayoutButton variant={ (isWearingBadge(badge) ? 'danger' : 'success') } size="sm" disabled={ !isWearingBadge(badge) && !canWearBadges() } onClick={ toggleBadge }>{ LocalizeText(isWearingBadge(badge) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge') }</NitroLayoutButton>
                     </NitroLayoutFlexColumn> }
             </NitroLayoutGridColumn>
         </NitroLayoutGrid>

src/views/inventory/views/bot/InventoryBotView.tsx

@@ -2,6 +2,8 @@ import { GetBotInventoryComposer, RoomObjectVariable } from '@nitrots/nitro-rend
 import { FC, useEffect } from 'react';
 import { GetRoomEngine, LocalizeText } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks/messages/message-event';
+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';
@@ -9,6 +11,7 @@ import { RoomPreviewerView } from '../../../shared/room-previewer/RoomPreviewerV
 import { attemptBotPlacement } from '../../common/BotUtilities';
 import { useInventoryContext } from '../../context/InventoryContext';
 import { InventoryBotActions } from '../../reducers/InventoryBotReducer';
+import { InventoryCategoryEmptyView } from '../category-empty/InventoryCategoryEmptyView';
 import { InventoryBotViewProps } from './InventoryBotView.types';
 import { InventoryBotResultsView } from './results/InventoryBotResultsView';
 
@@ -65,22 +68,7 @@ export const InventoryBotView: FC<InventoryBotViewProps> = props =>
         roomPreviewer.addAvatarIntoRoom(botData.figure, 0);
     }, [ roomPreviewer, botItem ]);
 
-    if(!botItems || !botItems.length)
+    if(!botItems || !botItems.length) return <InventoryCategoryEmptyView title={ LocalizeText('inventory.empty.bots.title') } desc={ LocalizeText('inventory.empty.bots.desc') } />;
-    {
-        return (
-            <div className="row h-100">
-                <div className="col-5 d-flex justify-content-center align-items-center">
-                    <div className="empty-image"></div>
-                </div>
-                <div className="d-flex flex-column col-7 justify-content-center">
-                    <div className="h5 m-0 text-black fw-bold m-0 mb-2">
-                        { LocalizeText('inventory.empty.bots.title') }
-                    </div>
-                    <div className="h6 text-black">{ LocalizeText('inventory.empty.bots.desc') }</div>
-                </div>
-            </div>
-        );
-    }
 
     return (
         <NitroLayoutGrid>
@@ -93,8 +81,11 @@ export const InventoryBotView: FC<InventoryBotViewProps> = props =>
                 </NitroLayoutFlexColumn>
                 { botItem &&
                     <NitroLayoutFlexColumn className="flex-grow-1" gap={ 2 }>
-                        <div className="flex-grow-1 text-black text-truncate">{ botItem.botData.name }</div>
+                        <NitroLayoutBase className="flex-grow-1 text-black text-truncate">{ botItem.botData.name }</NitroLayoutBase>
-                        { !!roomSession && <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptBotPlacement(botItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
+                        { !!roomSession &&
+                            <NitroLayoutButton variant="success" size="sm" onClick={ event => attemptBotPlacement(botItem) }>
+                                { LocalizeText('inventory.furni.placetoroom') }
+                            </NitroLayoutButton> }
                     </NitroLayoutFlexColumn> }
             </NitroLayoutGridColumn>
         </NitroLayoutGrid>

src/views/inventory/views/category-empty/InventoryCategoryEmptyView.tsx

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import { NitroLayoutGrid, NitroLayoutGridColumn } from '../../../../layout';
+import { NitroLayoutBase } from '../../../../layout/base';
+import { InventoryCategoryEmptyViewProps } from './InventoryCategoryEmptyView.types';
+
+export const InventoryCategoryEmptyView: FC<InventoryCategoryEmptyViewProps> = props =>
+{
+    const { title = '', desc = '', ...rest } = props;
+    
+    return (
+        <NitroLayoutGrid { ...rest }>
+            <NitroLayoutGridColumn className="justify-content-center align-items-center" size={ 5 } overflow="hidden">
+                <div className="empty-image" />
+            </NitroLayoutGridColumn>
+            <NitroLayoutGridColumn className="justify-content-center" size={ 7 } overflow="hidden">
+                <NitroLayoutBase className="text-black text-truncate fs-5 fw-bold">{ title }</NitroLayoutBase>
+                <NitroLayoutBase className="text-black" overflow="auto">{ desc }</NitroLayoutBase>
+            </NitroLayoutGridColumn>
+        </NitroLayoutGrid>
+    );
+}

src/views/inventory/views/category-empty/InventoryCategoryEmptyView.types.ts

@@ -0,0 +1,7 @@
+import { NitroLayoutGridProps } from '../../../../layout';
+
+export interface InventoryCategoryEmptyViewProps extends NitroLayoutGridProps
+{
+    title: string;
+    desc: string;
+}

src/views/inventory/views/furniture/InventoryFurnitureView.tsx

@@ -2,6 +2,8 @@ import { FurnitureListComposer, RoomObjectVariable, Vector3d } from '@nitrots/ni
 import { FC, useEffect, useState } from 'react';
 import { GetRoomEngine, GetSessionDataManager, LocalizeText } from '../../../../api';
 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';
@@ -13,6 +15,7 @@ import { attemptItemPlacement } from '../../common/FurnitureUtilities';
 import { GroupItem } from '../../common/GroupItem';
 import { useInventoryContext } from '../../context/InventoryContext';
 import { InventoryFurnitureActions } from '../../reducers/InventoryFurnitureReducer';
+import { InventoryCategoryEmptyView } from '../category-empty/InventoryCategoryEmptyView';
 import { InventoryFurnitureViewProps } from './InventoryFurnitureView.types';
 import { InventoryFurnitureResultsView } from './results/InventoryFurnitureResultsView';
 import { InventoryFurnitureSearchView } from './search/InventoryFurnitureSearchView';
@@ -101,22 +104,7 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
         }
     }, [ roomPreviewer, groupItem ]);
 
-    if(!groupItems || !groupItems.length)
+    if(!groupItems || !groupItems.length) return <InventoryCategoryEmptyView title={ LocalizeText('inventory.empty.title') } desc={ LocalizeText('inventory.empty.desc') } />;
-    {
-        return (
-            <div className="row h-100">
-                <div className="col-5 d-flex justify-content-center align-items-center">
-                    <div className="empty-image"></div>
-                </div>
-                <div className="d-flex flex-column col-7 justify-content-center">
-                    <div className="h5 m-0 text-black fw-bold m-0 mb-2">
-                        { LocalizeText('inventory.empty.title') }
-                    </div>
-                    <div className="h6 text-black">{ LocalizeText('inventory.empty.desc') }</div>
-                </div>
-            </div>
-        );
-    }
 
     return (
         <NitroLayoutGrid>
@@ -128,19 +116,21 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
                 <NitroLayoutFlexColumn overflow="hidden" position="relative">
                     <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
                     { groupItem && groupItem.stuffData.isUnique &&
-                        <div className="position-absolute top-2 end-2">
+                        <NitroLayoutBase className="top-2 end-2" position="absolute">
                             <LimitedEditionCompactPlateView uniqueNumber={ groupItem.stuffData.uniqueNumber } uniqueSeries={ groupItem.stuffData.uniqueSeries } />
-                        </div> }
+                        </NitroLayoutBase> }
                     { (groupItem && groupItem.stuffData.rarityLevel > -1) &&
-                        <div className="position-absolute top-2 end-2">
+                        <NitroLayoutBase className="top-2 end-2" position="absolute">
                             <RarityLevelView level={ groupItem.stuffData.rarityLevel } />
-                        </div> }
+                        </NitroLayoutBase> }
                 </NitroLayoutFlexColumn>
                 { groupItem &&
                     <NitroLayoutFlexColumn className="flex-grow-1" gap={ 2 }>
-                        <div className="flex-grow-1 text-black text-truncate">{ groupItem.name }</div>
+                        <NitroLayoutBase className="flex-grow-1 text-black text-truncate">{ groupItem.name }</NitroLayoutBase>
                         { !!roomSession &&
-                            <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptItemPlacement(groupItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
+                            <NitroLayoutButton variant="success" size="sm" onClick={ event => attemptItemPlacement(groupItem) }>
+                                { LocalizeText('inventory.furni.placetoroom') }
+                            </NitroLayoutButton> }
                     </NitroLayoutFlexColumn> }
             </NitroLayoutGridColumn>
         </NitroLayoutGrid>

src/views/inventory/views/pet/InventoryPetView.tsx

@@ -2,6 +2,7 @@ import { RequestPetsComposer, RoomObjectVariable } from '@nitrots/nitro-renderer
 import { FC, useEffect } from 'react';
 import { GetRoomEngine, LocalizeText } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks/messages/message-event';
+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';
@@ -9,6 +10,7 @@ import { RoomPreviewerView } from '../../../shared/room-previewer/RoomPreviewerV
 import { attemptPetPlacement } from '../../common/PetUtilities';
 import { useInventoryContext } from '../../context/InventoryContext';
 import { InventoryPetActions } from '../../reducers/InventoryPetReducer';
+import { InventoryCategoryEmptyView } from '../category-empty/InventoryCategoryEmptyView';
 import { InventoryPetViewProps } from './InventoryPetView.types';
 import { InventoryPetResultsView } from './results/InventoryPetResultsView';
 
@@ -65,22 +67,7 @@ export const InventoryPetView: FC<InventoryPetViewProps> = props =>
         roomPreviewer.addPetIntoRoom(petData.figureString);
     }, [ roomPreviewer, petItem ]);
 
-    if(!petItems || !petItems.length)
+    if(!petItems || !petItems.length) return <InventoryCategoryEmptyView title={ LocalizeText('inventory.empty.pets.title') } desc={ LocalizeText('inventory.empty.pets.desc') } />;
-    {
-        return (
-            <div className="row h-100">
-                <div className="col-5 d-flex justify-content-center align-items-center">
-                    <div className="empty-image"></div>
-                </div>
-                <div className="d-flex flex-column col-7 justify-content-center">
-                    <div className="h5 m-0 text-black fw-bold m-0 mb-2">
-                        { LocalizeText('inventory.empty.pets.title') }
-                    </div>
-                    <div className="h6 text-black">{ LocalizeText('inventory.empty.pets.desc') }</div>
-                </div>
-            </div>
-        );
-    }
 
     return (
         <NitroLayoutGrid>
@@ -93,7 +80,7 @@ export const InventoryPetView: FC<InventoryPetViewProps> = props =>
                 </NitroLayoutFlexColumn>
                 { petItem &&
                     <NitroLayoutFlexColumn className="flex-grow-1" gap={ 2 }>
-                        <div className="flex-grow-1 text-black text-truncate">{ petItem.petData.name }</div>
+                        <NitroLayoutBase className="flex-grow-1 text-black text-truncate">{ petItem.petData.name }</NitroLayoutBase>
                         { !!roomSession && <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptPetPlacement(petItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
                     </NitroLayoutFlexColumn> }
             </NitroLayoutGridColumn>

src/views/inventory/views/trade/InventoryTradeView.tsx

@@ -2,8 +2,12 @@ import { FurnitureListComposer, IObjectData, TradingAcceptComposer, TradingConfi
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { LocalizeText } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks/messages';
+import { NitroLayoutButton, NitroLayoutFlex, NitroLayoutFlexColumn } from '../../../../layout';
+import { NitroLayoutBase } from '../../../../layout/base';
 import { NitroCardGridItemView } from '../../../../layout/card/grid/item/NitroCardGridItemView';
 import { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView';
+import { NitroLayoutGridColumn } from '../../../../layout/grid/column/NitroLayoutGridColumn';
+import { NitroLayoutGrid } from '../../../../layout/grid/NitroLayoutGrid';
 import { FurniCategory } from '../../common/FurniCategory';
 import { GroupItem } from '../../common/GroupItem';
 import { IFurnitureItem } from '../../common/IFurnitureItem';
@@ -224,67 +228,81 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
     }, [ tradeData, dispatchFurnitureState ]);
 
     return (
-        <div className="row h-100">
+        <NitroLayoutGrid>
-            <div className="d-flex flex-column col-4 h-100">
+            <NitroLayoutGridColumn size={ 4 } gap={ 2 }>
-                <InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
+                <NitroLayoutFlexColumn className="h-100" overflow="auto" gap={ 2 }>
-                <NitroCardGridView columns={ 3 }>
+                    <InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
-                    { filteredGroupItems && (filteredGroupItems.length > 0) && filteredGroupItems.map((item, index) =>
-                        {
-                            const count = item.getUnlockedCount();
-
-                            return (
-                                <NitroCardGridItemView key={ index } className={ !count ? 'opacity-0-5 ' : '' } itemImage={ item.iconUrl } itemCount={ count } itemActive={ (groupItem === item) } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => (count && setGroupItem(item)) }>
-                                    { ((count > 0) && (groupItem === item)) &&
-                                        <button className="btn btn-success btn-sm trade-button" onClick={ event => attemptItemOffer(1) }>
-                                            <i className="fas fa-chevron-right" />
-                                        </button> }
-                                </NitroCardGridItemView>
-                            );
-                        }) }
-                </NitroCardGridView>
-                <div className="col-12 badge bg-muted w-100 mt-1">{ groupItem ? groupItem.name : LocalizeText('catalog_selectproduct') }</div>
-            </div>
-            <div className="col-8 row mx-0">
-                <div className="d-flex flex-column col-6">
-                    <span className="d-flex justify-content-between align-items-center text-black small mb-1">{ LocalizeText('inventory.trading.you') } { LocalizeText('inventory.trading.areoffering') }: <i className={ 'small fas ' + (tradeData.ownUser.accepts ? 'fa-lock text-success' : 'fa-unlock text-danger') } /></span>
                     <NitroCardGridView columns={ 3 }>
-                        { Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
+                        { filteredGroupItems && (filteredGroupItems.length > 0) && filteredGroupItems.map((item, index) =>
                             {
-                                const item = (tradeData.ownUser.items.getWithIndex(i) || null);
+                                const count = item.getUnlockedCount();
-
-                                if(!item) return <NitroCardGridItemView key={ i } />;
 
                                 return (
-                                    <NitroCardGridItemView key={ i } itemActive={ (ownGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOwnGroupItem(item) }>
+                                    <NitroCardGridItemView key={ index } className={ !count ? 'opacity-0-5 ' : '' } itemImage={ item.iconUrl } itemCount={ count } itemActive={ (groupItem === item) } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => (count && setGroupItem(item)) }>
-                                        { (ownGroupItem === item) &&
+                                        { ((count > 0) && (groupItem === item)) &&
-                                            <button className="btn btn-danger btn-sm trade-button left" onClick={ event => removeItem(item) }>
+                                            <button className="btn btn-success btn-sm trade-button" onClick={ event => attemptItemOffer(1) }>
-                                                <i className="fas fa-chevron-left" />
+                                                <i className="fas fa-chevron-right" />
                                             </button> }
                                     </NitroCardGridItemView>
                                 );
                             }) }
-                        <div className="col-12 badge bg-muted w-100">{ ownGroupItem ? ownGroupItem.name : LocalizeText('catalog_selectproduct') }</div>
                     </NitroCardGridView>
-                </div>
+                </NitroLayoutFlexColumn>
-                <div className="d-flex flex-column col-6">
+                <NitroLayoutBase className="badge bg-muted w-100">
-                    <span className="d-flex justify-content-between align-items-center  text-black small mb-1">{ tradeData.otherUser.userName } { LocalizeText('inventory.trading.isoffering') }: <i className={ 'small fas ' + (tradeData.otherUser.accepts ? 'fa-lock text-success' : 'fa-unlock text-danger') } /></span>
+                    { groupItem ? groupItem.name : LocalizeText('catalog_selectproduct') }
-                    <NitroCardGridView columns={ 3 }>
+                </NitroLayoutBase>
-                        { Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
+            </NitroLayoutGridColumn>
-                            {
+            <NitroLayoutGridColumn size={ 8 } gap={ 2 }>
-                                const item = (tradeData.otherUser.items.getWithIndex(i) || null);
+                <NitroLayoutGrid overflow="hidden">
+                    <NitroLayoutGridColumn size={ 6 } gap={ 2 }>
+                        <NitroLayoutFlexColumn className="h-100" overflow="auto" gap={ 2 }>
+                            <span className="d-flex justify-content-between align-items-center text-black small mb-1">{ LocalizeText('inventory.trading.you') } { LocalizeText('inventory.trading.areoffering') }: <i className={ 'small fas ' + (tradeData.ownUser.accepts ? 'fa-lock text-success' : 'fa-unlock text-danger') } /></span>
+                            <NitroCardGridView columns={ 3 }>
+                                { Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
+                                    {
+                                        const item = (tradeData.ownUser.items.getWithIndex(i) || null);
 
-                                if(!item) return <NitroCardGridItemView key={ i } />;
+                                        if(!item) return <NitroCardGridItemView key={ i } />;
 
-                                return <NitroCardGridItemView key={ i } itemActive={ (otherGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOtherGroupItem(item) } />;
+                                        return (
-                            }) }
+                                            <NitroCardGridItemView key={ i } itemActive={ (ownGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOwnGroupItem(item) }>
-                        <div className="col-12 badge bg-muted w-100">{ otherGroupItem ? otherGroupItem.name : LocalizeText('catalog_selectproduct') }</div>
+                                                { (ownGroupItem === item) &&
-                    </NitroCardGridView>
+                                                    <button className="btn btn-danger btn-sm trade-button left" onClick={ event => removeItem(item) }>
-                </div>
+                                                        <i className="fas fa-chevron-left" />
-                <div className="d-flex col-12 justify-content-between align-items-end w-100">
+                                                    </button> }
-                    <button type="button" className="btn btn-danger" onClick={ cancelTrade }>{ LocalizeText('generic.cancel') }</button>
+                                            </NitroCardGridItemView>
+                                        );
+                                    }) }
+                            </NitroCardGridView>
+                        </NitroLayoutFlexColumn>
+                        <NitroLayoutBase className="badge bg-muted w-100">
+                            { ownGroupItem ? ownGroupItem.name : LocalizeText('catalog_selectproduct') }
+                        </NitroLayoutBase>
+                    </NitroLayoutGridColumn>
+                    <NitroLayoutGridColumn size={ 6 } gap={ 2 }>
+                        <NitroLayoutFlexColumn className="h-100" overflow="auto" gap={ 2 }>
+                            <span className="d-flex justify-content-between align-items-center  text-black small mb-1">{ tradeData.otherUser.userName } { LocalizeText('inventory.trading.isoffering') }: <i className={ 'small fas ' + (tradeData.otherUser.accepts ? 'fa-lock text-success' : 'fa-unlock text-danger') } /></span>
+                            <NitroCardGridView columns={ 3 }>
+                                { Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
+                                    {
+                                        const item = (tradeData.otherUser.items.getWithIndex(i) || null);
+
+                                        if(!item) return <NitroCardGridItemView key={ i } />;
+
+                                        return <NitroCardGridItemView key={ i } itemActive={ (otherGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOtherGroupItem(item) } />;
+                                    }) }
+                            </NitroCardGridView>
+                        </NitroLayoutFlexColumn>
+                        <NitroLayoutBase className="badge bg-muted w-100">
+                            { otherGroupItem ? otherGroupItem.name : LocalizeText('catalog_selectproduct') }
+                        </NitroLayoutBase>
+                    </NitroLayoutGridColumn>
+                </NitroLayoutGrid>
+                <NitroLayoutFlex className="flex-grow-1 justify-content-between">
+                    <NitroLayoutButton variant="danger" onClick={ cancelTrade }>{ LocalizeText('generic.cancel') }</NitroLayoutButton>
                     { getTradeButton }
-                </div>
+                </NitroLayoutFlex>
-            </div>
+            </NitroLayoutGridColumn>
-        </div>
+        </NitroLayoutGrid>
     );
 }