Fix language settings select & bump deps

package.json

@@ -11,51 +11,51 @@
     "lint": "eslint 'src/**/*.{ts,tsx}'"
   },
   "dependencies": {
-    "@headlessui/react": "^1.4.0",
+    "@headlessui/react": "^1.4.1",
     "@heroicons/react": "^1.0.4",
     "@meshtastic/meshtasticjs": "^0.6.17",
     "@reduxjs/toolkit": "^1.6.1",
     "apexcharts": "^3.28.1",
     "boring-avatars": "^1.5.8",
-    "i18next": "^20.4.0",
+    "i18next": "^20.6.0",
     "i18next-browser-languagedetector": "^6.1.2",
     "moment": "^2.29.1",
     "react": "^17.0.2",
     "react-apexcharts": "^1.3.9",
     "react-dom": "^17.0.2",
     "react-flags-select": "^2.1.2",
-    "react-hook-form": "^7.14.0",
+    "react-hook-form": "^7.15.0",
     "react-i18next": "^11.11.4",
-    "react-redux": "^7.2.4",
+    "react-redux": "^7.2.5",
     "type-route": "^0.6.0",
-    "use-breakpoint": "^2.0.1"
+    "use-breakpoint": "^2.0.2"
   },
   "devDependencies": {
     "@snowpack/plugin-dotenv": "^2.2.0",
     "@snowpack/plugin-postcss": "^1.4.3",
     "@snowpack/plugin-react-refresh": "^2.5.0",
     "@snowpack/plugin-typescript": "^1.2.1",
-    "@types/react": "^17.0.19",
+    "@types/react": "^17.0.20",
     "@types/react-dom": "^17.0.9",
     "@types/react-redux": "^7.1.18",
     "@types/snowpack-env": "^2.3.4",
-    "@typescript-eslint/eslint-plugin": "^4.29.3",
+    "@typescript-eslint/eslint-plugin": "^4.31.0",
-    "@typescript-eslint/parser": "^4.29.3",
+    "@typescript-eslint/parser": "^4.31.0",
     "@verypossible/eslint-config": "^1.6.1",
-    "autoprefixer": "^10.3.3",
+    "autoprefixer": "^10.3.4",
     "babel-plugin-module-resolver": "^4.1.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-import-resolver-babel-module": "^5.3.1",
     "eslint-import-resolver-typescript": "^2.4.0",
     "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react": "^7.25.1",
     "eslint-plugin-react-hooks": "^4.2.0",
     "gzipper": "^5.0.0",
     "postcss": "^8.3.6",
     "prettier": "^2.3.2",
     "snowpack": "^3.8.8",
-    "tailwindcss": "^2.2.8",
+    "tailwindcss": "^2.2.11",
     "tar": "^6.1.11",
     "typescript": "^4.4.2"
   }

src/components/generic/Select.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Listbox } from '@headlessui/react';
-import { CheckIcon, SelectorIcon } from '@heroicons/react/solid';
+import { SelectorIcon } from '@heroicons/react/solid';
 
 export interface SelectProps {
   label: string;
@@ -38,8 +38,8 @@ export const Select = ({
       <Listbox value={active.value} onChange={onChange}>
         <div className="relative mt-1">
           <Listbox.Button className="flex w-full text-left bg-white border rounded-md shadow-sm h-11 focus:outline-none focus:border-primary dark:focus:border-primary dark:bg-secondaryDark dark:border-gray-600 dark:text-white">
-            <div className="">{active.icon}</div>
+            <div className="mx-2 my-auto">{active.icon}</div>
-            <span className="block truncate">{active.name}</span>
+            <span className="block my-auto truncate">{active.name}</span>
             <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
               <SelectorIcon
                 className="w-5 h-5 text-gray-400"
@@ -52,32 +52,25 @@ export const Select = ({
             {options.map((option) => (
               <Listbox.Option
                 key={option.value}
-                className={({ active }): string =>
+                className={({ active, selected }): string =>
-                  `cursor-default select-none relative py-2 pl-10 pr-4 first:rounded-t-md last:rounded-b-md dark:text-white ${
+                  `cursor-default select-none relative py-2 pr-4 first:rounded-t-md last:rounded-b-md dark:text-white ${
-                    active ? 'bg-gray-200 dark:bg-primaryDark' : 'text-gray-900'
+                    active || selected
+                      ? 'bg-gray-200 dark:bg-primaryDark'
+                      : 'text-gray-900'
                   }`
                 }
                 value={option.value}
               >
-                {({ selected, active }): JSX.Element => (
+                {({ selected }): JSX.Element => (
                   <>
                     <span
-                      className={`${
+                      className={`flex truncate ${
                         selected ? 'font-medium' : 'font-normal'
-                      } block truncate`}
+                      }`}
                     >
+                      <div className="mx-4 my-auto">{option.icon}</div>
                       {option.name}
                     </span>
-                    {selected ? (
-                      <span
-                        className={`${
-                          active ? 'text-amber-600' : 'text-amber-600'
-                        }
-                                absolute inset-y-0 left-0 flex items-center pl-3`}
-                      >
-                        <CheckIcon className="w-5 h-5" aria-hidden="true" />
-                      </span>
-                    ) : null}
                   </>
                 )}
               </Listbox.Option>

src/pages/settings/Interface.tsx

@@ -47,11 +47,19 @@ export const Interface = ({
       <div className="w-full max-w-3xl space-y-2 md:max-w-xl">
         <Select
           label="Language"
-          active={{
+          active={
-            name: '',
+            i18n.language === 'en'
-            value: '',
+              ? {
-            icon: <Us />,
+                  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);
           }}
@@ -68,7 +76,7 @@ export const Interface = ({
               icon: <Pt className="w-6" />,
             },
             {
-              name: 'Japanese',
+              name: '日本',
               value: 'jp',
               icon: <Jp className="w-6" />,
             },