fix: code styles

src/features/profile/components/userInformation/phoneNumber/PhoneDisplay.tsx

@@ -1,31 +1,55 @@
 import { Box, Typography } from '@mui/material';
+import { Icon } from '@rkheftan/harmony-ui';
+import { Mobile } from 'iconsax-react';
 
-export default function PhoneDisplay({
-  phones,
-}: {
+interface PhoneDisplayProps {
   phones: { phone: string; time: string }[];
-}) {
+}
+
+export default function PhoneDisplay({ phones }: PhoneDisplayProps) {
   return (
-    <Box sx={{ px: { xs: 2, sm: 4 } }}>
+    <>
       {phones.map((item, index) => (
         <Box
           key={index}
           sx={{
             display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
+            flexDirection: 'row',
+            alignItems: 'center',
             py: 2,
-            width: '100%',
+            mx: 3,
+            gap: 1,
           }}
         >
-          <Typography variant="h6" color="text.primary">
-            {item.phone}
-          </Typography>
-          <Typography variant="caption" color="text.secondary">
-            {item.time}
-          </Typography>
+          <Box
+            sx={{
+              width: 40,
+              height: 40,
+              backgroundColor: 'primary.light',
+              justifyContent: 'center',
+              alignItems: 'center',
+              display: 'flex',
+              borderRadius: 0.5,
+            }}
+          >
+            <Icon
+              Component={Mobile}
+              size="medium"
+              variant="Bold"
+              color="primary.main"
+            />
+          </Box>
+
+          <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+            <Typography variant="h6" color="text.primary">
+              {item.phone}
+            </Typography>
+            <Typography variant="caption" color="text.secondary">
+              {item.time}
+            </Typography>
+          </Box>
         </Box>
       ))}
-    </Box>
+    </>
   );
 }