More widget updates

src/views/room/widgets/furniture/FurnitureWidgets.scss

@@ -2,15 +2,57 @@
     pointer-events: none;
 }
 
-@import './custom-stack-height/FurnitureCustomStackHeightView';
+.nitro-widget-custom-stack-height {
+    width: $nitro-widget-custom-stack-height-width;
+    height: $nitro-widget-custom-stack-height-height;
+}
+
+.nitro-room-widget-dimmer {
+    width: 275px;
+
+    .dimmer-banner {
+        width: 56px;
+        height: 79px;
+        background: url('../../../../assets/images/room-widgets/dimmer-widget/dimmer_banner.png') center no-repeat;
+    }
+
+    .color-swatch {
+        height: 30px;
+        border: 2px solid $white;
+        box-shadow: inset 3px 3px rgba(0, 0, 0, .2);
+
+        &.active {
+            box-shadow: none;
+        }
+    }
+}
+
+.nitro-widget-exchange-credit {
+    width: $nitro-widget-exchange-credit-width;
+    height: $nitro-widget-exchange-credit-height;
+
+    .exchange-image {
+        background-image: url('../../../../assets/images/room-widgets/exchange-credit/exchange-credit-image.png');
+        width: 103px;
+        height: 103px;
+    }
+}
+
+.nitro-external-image-widget {
+
+    .picture-preview {
+        width: 320px;
+        height: 320px;
+    }
+}
+
+.nitro-gift-opening {
+    
+}
 
-@import './dimmer/FurnitureDimmerView';
-@import './exchange-credit/FurnitureExchangeCreditView';
-@import './external-image/FurnitureExternalImageView';
 @import './friend-furni/FurnitureFriendFurniView';
 @import './manipulation-menu/FurnitureManipulationMenuView';
 @import './mannequin/FurnitureMannequinView';
 @import './stickie/FurnitureStickieView';
 @import './high-score/FurnitureHighScoreView';
-@import './gift-opening/FurnitureGiftOpeningView';
 @import './youtube-tv/FurnitureYoutubeDisplayView';

src/views/room/widgets/furniture/background-color/FurnitureBackgroundColorView.tsx

@@ -89,7 +89,7 @@ export const FurnitureBackgroundColorView: FC<{}> = props =>
     return (
         <NitroCardView>
             <NitroCardHeaderView headerText={ LocalizeText('widget.backgroundcolor.title') } onCloseClick={ close } />
-            <NitroCardContentView overflow="hidden">
+            <NitroCardContentView overflow="hidden" justifyContent="between">
                 <Column overflow="auto" gap={ 1 }>
                     <Column>
                         <Text bold>{ LocalizeText('widget.backgroundcolor.hue') }</Text>

src/views/room/widgets/furniture/badge-display/FurnitureBadgeDisplayView.tsx

@@ -9,8 +9,8 @@ import { FurnitureTrophyData } from '../trophy/FurnitureTrophyData';
 
 export const FurnitureBadgeDisplayView: FC<{}> = props =>
 {
-    const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
     const [ trophyData, setTrophyData ] = useState<FurnitureTrophyData>(null);
+    const { widgetHandler = null } = useRoomContext();
 
     const onNitroEvent = useCallback((event: NitroEvent) =>
     {

src/views/room/widgets/furniture/context-menu/EffectBoxConfirmView.tsx

@@ -1,8 +1,8 @@
 import { FC } from 'react';
-import { LocalizeText } from '../../../../../../api';
+import { LocalizeText } from '../../../../../api';
-import { Button, Column, Flex, Text } from '../../../../../../common';
+import { Button, Column, Flex, Text } from '../../../../../common';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../layout';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
-import { useRoomContext } from '../../../../context/RoomContext';
+import { useRoomContext } from '../../../context/RoomContext';
 
 interface EffectBoxConfirmViewProps
 {

src/views/room/widgets/furniture/context-menu/FurnitureContextMenuView.tsx

@@ -9,9 +9,9 @@ import { useRoomContext } from '../../../context/RoomContext';
 import { ContextMenuView } from '../../context-menu/ContextMenuView';
 import { ContextMenuHeaderView } from '../../context-menu/views/header/ContextMenuHeaderView';
 import { ContextMenuListItemView } from '../../context-menu/views/list-item/ContextMenuListItemView';
-import { EffectBoxConfirmView } from './views/EffectBoxConfirmView';
+import { EffectBoxConfirmView } from './EffectBoxConfirmView';
-import { MonsterPlantSeedConfirmView } from './views/MonsterPlantSeedConfirmView';
+import { MonsterPlantSeedConfirmView } from './MonsterPlantSeedConfirmView';
-import { PurchasableClothingConfirmView } from './views/PurchasableClothingConfirmView';
+import { PurchasableClothingConfirmView } from './PurchasableClothingConfirmView';
 
 const MONSTERPLANT_SEED_CONFIRMATION: string = 'MONSTERPLANT_SEED_CONFIRMATION';
 const PURCHASABLE_CLOTHING_CONFIRMATION: string = 'PURCHASABLE_CLOTHING_CONFIRMATION';

src/views/room/widgets/furniture/context-menu/MonsterPlantSeedConfirmView.tsx

@@ -1,10 +1,10 @@
 import { IFurnitureData, RoomObjectCategory } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import { GetFurnitureDataForRoomObject, LocalizeText, RoomWidgetUseProductMessage } from '../../../../../../api';
+import { GetFurnitureDataForRoomObject, LocalizeText, RoomWidgetUseProductMessage } from '../../../../../api';
-import { Base, Button, Column, Flex, Text } from '../../../../../../common';
+import { Base, Button, Column, Flex, Text } from '../../../../../common';
-import { FurniCategory } from '../../../../../../components/inventory/common/FurniCategory';
+import { FurniCategory } from '../../../../../components/inventory/common/FurniCategory';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../layout';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
-import { useRoomContext } from '../../../../context/RoomContext';
+import { useRoomContext } from '../../../context/RoomContext';
 
 interface MonsterPlantSeedConfirmViewProps
 {

src/views/room/widgets/furniture/context-menu/PurchasableClothingConfirmView.tsx

@@ -1,12 +1,12 @@
 import { RedeemItemClothingComposer, RoomObjectCategory, UserFigureComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import { GetAvatarRenderManager, GetConnection, GetFurnitureDataForRoomObject, GetSessionDataManager, LocalizeText } from '../../../../../../api';
+import { GetAvatarRenderManager, GetConnection, GetFurnitureDataForRoomObject, GetSessionDataManager, LocalizeText } from '../../../../../api';
-import { Base, Button, Column, Flex, Text } from '../../../../../../common';
+import { Base, Button, Column, Flex, Text } from '../../../../../common';
-import { FigureData } from '../../../../../../components/avatar-editor/common/FigureData';
+import { FigureData } from '../../../../../components/avatar-editor/common/FigureData';
-import { FurniCategory } from '../../../../../../components/inventory/common/FurniCategory';
+import { FurniCategory } from '../../../../../components/inventory/common/FurniCategory';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../layout';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
-import { AvatarImageView } from '../../../../../shared/avatar-image/AvatarImageView';
+import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
-import { useRoomContext } from '../../../../context/RoomContext';
+import { useRoomContext } from '../../../context/RoomContext';
 
 interface PurchasableClothingConfirmViewProps
 {

src/views/room/widgets/furniture/custom-stack-height/FurnitureCustomStackHeightView.scss

@@ -1,4 +0,0 @@
-.nitro-widget-custom-stack-height {
-    width: $nitro-widget-custom-stack-height-width;
-    height: $nitro-widget-custom-stack-height-height;
-}

src/views/room/widgets/furniture/custom-stack-height/FurnitureCustomStackHeightView.tsx

@@ -2,10 +2,10 @@ import { FurnitureStackHeightComposer, FurnitureStackHeightEvent } from '@nitrot
 import { FC, useCallback, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { LocalizeText, RoomWidgetUpdateCustomStackHeightEvent } from '../../../../../api';
+import { Button, Column, Flex, Text } from '../../../../../common';
 import { BatchUpdates, CreateMessageHook, SendMessageHook } from '../../../../../hooks';
 import { CreateEventDispatcherHook } from '../../../../../hooks/events';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutButton, NitroLayoutFlex, NitroLayoutFlexColumn, NitroLayoutGrid, NitroLayoutGridColumn } from '../../../../../layout';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
-import { NitroLayoutBase } from '../../../../../layout/base';
 import { useRoomContext } from '../../../context/RoomContext';
 
 const MAX_HEIGHT: number = 40;
@@ -17,14 +17,14 @@ export const FurnitureCustomStackHeightView: FC<{}> = props =>
     const [ pendingHeight, setPendingHeight ] = useState(-1);
     const { eventDispatcher = null } = useRoomContext();
 
-    const close = useCallback(() =>
+    const close = () =>
     {
         BatchUpdates(() =>
         {
             setObjectId(-1);
             setHeight(0);
         });
-    }, []);
+    }
 
     const updateHeight = useCallback((height: number, fromServer: boolean = false) =>
     {
@@ -83,35 +83,29 @@ export const FurnitureCustomStackHeightView: FC<{}> = props =>
     if(objectId === -1) return null;
 
     return (
-        <NitroCardView className="nitro-widget-custom-stack-height" simple={ true }>
+        <NitroCardView className="nitro-widget-custom-stack-height" simple>
             <NitroCardHeaderView headerText={ LocalizeText('widget.custom.stack.height.title') } onCloseClick={ close } />
-            <NitroCardContentView>
+            <NitroCardContentView justifyContent="between">
-                <NitroLayoutGrid>
+                <Text>{ LocalizeText('widget.custom.stack.height.text') }</Text>
-                    <NitroLayoutGridColumn className="justify-content-between" size={ 12 }>
+                <Flex gap={ 2 }>
-                        <NitroLayoutBase className="text-black" overflow="auto">
+                    <ReactSlider
-                            { LocalizeText('widget.custom.stack.height.text') }
+                        className="nitro-slider"
-                        </NitroLayoutBase>
+                        min={ 0 }
-                        <NitroLayoutFlexColumn gap={ 2 }>
+                        max={ MAX_HEIGHT }
-                            <NitroLayoutFlex gap={ 2 }>
+                        step={ 0.01 }
-                                <ReactSlider
+                        value={ height }
-                                    className="nitro-slider"
+                        onChange={ event => updateHeight(event) }
-                                    min={ 0 }
+                        renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> } />
-                                    max={ MAX_HEIGHT }
+                    <input type="number" min={ 0 } max={ MAX_HEIGHT } value={ height } onChange={ event => updateHeight(parseFloat(event.target.value)) } />
-                                    step={ 0.01 }
+                </Flex>
-                                    value={ height }
+                <Column gap={ 1 }>
-                                    onChange={ event => updateHeight(event) }
+                    <Button onClick={ event => sendUpdate(-100) }>
-                                    renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> } />
+                        { LocalizeText('furniture.above.stack') }
-                                <input type="number" min={ 0 } max={ MAX_HEIGHT } value={ height } onChange={ event => updateHeight(parseFloat(event.target.value)) } />
+                    </Button>
-                            </NitroLayoutFlex>
+                    <Button onClick={ event => sendUpdate(0) }>
-                            <NitroLayoutButton variant="primary" onClick={ event => sendUpdate(-100) }>
+                        { LocalizeText('furniture.floor.level') }
-                                { LocalizeText('furniture.above.stack') }
+                    </Button>
-                            </NitroLayoutButton>
+                </Column>
-                            <NitroLayoutButton variant="primary" onClick={ event => sendUpdate(0) }>
-                                { LocalizeText('furniture.floor.level') }
-                            </NitroLayoutButton>
-                        </NitroLayoutFlexColumn>
-                    </NitroLayoutGridColumn>
-                </NitroLayoutGrid>
             </NitroCardContentView>
         </NitroCardView>
     );

src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.scss

@@ -1,19 +0,0 @@
-.nitro-room-widget-dimmer {
-    width: 275px;
-
-    .dimmer-banner {
-        width: 56px;
-        height: 79px;
-        background: url('../../../../../assets/images/room-widgets/dimmer-widget/dimmer_banner.png') center no-repeat;
-    }
-
-    .color-swatch {
-        height: 30px;
-        border: 2px solid $white;
-        box-shadow: inset 3px 3px rgba(0, 0, 0, .2);
-
-        &.active {
-            box-shadow: none;
-        }
-    }
-}

src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.scss

@@ -1,10 +0,0 @@
-.nitro-widget-exchange-credit {
-    width: $nitro-widget-exchange-credit-width;
-    height: $nitro-widget-exchange-credit-height;
-
-    .exchange-image {
-        background-image: url('../../../../../assets/images/room-widgets/exchange-credit/exchange-credit-image.png');
-        width: 103px;
-        height: 103px;
-    }
-}

src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.tsx

@@ -1,10 +1,6 @@
 import { FC, useCallback, useState } from 'react';
 import { LocalizeText, RoomWidgetCreditFurniRedeemMessage, RoomWidgetUpdateCreditFurniEvent } from '../../../../../api';
-import { Base } from '../../../../../common/Base';
+import { Base, Button, Column, Flex, Text } from '../../../../../common';
-import { Button } from '../../../../../common/Button';
-import { Column } from '../../../../../common/Column';
-import { Grid } from '../../../../../common/Grid';
-import { Text } from '../../../../../common/Text';
 import { BatchUpdates } from '../../../../../hooks';
 import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
@@ -18,39 +14,42 @@ export const FurnitureExchangeCreditView: FC<{}> = props =>
 
     const onRoomWidgetUpdateCreditFurniEvent = useCallback((event: RoomWidgetUpdateCreditFurniEvent) =>
     {
-        setObjectId(event.objectId);
+        BatchUpdates(() =>
-        setValue(event.value);
+        {
+            setObjectId(event.objectId);
+            setValue(event.value);
+        });
     }, []);
 
     CreateEventDispatcherHook(RoomWidgetUpdateCreditFurniEvent.CREDIT_FURNI_UPDATE, eventDispatcher, onRoomWidgetUpdateCreditFurniEvent);
 
-    const close = useCallback(() =>
+    const close = () =>
     {
         BatchUpdates(() =>
         {
             setObjectId(-1);
             setValue(0);
         });
-    }, []);
+    }
 
-    const redeem = useCallback(() =>
+    const redeem = () =>
     {
         widgetHandler.processWidgetMessage(new RoomWidgetCreditFurniRedeemMessage(RoomWidgetCreditFurniRedeemMessage.REDEEM, objectId));
 
         close();
-    }, [ widgetHandler, objectId, close ]);
+    }
 
     if(objectId === -1) return null;
 
     return (
-        <NitroCardView className="nitro-widget-exchange-credit" simple={ true }>
+        <NitroCardView className="nitro-widget-exchange-credit" simple>
             <NitroCardHeaderView headerText={ LocalizeText('catalog.redeem.dialog.title') } onCloseClick={ close } />
-            <NitroCardContentView>
+            <NitroCardContentView center>
-                <Grid>
+                <Flex overflow="hidden" gap={ 2 }>
-                    <Column center overflow="hidden" size={ 4 }>
+                    <Column center>
                         <Base className="exchange-image" />
                     </Column>
-                    <Column justifyContent="between" overflow="hidden" size={ 8 }>
+                    <Column grow justifyContent="between" overflow="hidden">
                         <Column gap={ 1 } overflow="auto">
                             <Text fontWeight="bold">{ LocalizeText('creditfurni.description', [ 'credits' ], [ value.toString() ]) }</Text>
                             <Text>{ LocalizeText('creditfurni.prompt') }</Text>
@@ -59,7 +58,7 @@ export const FurnitureExchangeCreditView: FC<{}> = props =>
                             { LocalizeText('catalog.redeem.dialog.button.exchange') }
                         </Button>
                     </Column>
-                </Grid>
+                </Flex>
             </NitroCardContentView>
         </NitroCardView>
     );

src/views/room/widgets/furniture/external-image/FurnitureExternalImageView.scss

@@ -1,7 +0,0 @@
-.nitro-external-image-widget {
-
-    .picture-preview {
-        width: 320px;
-        height: 320px;
-    }
-}

src/views/room/widgets/furniture/external-image/FurnitureExternalImageView.tsx

@@ -1,6 +1,7 @@
 import { FC, useCallback, useState } from 'react';
 import { IPhotoData, LocalizeText, RoomWidgetUpdateExternalImageEvent } from '../../../../../api';
-import { CreateEventDispatcherHook } from '../../../../../hooks';
+import { Flex, Text } from '../../../../../common';
+import { BatchUpdates, CreateEventDispatcherHook } from '../../../../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
 import { useRoomContext } from '../../../context/RoomContext';
 
@@ -10,19 +11,23 @@ export const FurnitureExternalImageView: FC<{}> = props =>
     const [ photoData, setPhotoData ] = useState<IPhotoData>(null);
     const { eventDispatcher = null } = useRoomContext();
     
-    const close = useCallback(() =>
+    const close = () =>
     {
         setObjectId(-1);
         setPhotoData(null)
-    }, []);
+    }
 
     const onRoomWidgetUpdateExternalImageEvent = useCallback((event: RoomWidgetUpdateExternalImageEvent) =>
     {
         switch(event.type)
         {
             case RoomWidgetUpdateExternalImageEvent.UPDATE_EXTERNAL_IMAGE: {
-                setObjectId(event.objectId);
+
-                setPhotoData(event.photoData);
+                BatchUpdates(() =>
+                {
+                    setObjectId(event.objectId);
+                    setPhotoData(event.photoData);
+                });
             }
         }
     }, []);
@@ -35,17 +40,16 @@ export const FurnitureExternalImageView: FC<{}> = props =>
         <NitroCardView className="nitro-external-image-widget">
             <NitroCardHeaderView headerText={ '' } onCloseClick={ close } />
             <NitroCardContentView>
-                <div className="d-flex justify-content-center align-items-center picture-preview border mb-2" style={ photoData.w ? { backgroundImage: 'url(' + photoData.w + ')' } : {} }>
+                <Flex center className="picture-preview border border-black" style={ photoData.w ? { backgroundImage: 'url(' + photoData.w + ')' } : {} }>
                     { !photoData.w &&
-                        <div className="text-black fw-bold">
+                        <Text bold>{ LocalizeText('camera.loading') }</Text> }
-                            { LocalizeText('camera.loading') }
+                </Flex>
-                        </div> }
+                { photoData.m && photoData.m.length &&
-                </div>
+                    <Text center>{ photoData.m }</Text> }
-                <span className="text-center text-black">{ photoData.m && <div>{ photoData.m }</div> }</span>
+                <Flex alignItems="center" justifyContent="between">
-                <div className="d-flex align-items-center justify-content-between">
+                    <Text>{ (photoData.n || '') }</Text>
-                    <span className="text-black">{ (photoData.n || '') }</span>
+                    <Text>{ new Date(photoData.t * 1000).toLocaleDateString() }</Text>
-                    <span className="text-black">{ new Date(photoData.t * 1000).toLocaleDateString() }</span>
+                </Flex>
-                </div>
             </NitroCardContentView>
         </NitroCardView>
     );

src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.scss

@@ -1,3 +0,0 @@
-.nitro-gift-opening {
-    min-width: 340px;
-}

src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx

@@ -1,11 +1,11 @@
 import { RoomObjectCategory, RoomObjectOperationType } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useMemo, useState } from 'react';
+import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { CreateLinkEvent, GetRoomEngine, GetSessionDataManager, LocalizeText, RoomWidgetPresentOpenMessage, RoomWidgetUpdatePresentDataEvent, RoomWidgetUpdateRoomObjectEvent } from '../../../../../api';
+import { Button, Column, Flex, Text } from '../../../../../common';
 import { ProductTypeEnum } from '../../../../../components/catalog/common/ProductTypeEnum';
 import { BatchUpdates } from '../../../../../hooks';
 import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutButton, NitroLayoutFlex, NitroLayoutFlexColumn, NitroLayoutGiftCardView, NitroLayoutGrid, NitroLayoutGridColumn } from '../../../../../layout';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutGiftCardView } from '../../../../../layout';
-import { NitroLayoutBase } from '../../../../../layout/base';
 import { useRoomContext } from '../../../context/RoomContext';
 
 const FLOOR: string = 'floor';
@@ -33,6 +33,11 @@ export const FurnitureGiftOpeningView: FC<{}> = props =>
     const [ openRequested, setOpenRequested ] = useState(false);
     const { roomSession = null, eventDispatcher = null, widgetHandler = null } = useRoomContext();
 
+    useEffect(() =>
+    {
+        console.log(imageUrl);
+    }, [ imageUrl ]);
+
     const clearGift = useCallback(() =>
     {
         if(!openRequested) setObjectId(-1);
@@ -48,6 +53,7 @@ export const FurnitureGiftOpeningView: FC<{}> = props =>
 
     const onRoomWidgetUpdatePresentDataEvent = useCallback((event: RoomWidgetUpdatePresentDataEvent) =>
     {
+        console.log(event.imageUrl, event.type);
         switch(event.type)
         {
             case RoomWidgetUpdatePresentDataEvent.PACKAGEINFO: {
@@ -111,6 +117,7 @@ export const FurnitureGiftOpeningView: FC<{}> = props =>
                     setPlacedItemId(event.placedItemId);
                     setPlacedItemType(event.placedItemType);
                     setPlacedInRoom(event.placedInRoom);
+                    setImageUrl(event.imageUrl);
                 });
                 return;
             }
@@ -215,47 +222,43 @@ export const FurnitureGiftOpeningView: FC<{}> = props =>
     return (
         <NitroCardView className="nitro-gift-opening" simple={ true }>
             <NitroCardHeaderView headerText={ LocalizeText(senderName ? 'widget.furni.present.window.title_from' : 'widget.furni.present.window.title', [ 'name' ], [ senderName ]) } onCloseClick={ close } />
-            <NitroCardContentView>
+            <NitroCardContentView center>
-                <NitroLayoutGrid>
+                { (placedItemId === -1) &&
-                    { (placedItemId === -1) &&
+                    <Column overflow="hidden">
-                        <NitroLayoutGridColumn size={ 12 }>
+                        <Flex center overflow="auto">
-                            <NitroLayoutFlex className="justify-content-center align-items-center" overflow="auto">
+                            <NitroLayoutGiftCardView userName={ senderName } figure={ senderFigure } message={ text } />
-                                <NitroLayoutGiftCardView userName={ senderName } figure={ senderFigure } message={ text } />
+                        </Flex>
-                            </NitroLayoutFlex>
+                        <Flex gap={ 1 }>
-                            <NitroLayoutFlex gap={ 2 }>
+                            { senderName &&
-                                { senderName &&
+                                <Button fullWidth onClick={ event => handleAction(ACTION_GIVE_GIFT) }>
-                                    <NitroLayoutButton className="text-nowrap w-100" variant="primary" onClick={ event => handleAction(ACTION_GIVE_GIFT) }>
+                                    { LocalizeText('widget.furni.present.give_gift', [ 'name' ], [ senderName ]) }
-                                        { LocalizeText('widget.furni.present.give_gift', [ 'name' ], [ senderName ]) }
+                                </Button> }
-                                    </NitroLayoutButton> }
+                            <Button fullWidth variant="success" onClick={ event => handleAction(ACTION_OPEN) }>
-                                <NitroLayoutButton className="text-nowrap w-100" variant="success" onClick={ event => handleAction(ACTION_OPEN) }>
+                                { LocalizeText('widget.furni.present.open_gift') }
-                                    { LocalizeText('widget.furni.present.open_gift') }
+                            </Button>
-                                </NitroLayoutButton>
+                        </Flex>
-                            </NitroLayoutFlex>
+                    </Column> }
-                        </NitroLayoutGridColumn> }
+                { (placedItemId > -1) &&
-                    { (placedItemId > -1) &&
+                    <Column overflow="hidden">
-                        <NitroLayoutGridColumn size={ 12 }>
+                        <Flex center overflow="auto" gap={ 2 }>
-                            <NitroLayoutFlex className="justify-content-center align-items-center" overflow="auto" gap={ 2 }>
+                            <img src={ imageUrl } className="no-select" alt="" />
-                                <img src={ imageUrl } alt="" />
+                            <Text wrap>{ LocalizeText(productName, [ 'product' ], [ text ]) }</Text>
-                                <NitroLayoutBase className="text-black">
+                        </Flex>
-                                    { LocalizeText(productName, [ 'product' ], [ text ]) }
+                        <Column grow gap={ 1 }>
-                                </NitroLayoutBase>
+                            <Flex gap={ 1 }>
-                            </NitroLayoutFlex>
+                                <Button fullWidth onClick={ event => handleAction(ACTION_INVENTORY) }>
-                            <NitroLayoutFlexColumn gap={ 2 }>
+                                    { LocalizeText('widget.furni.present.put_in_inventory') }
-                                <NitroLayoutFlex gap={ 2 }>
+                                </Button>
-                                    <NitroLayoutButton className="w-100" variant="primary" onClick={ event => handleAction(ACTION_INVENTORY) }>
+                                <Button fullWidth variant="success" onClick={ event => handleAction(ACTION_PLACE) }>
-                                        { LocalizeText('widget.furni.present.put_in_inventory') }
+                                    { LocalizeText(placedInRoom ? 'widget.furni.present.keep_in_room' : 'widget.furni.present.place_in_room') }
-                                    </NitroLayoutButton>
+                                </Button>
-                                    <NitroLayoutButton className="w-100" variant="success" onClick={ event => handleAction(ACTION_PLACE) }>
+                            </Flex>
-                                        { LocalizeText(placedInRoom ? 'widget.furni.present.keep_in_room' : 'widget.furni.present.place_in_room') }
+                            { (senderName && senderName.length) &&
-                                    </NitroLayoutButton>
+                                <Button fullWidth onClick={ event => handleAction(ACTION_GIVE_GIFT) }>
-                                </NitroLayoutFlex>
+                                    { LocalizeText('widget.furni.present.give_gift', [ 'name' ], [ senderName ]) }
-                                { (senderName && senderName.length) &&
+                                </Button> }
-                                    <NitroLayoutButton className="w-100" variant="primary" onClick={ event => handleAction(ACTION_GIVE_GIFT) }>
+                        </Column>
-                                        { LocalizeText('widget.furni.present.give_gift', [ 'name' ], [ senderName ]) }
+                    </Column> }
-                                    </NitroLayoutButton> }
-                            </NitroLayoutFlexColumn>
-                        </NitroLayoutGridColumn> }
-                </NitroLayoutGrid>
             </NitroCardContentView>
         </NitroCardView>
     );