Update wired conditions

2025-01-19 05:46:27 +01:00 · 2022-01-13 11:42:28 -05:00 · 2022-01-13 11:42:28 -05:00 · 336d125cb7
commit 336d125cb7
parent af019da6e7
11 changed files with 158 additions and 139 deletions
--- a/src/components/wired/views/conditions/WiredConditionActorHasHandItem.tsx
+++ b/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">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.handitem') }</label>
+            <Column gap={ 1 }>
+                <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>
    );
 }
--- a/src/components/wired/views/conditions/WiredConditionActorIsTeamMemberView.tsx
+++ b/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">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.team') }</label>
+            <Column gap={ 1 }>
+                <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 }` }>
-                                    { LocalizeText(`wiredfurni.params.team.${ value }`) }
-                                </label>
-                            </div>
+                                <Text>{ LocalizeText(`wiredfurni.params.team.${ value }`) }</Text>
+                            </Flex>
                        ) 
                    }) }
-            </div>
+            </Column>
        </WiredConditionBaseView>
    );
 }
--- a/src/components/wired/views/conditions/WiredConditionActorIsWearingBadgeView.tsx
+++ b/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">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.badgecode') }</label>
+            <Column gap={ 1 }>
+                <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>
    );
 }
--- a/src/components/wired/views/conditions/WiredConditionActorIsWearingEffectView.tsx
+++ b/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">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.effectid') }</label>
+            <Column gap={ 1 }>
+                <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>
    );
 }
--- a/src/components/wired/views/conditions/WiredConditionDateRangeView.tsx
+++ b/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;
@ -50,13 +35,35 @@ 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>
-            <input type="text" className="form-control form-control-sm" value={ startDate } onChange={ (e) => setStartDate(e.target.value) } />
-            <hr className="my-1 mb-2 bg-dark" />
-            <div className="fw-bold">{ LocalizeText('wiredfurni.params.enddate') }</div>
-            <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.startdate') }</Text>
+                <input type="text" className="form-control form-control-sm" value={ startDate } onChange={ (e) => setStartDate(e.target.value) } />
+            </Column>
+            <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>
    );
 }
--- a/src/components/wired/views/conditions/WiredConditionFurniHasFurniOnView.tsx
+++ b/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">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.requireall') }</label>
+            <Column gap={ 1 }>
+                <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 }` }>
-                                    { LocalizeText('wiredfurni.params.requireall.' + value) }
-                                </label>
-                            </div>
+                                <Text>{ LocalizeText('wiredfurni.params.requireall.' + value) }</Text>
+                            </Flex>
                        )
                    }) }
-            </div>
+            </Column>
        </WiredConditionBaseView>
    );
 }
--- a/src/components/wired/views/conditions/WiredConditionFurniHasNotFurniOnView.tsx
+++ b/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">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.not_requireall') }</label>
+            <Column gap={ 1 }>
+                <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 }` }>
-                                    { LocalizeText(`wiredfurni.params.not_requireall.${ value }`) }
-                                </label>
-                            </div>
+                                <Text>{ LocalizeText(`wiredfurni.params.not_requireall.${ value }`) }</Text>
+                            </Flex>
                        )
                    }) }
-            </div>
+            </Column>
        </WiredConditionBaseView>
    );
 }
--- a/src/components/wired/views/conditions/WiredConditionFurniMatchesSnapshotView.tsx
+++ b/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,6 +14,11 @@ 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);
@ -18,34 +26,23 @@ export const WiredConditionFurniMatchesSnapshotView: FC<{}> = props =>
        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">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.conditions') }</label>
-                <div className="form-check">
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('wiredfurni.params.conditions') }</Text>
+                <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">
-                        { LocalizeText('wiredfurni.params.condition.state') }
-                    </label>
-                </div>
-                <div className="form-check">
+                    <Text>{ LocalizeText('wiredfurni.params.condition.state') }</Text>
+                </Flex>
+                <Flex gap={ 1 }>
                    <input className="form-check-input" type="checkbox" id="directionFlag" onChange={ event => setDirectionFlag(event.target.checked ? 1 : 0) } />
-                    <label className="form-check-label" htmlFor="directionFlag">
-                        { LocalizeText('wiredfurni.params.condition.direction') }
-                    </label>
-                </div>
-                <div className="form-check">
+                    <Text>{ LocalizeText('wiredfurni.params.condition.direction') }</Text>
+                </Flex>
+                <Flex gap={ 1 }>
                    <input className="form-check-input" type="checkbox" id="positionFlag" onChange={ event => setPositionFlag(event.target.checked ? 1 : 0) } />
-                    <label className="form-check-label" htmlFor="positionFlag">
-                        { LocalizeText('wiredfurni.params.condition.position') }
-                    </label>
-                </div>
-            </div>
+                    <Text>{ LocalizeText('wiredfurni.params.condition.position') }</Text>
+                </Flex>
+            </Column>
        </WiredConditionBaseView>
    );
 }
--- a/src/components/wired/views/conditions/WiredConditionTimeElapsedLessView.tsx
+++ b/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">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.allowbefore', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }</label>
+            <Column gap={ 1 }>
+                <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>
    );
 }
--- a/src/components/wired/views/conditions/WiredConditionTimeElapsedMoreView.tsx
+++ b/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">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.allowafter', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }</label>
+            <Column gap={ 1 }>
+                <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>
    );
 }
--- a/src/components/wired/views/conditions/WiredConditionUserCountInRoomView.tsx
+++ b/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)
@ -25,31 +32,26 @@ export const WiredConditionUserCountInRoomView: FC<{}> = props =>
        }
    }, [ 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">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.usercountmin', [ 'value' ], [ min.toString() ]) }</label>
+            <Column gap={ 1 }>
+                <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>
-            <div className="form-group">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.usercountmax', [ 'value' ], [ max.toString() ]) }</label>
+            </Column>
+            <Column gap={ 1 }>
+                <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>
    );
 }