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>