Use Listbox in udp over tcp port settings

2 files changed, 34 insertions, 33 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/udp-over-tcp-settings/UdpOverTcpSettingsView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/udp-over-tcp-settings/UdpOverTcpSettingsView.tsx
index 1ed8cb5318..462a6335f5 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/udp-over-tcp-settings/UdpOverTcpSettingsView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/udp-over-tcp-settings/UdpOverTcpSettingsView.tsx
@@ -4,7 +4,6 @@ import { messages } from '../../../../shared/gettext';
 import { useHistory } from '../../../lib/history';
 import { AppNavigationHeader } from '../..';
 import * as Cell from '../../cell';
-import { SelectorItem } from '../../cell/Selector';
 import { BackAction } from '../../KeyboardNavigation';
 import { Layout, SettingsContainer } from '../../Layout';
 import { NavigationContainer } from '../../NavigationContainer';
@@ -12,12 +11,6 @@ import { NavigationScrollbars } from '../../NavigationScrollbars';
 import SettingsHeader, { HeaderTitle } from '../../SettingsHeader';
 import { UdpOverTcpPortSetting } from './components';
 
-export const UDP2TCP_PORTS = [80, 5001];
-
-export function mapPortToSelectorItem(value: number): SelectorItem<number> {
-  return { label: value.toString(), value };
-}
-
 const StyledContent = styled.div({
   display: 'flex',
   flexDirection: 'column',
@@ -25,10 +18,6 @@ const StyledContent = styled.div({
   marginBottom: '2px',
 });
 
-export const StyledSelectorContainer = styled.div({
-  flex: 0,
-});
-
 export function UdpOverTcpSettingsView() {
   const { pop } = useHistory();
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/udp-over-tcp-settings/components/udp-over-tcp-port-setting/UdpOverTcpPortSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/udp-over-tcp-settings/components/udp-over-tcp-port-setting/UdpOverTcpPortSetting.tsx
index 518f41c5fe..be92e59b8e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/udp-over-tcp-settings/components/udp-over-tcp-port-setting/UdpOverTcpPortSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/udp-over-tcp-settings/components/udp-over-tcp-port-setting/UdpOverTcpPortSetting.tsx
@@ -7,15 +7,18 @@ import {
 } from '../../../../../../shared/daemon-rpc-types';
 import { messages } from '../../../../../../shared/gettext';
 import { useAppContext } from '../../../../../context';
+import { Listbox } from '../../../../../lib/components/listbox/Listbox';
 import { useSelector } from '../../../../../redux/store';
-import { AriaInputGroup } from '../../../../AriaGroup';
-import Selector, { SelectorItem } from '../../../../cell/Selector';
+import { SelectorItem } from '../../../../cell/Selector';
+import { DefaultListboxOption } from '../../../../default-listbox-option';
+import InfoButton from '../../../../InfoButton';
 import { ModalMessage } from '../../../../Modal';
-import {
-  mapPortToSelectorItem,
-  StyledSelectorContainer,
-  UDP2TCP_PORTS,
-} from '../../UdpOverTcpSettingsView';
+
+const UDP2TCP_PORTS = [80, 5001];
+
+function mapPortToSelectorItem(value: number): SelectorItem<number> {
+  return { label: value.toString(), value };
+}
 
 export function UdpOverTcpPortSetting() {
   const { setObfuscationSettings } = useAppContext();
@@ -41,26 +44,35 @@ export function UdpOverTcpPortSetting() {
   );
 
   return (
-    <AriaInputGroup>
-      <StyledSelectorContainer>
-        <Selector
-          // TRANSLATORS: The title for the UDP-over-TCP port selector.
-          title={messages.pgettext('wireguard-settings-view', 'UDP-over-TCP port')}
-          details={
+    <Listbox value={port} onValueChange={selectPort}>
+      <Listbox.Item>
+        <Listbox.Content>
+          <Listbox.Label>
+            {
+              // TRANSLATORS: The title for the WireGuard port selector.
+              messages.pgettext('wireguard-settings-view', 'Port')
+            }
+          </Listbox.Label>
+          <InfoButton>
             <ModalMessage>
               {messages.pgettext(
                 'wireguard-settings-view',
                 'Which TCP port the UDP-over-TCP obfuscation protocol should connect to on the VPN server.',
               )}
             </ModalMessage>
-          }
-          items={portItems}
-          value={port}
-          onSelect={selectPort}
-          thinTitle
-          automaticValue={'any' as const}
-        />
-      </StyledSelectorContainer>
-    </AriaInputGroup>
+          </InfoButton>
+        </Listbox.Content>
+      </Listbox.Item>
+      <Listbox.Options>
+        <DefaultListboxOption value={'any'}>{messages.gettext('Automatic')}</DefaultListboxOption>
+        {portItems.map((item) => {
+          return (
+            <DefaultListboxOption key={item.value} value={item.value}>
+              {item.label}
+            </DefaultListboxOption>
+          );
+        })}
+      </Listbox.Options>
+    </Listbox>
   );
 }