feat: add country flags to country code selection

package-lock.json

@@ -17,6 +17,7 @@
         "i18next-http-backend": "^3.0.2",
         "iconsax-reactjs": "^0.0.8",
         "react": "^19.1.0",
+        "react-country-flag": "^3.1.0",
         "react-dom": "^19.1.0",
         "react-i18next": "^15.6.0",
         "stylis": "^4.3.6",
@@ -3719,6 +3720,18 @@
         "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==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
     "node_modules/react-dom": {
       "version": "19.1.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",

package.json

@@ -20,6 +20,7 @@
     "i18next-http-backend": "^3.0.2",
     "iconsax-reactjs": "^0.0.8",
     "react": "^19.1.0",
+    "react-country-flag": "^3.1.0",
     "react-dom": "^19.1.0",
     "react-i18next": "^15.6.0",
     "stylis": "^4.3.6",

src/features/authentication/components/CountryCodeSelector.tsx

@@ -10,6 +10,7 @@ import {
 import { useEffect, useMemo, useRef, useState, type RefObject } from 'react';
 import { countries, type Country } from '../data/countries';
 import { ArrowDown2 } from 'iconsax-reactjs';
+import ReactCountryFlag from 'react-country-flag';
 
 interface CountryCodeSelectorProps {
   show: boolean;
@@ -152,7 +153,16 @@ export function CountryCodeSelector({
             selected={country.phone === value}
             onClick={() => handleSelect(country)}
           >
-            <ListItemIcon>{country.flag}</ListItemIcon>
+            <ListItemIcon>
+              <ReactCountryFlag
+                countryCode={country.code}
+                svg
+                style={{
+                  height: '1.125rem',
+                  width: '1.125rem',
+                }}
+              />
+            </ListItemIcon>
             <ListItemText primary={country.label} />
             <Typography color="text.secondary">{country.phone}</Typography>
           </MenuItem>

src/features/authentication/data/countries.ts

@@ -2,14 +2,13 @@ export interface Country {
   code: string;
   label: string;
   phone: string;
-  flag: string;
 }
 
 export const countries: readonly Country[] = [
-  { code: 'CH', label: 'Switzerland', phone: '+41', flag: '🇨🇭' },
+  { code: 'CH', label: 'Switzerland', phone: '+41' },
-  { code: 'SA', label: 'Saudi Arabia', phone: '+966', flag: '🇸🇦' },
+  { code: 'SA', label: 'Saudi Arabia', phone: '+966' },
-  { code: 'QA', label: 'Qatar', phone: '+974', flag: '🇶🇦' },
+  { code: 'QA', label: 'Qatar', phone: '+974' },
-  { code: 'KW', label: 'Kuwait', phone: '+965', flag: '🇰🇼' },
+  { code: 'KW', label: 'Kuwait', phone: '+965' },
-  { code: 'BH', label: 'Bahrain', phone: '+973', flag: '🇧🇭' },
+  { code: 'BH', label: 'Bahrain', phone: '+973' },
-  { code: 'AE', label: 'United Arab Emirates', phone: '+971', flag: '🇦🇪' },
+  { code: 'AE', label: 'United Arab Emirates', phone: '+971' },
 ];

src/features/authentication/routes/LoginPage.tsx

@@ -16,9 +16,10 @@ export function LoginPage() {
     >
       <Logo />
       <Paper
-        elevation={1}
+        elevation={0}
-        square
+        
         sx={{
+          borderRadius: 'theme.xl',
           p: 6,
           width: '34.5rem',
         }}