Fix country flags (#1643)

* fix(ui): country flags svg

* fix(ui): country flags svg

* fix(ui): country flags svg

* fix(ui): flag

frontend/app/components/shared/CountryFlagIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { hasFlag } from 'country-flag-icons';
+import * as Flags from 'country-flag-icons/react/3x2';
+
+interface CountryFlagProps {
+  countryCode: string;
+  style?: React.CSSProperties;
+}
+
+const CountryFlagIcon: React.FC<CountryFlagProps> = ({ countryCode, style }) => {
+  const FlagComponent = Flags[countryCode as keyof typeof Flags];
+
+  return hasFlag(countryCode) && FlagComponent ? (
+    <FlagComponent style={style} />
+  ) : (
+    <div className='text-xs bg-gray-light px-1 rounded'>N/A</div>
+  );
+};
+
+export default CountryFlagIcon;

frontend/app/components/ui/CountryFlag/CountryFlag.tsx

@@ -3,6 +3,7 @@ import cn from 'classnames';
 import { Icon, TextEllipsis } from 'UI';
 import { Tooltip } from 'antd';
 import { countries } from 'App/constants';
+import CountryFlagIcon from 'Shared/CountryFlagIcon';
 
 interface CountryFlagProps {
   userCity?: string;
@@ -24,7 +25,7 @@ const CountryFlag: FC<CountryFlagProps> = ({
                                              style = {},
                                              width = 22,
                                              height = 15,
-                                             showLabel = false,
+                                             showLabel = false
                                            }) => {
   const knownCountry = !!country && country !== 'UN';
   const countryFlag = knownCountry ? country.toLowerCase() : '';
@@ -54,11 +55,11 @@ const CountryFlag: FC<CountryFlagProps> = ({
   return (
     <div className='flex items-center' style={style}>
       {knownCountry ? (
-        <Tooltip title={fullGeoInfo} mouseEnterDelay={0.5}>
-          <div
-            className={cn(`flag flag-${countryFlag} flex-shrink-0`, className)}
-            style={{ width: `${width}px`, height: `${height}px` }}
-          />
+        <Tooltip title={fullGeoInfo}>
+          <div>
+            <CountryFlagIcon countryCode={countryFlag.toUpperCase()}
+                             style={{ width: `${width}px`, borderRadius: '2px' }} />
+          </div>
         </Tooltip>
       ) : (
         renderUnknownCountry

frontend/app/styles/index.scss

@@ -6,6 +6,5 @@
 @import "./main.css";
 @import "./colors-autogen.css";
 @import "./toastify.css";
-@import "./flags.css";
 @import "./general.css";
 @import "./recharts.css";

frontend/package.json

@@ -33,6 +33,7 @@
     "chroma-js": "^2.4.2",
     "classnames": "^2.3.1",
     "copy-to-clipboard": "^3.3.1",
+    "country-flag-icons": "^1.5.7",
     "deep-diff": "^1.0.2",
     "fflate": "^0.7.4",
     "html-to-image": "^1.9.0",

frontend/yarn.lock

@@ -10660,6 +10660,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"country-flag-icons@npm:^1.5.7":
+  version: 1.5.7
+  resolution: "country-flag-icons@npm:1.5.7"
+  checksum: 44900ae66a74d35cd91d62557905cdd75cb2802a37155e70798ecf0b08411b18ffab0e926dbf514b143090a779e0a7f73aefc44c485bc2869281f8938e113431
+  languageName: node
+  linkType: hard
+
 "cp-file@npm:^7.0.0":
   version: 7.0.0
   resolution: "cp-file@npm:7.0.0"
@@ -19666,6 +19673,7 @@ __metadata:
     copy-to-clipboard: ^3.3.1
     copy-webpack-plugin: ^11.0.0
     country-data: 0.0.31
+    country-flag-icons: ^1.5.7
     css-loader: ^6.7.1
     cssnano: ^5.0.12
     cypress: ^13.3.0