Fix: migrate deprecated MUI APIs

aelassas · Feb 13, 2025 · 685f5dc · 685f5dc
1 parent c081626
commit 685f5dc
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 9 deletions.
diff --git a/backend/src/components/Avatar.tsx b/backend/src/components/Avatar.tsx
@@ -467,7 +467,12 @@ const Avatar = ({
                   }}
                   badgeContent={(
                     <Tooltip title={commonStrings.VERIFIED}>
-                      <Box borderRadius="50%" className={size ? `user-avatar-verified-${size}` : 'user-avatar-verified-medium'}>
+                      <Box
+                        sx={{
+                          borderRadius: '50%',
+                        }}
+                        className={size ? `user-avatar-verified-${size}` : 'user-avatar-verified-medium'}
+                      >
                         <VerifiedIcon className={size ? `user-avatar-verified-icon-${size}` : 'user-avatar-verified-icon-medium'} />
                       </Box>
                     </Tooltip>
@@ -491,7 +496,13 @@ const Avatar = ({
                 <></>
               ) : (
                 <Tooltip title={commonStrings.DELETE_IMAGE}>
-                  <Box borderRadius="50%" className="avatar-action-box" onClick={handleDeleteAvatar}>
+                  <Box
+                    sx={{
+                      borderRadius: '50%',
+                    }}
+                    className="avatar-action-box"
+                    onClick={handleDeleteAvatar}
+                  >
                     <DeleteIcon className="avatar-action-icon" />
                   </Box>
                 </Tooltip>
@@ -507,7 +518,13 @@ const Avatar = ({
               className={type === movininTypes.RecordType.Agency ? 'agency-avatar' : ''}
               badgeContent={(
                 <Tooltip title={commonStrings.UPLOAD_IMAGE}>
-                  <Box borderRadius="50%" className="avatar-action-box" onClick={handleUpload}>
+                  <Box
+                    sx={{
+                      borderRadius: '50%',
+                    }}
+                    className="avatar-action-box"
+                    onClick={handleUpload}
+                  >
                     <PhotoCameraIcon className="avatar-action-icon" />
                   </Box>
                 </Tooltip>
@@ -550,7 +567,12 @@ const Avatar = ({
                   }}
                   badgeContent={(
                     <Tooltip title={commonStrings.VERIFIED}>
-                      <Box borderRadius="50%" className={size ? `user-avatar-verified-${size}` : 'user-avatar-verified-medium'}>
+                      <Box
+                        sx={{
+                          borderRadius: '50%',
+                        }}
+                        className={size ? `user-avatar-verified-${size}` : 'user-avatar-verified-medium'}
+                      >
                         <VerifiedIcon className={size ? `user-avatar-verified-icon-${size}` : 'user-avatar-verified-icon-medium'} />
                       </Box>
                     </Tooltip>
@@ -578,7 +600,13 @@ const Avatar = ({
               }}
               badgeContent={(
                 <Tooltip title={commonStrings.UPLOAD_IMAGE}>
-                  <Box borderRadius="50%" className="avatar-action-box" onClick={handleUpload}>
+                  <Box
+                    sx={{
+                      borderRadius: '50%',
+                    }}
+                    className="avatar-action-box"
+                    onClick={handleUpload}
+                  >
                     <PhotoCameraIcon className="avatar-action-icon" />
                   </Box>
                 </Tooltip>

diff --git a/frontend/src/components/Avatar.tsx b/frontend/src/components/Avatar.tsx
@@ -183,7 +183,13 @@ const Avatar = ({
                 horizontal: 'right',
               }}
               badgeContent={(
-                <Box borderRadius="50%" className="avatar-action-box" onClick={handleDeleteAvatar}>
+                <Box
+                  className="avatar-action-box"
+                  onClick={handleDeleteAvatar}
+                  sx={{
+                    borderRadius: '50%',
+                  }}
+                >
                   <DeleteIcon className="avatar-action-icon" />
                 </Box>
               )}
@@ -195,7 +201,13 @@ const Avatar = ({
                   horizontal: 'right',
                 }}
                 badgeContent={(
-                  <Box borderRadius="50%" className="avatar-action-box" onClick={handleUpload}>
+                  <Box
+                    className="avatar-action-box"
+                    onClick={handleUpload}
+                    sx={{
+                      borderRadius: '50%',
+                    }}
+                  >
                     <PhotoCameraIcon className="avatar-action-icon" />
                   </Box>
                 )}
@@ -212,7 +224,13 @@ const Avatar = ({
               }}
               badgeContent={(
                 <div>
-                  <Box borderRadius="50%" className="avatar-action-box" onClick={handleUpload}>
+                  <Box
+                    className="avatar-action-box"
+                    onClick={handleUpload}
+                    sx={{
+                      borderRadius: '50%',
+                    }}
+                  >
                     <PhotoCameraIcon className={user.language === 'ar' ? 'avatar-action-icon-rtl' : 'avatar-action-icon'} />
                   </Box>
                 </div>

diff --git a/frontend/src/components/MapDialog.tsx b/frontend/src/components/MapDialog.tsx
@@ -56,7 +56,12 @@ const MapDialog = ({
       }}
     >
       <DialogTitle>
-        <Box display="flex" justifyContent="flex-end">
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'flex-end',
+          }}
+        >
           <Box>
             <IconButton
               className="close-btn"