From 092f6a831c96f64bda59271afe1202e55bf0d24f Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Sun, 15 Aug 2021 01:39:54 -0400
Subject: [PATCH] Update user settings

---
 src/views/user-settings/UserSettingsView.scss |  14 +--
 src/views/user-settings/UserSettingsView.tsx  | 102 +++++++-----------
 2 files changed, 45 insertions(+), 71 deletions(-)

diff --git a/src/views/user-settings/UserSettingsView.scss b/src/views/user-settings/UserSettingsView.scss
index bd87fb17..5c439eaf 100644
--- a/src/views/user-settings/UserSettingsView.scss
+++ b/src/views/user-settings/UserSettingsView.scss
@@ -1,15 +1,9 @@
 .user-settings-window
 {
-    .content-area
-    {
-        color: black;
-    }
+    .content-area {
 
-    .custom-range {
-        margin-top: 3px;
-    }
-
-    .icon-container {
-        width: 50px;
+        .fas {
+            width: 20px;
+        }
     }
 }
diff --git a/src/views/user-settings/UserSettingsView.tsx b/src/views/user-settings/UserSettingsView.tsx
index f30a2c34..b473d33c 100644
--- a/src/views/user-settings/UserSettingsView.tsx
+++ b/src/views/user-settings/UserSettingsView.tsx
@@ -8,8 +8,8 @@ import { LocalizeText } from '../../utils';
 
 export const UserSettingsView: FC<{}> = props =>
 {
-    const [isVisible, setIsVisible] = useState(false);
-    const [userSettings, setUserSettings] = useState<NitroSettingsEvent>(null);
+    const [ isVisible, setIsVisible ] = useState(false);
+    const [ userSettings, setUserSettings ] = useState<NitroSettingsEvent>(null);
 
     const onUserSettingsUIEvent = useCallback((event: UserSettingsUIEvent) =>
     {
@@ -114,67 +114,47 @@ export const UserSettingsView: FC<{}> = props =>
     if (!isVisible) return null;
 
     return (
-        <div className="user-settings-window">
-            <NitroCardView>
-                <NitroCardHeaderView headerText={LocalizeText('widget.memenu.settings.title')} onCloseClick={event => processAction('close_view')} />
-                <NitroCardContentView>
-                    <div className="form-check">
-                        <input className="form-check-input" type="checkbox" checked={userSettings.oldChat} onChange={event => processAction('oldchat', event.target.checked)} />
-                        <label className="form-check-label">{LocalizeText('memenu.settings.chat.prefer.old.chat')}</label>
+        <NitroCardView uniqueKey="user-settings" className="user-settings-window">
+            <NitroCardHeaderView headerText={ LocalizeText('widget.memenu.settings.title') } onCloseClick={event => processAction('close_view')} />
+            <NitroCardContentView className="text-black">
+                <div className="form-check">
+                    <input className="form-check-input" type="checkbox" checked={ userSettings.oldChat } onChange={ event => processAction('oldchat', event.target.checked) } />
+                    <label className="form-check-label">{ LocalizeText('memenu.settings.chat.prefer.old.chat') }</label>
+                </div>
+                <div className="form-check">
+                    <input className="form-check-input" type="checkbox" checked={ userSettings.roomInvites } onChange={ event => processAction('room_invites', event.target.checked) } />
+                    <label className="form-check-label">{ LocalizeText('memenu.settings.other.ignore.room.invites') }</label>
+                </div>
+                <div className="form-check">
+                    <input className="form-check-input" type="checkbox" checked={ userSettings.cameraFollow } onChange={ event => processAction('camera_follow', event.target.checked) } />
+                    <label className="form-check-label">{ LocalizeText('memenu.settings.other.disable.room.camera.follow') }</label>
+                </div>
+                <div className="mt-3 mb-2">{ LocalizeText('widget.memenu.settings.volume') }</div>
+                <div className="mb-2">
+                    <label>{ LocalizeText('widget.memenu.settings.volume.ui') }</label>
+                    <div className={ 'd-flex align-items-center justify-content-center' }>
+                        <i className={ 'fas' + ((userSettings.volumeSystem === 0) ? ' fa-volume-mute' : '') + ((userSettings.volumeSystem > 0) ? ' fa-volume-down' : '') + ((userSettings.volumeSystem >= 50) ? ' text-muted' : '') } />
+                        <input type="range" className="custom-range ms-2 me-2 w-100" min="0" max="100" step="1" id="volumeSystem" value={ userSettings.volumeSystem } onChange={ event => processAction("system_volume", event.target.value) } onMouseUp={ () => saveRangeSlider("volume") }/>
+                        <i className={ 'fas fa-volume-up' + ((userSettings.volumeSystem < 50) ? ' text-muted': '') } />
                     </div>
-                    <div className="form-check">
-                        <input className="form-check-input" type="checkbox" checked={userSettings.roomInvites} onChange={event => processAction('room_invites', event.target.checked)} />
-                        <label className="form-check-label">{LocalizeText('memenu.settings.other.ignore.room.invites')}</label>
+                </div>
+                <div className="mb-2">
+                    <label>{ LocalizeText('widget.memenu.settings.volume.furni') }</label>
+                    <div className={ 'd-flex align-items-center justify-content-center' }>
+                        <i className={ 'fas' + ((userSettings.volumeFurni === 0) ? ' fa-volume-mute' : '') + ((userSettings.volumeFurni > 0) ? ' fa-volume-down' : '') + ((userSettings.volumeFurni >= 50) ? ' text-muted' : '') } />
+                        <input type="range" className="custom-range ms-2 me-2 w-100" min="0" max="100" step="1" id="volumeFurni" value={ userSettings.volumeFurni } onChange={ event => processAction("furni_volume", event.target.value) } onMouseUp={ () => saveRangeSlider("volume") }/>
+                        <i className={ 'fas fa-volume-up' + ((userSettings.volumeFurni < 50) ? ' text-muted': '') } />
                     </div>
-                    <div className="form-check">
-                        <input className="form-check-input" type="checkbox" checked={userSettings.cameraFollow} onChange={event => processAction('camera_follow', event.target.checked)} />
-                        <label className="form-check-label">{LocalizeText('memenu.settings.other.disable.room.camera.follow')}</label>
+                </div>
+                <div className="mb-2">
+                    <label>{ LocalizeText('widget.memenu.settings.volume.trax') }</label>
+                    <div className={ 'd-flex align-items-center justify-content-center' }>
+                        <i className={ 'fas' + ((userSettings.volumeTrax === 0) ? ' fa-volume-mute' : '') + ((userSettings.volumeTrax > 0) ? ' fa-volume-down' : '') + ((userSettings.volumeTrax >= 50) ? ' text-muted' : '') } />
+                        <input type="range" className="custom-range ms-2 me-2 w-100" min="0" max="100" step="1" id="volumeTrax" value={ userSettings.volumeTrax } onChange={ event => processAction("trax_volume", event.target.value) } onMouseUp={ () => saveRangeSlider("volume") }/>
+                        <i className={ 'fas fa-volume-up' + ((userSettings.volumeTrax < 50) ? ' text-muted': '') } />
                     </div>
-                    <div className="mt-3 mb-2">{LocalizeText('widget.memenu.settings.volume')}</div>
-                    <div className="mb-2">
-                        <label>{LocalizeText('widget.memenu.settings.volume.ui')}</label>
-                        <div className="d-flex flex-row">
-                            <div className={ 'icon-container ' + (userSettings.volumeSystem >= 50 ? 'text-muted' : '')}>
-                                <i className={'fas ' + (userSettings.volumeSystem === 0 ? 'fa-volume-mute' : '') + (userSettings.volumeSystem > 0 ? 'fa-volume-down' : '')}></i>
-                            </div>
-                            <div className="w-100 ml-2 mr-2">
-                                <input type="range" className="custom-range" min="0" max="100" step="1" id="volumeSystem" value={userSettings.volumeSystem} onChange={event => processAction("system_volume", event.target.value)} onMouseUp={ () => saveRangeSlider("volume")}/>
-                            </div>
-                            <div className={ userSettings.volumeSystem < 50 ? 'text-muted': '' }>
-                                <i className="fas fa-volume-up"></i>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="mb-2">
-                        <label>{LocalizeText('widget.memenu.settings.volume.furni')}</label>
-                        <div className="d-flex flex-row">
-                            <div className={ 'icon-container ' + (userSettings.volumeFurni >= 50 ? 'text-muted' : '')}>
-                                <i className={'fas ' + (userSettings.volumeFurni === 0 ? 'fa-volume-mute' : '') + (userSettings.volumeFurni > 0 ? 'fa-volume-down' : '')}></i>
-                            </div>
-                            <div className="w-100 ml-2 mr-2">
-                                <input type="range" className="custom-range" min="0" max="100" step="1" id="volumeSystem" value={userSettings.volumeFurni} onChange={event => processAction("furni_volume", event.target.value)} onMouseUp={ () => saveRangeSlider("volume")}/>
-                            </div>
-                            <div className={ userSettings.volumeFurni < 50 ? 'text-muted': '' }>
-                                <i className="fas fa-volume-up"></i>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="mb-2">
-                        <label>{LocalizeText('widget.memenu.settings.volume.trax')}</label>
-                        <div className="d-flex flex-row">
-                            <div className={'icon-container ' + (userSettings.volumeTrax >= 50 ? 'text-muted' : '')}>
-                                <i className={'fas ' + (userSettings.volumeTrax === 0 ? 'fa-volume-mute' : '') + (userSettings.volumeTrax > 0 ? 'fa-volume-down' : '')}></i>
-                            </div>
-                            <div className="w-100 ml-2 mr-2">
-                                <input type="range" className="custom-range" min="0" max="100" step="1" id="volumeSystem" value={userSettings.volumeTrax} onChange={event => processAction("trax_volume", event.target.value)} onMouseUp={ () => saveRangeSlider("volume")}/>
-                            </div>
-                            <div className={ userSettings.volumeTrax < 50 ? 'text-muted': '' }>
-                                <i className="fas fa-volume-up"></i>
-                            </div>
-                        </div>
-                    </div>
-                </NitroCardContentView>
-            </NitroCardView>
-        </div>
+                </div>
+            </NitroCardContentView>
+        </NitroCardView>
     );
 }