Use flags-library to work on Windows

4 files changed, 18 insertions, 7 deletions

diff --git a/modern/package-lock.json b/modern/package-lock.json
index 0d02bf8b..47a37d06 100644
--- a/modern/package-lock.json
+++ b/modern/package-lock.json
@@ -27,6 +27,7 @@
         "maplibre-gl": "^3.3.0",
         "moment": "^2.29.4",
         "react": "^18.2.0",
+        "react-country-flag": "3.1.0",
         "react-dom": "^18.2.0",
         "react-draggable": "^4.4.5",
         "react-mui-dropzone": "^4.0.6",
@@ -8703,6 +8704,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-country-flag": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-country-flag/-/react-country-flag-3.1.0.tgz",
+      "integrity": "sha512-JWQFw1efdv9sTC+TGQvTKXQg1NKbDU2mBiAiRWcKM9F1sK+/zjhP2yGmm8YDddWyZdXVkR8Md47rPMJmo4YO5g==",
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
diff --git a/modern/package.json b/modern/package.json
index f1392573..0eb85d42 100644
--- a/modern/package.json
+++ b/modern/package.json
@@ -22,6 +22,7 @@
     "maplibre-gl": "^3.3.0",
     "moment": "^2.29.4",
     "react": "^18.2.0",
+    "react-country-flag": "3.1.0",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",
     "react-mui-dropzone": "^4.0.6",
diff --git a/modern/src/common/components/LocalizationProvider.jsx b/modern/src/common/components/LocalizationProvider.jsx
index 1c87bc7d..2ace1e24 100644
--- a/modern/src/common/components/LocalizationProvider.jsx
+++ b/modern/src/common/components/LocalizationProvider.jsx
@@ -186,6 +186,3 @@ export const useTranslationKeys = (predicate) => {
   const { data } = context.languages[context.language];
   return Object.keys(data).filter(predicate);
 };
-
-export const getFlagEmoji = (country) => String.fromCodePoint(...[...country].map(x=>0x1f1a5+x.charCodeAt()));
-
diff --git a/modern/src/login/LoginPage.jsx b/modern/src/login/LoginPage.jsx
index 5dcdbeb4..cdcd6df6 100644
--- a/modern/src/login/LoginPage.jsx
+++ b/modern/src/login/LoginPage.jsx
@@ -3,6 +3,7 @@ import moment from 'moment';
 import {
   useMediaQuery, InputLabel, Select, MenuItem, FormControl, Button, TextField, Link, Snackbar, IconButton, Tooltip, LinearProgress, Box,
 } from '@mui/material';
+import ReactCountryFlag from 'react-country-flag';
 import makeStyles from '@mui/styles/makeStyles';
 import CloseIcon from '@mui/icons-material/Close';
 import LockOpenIcon from '@mui/icons-material/LockOpen';
@@ -10,7 +11,7 @@ import { useTheme } from '@mui/material/styles';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import { sessionActions } from '../store';
-import { useLocalization, useTranslation, getFlagEmoji } from '../common/components/LocalizationProvider';
+import { useLocalization, useTranslation } from '../common/components/LocalizationProvider';
 import LoginLayout from './LoginLayout';
 import usePersistedState from '../common/util/usePersistedState';
 import { handleLoginTokenListeners, nativeEnvironment, nativePostMessage } from '../common/components/NativeInterface';
@@ -211,9 +212,9 @@ const LoginPage = () => {
               <Select label={t('loginLanguage')} value={language} onChange={(e) => setLanguage(e.target.value)}>
                 {languageList.map((it) => (
                   <MenuItem key={it.code} value={it.code}>
-                    {navigator.platform.indexOf('Win') < 0 && (
-                      <Box component="span" sx={{ mr: 1 }}>{getFlagEmoji(it.country)}</Box>
-                    )}
+                    <Box component="span" sx={{ mr: 1 }}>
+                      <ReactCountryFlag countryCode={it.country} />
+                    </Box>
                     {it.name}
                   </MenuItem>
                 ))}