From c34e06a5d05aaf61b300a9b0879f27727d2996cd Mon Sep 17 00:00:00 2001
From: DuckieTM <info@camwijs.nl>
Date: Thu, 20 Mar 2025 22:07:55 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20Navigator=20Room=20Settings=20an?=
 =?UTF-8?q?d=20other=20Visual=20update?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../NavigatorRoomSettingsAccessTabView.tsx    | 26 +++++++++----------
 .../NavigatorRoomSettingsBasicTabView.tsx     | 26 +++++++++----------
 .../NavigatorRoomSettingsModTabView.tsx       | 10 +++----
 .../NavigatorRoomSettingsRightsTabView.tsx    |  4 +--
 .../NavigatorRoomSettingsVipChatTabView.tsx   | 16 ++++++------
 src/components/toolbar/ToolbarMeView.tsx      |  2 +-
 src/css/forms/form_select.css                 | 24 +++++++++++++++++
 src/css/room/NavigatorRoomSettings.css        | 11 ++++++++
 src/css/room/RoomWidgets.css                  | 20 +++-----------
 src/index.tsx                                 |  4 +++
 10 files changed, 85 insertions(+), 58 deletions(-)
 create mode 100644 src/css/forms/form_select.css
 create mode 100644 src/css/room/NavigatorRoomSettings.css

diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsAccessTabView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsAccessTabView.tsx
index 828f103..e9318b1 100644
--- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsAccessTabView.tsx
+++ b/src/components/navigator/views/room-settings/NavigatorRoomSettingsAccessTabView.tsx
@@ -33,53 +33,53 @@ export const NavigatorRoomSettingsAccessTabView: FC<NavigatorRoomSettingsTabView
     return (
         <>
             <div className="flex flex-col gap-1">
-                <Text bold>{ LocalizeText('navigator.roomsettings.roomaccess.caption') }</Text>
-                <Text>{ LocalizeText('navigator.roomsettings.roomaccess.info') }</Text>
+                <Text small bold>{ LocalizeText('navigator.roomsettings.roomaccess.caption') }</Text>
+                <Text small>{ LocalizeText('navigator.roomsettings.roomaccess.info') }</Text>
             </div>
             <div className="overflow-auto">
                 <div className="flex flex-col gap-1">
-                    <Text bold>{ LocalizeText('navigator.roomsettings.doormode') }</Text>
+                    <Text small bold>{ LocalizeText('navigator.roomsettings.doormode') }</Text>
                     <div className="flex items-center gap-1">
                         <input checked={ (roomData.lockState === RoomDataParser.OPEN_STATE) && !isTryingPassword } className="form-check-input" name="lockState" type="radio" onChange={ event => handleChange('lock_state', RoomDataParser.OPEN_STATE) } />
-                        <Text>{ LocalizeText('navigator.roomsettings.doormode.open') }</Text>
+                        <Text small>{ LocalizeText('navigator.roomsettings.doormode.open') }</Text>
                     </div>
                     <div className="flex items-center gap-1">
                         <input checked={ (roomData.lockState === RoomDataParser.DOORBELL_STATE) && !isTryingPassword } className="form-check-input" name="lockState" type="radio" onChange={ event => handleChange('lock_state', RoomDataParser.DOORBELL_STATE) } />
-                        <Text>{ LocalizeText('navigator.roomsettings.doormode.doorbell') }</Text>
+                        <Text small>{ LocalizeText('navigator.roomsettings.doormode.doorbell') }</Text>
                     </div>
                     <div className="flex items-center gap-1">
                         <input checked={ (roomData.lockState === RoomDataParser.INVISIBLE_STATE) && !isTryingPassword } className="form-check-input" name="lockState" type="radio" onChange={ event => handleChange('lock_state', RoomDataParser.INVISIBLE_STATE) } />
-                        <Text>{ LocalizeText('navigator.roomsettings.doormode.invisible') }</Text>
+                        <Text small>{ LocalizeText('navigator.roomsettings.doormode.invisible') }</Text>
                     </div>
                     <div className="flex w-full gap-1">
                         <input checked={ (roomData.lockState === RoomDataParser.PASSWORD_STATE) || isTryingPassword } className="form-check-input" name="lockState" type="radio" onChange={ event => setIsTryingPassword(event.target.checked) } />
                         { !isTryingPassword && (roomData.lockState !== RoomDataParser.PASSWORD_STATE) &&
-                            <Text>{ LocalizeText('navigator.roomsettings.doormode.password') }</Text> }
+                            <Text small>{ LocalizeText('navigator.roomsettings.doormode.password') }</Text> }
                         { (isTryingPassword || (roomData.lockState === RoomDataParser.PASSWORD_STATE)) &&
                             <div className="flex flex-col gap-1">
-                                <Text>{ LocalizeText('navigator.roomsettings.doormode.password') }</Text>
+                                <Text small>{ LocalizeText('navigator.roomsettings.doormode.password') }</Text>
                                 <input className="min-h-[calc(1.5em+ .5rem+2px)] px-[.5rem] py-[.25rem]  rounded-[.2rem] form-control-sm col-span-4" placeholder={ LocalizeText('navigator.roomsettings.password') } type="password" value={ password } onChange={ event => setPassword(event.target.value) } onFocus={ event => setIsTryingPassword(true) } />
                                 { isTryingPassword && (password.length <= 0) &&
-                                    <Text bold small variant="danger">
+                                    <Text small bold small variant="danger">
                                         { LocalizeText('navigator.roomsettings.passwordismandatory') }
                                     </Text> }
                                 <input className="min-h-[calc(1.5em+ .5rem+2px)] px-[.5rem] py-[.25rem]  rounded-[.2rem] form-control-sm col-span-4" placeholder={ LocalizeText('navigator.roomsettings.passwordconfirm') } type="password" value={ confirmPassword } onBlur={ saveRoomPassword } onChange={ event => setConfirmPassword(event.target.value) } />
                                 { isTryingPassword && ((password.length > 0) && (password !== confirmPassword)) &&
-                                    <Text bold small variant="danger">
+                                    <Text small bold small variant="danger">
                                         { LocalizeText('navigator.roomsettings.invalidconfirm') }
                                     </Text> }
                             </div> }
                     </div>
                 </div>
                 <div className="flex flex-col gap-1">
-                    <Text bold>{ LocalizeText('navigator.roomsettings.pets') }</Text>
+                    <Text small bold>{ LocalizeText('navigator.roomsettings.pets') }</Text>
                     <div className="flex items-center gap-1">
                         <input checked={ roomData.allowPets } className="form-check-input" type="checkbox" onChange={ event => handleChange('allow_pets', event.target.checked) } />
-                        <Text>{ LocalizeText('navigator.roomsettings.allowpets') }</Text>
+                        <Text small>{ LocalizeText('navigator.roomsettings.allowpets') }</Text>
                     </div>
                     <div className="flex items-center gap-1">
                         <input checked={ roomData.allowPetsEat } className="form-check-input" type="checkbox" onChange={ event => handleChange('allow_pets_eat', event.target.checked) } />
-                        <Text>{ LocalizeText('navigator.roomsettings.allowfoodconsume') }</Text>
+                        <Text small>{ LocalizeText('navigator.roomsettings.allowfoodconsume') }</Text>
                     </div>
                 </div>
             </div>
diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsBasicTabView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsBasicTabView.tsx
index c2b2575..88455db 100644
--- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsBasicTabView.tsx
+++ b/src/components/navigator/views/room-settings/NavigatorRoomSettingsBasicTabView.tsx
@@ -100,9 +100,9 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
     return (
         <>
             <div className="flex items-center gap-1">
-                <Text className="col-span-3">{ LocalizeText('navigator.roomname') }</Text>
+                <Text small className="col-span-3">{ LocalizeText('navigator.roomname') }</Text>
                 <Column fullWidth gap={ 0 }>
-                    <NitroInput maxLength={ ROOM_NAME_MAX_LENGTH } value={ roomName } onBlur={ saveRoomName } onChange={ event => setRoomName(event.target.value) } />
+                    <NitroInput className="form-control-sm" maxLength={ ROOM_NAME_MAX_LENGTH } value={ roomName } onBlur={ saveRoomName } onChange={ event => setRoomName(event.target.value) } />
                     { (roomName.length < ROOM_NAME_MIN_LENGTH) &&
                         <Text bold small variant="danger">
                             { LocalizeText('navigator.roomsettings.roomnameismandatory') }
@@ -110,23 +110,23 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
                 </Column>
             </div>
             <div className="flex items-center gap-1">
-                <Text className="col-span-3">{ LocalizeText('navigator.roomsettings.desc') }</Text>
+                <Text small className="col-span-3">{ LocalizeText('navigator.roomsettings.desc') }</Text>
                 <textarea className="min-h-[calc(1.5em+ .5rem+2px)] px-[.5rem] py-[.25rem]  rounded-[.2rem] form-control-sm" maxLength={ DESC_MAX_LENGTH } value={ roomDescription } onBlur={ saveRoomDescription } onChange={ event => setRoomDescription(event.target.value) } />
             </div>
             <div className="flex items-center gap-1">
-                <Text className="col-span-3">{ LocalizeText('navigator.category') }</Text>
+                <Text small className="col-span-3">{ LocalizeText('navigator.category') }</Text>
                 <select className="form-select form-select-sm" value={ roomData.categoryId } onChange={ event => handleChange('category', event.target.value) }>
                     { categories && categories.map(category => <option key={ category.id } value={ category.id }>{ LocalizeText(category.name) }</option>) }
                 </select>
             </div>
             <div className="flex items-center gap-1">
-                <Text className="col-span-3">{ LocalizeText('navigator.maxvisitors') }</Text>
+                <Text small className="col-span-3">{ LocalizeText('navigator.maxvisitors') }</Text>
                 <select className="form-select form-select-sm" value={ roomData.userCount } onChange={ event => handleChange('max_visitors', event.target.value) }>
                     { GetMaxVisitorsList && GetMaxVisitorsList.map(value => <option key={ value } value={ value }>{ value }</option>) }
                 </select>
             </div>
-            <div className="flex items-center gap-1">
-                <Text className="col-span-3">{ LocalizeText('navigator.tradesettings') }</Text>
+            <div className="flex items-center gap-0">
+                <Text small className="col-span-3">{ LocalizeText('navigator.tradesettings') }</Text>
                 <select className="form-select form-select-sm" value={ roomData.tradeState } onChange={ event => handleChange('trade_state', event.target.value) }>
                     <option value="0">{ LocalizeText('navigator.roomsettings.trade_not_allowed') }</option>
                     <option value="1">{ LocalizeText('navigator.roomsettings.trade_not_with_Controller') }</option>
@@ -134,9 +134,9 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
                 </select>
             </div>
             <div className="flex items-center gap-1">
-                <Text className="col-span-3">{ LocalizeText('navigator.tags') }</Text>
+                <Text small className="col-span-3">{ LocalizeText('navigator.tags') }</Text>
                 <Column fullWidth gap={ 0 }>
-                    <NitroInput value={ roomTag1 } onBlur={ () => saveTags(0) } onChange={ event => setRoomTag1(event.target.value) } />
+                    <NitroInput className="form-control-sm" value={ roomTag1 } onBlur={ () => saveTags(0) } onChange={ event => setRoomTag1(event.target.value) } />
                     { (roomTag1.length > TAGS_MAX_LENGTH) &&
                         <Text bold small variant="danger">
                             { LocalizeText('navigator.roomsettings.toomanycharacters') }
@@ -147,7 +147,7 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
                         </Text> }
                 </Column>
                 <Column fullWidth gap={ 0 }>
-                    <NitroInput value={ roomTag2 } onBlur={ () => saveTags(1) } onChange={ event => setRoomTag2(event.target.value) } />
+                    <NitroInput className="form-control-sm" value={ roomTag2 } onBlur={ () => saveTags(1) } onChange={ event => setRoomTag2(event.target.value) } />
                     { (roomTag2.length > TAGS_MAX_LENGTH) &&
                         <Text bold small variant="danger">
                             { LocalizeText('navigator.roomsettings.toomanycharacters') }
@@ -159,11 +159,11 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
                 </Column>
             </div>
             <div className="flex items-center gap-1">
-                <div className="col-span-3" />
+                <div className="col-span-1" />
                 <input checked={ roomData.allowWalkthrough } className="form-check-input" type="checkbox" onChange={ event => handleChange('allow_walkthrough', event.target.checked) } />
-                <Text>{ LocalizeText('navigator.roomsettings.allow_walk_through') }</Text>
+                <Text small>{ LocalizeText('navigator.roomsettings.allow_walk_through') }</Text>
             </div>
-            <Text bold pointer underline className="flex items-center justify-center gap-1" variant="danger" onClick={ deleteRoom }>
+            <Text small bold pointer underline className="flex items-center justify-center gap-1" variant="danger" onClick={ deleteRoom }>
                 <FaTimes className="fa-icon" />
                 { LocalizeText('navigator.roomsettings.delete') }
             </Text>
diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx
index 0e0bd7f..9a00f94 100644
--- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx
+++ b/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx
@@ -51,7 +51,7 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
     return (
         <Grid overflow="auto">
             <Column size={ 6 }>
-                <Text bold>{ LocalizeText('navigator.roomsettings.moderation.banned.users') } ({ bannedUsers.length })</Text>
+                <Text small bold>{ LocalizeText('navigator.roomsettings.moderation.banned.users') } ({ bannedUsers.length })</Text>
                 <Flex className="bg-white rounded list-container p-2" overflow="hidden">
                     <Column fullWidth gap={ 1 } overflow="auto">
                         { bannedUsers && (bannedUsers.length > 0) && bannedUsers.map((user, index) =>
@@ -59,7 +59,7 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
                             return (
                                 <Flex key={ index } shrink alignItems="center" gap={ 1 } overflow="hidden">
                                     <UserProfileIconView userName={ user.userName } />
-                                    <Text grow pointer onClick={ event => setSelectedUserId(user.userId) }> { user.userName }</Text>
+                                    <Text small grow pointer onClick={ event => setSelectedUserId(user.userId) }> { user.userName }</Text>
                                 </Flex>
                             );
                         }) }
@@ -71,7 +71,7 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
             </Column>
             <Column size={ 6 }>
                 <div className="flex flex-col gap-1">
-                    <Text bold>{ LocalizeText('navigator.roomsettings.moderation.mute.header') }</Text>
+                    <Text small bold>{ LocalizeText('navigator.roomsettings.moderation.mute.header') }</Text>
                     <div className="flex items-center gap-1">
                         <select className="form-select form-select-sm" value={ roomData.moderationSettings.allowMute } onChange={ event => handleChange('moderation_mute', event.target.value) }>
                             <option value={ RoomModerationSettings.MODERATION_LEVEL_NONE }>
@@ -84,7 +84,7 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
                     </div>
                 </div>
                 <div className="flex flex-col gap-1">
-                    <Text bold>{ LocalizeText('navigator.roomsettings.moderation.kick.header') }</Text>
+                    <Text small bold>{ LocalizeText('navigator.roomsettings.moderation.kick.header') }</Text>
                     <div className="flex items-center gap-1">
                         <select className="form-select form-select-sm" value={ roomData.moderationSettings.allowKick } onChange={ event => handleChange('moderation_kick', event.target.value) }>
                             <option value={ RoomModerationSettings.MODERATION_LEVEL_NONE }>
@@ -100,7 +100,7 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
                     </div>
                 </div>
                 <div className="flex flex-col gap-1">
-                    <Text bold>{ LocalizeText('navigator.roomsettings.moderation.ban.header') }</Text>
+                    <Text small bold>{ LocalizeText('navigator.roomsettings.moderation.ban.header') }</Text>
                     <div className="flex items-center gap-1">
                         <select className="form-select form-select-sm" value={ roomData.moderationSettings.allowBan } onChange={ event => handleChange('moderation_ban', event.target.value) }>
                             <option value={ RoomModerationSettings.MODERATION_LEVEL_NONE }>
diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsRightsTabView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsRightsTabView.tsx
index cd62227..242cb26 100644
--- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsRightsTabView.tsx
+++ b/src/components/navigator/views/room-settings/NavigatorRoomSettingsRightsTabView.tsx
@@ -64,7 +64,7 @@ export const NavigatorRoomSettingsRightsTabView: FC<NavigatorRoomSettingsTabView
     return (
         <Grid>
             <Column size={ 6 }>
-                <Text bold>
+                <Text small bold>
                     { LocalizeText('navigator.flatctrls.userswithrights', [ 'displayed', 'total' ], [ usersWithRights.size.toString(), usersWithRights.size.toString() ]) }
                 </Text>
                 <Flex className="bg-white rounded list-container p-2" overflow="hidden">
@@ -74,7 +74,7 @@ export const NavigatorRoomSettingsRightsTabView: FC<NavigatorRoomSettingsTabView
                             return (
                                 <Flex key={ index } shrink alignItems="center" gap={ 1 } overflow="hidden">
                                     <UserProfileIconView userName={ name } />
-                                    <Text grow pointer onClick={ event => SendMessageComposer(new RoomTakeRightsComposer(id)) }> { name }</Text>
+                                    <Text small grow pointer onClick={ event => SendMessageComposer(new RoomTakeRightsComposer(id)) }> { name }</Text>
                                 </Flex>
                             );
                         }) }
diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsVipChatTabView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsVipChatTabView.tsx
index bf88c17..db2f5a8 100644
--- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsVipChatTabView.tsx
+++ b/src/components/navigator/views/room-settings/NavigatorRoomSettingsVipChatTabView.tsx
@@ -23,13 +23,13 @@ export const NavigatorRoomSettingsVipChatTabView: FC<NavigatorRoomSettingsTabVie
     return (
         <>
             <div className="flex flex-col gap-1">
-                <Text bold>{ LocalizeText('navigator.roomsettings.vip.caption') }</Text>
-                <Text>{ LocalizeText('navigator.roomsettings.vip.info') }</Text>
+                <Text small bold>{ LocalizeText('navigator.roomsettings.vip.caption') }</Text>
+                <Text small>{ LocalizeText('navigator.roomsettings.vip.info') }</Text>
             </div>
             <Grid overflow="auto">
                 <Column gap={ 1 } size={ 6 }>
-                    <Text bold>{ LocalizeText('navigator.roomsettings.chat_settings') }</Text>
-                    <Text>{ LocalizeText('navigator.roomsettings.chat_settings.info') }</Text>
+                    <Text small bold>{ LocalizeText('navigator.roomsettings.chat_settings') }</Text>
+                    <Text small>{ LocalizeText('navigator.roomsettings.chat_settings.info') }</Text>
                     <select className="form-select form-select-sm" value={ roomData.chatSettings.mode } onChange={ event => handleChange('bubble_mode', event.target.value) }>
                         <option value={ RoomChatSettings.CHAT_MODE_FREE_FLOW }>{ LocalizeText('navigator.roomsettings.chat.mode.free.flow') }</option>
                         <option value={ RoomChatSettings.CHAT_MODE_LINE_BY_LINE }>{ LocalizeText('navigator.roomsettings.chat.mode.line.by.line') }</option>
@@ -49,14 +49,14 @@ export const NavigatorRoomSettingsVipChatTabView: FC<NavigatorRoomSettingsTabVie
                         <option value={ RoomChatSettings.FLOOD_FILTER_NORMAL }>{ LocalizeText('navigator.roomsettings.chat.flood.normal') }</option>
                         <option value={ RoomChatSettings.FLOOD_FILTER_STRICT }>{ LocalizeText('navigator.roomsettings.chat.flood.strict') }</option>
                     </select>
-                    <Text>{ LocalizeText('navigator.roomsettings.chat_settings.hearing.distance') }</Text>
-                    <NitroInput min="0" type="number" value={ chatDistance } onBlur={ event => handleChange('chat_distance', chatDistance) } onChange={ event => setChatDistance(event.target.valueAsNumber) } />
+                    <Text small>{ LocalizeText('navigator.roomsettings.chat_settings.hearing.distance') }</Text>
+                    <NitroInput className="form-control-sm" min="0" type="number" value={ chatDistance } onBlur={ event => handleChange('chat_distance', chatDistance) } onChange={ event => setChatDistance(event.target.valueAsNumber) } />
                 </Column>
                 <Column gap={ 1 } size={ 6 }>
-                    <Text bold>{ LocalizeText('navigator.roomsettings.vip_settings') }</Text>
+                    <Text small bold>{ LocalizeText('navigator.roomsettings.vip_settings') }</Text>
                     <div className="flex items-center gap-1">
                         <input checked={ roomData.hideWalls } className="form-check-input" type="checkbox" onChange={ event => handleChange('hide_walls', event.target.checked) } />
-                        <Text>{ LocalizeText('navigator.roomsettings.hide_walls') }</Text>
+                        <Text small>{ LocalizeText('navigator.roomsettings.hide_walls') }</Text>
                     </div>
                     <select className="form-select form-select-sm" value={ roomData.wallThickness } onChange={ event => handleChange('wall_thickness', event.target.value) }>
                         <option value="0">{ LocalizeText('navigator.roomsettings.wall_thickness.normal') }</option>
diff --git a/src/components/toolbar/ToolbarMeView.tsx b/src/components/toolbar/ToolbarMeView.tsx
index c7e6a35..c420fce 100644
--- a/src/components/toolbar/ToolbarMeView.tsx
+++ b/src/components/toolbar/ToolbarMeView.tsx
@@ -32,7 +32,7 @@ export const ToolbarMeView: FC<PropsWithChildren<{
     }, [ setMeExpanded ]);
 
     return (
-        <Flex alignItems="center" className="absolute bottom-[60px] left-[15px] bg-[rgba(20,_20,_20,_.95)] border-[1px] border-[solid] border-[#101010] [box-shadow:inset_2px_2px_rgba(255,_255,_255,_.1),_inset_-2px_-2px_rgba(255,_255,_255,_.1)] rounded-[$border-radius] p-2" gap={ 2 } innerRef={ elementRef }>
+        <Flex alignItems="center" className="absolute bottom-[60px] left-[33px] bg-[rgba(20,_20,_20,_.95)] border-[1px] border-[solid] border-[#101010] [box-shadow:inset_2px_2px_rgba(255,_255,_255,_.1),_inset_-2px_-2px_rgba(255,_255,_255,_.1)] rounded-[$border-radius] p-2" gap={ 2 } innerRef={ elementRef }>
             { (GetConfigurationValue('guides.enabled') && useGuideTool) &&
                 <div className="navigation-item relative nitro-icon icon-me-helper-tool cursor-pointer" onClick={ event => DispatchUiEvent(new GuideToolEvent(GuideToolEvent.TOGGLE_GUIDE_TOOL)) } /> }
             <div className="navigation-item relative nitro-icon icon-me-achievements cursor-pointer" onClick={ event => CreateLinkEvent('achievements/toggle') }>
diff --git a/src/css/forms/form_select.css b/src/css/forms/form_select.css
new file mode 100644
index 0000000..8336b6f
--- /dev/null
+++ b/src/css/forms/form_select.css
@@ -0,0 +1,24 @@
+/* Styling for text inputs (e.g., password fields) */
+.form-control-sm {
+    padding: 0.25rem 0.5rem; /* Reduced padding */
+    font-size: 0.75rem; /* Small font size, adjust to match <Text small> */
+    line-height: 1.5;
+    border-radius: 0.2rem;
+    min-height: calc(1.5em + 0.5rem + 2px); /* Matches your inline style */
+}
+
+/* Optional: Styling for radio/checkbox inputs */
+.form-check-input {
+    /* No font-size here since it’s an input’s appearance, not text */
+    margin-top: 0.25rem; /* Align with small text */
+}
+
+/* If you have <select> elements elsewhere, keep this */
+.form-select-sm {
+    padding: 0.25rem 2rem 0.25rem 0.5rem;
+    font-size: 0.75rem;
+    line-height: 1.5;
+    background-position: right 0.5rem center;
+    background-size: 12px 10px;
+    border-radius: 0.2rem;
+}
\ No newline at end of file
diff --git a/src/css/room/NavigatorRoomSettings.css b/src/css/room/NavigatorRoomSettings.css
new file mode 100644
index 0000000..3e55a7a
--- /dev/null
+++ b/src/css/room/NavigatorRoomSettings.css
@@ -0,0 +1,11 @@
+.nitro-room-settings {
+    width: 400px;
+
+    .list-container {
+        height: 100px;
+
+        .list-item {
+            background-color: #ececec;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/css/room/RoomWidgets.css b/src/css/room/RoomWidgets.css
index 462645d..34310fb 100644
--- a/src/css/room/RoomWidgets.css
+++ b/src/css/room/RoomWidgets.css
@@ -1,7 +1,7 @@
 .nitro-room-tools-container {
     position: absolute;
-    bottom: 75px;
-    left: 10px;
+    bottom:60px;
+    left: 15px;
 
     .nitro-room-tools {
         background: #212131;
@@ -153,22 +153,10 @@
 
 .tags {
     background-color: #1B2834;
-    color: #1A75A6;
+    color: #12597f;
     font-size: 10px;
 
     &:hover {
         color: #419AD2;
     }
-}
-
-/*
-@import './avatar-info/AvatarInfoWidgetView';
-@import './chat/ChatWidgetView';
-@import './chat-input/ChatInputView';
-@import './choosers/ChooserWidgetView';
-@import './context-menu/ContextMenu';
-@import './friend-request/FriendRequestDialogView';
-@import './furniture/FurnitureWidgets';
-@import './mysterybox/MysteryBoxExtensionView';
-@import './pet-package/PetPackageWidgetView';
-*/
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index 870c062..f5b032d 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -11,6 +11,8 @@ import './css/common/Buttons.css';
 
 import './css/floorplan/FloorplanEditorView.css';
 
+import './css/forms/form_select.css';
+
 import './css/hotelview/HotelView.css';
 
 import './css/icons/icons.css';
@@ -23,8 +25,10 @@ import './css/notification/NotificationCenterView.css';
 
 import './css/purse/PurseView.css';
 
+import './css/room/NavigatorRoomSettings.css';
 import './css/room/RoomWidgets.css';
 
+
 import './css/slider.css';
 
 import './css/widgets/FurnitureWidgets.css';