chore: change the styles and add countries to the user profile

src/features/profile/components/userInformation/personalInformation/InfoRowDisplay.tsx

@@ -1,7 +1,7 @@
 import { Box, Typography, Avatar } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { CountryFlag } from '@/components/CountryFlag';
 import { DisplayField } from './DisplayField';
+import { CountryFlag } from '@/components/CountryFlag';
 import { Gender } from '@/features/profile/types';
 
 interface InfoRowData {
@@ -26,6 +26,7 @@ export function InfoRowDisplay({
   const { t } = useTranslation('profileSetting');
   const displayValue = (value: string) =>
     value?.trim() || t('settingForm.notDetermined');
+
   const getGenderLabel = (gender: Gender | '') => {
     switch (gender) {
       case Gender.Male:
@@ -36,6 +37,7 @@ export function InfoRowDisplay({
         return t('settingForm.notDetermined');
     }
   };
+
   return (
     <Box sx={{ mb: 2 }}>
       <Box sx={{ width: '100%' }}>
@@ -70,7 +72,9 @@ export function InfoRowDisplay({
                 {initials}
               </Avatar>
               <Typography variant="body1" color="text.primary">
-                {`${displayValue(data.firstName)} ${displayValue(data.lastName)}`}
+                {`${displayValue(data.firstName)} ${displayValue(
+                  data.lastName,
+                )}`}
               </Typography>
             </Box>
           </Box>
@@ -79,7 +83,15 @@ export function InfoRowDisplay({
             <Typography variant="caption" color="text.secondary">
               {t('settingForm.country')}
             </Typography>
-            <CountryFlag country={data.country} />
+            <Box sx={{ mt: 0.5 }}>
+              {data.country ? (
+                <CountryFlag code={data.country} />
+              ) : (
+                <Typography variant="body1" color="text.primary">
+                  {t('settingForm.notDetermined')}
+                </Typography>
+              )}
+            </Box>
           </Box>
         </Box>
       </Box>