duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-19 15:06:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(settings): card-style rows + section labels + 340px width

Browse Source 
Match the account window's look across all settings tabs: each control sits in
a rounded white card row with a section label, and the window width is 340px.
This commit is contained in:
simoleo89
2026-06-15 20:03:52 +02:00
parent 63b92a4e65
commit 992e65cb3d
1 changed files with 29 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/user-settings/UserSettingsView.tsx
+29 -27
View File
@@ -142,7 +142,7 @@ export const UserSettingsView: FC<{}> = props =>
if(!isVisible || !userSettings) return null; if(!isVisible || !userSettings) return null;
return ( return (
<NitroCardView className="user-settings-window w-[360px]" theme="primary-slim" uniqueKey="user-settings"> <NitroCardView className="user-settings-window w-[340px]" theme="primary-slim" uniqueKey="user-settings">
<NitroCardHeaderView headerText={ LocalizeText('widget.memenu.settings.title') } onCloseClick={ event => processAction('close_view') } /> <NitroCardHeaderView headerText={ LocalizeText('widget.memenu.settings.title') } onCloseClick={ event => processAction('close_view') } />
<NitroCardTabsView> <NitroCardTabsView>
<NitroCardTabsItemView isActive={ activeTab === 'audio' } onClick={ () => setActiveTab('audio') }> <NitroCardTabsItemView isActive={ activeTab === 'audio' } onClick={ () => setActiveTab('audio') }>
@@ -161,42 +161,44 @@ export const UserSettingsView: FC<{}> = props =>
{ (activeTab === 'account') { (activeTab === 'account')
? <UserAccountSettingsView embedded /> ? <UserAccountSettingsView embedded />
: ( : (
<NitroCardContentView className="text-black"> <NitroCardContentView className="flex flex-col gap-2 text-black">
{ (activeTab === 'chat') && { (activeTab === 'chat') &&
<div className="flex flex-col gap-1"> <>
<div className="flex items-center gap-1"> <Text small className="text-black/60 uppercase tracking-wider px-1">{ localizeWithFallback('room.chat.settings.title', 'Chat') }</Text>
<label className="flex items-center gap-2 rounded-md border border-black/10 bg-white px-3 py-2 cursor-pointer hover:bg-[#f5fbfd] hover:border-[#1e7295] transition-colors">
<input checked={ userSettings.oldChat } className="form-check-input" type="checkbox" onChange={ event => processAction('oldchat', event.target.checked) } /> <input checked={ userSettings.oldChat } className="form-check-input" type="checkbox" onChange={ event => processAction('oldchat', event.target.checked) } />
<Text>{ LocalizeText('memenu.settings.chat.prefer.old.chat') }</Text> <Text>{ LocalizeText('memenu.settings.chat.prefer.old.chat') }</Text>
</div> </label>
<div className="flex items-center gap-1"> <label className="flex items-center gap-2 rounded-md border border-black/10 bg-white px-3 py-2 cursor-pointer hover:bg-[#f5fbfd] hover:border-[#1e7295] transition-colors">
<input checked={ chatWindowEnabled } className="form-check-input" type="checkbox" onChange={ event => setChatWindowEnabled(event.target.checked) } /> <input checked={ chatWindowEnabled } className="form-check-input" type="checkbox" onChange={ event => setChatWindowEnabled(event.target.checked) } />
<Text>{ LocalizeText('memenu.settings.other.enable.chat.window') }</Text> <Text>{ LocalizeText('memenu.settings.other.enable.chat.window') }</Text>
</div> </label>
</div> } </> }
{ (activeTab === 'other') && { (activeTab === 'other') &&
<div className="flex flex-col gap-1"> <>
<div className="flex items-center gap-1"> <Text small className="text-black/60 uppercase tracking-wider px-1">{ localizeWithFallback('memenu.settings.other', 'Altre') }</Text>
<label className="flex items-center gap-2 rounded-md border border-black/10 bg-white px-3 py-2 cursor-pointer hover:bg-[#f5fbfd] hover:border-[#1e7295] transition-colors">
<input checked={ userSettings.roomInvites } className="form-check-input" type="checkbox" onChange={ event => processAction('room_invites', event.target.checked) } /> <input checked={ userSettings.roomInvites } className="form-check-input" type="checkbox" onChange={ event => processAction('room_invites', event.target.checked) } />
<Text>{ LocalizeText('memenu.settings.other.ignore.room.invites') }</Text> <Text>{ LocalizeText('memenu.settings.other.ignore.room.invites') }</Text>
</div> </label>
<div className="flex items-center gap-1"> <label className="flex items-center gap-2 rounded-md border border-black/10 bg-white px-3 py-2 cursor-pointer hover:bg-[#f5fbfd] hover:border-[#1e7295] transition-colors">
<input checked={ userSettings.cameraFollow } className="form-check-input" type="checkbox" onChange={ event => processAction('camera_follow', event.target.checked) } /> <input checked={ userSettings.cameraFollow } className="form-check-input" type="checkbox" onChange={ event => processAction('camera_follow', event.target.checked) } />
<Text>{ LocalizeText('memenu.settings.other.disable.room.camera.follow') }</Text> <Text>{ LocalizeText('memenu.settings.other.disable.room.camera.follow') }</Text>
</div> </label>
<div className="flex items-center gap-1"> <label className="flex items-center gap-2 rounded-md border border-black/10 bg-white px-3 py-2 cursor-pointer hover:bg-[#f5fbfd] hover:border-[#1e7295] transition-colors">
<input checked={ catalogPlaceMultipleObjects } className="form-check-input" type="checkbox" onChange={ event => setCatalogPlaceMultipleObjects(event.target.checked) } /> <input checked={ catalogPlaceMultipleObjects } className="form-check-input" type="checkbox" onChange={ event => setCatalogPlaceMultipleObjects(event.target.checked) } />
<Text>{ LocalizeText('memenu.settings.other.place.multiple.objects') }</Text> <Text>{ LocalizeText('memenu.settings.other.place.multiple.objects') }</Text>
</div> </label>
<div className="flex items-center gap-1"> <label className="flex items-center gap-2 rounded-md border border-black/10 bg-white px-3 py-2 cursor-pointer hover:bg-[#f5fbfd] hover:border-[#1e7295] transition-colors">
<input checked={ catalogSkipPurchaseConfirmation } className="form-check-input" type="checkbox" onChange={ event => setCatalogSkipPurchaseConfirmation(event.target.checked) } /> <input checked={ catalogSkipPurchaseConfirmation } className="form-check-input" type="checkbox" onChange={ event => setCatalogSkipPurchaseConfirmation(event.target.checked) } />
<Text>{ LocalizeText('memenu.settings.other.skip.purchase.confirmation') }</Text> <Text>{ LocalizeText('memenu.settings.other.skip.purchase.confirmation') }</Text>
</div> </label>
</div> } </> }
{ (activeTab === 'audio') && { (activeTab === 'audio') &&
<div className="flex flex-col"> <>
<Text bold>{ LocalizeText('widget.memenu.settings.volume') }</Text> <Text small className="text-black/60 uppercase tracking-wider px-1">{ localizeWithFallback('widget.memenu.settings.volume', 'Audio') }</Text>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1 rounded-md border border-black/10 bg-white px-3 py-2">
<Text>{ LocalizeText('widget.memenu.settings.volume.ui') }</Text> <Text bold>{ LocalizeText('widget.memenu.settings.volume.ui') }</Text>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
{ (userSettings.volumeSystem === 0) && <FaVolumeMute className={ classNames((userSettings.volumeSystem >= 50) && 'text-muted', 'fa-icon') } /> } { (userSettings.volumeSystem === 0) && <FaVolumeMute className={ classNames((userSettings.volumeSystem >= 50) && 'text-muted', 'fa-icon') } /> }
{ (userSettings.volumeSystem > 0) && <FaVolumeDown className={ classNames((userSettings.volumeSystem >= 50) && 'text-muted', 'fa-icon') } /> } { (userSettings.volumeSystem > 0) && <FaVolumeDown className={ classNames((userSettings.volumeSystem >= 50) && 'text-muted', 'fa-icon') } /> }
@@ -204,8 +206,8 @@ export const UserSettingsView: FC<{}> = props =>
<FaVolumeUp className={ classNames((userSettings.volumeSystem < 50) && 'text-muted', 'fa-icon') } /> <FaVolumeUp className={ classNames((userSettings.volumeSystem < 50) && 'text-muted', 'fa-icon') } />
</div> </div>
</div> </div>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1 rounded-md border border-black/10 bg-white px-3 py-2">
<Text>{ LocalizeText('widget.memenu.settings.volume.furni') }</Text> <Text bold>{ LocalizeText('widget.memenu.settings.volume.furni') }</Text>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
{ (userSettings.volumeFurni === 0) && <FaVolumeMute className={ classNames((userSettings.volumeFurni >= 50) && 'text-muted', 'fa-icon') } /> } { (userSettings.volumeFurni === 0) && <FaVolumeMute className={ classNames((userSettings.volumeFurni >= 50) && 'text-muted', 'fa-icon') } /> }
{ (userSettings.volumeFurni > 0) && <FaVolumeDown className={ classNames((userSettings.volumeFurni >= 50) && 'text-muted', 'fa-icon') } /> } { (userSettings.volumeFurni > 0) && <FaVolumeDown className={ classNames((userSettings.volumeFurni >= 50) && 'text-muted', 'fa-icon') } /> }
@@ -213,8 +215,8 @@ export const UserSettingsView: FC<{}> = props =>
<FaVolumeUp className={ classNames((userSettings.volumeFurni < 50) && 'text-muted', 'fa-icon') } /> <FaVolumeUp className={ classNames((userSettings.volumeFurni < 50) && 'text-muted', 'fa-icon') } />
</div> </div>
</div> </div>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1 rounded-md border border-black/10 bg-white px-3 py-2">
<Text>{ LocalizeText('widget.memenu.settings.volume.trax') }</Text> <Text bold>{ LocalizeText('widget.memenu.settings.volume.trax') }</Text>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
{ (userSettings.volumeTrax === 0) && <FaVolumeMute className={ classNames((userSettings.volumeTrax >= 50) && 'text-muted', 'fa-icon') } /> } { (userSettings.volumeTrax === 0) && <FaVolumeMute className={ classNames((userSettings.volumeTrax >= 50) && 'text-muted', 'fa-icon') } /> }
{ (userSettings.volumeTrax > 0) && <FaVolumeDown className={ classNames((userSettings.volumeTrax >= 50) && 'text-muted', 'fa-icon') } /> } { (userSettings.volumeTrax > 0) && <FaVolumeDown className={ classNames((userSettings.volumeTrax >= 50) && 'text-muted', 'fa-icon') } /> }
@@ -222,7 +224,7 @@ export const UserSettingsView: FC<{}> = props =>
<FaVolumeUp className={ classNames((userSettings.volumeTrax < 50) && 'text-muted', 'fa-icon') } /> <FaVolumeUp className={ classNames((userSettings.volumeTrax < 50) && 'text-muted', 'fa-icon') } />
</div> </div>
</div> </div>
</div> } </> }
</NitroCardContentView> </NitroCardContentView>
) } ) }
</NitroCardView> </NitroCardView>