fix(ui): use country-flag-icons instead of country-flag-emoji for RegionSelector (#1011)

package.json

@@ -27,7 +27,7 @@
     "bowser": "^2.11.0",
     "connect-typeorm": "^1.1.4",
     "cookie-parser": "^1.4.5",
-    "country-code-emoji": "^2.2.0",
+    "country-flag-icons": "^1.2.9",
     "csurf": "^1.11.0",
     "email-templates": "^8.0.3",
     "express": "^4.17.1",
@@ -83,6 +83,7 @@
     "@types/bcrypt": "^3.0.0",
     "@types/body-parser": "^1.19.0",
     "@types/cookie-parser": "^1.4.2",
+    "@types/country-flag-icons": "^1.2.0",
     "@types/csurf": "^1.11.0",
     "@types/email-templates": "^8.0.2",
     "@types/express": "^4.17.11",

src/components/RegionSelector/index.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { Listbox, Transition } from '@headlessui/react';
-import { countryCodeEmoji } from 'country-code-emoji';
 import useSWR from 'swr';
 import type { Region } from '../../../server/lib/settings';
 import { defineMessages, useIntl } from 'react-intl';
 import useSettings from '../../hooks/useSettings';
+import { hasFlag } from 'country-flag-icons';
+import 'country-flag-icons/3x2/flags.css';
 
 const messages = defineMessages({
   regionDefault: 'All Regions',
@@ -64,11 +65,15 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
             <div className="relative">
               <span className="inline-block w-full rounded-md shadow-sm">
                 <Listbox.Button className="relative flex items-center w-full py-2 pl-3 pr-10 text-left text-white transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md cursor-default focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5">
-                  {selectedRegion && selectedRegion.iso_3166_1 !== 'all' && (
-                    <span className="h-4 mr-2 overflow-hidden text-lg leading-4">
-                      {countryCodeEmoji(selectedRegion.iso_3166_1)}
-                    </span>
-                  )}
+                  {selectedRegion &&
+                    selectedRegion.iso_3166_1 !== 'all' &&
+                    hasFlag(selectedRegion?.iso_3166_1) && (
+                      <span className="h-4 mr-2 overflow-hidden text-base leading-4">
+                        <span
+                          className={`flag:${selectedRegion?.iso_3166_1}`}
+                        />
+                      </span>
+                    )}
                   <span className="block truncate">
                     {selectedRegion && selectedRegion.iso_3166_1 !== 'all'
                       ? intl.formatDisplayName(selectedRegion.iso_3166_1, {
@@ -180,7 +185,7 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
                         <span
                           className={`${
                             selected ? 'font-semibold' : 'font-normal'
-                          } block truncate`}
+                          } block truncate pl-8`}
                         >
                           {intl.formatMessage(messages.regionDefault)}
                         </span>
@@ -217,8 +222,14 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
                               : 'text-gray-300'
                           } cursor-default select-none relative py-2 pl-8 pr-4 flex items-center`}
                         >
-                          <span className="mr-2 text-lg">
-                            {countryCodeEmoji(region.iso_3166_1)}
+                          <span className="mr-2 text-base">
+                            <span
+                              className={
+                                hasFlag(region.iso_3166_1)
+                                  ? `flag:${region.iso_3166_1}`
+                                  : 'pr-6'
+                              }
+                            />
                           </span>
                           <span
                             className={`${

yarn.lock

@@ -2025,6 +2025,11 @@
   dependencies:
     "@types/express" "*"
 
+"@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/csurf@^1.11.0":
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/@types/csurf/-/csurf-1.11.0.tgz#2809e89f55f12a2df8cd2826c06dfd66600dd14d"
@@ -4593,10 +4598,10 @@ cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
-country-code-emoji@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/country-code-emoji/-/country-code-emoji-2.2.0.tgz#afc99b8bbaff9cb038e370dc46faabbd7af48f64"
-  integrity sha512-iK7tw8pRbFIad7a3UDbx13SJpZj4ZReozc6oW6K6Wu4sAphQkJVxK8qfaPjFIXp22RoP/238WEDrKpIWxxI9CQ==
+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==
 
 country-language@^0.1.7:
   version "0.1.7"