From 336d125cb74d929bd5884f0b95fcb070101d492d Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Thu, 13 Jan 2022 11:42:28 -0500
Subject: [PATCH] Update wired conditions

---
 .../WiredConditionActorHasHandItem.tsx        | 22 ++++----
 .../WiredConditionActorIsTeamMemberView.tsx   | 29 +++++-----
 .../WiredConditionActorIsWearingBadgeView.tsx | 18 ++++---
 ...WiredConditionActorIsWearingEffectView.tsx | 18 ++++---
 .../WiredConditionDateRangeView.tsx           | 53 +++++++++++--------
 .../WiredConditionFurniHasFurniOnView.tsx     | 27 +++++-----
 .../WiredConditionFurniHasNotFurniOnView.tsx  | 27 +++++-----
 ...WiredConditionFurniMatchesSnapshotView.tsx | 43 +++++++--------
 .../WiredConditionTimeElapsedLessView.tsx     | 18 ++++---
 .../WiredConditionTimeElapsedMoreView.tsx     | 18 ++++---
 .../WiredConditionUserCountInRoomView.tsx     | 24 +++++----
 11 files changed, 158 insertions(+), 139 deletions(-)

diff --git a/src/components/wired/views/conditions/WiredConditionActorHasHandItem.tsx b/src/components/wired/views/conditions/WiredConditionActorHasHandItem.tsx
index d4e5c625..57574db0 100644
--- 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>
     );
 }
diff --git a/src/components/wired/views/conditions/WiredConditionActorIsTeamMemberView.tsx b/src/components/wired/views/conditions/WiredConditionActorIsTeamMemberView.tsx
index 49a50017..ab079ff8 100644
--- 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>
     );
 }
diff --git a/src/components/wired/views/conditions/WiredConditionActorIsWearingBadgeView.tsx b/src/components/wired/views/conditions/WiredConditionActorIsWearingBadgeView.tsx
index 832b9630..e0566ec3 100644
--- 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>
     );
 }
diff --git a/src/components/wired/views/conditions/WiredConditionActorIsWearingEffectView.tsx b/src/components/wired/views/conditions/WiredConditionActorIsWearingEffectView.tsx
index 1ccb5913..c3b48361 100644
--- 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>
     );
 }
diff --git a/src/components/wired/views/conditions/WiredConditionDateRangeView.tsx b/src/components/wired/views/conditions/WiredConditionDateRangeView.tsx
index dec8ec0c..4d613d7a 100644
--- 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;
@@ -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>
-            <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>
     );
 }
diff --git a/src/components/wired/views/conditions/WiredConditionFurniHasFurniOnView.tsx b/src/components/wired/views/conditions/WiredConditionFurniHasFurniOnView.tsx
index afdb43d0..79f8df23 100644
--- 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>
     );
 }
diff --git a/src/components/wired/views/conditions/WiredConditionFurniHasNotFurniOnView.tsx b/src/components/wired/views/conditions/WiredConditionFurniHasNotFurniOnView.tsx
index 1b1b0c7f..71cf5464 100644
--- 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>
     );
 }
diff --git a/src/components/wired/views/conditions/WiredConditionFurniMatchesSnapshotView.tsx b/src/components/wired/views/conditions/WiredConditionFurniMatchesSnapshotView.tsx
index 875ce507..c7aa6509 100644
--- 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,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">
-                <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>
     );
 }
diff --git a/src/components/wired/views/conditions/WiredConditionTimeElapsedLessView.tsx b/src/components/wired/views/conditions/WiredConditionTimeElapsedLessView.tsx
index 5f0ad4a4..bbe084b1 100644
--- 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>
     );
 }
diff --git a/src/components/wired/views/conditions/WiredConditionTimeElapsedMoreView.tsx b/src/components/wired/views/conditions/WiredConditionTimeElapsedMoreView.tsx
index 8c07c1e7..bb9dc66c 100644
--- 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>
     );
 }
diff --git a/src/components/wired/views/conditions/WiredConditionUserCountInRoomView.tsx b/src/components/wired/views/conditions/WiredConditionUserCountInRoomView.tsx
index 5f062029..897a7881 100644
--- 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)
@@ -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">
-                <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>
     );
 }