Update user setting styling

This commit is contained in:
MyNameIsBatman 2022-02-13 12:52:28 -03:00
parent 9d664896d5
commit 3ebe441906

View File

@ -114,9 +114,10 @@ export const UserSettingsView: FC<{}> = props =>
if(!isVisible) return null; if(!isVisible) return null;
return ( return (
<NitroCardView uniqueKey="user-settings" className="user-settings-window"> <NitroCardView uniqueKey="user-settings" className="user-settings-window" simple>
<NitroCardHeaderView headerText={ LocalizeText('widget.memenu.settings.title') } onCloseClick={event => processAction('close_view')} /> <NitroCardHeaderView headerText={ LocalizeText('widget.memenu.settings.title') } onCloseClick={event => processAction('close_view')} />
<NitroCardContentView className="text-black"> <NitroCardContentView className="text-black d-flex flex-column gap-2">
<div className="d-flex flex-column gap-1">
<div className="form-check"> <div className="form-check">
<input className="form-check-input" type="checkbox" checked={ userSettings.oldChat } onChange={ event => processAction('oldchat', event.target.checked) } /> <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> <label className="form-check-label">{ LocalizeText('memenu.settings.chat.prefer.old.chat') }</label>
@ -129,8 +130,10 @@ export const UserSettingsView: FC<{}> = props =>
<input className="form-check-input" type="checkbox" checked={ userSettings.cameraFollow } onChange={ event => processAction('camera_follow', event.target.checked) } /> <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> <label className="form-check-label">{ LocalizeText('memenu.settings.other.disable.room.camera.follow') }</label>
</div> </div>
<div className="mt-3 mb-2">{ LocalizeText('widget.memenu.settings.volume') }</div> </div>
<div className="mb-2"> <div className="d-flex flex-column gap-2">
<div className="fw-bold">{ LocalizeText('widget.memenu.settings.volume') }</div>
<div>
<label>{ LocalizeText('widget.memenu.settings.volume.ui') }</label> <label>{ LocalizeText('widget.memenu.settings.volume.ui') }</label>
<div className={ 'd-flex align-items-center justify-content-center' }> <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' : '') } /> <i className={ 'fas' + ((userSettings.volumeSystem === 0) ? ' fa-volume-mute' : '') + ((userSettings.volumeSystem > 0) ? ' fa-volume-down' : '') + ((userSettings.volumeSystem >= 50) ? ' text-muted' : '') } />
@ -138,7 +141,7 @@ export const UserSettingsView: FC<{}> = props =>
<i className={ 'fas fa-volume-up' + ((userSettings.volumeSystem < 50) ? ' text-muted': '') } /> <i className={ 'fas fa-volume-up' + ((userSettings.volumeSystem < 50) ? ' text-muted': '') } />
</div> </div>
</div> </div>
<div className="mb-2"> <div>
<label>{ LocalizeText('widget.memenu.settings.volume.furni') }</label> <label>{ LocalizeText('widget.memenu.settings.volume.furni') }</label>
<div className={ 'd-flex align-items-center justify-content-center' }> <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' : '') } /> <i className={ 'fas' + ((userSettings.volumeFurni === 0) ? ' fa-volume-mute' : '') + ((userSettings.volumeFurni > 0) ? ' fa-volume-down' : '') + ((userSettings.volumeFurni >= 50) ? ' text-muted' : '') } />
@ -146,7 +149,7 @@ export const UserSettingsView: FC<{}> = props =>
<i className={ 'fas fa-volume-up' + ((userSettings.volumeFurni < 50) ? ' text-muted': '') } /> <i className={ 'fas fa-volume-up' + ((userSettings.volumeFurni < 50) ? ' text-muted': '') } />
</div> </div>
</div> </div>
<div className="mb-2"> <div>
<label>{ LocalizeText('widget.memenu.settings.volume.trax') }</label> <label>{ LocalizeText('widget.memenu.settings.volume.trax') }</label>
<div className={ 'd-flex align-items-center justify-content-center' }> <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' : '') } /> <i className={ 'fas' + ((userSettings.volumeTrax === 0) ? ' fa-volume-mute' : '') + ((userSettings.volumeTrax > 0) ? ' fa-volume-down' : '') + ((userSettings.volumeTrax >= 50) ? ' text-muted' : '') } />
@ -154,6 +157,7 @@ export const UserSettingsView: FC<{}> = props =>
<i className={ 'fas fa-volume-up' + ((userSettings.volumeTrax < 50) ? ' text-muted': '') } /> <i className={ 'fas fa-volume-up' + ((userSettings.volumeTrax < 50) ? ' text-muted': '') } />
</div> </div>
</div> </div>
</div>
</NitroCardContentView> </NitroCardContentView>
</NitroCardView> </NitroCardView>
); );