From dbd1ea086665afd3fc2c2786c09f9f6626d56043 Mon Sep 17 00:00:00 2001
From: dank074 <torresefrain10@gmail.com>
Date: Mon, 30 Jan 2023 18:43:34 -0600
Subject: [PATCH] fix #132

---
 .../NavigatorRoomSettingsModTabView.tsx       | 37 ++++++++++++++-----
 1 file changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx
index e817dd74..f45e310e 100644
--- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx
+++ b/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx
@@ -73,26 +73,43 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
                 <Column gap={ 1 }>
                     <Text bold>{ LocalizeText('navigator.roomsettings.moderation.mute.header') }</Text>
                     <Flex alignItems="center" gap={ 1 }>
-                        <input className="form-check-input" type="checkbox" checked={ (roomData.moderationSettings.allowMute === RoomModerationSettings.MODERATION_LEVEL_USER_WITH_RIGHTS) } onChange={ event => handleChange('moderation_mute', (event.target.checked ? RoomModerationSettings.MODERATION_LEVEL_USER_WITH_RIGHTS : RoomModerationSettings.MODERATION_LEVEL_NONE)) } />
-                        <Text>{ LocalizeText('navigator.roomsettings.moderation.rights') }</Text>
+                        <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 }>
+                                { LocalizeText('navigator.roomsettings.moderation.none') }
+                            </option>
+                            <option value={ RoomModerationSettings.MODERATION_LEVEL_USER_WITH_RIGHTS }>
+                                { LocalizeText('navigator.roomsettings.moderation.rights') }
+                            </option>
+                        </select>
                     </Flex>
                 </Column>
                 <Column gap={ 1 }>
                     <Text bold>{ LocalizeText('navigator.roomsettings.moderation.kick.header') }</Text>
                     <Flex alignItems="center" gap={ 1 }>
-                        <input className="form-check-input" type="checkbox" checked={ (roomData.moderationSettings.allowKick === RoomModerationSettings.MODERATION_LEVEL_ALL) } onChange={ event => handleChange('moderation_kick', (event.target.checked ? RoomModerationSettings.MODERATION_LEVEL_ALL : RoomModerationSettings.MODERATION_LEVEL_NONE)) } />
-                        <Text>{ LocalizeText('navigator.roomsettings.moderation.all') }</Text>
-                    </Flex>
-                    <Flex alignItems="center" gap={ 1 }>
-                        <input className="form-check-input" type="checkbox" checked={ (roomData.moderationSettings.allowKick >= RoomModerationSettings.MODERATION_LEVEL_USER_WITH_RIGHTS) } disabled={ (roomData.moderationSettings.allowKick === RoomModerationSettings.MODERATION_LEVEL_ALL) } onChange={ event => handleChange('moderation_kick', (event.target.checked ? RoomModerationSettings.MODERATION_LEVEL_USER_WITH_RIGHTS : RoomModerationSettings.MODERATION_LEVEL_NONE)) } />
-                        <Text>{ LocalizeText('navigator.roomsettings.moderation.rights') }</Text>
+                        <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 }>
+                                { LocalizeText('navigator.roomsettings.moderation.none') }
+                            </option>
+                            <option value={ RoomModerationSettings.MODERATION_LEVEL_USER_WITH_RIGHTS }>
+                                { LocalizeText('navigator.roomsettings.moderation.rights') }
+                            </option>
+                            <option value={ RoomModerationSettings.MODERATION_LEVEL_ALL }>
+                                { LocalizeText('navigator.roomsettings.moderation.all') }
+                            </option>
+                        </select>
                     </Flex>
                 </Column>
                 <Column gap={ 1 }>
                     <Text bold>{ LocalizeText('navigator.roomsettings.moderation.ban.header') }</Text>
                     <Flex alignItems="center" gap={ 1 }>
-                        <input className="form-check-input" type="checkbox" checked={ (roomData.moderationSettings.allowBan === RoomModerationSettings.MODERATION_LEVEL_USER_WITH_RIGHTS) } onChange={ event => handleChange('moderation_ban', (event.target.checked ? RoomModerationSettings.MODERATION_LEVEL_USER_WITH_RIGHTS : RoomModerationSettings.MODERATION_LEVEL_NONE)) } />
-                        <Text>{ LocalizeText('navigator.roomsettings.moderation.rights') }</Text>
+                        <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 }>
+                                { LocalizeText('navigator.roomsettings.moderation.none') }
+                            </option>
+                            <option value={ RoomModerationSettings.MODERATION_LEVEL_USER_WITH_RIGHTS }>
+                                { LocalizeText('navigator.roomsettings.moderation.rights') }
+                            </option>
+                        </select>
                     </Flex>
                 </Column>
             </Column>