Replaces emoji flags with flag from a png.

Seems like windows does not have emojis for flags.

css/main.scss

@@ -18,6 +18,11 @@
 
 /* Animations END */
 
+/* Flags BEGIN */
+$flagsImagePath: "/images/";
+@import "../node_modules/bc-css-flags/dist/css/bc-css-flags.scss";
+/* Flags END */
+
 /* Fonts BEGIN */
 
 @import 'font';

css/modals/invite/_info.scss

@@ -140,10 +140,13 @@
         border-bottom: 1px solid #d1dbe8;
     }
 
-    .flag {
+    .flag-cell {
-        border-bottom-style: none;
-        width: 30px;
         vertical-align: top;
+        width: 30px;
+    }
+    .flag {
+        display: block;
+        margin: 5px 5px 0px 5px;
     }
 
     .country {

package-lock.json

@@ -3298,6 +3298,11 @@
       "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
       "dev": true
     },
+    "bc-css-flags": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/bc-css-flags/-/bc-css-flags-3.0.0.tgz",
+      "integrity": "sha1-OJWiPppx+VgE6u8V8WXVG5rV4hM="
+    },
     "bcrypt-pbkdf": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",

package.json

@@ -36,6 +36,7 @@
     "@microsoft/microsoft-graph-client": "1.1.0",
     "@webcomponents/url": "0.7.1",
     "amplitude-js": "4.5.2",
+    "bc-css-flags": "3.0.0",
     "dropbox": "4.0.9",
     "i18n-iso-countries": "3.7.8",
     "i18next": "8.4.3",

react/features/invite/components/dial-in-summary/NumbersList.web.js

@@ -131,26 +131,18 @@ class NumbersList extends Component<Props> {
     }
 
     /**
-     * Renders a div container for a phone number.
+     * Renders a div container for a flag for the country of the phone number.
      *
-     * @param {string} countryCode - The phone number to display.
+     * @param {string} countryCode - The country code flag to display.
      * @private
      * @returns {ReactElement}
      */
     _renderFlag(countryCode) {
-        const OFFSET = 127397;
-
         if (countryCode) {
-            // ensure country code is all caps
+            return (
-            const cc = countryCode.toUpperCase();
+                <td className = 'flag-cell'>
-
+                    <i className = { `flag iti-flag ${countryCode}` } />
-            // return the emoji flag corresponding to country_code or null
+                </td>);
-            const countryFlag = /^[A-Z]{2}$/.test(cc)
-                ? String.fromCodePoint(...[ ...cc ]
-                    .map(c => c.charCodeAt() + OFFSET))
-                : null;
-
-            return <td className = 'flag'>{ countryFlag }</td>;
         }
 
         return null;