Remove old Select, change Switch for Checkbox

src/pages/settings/Channels.tsx

@@ -6,6 +6,7 @@ import { FiMenu, FiSave } from 'react-icons/fi';
 import { Channel } from '@app/components/Channel.jsx';
 import { Card } from '@app/components/generic/Card';
 import { IconButton } from '@app/components/generic/IconButton.jsx';
+import { connection } from '@app/core/connection.js';
 import { useAppSelector } from '@app/hooks/redux.js';
 import { Button } from '@components/generic/Button';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
@@ -67,7 +68,12 @@ export const Channels = ({
             ))}
 
             <div className="flex space-x-52">
-              <div className="text-sm font-thin text-gray-400 dark:text-gray-300">
+              <div
+                onClick={(): Promise<void> => {
+                  return connection.confirmSetChannel();
+                }}
+                className="text-sm font-thin text-gray-400 dark:text-gray-300"
+              >
                 Please ensure any changes are working before confirming
               </div>
               <Button active>Confirm</Button>

src/pages/settings/Connection.tsx

@@ -5,10 +5,10 @@ import { useTranslation } from 'react-i18next';
 import { FiCheck, FiMenu, FiSave } from 'react-icons/fi';
 
 import { Card } from '@app/components/generic/Card';
-import { EnumSelect } from '@app/components/generic/form/EnumSelect';
+import { Checkbox } from '@app/components/generic/form/Checkbox';
 import { Input } from '@app/components/generic/form/Input';
+import { Select } from '@app/components/generic/form/Select';
 import { IconButton } from '@app/components/generic/IconButton';
-import { Toggle } from '@app/components/generic/Toggle';
 import { connection, setConnection } from '@app/core/connection';
 import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
 import { Button } from '@components/generic/Button';
@@ -147,7 +147,7 @@ export const Connection = ({
       >
         <div className="w-full max-w-3xl p-10 md:max-w-xl">
           <form className="space-y-2" onSubmit={onSubmit}>
-            <EnumSelect
+            <Select
               label="Method"
               optionsEnum={connType}
               value={selectedConnType}
@@ -157,7 +157,7 @@ export const Connection = ({
             />
             {selectedConnType === connType.HTTP && (
               <>
-                <EnumSelect
+                <Select
                   label="Host Source"
                   options={[
                     {
@@ -179,7 +179,7 @@ export const Connection = ({
                 ) : (
                   <Input label="Host" />
                 )}
-                <Toggle label="Use TLS?" />
+                <Checkbox label="Use TLS?" />
               </>
             )}
             {selectedConnType === connType.BLE && (

src/pages/settings/Device.tsx

@@ -5,8 +5,8 @@ import { useTranslation } from 'react-i18next';
 import { FiMenu, FiSave } from 'react-icons/fi';
 
 import { Card } from '@app/components/generic/Card';
+import { Checkbox } from '@app/components/generic/form/Checkbox';
 import { IconButton } from '@app/components/generic/IconButton.jsx';
-import { Toggle } from '@app/components/generic/Toggle';
 import { connection } from '@app/core/connection';
 import { useAppSelector } from '@app/hooks/redux';
 import { Button } from '@components/generic/Button';
@@ -81,7 +81,7 @@ export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
               maxLength={3}
               {...register('shortName')}
             />
-            <Toggle label="Licenced Operator?" {...register('isLicensed')} />
+            <Checkbox label="Licenced Operator?" {...register('isLicensed')} />
           </form>
         </div>
       </Card>

src/pages/settings/Interface.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 
-import { Jp, Pt, Us } from 'react-flags-select';
 import { useTranslation } from 'react-i18next';
 import { FiMenu, FiSave } from 'react-icons/fi';
 
 import { Card } from '@app/components/generic/Card';
-import { Select } from '@app/components/generic/Select';
+import { Select } from '@app/components/generic/form/Select';
 import i18n from '@app/core/translation';
 import { Button } from '@components/generic/Button';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
@@ -52,40 +51,23 @@ export const Interface = ({
         <div className="w-full max-w-3xl p-10 space-y-2 md:max-w-xl">
           <Select
             label="Language"
-            active={
-              i18n.language === 'en'
-                ? {
-                    name: 'English',
-                    value: 'en',
-                    icon: <Us />,
-                  }
-                : i18n.language === 'pt'
-                ? { name: 'Português', value: 'pt', icon: <Pt /> }
-                : i18n.language === 'jp'
-                ? { name: '日本', value: 'jp', icon: <Jp /> }
-                : { name: 'English', value: 'en', icon: <Us /> }
-            }
-            onChange={(value): void => {
-              void i18n.changeLanguage(value);
-            }}
-            id="aaa"
             options={[
               {
                 name: 'English',
                 value: 'en',
-                icon: <Us className="w-6" />,
-              },
-              {
-                name: 'Português',
-                value: 'pt',
-                icon: <Pt className="w-6" />,
               },
               {
                 name: '日本',
                 value: 'jp',
-                icon: <Jp className="w-6" />,
+              },
+              {
+                name: 'Português',
+                value: 'pt',
               },
             ]}
+            onChange={(e): void => {
+              void i18n.changeLanguage(e.target.value);
+            }}
           />
         </div>
       </Card>

src/pages/settings/Radio.tsx

@@ -5,9 +5,9 @@ import { useTranslation } from 'react-i18next';
 import { FiMenu, FiSave, FiXCircle } from 'react-icons/fi';
 
 import { Card } from '@app/components/generic/Card';
-import { EnumSelect } from '@app/components/generic/form/EnumSelect.jsx';
+import { Checkbox } from '@app/components/generic/form/Checkbox';
+import { Select } from '@app/components/generic/form/Select.jsx';
 import { IconButton } from '@app/components/generic/IconButton.jsx';
-import { Toggle } from '@app/components/generic/Toggle.jsx';
 import { connection } from '@app/core/connection';
 import { useAppSelector } from '@app/hooks/redux';
 import { Button } from '@components/generic/Button';
@@ -89,18 +89,21 @@ export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
               label={'Broadcast Interval (seconds)'}
               {...register('positionBroadcastSecs', { valueAsNumber: true })}
             />
-            <EnumSelect
+            <Select
               label="Position Type"
               optionsEnum={Protobuf.PositionFlags}
               {...register('positionFlags', { valueAsNumber: true })}
             />
-            <Toggle label="Use Fixed Position" {...register('fixedPosition')} />
-            <EnumSelect
+            <Checkbox
+              label="Use Fixed Position"
+              {...register('fixedPosition')}
+            />
+            <Select
               label="Location Sharing"
               optionsEnum={Protobuf.LocationSharing}
               {...register('locationShare', { valueAsNumber: true })}
             />
-            <EnumSelect
+            <Select
               label="GPS Mode"
               optionsEnum={Protobuf.GpsOperation}
               {...register('gpsOperation', { valueAsNumber: true })}