Fix language settings select & bump deps

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>
-            <span className="block truncate">{active.name}</span>
+            <div className="mx-2 my-auto">{active.icon}</div>
+            <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 =>
-                  `cursor-default select-none relative py-2 pl-10 pr-4 first:rounded-t-md last:rounded-b-md dark:text-white ${
-                    active ? 'bg-gray-200 dark:bg-primaryDark' : 'text-gray-900'
+                className={({ active, selected }): string =>
+                  `cursor-default select-none relative py-2 pr-4 first:rounded-t-md last:rounded-b-md dark:text-white ${
+                    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={{
-            name: '',
-            value: '',
-            icon: <Us />,
-          }}
+          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);
           }}
@@ -68,7 +76,7 @@ export const Interface = ({
               icon: <Pt className="w-6" />,
             },
             {
-              name: 'Japanese',
+              name: '日本',
               value: 'jp',
               icon: <Jp className="w-6" />,
             },