fix(ui): unknown country repeated

frontend/app/components/shared/CountryFlagIcon.tsx

@@ -13,7 +13,7 @@ const CountryFlagIcon: React.FC<CountryFlagProps> = ({ countryCode, style }) =>
   return hasFlag(countryCode) && FlagComponent ? (
     <FlagComponent style={style} />
   ) : (
-    <div className='text-xs bg-gray-light px-1 rounded'>N/A</div>
+    <div className='text-xs bg-gray-bg px-1 rounded color-white'>N/A</div>
   );
 };
 

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

@@ -37,33 +37,20 @@ const CountryFlag: FC<CountryFlagProps> = ({
   // display full geo info, check each part if not null, display as string
   const fullGeoInfo = [userCity, userState, countryName].filter(Boolean).join(', ');
 
-  const renderUnknownCountry = (
-    <div className='flex items-center w-full'>
-      <Icon name='flag-na' size={22} className='' />
-      <div className='ml-2 leading-none' style={{ whiteSpace: 'nowrap' }}>
-        Unknown Country
-      </div>
-    </div>
-  );
-
   const renderGeoInfo = displayGeoInfo && (
-    <span className='mx-1'>
-      <TextEllipsis text={displayGeoInfo} maxWidth='150px' />
+    <span className="mx-1">
+      <TextEllipsis text={displayGeoInfo} maxWidth="150px" />
     </span>
   );
 
   return (
-    <div className='flex items-center' style={style}>
-      {knownCountry ? (
-        <Tooltip title={fullGeoInfo}>
-          <div>
-            <CountryFlagIcon countryCode={countryFlag.toUpperCase()}
-                             style={{ width: `${width}px`, borderRadius: '2px' }} />
-          </div>
-        </Tooltip>
-      ) : (
-        renderUnknownCountry
-      )}
+    <div className="flex items-center" style={style}>
+      <Tooltip title={fullGeoInfo}>
+        <div>
+          <CountryFlagIcon countryCode={countryFlag.toUpperCase()}
+                           style={{ width: `${width}px`, borderRadius: '2px' }} />
+        </div>
+      </Tooltip>
       {showLabel && renderGeoInfo}
     </div>
   );