Fix flags

package.json

@@ -9,10 +9,12 @@
   "dependencies": {
     "@meshtastic/meshtasticjs": "^0.6.5",
     "@snowpack/plugin-webpack": "^2.3.1",
-    "country-flag-icons": "^1.2.9",
+    "add": "^2.0.6",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
-    "react-icons": "^4.2.0"
+    "react-flags-select": "^2.1.2",
+    "react-icons": "^4.2.0",
+    "yarn": "^1.22.10"
   },
   "devDependencies": {
     "@snowpack/plugin-dotenv": "^2.0.5",
@@ -22,7 +24,6 @@
     "@snowpack/web-test-runner-plugin": "^0.2.0",
     "@testing-library/react": "^11.0.0",
     "@types/chai": "^4.2.13",
-    "@types/country-flag-icons": "^1.2.0",
     "@types/mocha": "^8.2.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",

src/components/Sidebar/SidebarUISettings.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-// import Flags from 'country-flag-icons/react/3x2';
+import { Jp, Us } from 'react-flags-select';
 import { FaCog, FaLaptop, FaMoon, FaSun } from 'react-icons/fa';
 
 import type { languageTemplate } from '../../App';
@@ -57,14 +57,14 @@ const SidebarUISettings = (props: SidebarUISettingsProps) => {
             open={false}
             titleContent={
               <div className="flex my-auto">
-                {/* {props.Translations.language_title}
+                {props.Translations.language_title}
-                {props.Language === LanguageEnum.ENGLISH ? (
+                <div className="my-auto">
-                  <Flags.US className="ml-2 w-8 shadow-md" />
+                  {props.Language === LanguageEnum.ENGLISH ? (
-                ) : props.Language === LanguageEnum.JAPANESE ? (
+                    <Us className="ml-2 w-8 shadow-md" />
-                  <Flags.JP className="ml-2 w-8 shadow-md" />
+                  ) : props.Language === LanguageEnum.JAPANESE ? (
-                ) : (
+                    <Jp className="ml-2 w-8 shadow-md" />
-                  ''
+                  ) : null}
-                )} */}
+                </div>
               </div>
             }
             dropdownContent={
@@ -77,7 +77,9 @@ const SidebarUISettings = (props: SidebarUISettingsProps) => {
                   isDropdown={false}
                   isNested={true}
                   titleContent={
-                    <>{/* English <Flags.US className="w-8 shadow-md" /> */}</>
+                    <>
+                      English <Us className="w-8 shadow-md" />
+                    </>
                   }
                 />
                 <NavItem
@@ -88,7 +90,9 @@ const SidebarUISettings = (props: SidebarUISettingsProps) => {
                   isDropdown={false}
                   isNested={true}
                   titleContent={
-                    <>{/* 日本語 <Flags.JP className="w-8 shadow-md" /> */}</>
+                    <>
+                      日本語 <Jp className="w-8 shadow-md" />
+                    </>
                   }
                 />
               </>

yarn.lock

@@ -1070,11 +1070,6 @@
     "@types/keygrip" "*"
     "@types/node" "*"
 
-"@types/country-flag-icons@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@types/country-flag-icons/-/country-flag-icons-1.2.0.tgz#5d13276405a5701ca29bbd7f1026f45c0d2962be"
-  integrity sha512-96aveJfAw9iSfBxAD8DCgFYjMFmLIGa+vBvg3cKiHjX+o4Szz5HHv2DSbEVm9a4kLixsYkioGB4SnJs17Zypzw==
-
 "@types/debounce@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@types/debounce/-/debounce-1.2.0.tgz#9ee99259f41018c640b3929e1bb32c3dcecdb192"
@@ -1653,6 +1648,11 @@ acorn@^8.1.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.1.0.tgz#52311fd7037ae119cbb134309e901aa46295b3fe"
   integrity sha512-LWCF/Wn0nfHOmJ9rzQApGnxnvgfROzGilS8936rqN/lfcYkY9MYZzdMqN+2NJ4SlTc+m5HiSa+kNfDtI64dwUA==
 
+add@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/add/-/add-2.0.6.tgz#248f0a9f6e5a528ef2295dbeec30532130ae2235"
+  integrity sha1-JI8Kn25aUo7yKV2+7DBTITCuIjU=
+
 agent-base@5:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-5.1.1.tgz#e8fb3f242959db44d63be665db7a8e739537a32c"
@@ -2436,6 +2436,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.2.6:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
+  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
+
 clean-css@^4.2.1:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
@@ -2702,11 +2707,6 @@ cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
-country-flag-icons@^1.2.9:
-  version "1.2.9"
-  resolved "https://registry.yarnpkg.com/country-flag-icons/-/country-flag-icons-1.2.9.tgz#cee7d150b23d3532adcc1e22c2ebb59962e04633"
-  integrity sha512-qn1cKt9PJrghEb1IbyIIqHcvNLPJ8mul0lbz6lFSBmzbGqYC38PJ4wPSIT0gV/iB/DbPylHE04zJNedrj1BXvA==
-
 create-ecdh@^4.0.0:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e"
@@ -6290,6 +6290,13 @@ react-dom@^17.0.0:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-flags-select@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/react-flags-select/-/react-flags-select-2.1.2.tgz#ba2593b6ce6285a3b9844a6df522c60bc3fe8c23"
+  integrity sha512-nx/6mY/nKVJB9sVZOylJoSI6idTYZfu0dtUQ0N1L+cD8VAPNl5c/lxL7yyi9vtn66hDRFy6Sr16GzsBj3aoZfQ==
+  dependencies:
+    classnames "^2.2.6"
+
 react-icons@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.2.0.tgz#6dda80c8a8f338ff96a1851424d63083282630d0"
@@ -7803,6 +7810,11 @@ yaml@^1.10.0:
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
+yarn@^1.22.10:
+  version "1.22.10"
+  resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.22.10.tgz#c99daa06257c80f8fa2c3f1490724e394c26b18c"
+  integrity sha512-IanQGI9RRPAN87VGTF7zs2uxkSyQSrSPsju0COgbsKQOOXr5LtcVPeyXWgwVa0ywG3d8dg6kSYKGBuYK021qeA==
+
 yauzl@^2.10.0:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"