Update wired conditions

src/components/wired/views/conditions/WiredConditionActorHasHandItem.tsx

@@ -1,37 +1,39 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Text } from '../../../../common/Text';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredConditionBaseView } from './WiredConditionBaseView';
 
-const allowedHanditemIds: number[] = [ 2, 5, 7, 8, 9, 10, 27 ];
+const ALLOWED_HAND_ITEM_IDS: number[] = [ 2, 5, 7, 8, 9, 10, 27 ];
 
 export const WiredConditionActorHasHandItemView: FC<{}> = props =>
 {
     const [ handItemId, setHandItemId ] = useState(-1);
     const { trigger = null, setIntParams = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        setHandItemId((trigger.intData.length > 0) ? trigger.intData[0] : 0);
-    }, [ trigger ]);
-
     const save = useCallback(() =>
     {
         setIntParams([ handItemId ]);
     }, [ handItemId, setIntParams ]);
 
+    useEffect(() =>
+    {
+        setHandItemId((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+    }, [ trigger ]);
+
     return (
         <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="form-group">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.handitem') }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.handitem') }</Text>
                 <select className="form-select form-select-sm" value={ handItemId } onChange={ event => setHandItemId(parseInt(event.target.value)) }>
-                    { allowedHanditemIds.map(value =>
+                    { ALLOWED_HAND_ITEM_IDS.map(value =>
                         {
                             return <option key={ value } value={ value }>{ LocalizeText(`handitem${ value }`) }</option>
                         }) }
                 </select>
-            </div>
+            </Column>
         </WiredConditionBaseView>
     );
 }

src/components/wired/views/conditions/WiredConditionActorIsTeamMemberView.tsx

@@ -1,5 +1,8 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Flex } from '../../../../common/Flex';
+import { Text } from '../../../../common/Text';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredConditionBaseView } from './WiredConditionBaseView';
@@ -11,32 +14,30 @@ export const WiredConditionActorIsTeamMemberView: FC<{}> = props =>
     const [ selectedTeam, setSelectedTeam ] = useState(-1);
     const { trigger = null, setIntParams = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        setSelectedTeam((trigger.intData.length > 0) ? trigger.intData[0] : 0);
-    }, [ trigger ]);
-
     const save = useCallback(() =>
     {
         setIntParams([ selectedTeam ]);
     }, [ selectedTeam, setIntParams ]);
+
+    useEffect(() =>
+    {
+        setSelectedTeam((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+    }, [ trigger ]);
     
     return (
         <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="form-group">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.team') }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.team') }</Text>
                 { teamIds.map(value =>
                     {
                         return (
-                            <div key={ value } className="form-check">
+                            <Flex key={ value } gap={ 1 } alignItems="center">
                                 <input className="form-check-input" type="radio" name="selectedTeam" id={ `selectedTeam${ value }` } checked={ (selectedTeam === value) } onChange={ event => setSelectedTeam(value) } />
-                                <label className="form-check-label" htmlFor={ `selectedTeam${ value }` }>
+                                <Text>{ LocalizeText(`wiredfurni.params.team.${ value }`) }</Text>
-                                    { LocalizeText(`wiredfurni.params.team.${ value }`) }
+                            </Flex>
-                                </label>
+                        ) 
-                            </div>
-                        )
                     }) }
-            </div>
+            </Column>
         </WiredConditionBaseView>
     );
 }

src/components/wired/views/conditions/WiredConditionActorIsWearingBadgeView.tsx

@@ -1,5 +1,7 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Text } from '../../../../common/Text';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredConditionBaseView } from './WiredConditionBaseView';
@@ -9,22 +11,22 @@ export const WiredConditionActorIsWearingBadgeView: FC<{}> = props =>
     const [ badge, setBadge ] = useState('');
     const { trigger = null, setStringParam = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        setBadge(trigger.stringData);
-    }, [ trigger ]);
-
     const save = useCallback(() =>
     {
         setStringParam(badge);
     }, [ badge, setStringParam ]);
+
+    useEffect(() =>
+    {
+        setBadge(trigger.stringData);
+    }, [ trigger ]);
     
     return (
         <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="form-group">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.badgecode') }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.badgecode') }</Text>
                 <input type="text" className="form-control form-control-sm" value={ badge } onChange={ event => setBadge(event.target.value) } />
-            </div>
+            </Column>
         </WiredConditionBaseView>
     );
 }

src/components/wired/views/conditions/WiredConditionActorIsWearingEffectView.tsx

@@ -1,5 +1,7 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Text } from '../../../../common/Text';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredConditionBaseView } from './WiredConditionBaseView';
@@ -9,22 +11,22 @@ export const WiredConditionActorIsWearingEffectView: FC<{}> = props =>
     const [ effect, setEffect ] = useState(-1);
     const { trigger = null, setIntParams = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        setEffect((trigger.intData.length > 0) ? trigger.intData[0] : 0);
-    }, [ trigger ]);
-
     const save = useCallback(() =>
     {
         setIntParams([ effect ]);
     }, [ effect, setIntParams ]);
+
+    useEffect(() =>
+    {
+        setEffect((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+    }, [ trigger ]);
     
     return (
         <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="form-group">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.effectid') }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.effectid') }</Text>
                 <input type="number" className="form-control form-control-sm" value={ effect } onChange={ event => setEffect(parseInt(event.target.value)) } />
-            </div>
+            </Column>
         </WiredConditionBaseView>
     );
 }

src/components/wired/views/conditions/WiredConditionDateRangeView.tsx

@@ -1,5 +1,8 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredConditionBaseView } from './WiredConditionBaseView';
@@ -15,24 +18,6 @@ export const WiredConditionDateRangeView: FC<{}> = props =>
         return `${date.getFullYear()}/${('0' + (date.getMonth() + 1)).slice(-2)}/${('0' + date.getDate()).slice(-2)}${('0' + date.getHours()).slice(-2)}:${('0' + date.getMinutes()).slice(-2)}`;
     }, []);
 
-    useEffect(() =>
-    {
-        if(trigger.intData.length >= 2)
-        {
-            let startDate = new Date();
-            let endDate = new Date();
-
-            if(trigger.intData[0] > 0)
-                startDate = new Date((trigger.intData[0] * 1000));
-
-            if(trigger.intData[1] > 0)
-                endDate = new Date((trigger.intData[1] * 1000));
-
-            setStartDate(dateToString(startDate));
-            setEndDate(dateToString(endDate));
-        }
-    }, [ trigger, dateToString ]);
-
     const save = useCallback(() =>
     {
         let startDateMili = 0;
@@ -49,14 +34,36 @@ export const WiredConditionDateRangeView: FC<{}> = props =>
 
         setIntParams([startDateMili, endDateMili]);
     }, [ startDate, endDate, setIntParams ]);
+
+    useEffect(() =>
+    {
+        if(trigger.intData.length >= 2)
+        {
+            let startDate = new Date();
+            let endDate = new Date();
+
+            if(trigger.intData[0] > 0) startDate = new Date((trigger.intData[0] * 1000));
+
+            if(trigger.intData[1] > 0) endDate = new Date((trigger.intData[1] * 1000));
+
+            BatchUpdates(() =>
+            {
+                setStartDate(dateToString(startDate));
+                setEndDate(dateToString(endDate));
+            });
+        }
+    }, [ trigger, dateToString ]);
     
     return (
         <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="fw-bold">{ LocalizeText('wiredfurni.params.startdate') }</div>
+            <Column gap={ 1 }>
-            <input type="text" className="form-control form-control-sm" value={ startDate } onChange={ (e) => setStartDate(e.target.value) } />
+                <Text bold>{ LocalizeText('wiredfurni.params.startdate') }</Text>
-            <hr className="my-1 mb-2 bg-dark" />
+                <input type="text" className="form-control form-control-sm" value={ startDate } onChange={ (e) => setStartDate(e.target.value) } />
-            <div className="fw-bold">{ LocalizeText('wiredfurni.params.enddate') }</div>
+            </Column>
-            <input type="text" className="form-control form-control-sm" value={ endDate } onChange={ (e) => setEndDate(e.target.value) } />
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('wiredfurni.params.enddate') }</Text>
+                <input type="text" className="form-control form-control-sm" value={ endDate } onChange={ (e) => setEndDate(e.target.value) } />
+            </Column>
         </WiredConditionBaseView>
     );
 }

src/components/wired/views/conditions/WiredConditionFurniHasFurniOnView.tsx

@@ -1,5 +1,8 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Flex } from '../../../../common/Flex';
+import { Text } from '../../../../common/Text';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredConditionBaseView } from './WiredConditionBaseView';
@@ -9,32 +12,30 @@ export const WiredConditionFurniHasFurniOnView: FC<{}> = props =>
     const [ requireAll, setRequireAll ] = useState(-1);
     const { trigger = null, setIntParams = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        setRequireAll((trigger.intData.length > 0) ? trigger.intData[0] : 0);
-    }, [ trigger ]);
-
     const save = useCallback(() =>
     {
         setIntParams([ requireAll ]);
     }, [ requireAll, setIntParams ]);
+
+    useEffect(() =>
+    {
+        setRequireAll((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+    }, [ trigger ]);
     
     return (
         <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } save={ save }>
-            <div className="form-group">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.requireall') }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.requireall') }</Text>
                 { [0, 1].map(value =>
                     {
                         return (
-                            <div key={ value } className="form-check">
+                            <Flex gap={ 1 } key={ value }>
                                 <input className="form-check-input" type="radio" name="requireAll" id={ `requireAll${ value }` } checked={ (requireAll === value) } onChange={ event => setRequireAll(value) } />
-                                <label className="form-check-label" htmlFor={ `requireAll${ value }` }>
+                                <Text>{ LocalizeText('wiredfurni.params.requireall.' + value) }</Text>
-                                    { LocalizeText('wiredfurni.params.requireall.' + value) }
+                            </Flex>
-                                </label>
-                            </div>
                         )
                     }) }
-            </div>
+            </Column>
         </WiredConditionBaseView>
     );
 }

src/components/wired/views/conditions/WiredConditionFurniHasNotFurniOnView.tsx

@@ -1,5 +1,8 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Flex } from '../../../../common/Flex';
+import { Text } from '../../../../common/Text';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredConditionBaseView } from './WiredConditionBaseView';
@@ -9,32 +12,30 @@ export const WiredConditionFurniHasNotFurniOnView: FC<{}> = props =>
     const [ requireAll, setRequireAll ] = useState(-1);
     const { trigger = null, setIntParams = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        setRequireAll((trigger.intData.length > 0) ? trigger.intData[0] : 0);
-    }, [ trigger ]);
-
     const save = useCallback(() =>
     {
         setIntParams([ requireAll ]);
     }, [ requireAll, setIntParams ]);
+
+    useEffect(() =>
+    {
+        setRequireAll((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+    }, [ trigger ]);
     
     return (
         <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } save={ save }>
-            <div className="form-group">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.not_requireall') }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.not_requireall') }</Text>
                 { [0, 1].map(value =>
                     {
                         return (
-                            <div key={ value } className="form-check">
+                            <Flex gap={ 1 } key={ value }>
                                 <input className="form-check-input" type="radio" name="requireAll" id={ `requireAll${ value }` } checked={ (requireAll === value) } onChange={ event => setRequireAll(value) } />
-                                <label className="form-check-label" htmlFor={ `requireAll${ value }` }>
+                                <Text>{ LocalizeText(`wiredfurni.params.not_requireall.${ value }`) }</Text>
-                                    { LocalizeText(`wiredfurni.params.not_requireall.${ value }`) }
+                            </Flex>
-                                </label>
-                            </div>
                         )
                     }) }
-            </div>
+            </Column>
         </WiredConditionBaseView>
     );
 }

src/components/wired/views/conditions/WiredConditionFurniMatchesSnapshotView.tsx

@@ -1,5 +1,8 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Flex } from '../../../../common/Flex';
+import { Text } from '../../../../common/Text';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredConditionBaseView } from './WiredConditionBaseView';
@@ -11,41 +14,35 @@ export const WiredConditionFurniMatchesSnapshotView: FC<{}> = props =>
     const [ positionFlag, setPositionFlag ] = useState(-1);
     const { trigger = null, setIntParams = null } = useWiredContext();
 
+    const save = useCallback(() =>
+    {
+        setIntParams([ stateFlag, directionFlag, positionFlag ]);
+    }, [ directionFlag, positionFlag, stateFlag, setIntParams ]);
+
     useEffect(() =>
     {
         setStateFlag(trigger.getBoolean(0) ? 1 : 0);
         setDirectionFlag(trigger.getBoolean(1) ? 1 : 0);
         setPositionFlag(trigger.getBoolean(2) ? 1 : 0);
     }, [ trigger ]);
-
-    const save = useCallback(() =>
-    {
-        setIntParams([ stateFlag, directionFlag, positionFlag ]);
-    }, [ directionFlag, positionFlag, stateFlag, setIntParams ]);
     
     return (
         <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } save={ save }>
-            <div className="form-group">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.conditions') }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.conditions') }</Text>
-                <div className="form-check">
+                <Flex gap={ 1 }>
                     <input className="form-check-input" type="checkbox" id="stateFlag" onChange={ event => setStateFlag(event.target.checked ? 1 : 0) } />
-                    <label className="form-check-label" htmlFor="stateFlag">
+                    <Text>{ LocalizeText('wiredfurni.params.condition.state') }</Text>
-                        { LocalizeText('wiredfurni.params.condition.state') }
+                </Flex>
-                    </label>
+                <Flex gap={ 1 }>
-                </div>
-                <div className="form-check">
                     <input className="form-check-input" type="checkbox" id="directionFlag" onChange={ event => setDirectionFlag(event.target.checked ? 1 : 0) } />
-                    <label className="form-check-label" htmlFor="directionFlag">
+                    <Text>{ LocalizeText('wiredfurni.params.condition.direction') }</Text>
-                        { LocalizeText('wiredfurni.params.condition.direction') }
+                </Flex>
-                    </label>
+                <Flex gap={ 1 }>
-                </div>
-                <div className="form-check">
                     <input className="form-check-input" type="checkbox" id="positionFlag" onChange={ event => setPositionFlag(event.target.checked ? 1 : 0) } />
-                    <label className="form-check-label" htmlFor="positionFlag">
+                    <Text>{ LocalizeText('wiredfurni.params.condition.position') }</Text>
-                        { LocalizeText('wiredfurni.params.condition.position') }
+                </Flex>
-                    </label>
+            </Column>
-                </div>
-            </div>
         </WiredConditionBaseView>
     );
 }

src/components/wired/views/conditions/WiredConditionTimeElapsedLessView.tsx

@@ -1,6 +1,8 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Text } from '../../../../common/Text';
 import { GetWiredTimeLocale } from '../../common/GetWiredTimeLocale';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
@@ -11,27 +13,27 @@ export const WiredConditionTimeElapsedLessView: FC<{}> = props =>
     const [ time, setTime ] = useState(-1);
     const { trigger = null, setIntParams = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        setTime((trigger.intData.length > 0) ? trigger.intData[0] : 0);
-    }, [ trigger ]);
-
     const save = useCallback(() =>
     {
         setIntParams([ time ]);
     }, [ time, setIntParams ]);
+
+    useEffect(() =>
+    {
+        setTime((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+    }, [ trigger ]);
     
     return (
         <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="form-group">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.allowbefore', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.allowbefore', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 1200 }
                     value={ time }
                     onChange={ event => setTime(event) } />
-            </div>
+            </Column>
         </WiredConditionBaseView>
     );
 }

src/components/wired/views/conditions/WiredConditionTimeElapsedMoreView.tsx

@@ -1,6 +1,8 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Text } from '../../../../common/Text';
 import { GetWiredTimeLocale } from '../../common/GetWiredTimeLocale';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
@@ -11,27 +13,27 @@ export const WiredConditionTimeElapsedMoreView: FC<{}> = props =>
     const [ time, setTime ] = useState(-1);
     const { trigger = null, setIntParams = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        setTime((trigger.intData.length > 0) ? trigger.intData[0] : 0);
-    }, [ trigger ]);
-
     const save = useCallback(() =>
     {
         setIntParams([ time ]);
     }, [ time, setIntParams ]);
+
+    useEffect(() =>
+    {
+        setTime((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+    }, [ trigger ]);
     
     return (
         <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="form-group">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.allowafter', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.allowafter', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 1200 }
                     value={ time }
                     onChange={ event => setTime(event) } />
-            </div>
+            </Column>
         </WiredConditionBaseView>
     );
 }

src/components/wired/views/conditions/WiredConditionUserCountInRoomView.tsx

@@ -1,6 +1,8 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Text } from '../../../../common/Text';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredConditionBaseView } from './WiredConditionBaseView';
@@ -11,6 +13,11 @@ export const WiredConditionUserCountInRoomView: FC<{}> = props =>
     const [ max, setMax ] = useState(1);
     const { trigger = null, setIntParams = null } = useWiredContext();
 
+    const save = useCallback(() =>
+    {
+        setIntParams([ min, max ]);
+    }, [ min, max, setIntParams ]);
+
     useEffect(() =>
     {
         if(trigger.intData.length >= 2)
@@ -24,32 +31,27 @@ export const WiredConditionUserCountInRoomView: FC<{}> = props =>
             setMax(1);
         }
     }, [ trigger ]);
-
-    const save = useCallback(() =>
-    {
-        setIntParams([ min, max ]);
-    }, [ min, max, setIntParams ]);
     
     return (
         <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="form-group mb-2">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.usercountmin', [ 'value' ], [ min.toString() ]) }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.usercountmin', [ 'value' ], [ min.toString() ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 50 }
                     value={ min }
                     onChange={ event => setMin(event) } />
-            </div>
+            </Column>
-            <div className="form-group">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.usercountmax', [ 'value' ], [ max.toString() ]) }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.usercountmax', [ 'value' ], [ max.toString() ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 50 }
                     value={ max }
                     onChange={ event => setMax(event) } />
-            </div>
+            </Column>
         </WiredConditionBaseView>
     );
 }