feat: add country flags to country code selection

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: 'SA', label: 'Saudi Arabia', phone: '+966', flag: '🇸🇦' },
-  { code: 'QA', label: 'Qatar', phone: '+974', flag: '🇶🇦' },
-  { code: 'KW', label: 'Kuwait', phone: '+965', flag: '🇰🇼' },
-  { code: 'BH', label: 'Bahrain', phone: '+973', flag: '🇧🇭' },
-  { code: 'AE', label: 'United Arab Emirates', phone: '+971', flag: '🇦🇪' },
+  { code: 'CH', label: 'Switzerland', phone: '+41' },
+  { code: 'SA', label: 'Saudi Arabia', phone: '+966' },
+  { code: 'QA', label: 'Qatar', phone: '+974' },
+  { code: 'KW', label: 'Kuwait', phone: '+965' },
+  { code: 'BH', label: 'Bahrain', phone: '+973' },
+  { 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}
-        square
+        elevation={0}
+        
         sx={{
+          borderRadius: 'theme.xl',
           p: 6,
           width: '34.5rem',
         }}