fix: code styles

src/features/profile/components/userInformation/socialMedia/SocialMediaDialog.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type ReactElement, type ElementType } from 'react';
 import {
   Box,
   Button,
@@ -11,15 +11,28 @@ import {
 } from '@mui/material';
 import Slide from '@mui/material/Slide';
 import type { TransitionProps } from '@mui/material/transitions';
-import { CloseSquare, Google, Apple } from 'iconsax-react';
+import { CloseCircle } from 'iconsax-react';
+import { Icon } from '@rkheftan/harmony-ui';
 
 const MobileSlide = React.forwardRef(function MobileSlide(
-  props: TransitionProps & { children: React.ReactElement<any, any> },
+  props: TransitionProps & { children: ReactElement<unknown, ElementType> },
   ref: React.Ref<unknown>,
 ) {
   return <Slide direction="up" ref={ref} {...props} />;
 });
 
+interface SocialMediaDialogProps {
+  open: boolean;
+  onClose: () => void;
+  t: (key: string) => string;
+  emailInput: string;
+  setEmailInput: (val: string) => void;
+  emailError: boolean;
+  setEmailError: (val: boolean) => void;
+  fullScreen: boolean;
+  computedMaxWidth: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+
 export default function SocialMediaDialog({
   open,
   onClose,
@@ -30,17 +43,7 @@ export default function SocialMediaDialog({
   setEmailError,
   fullScreen,
   computedMaxWidth,
-}: {
-  open: boolean;
-  onClose: () => void;
-  t: (key: string) => string;
-  emailInput: string;
-  setEmailInput: (val: string) => void;
-  emailError: boolean;
-  setEmailError: (val: boolean) => void;
-  fullScreen: boolean;
-  computedMaxWidth: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-}) {
+}: SocialMediaDialogProps) {
   const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
     setEmailInput(value);
@@ -59,30 +62,25 @@ export default function SocialMediaDialog({
       TransitionComponent={fullScreen ? MobileSlide : undefined}
       PaperProps={{
         sx: {
-          m: { xs: 0, sm: 2 },
           borderRadius: { xs: 0, sm: 2 },
-          width: { xs: '100%', sm: 'auto' },
-          height: { xs: '100%', sm: 'auto' },
+          width: { xs: '100%', sm: '30%' },
+          height: { xs: '100%', sm: '43%' },
         },
       }}
     >
       <DialogTitle
         sx={{
           display: 'flex',
-          flexDirection: 'row',
           alignItems: 'center',
           fontWeight: 'bold',
           fontSize: '16px',
           gap: 1,
           p: { xs: 1.5, sm: 2 },
-          position: { xs: 'sticky', sm: 'static' },
-          top: 0,
-          bgcolor: 'background.paper',
-          zIndex: 1,
+          bgcolor: 'background.default',
         }}
       >
         <IconButton onClick={onClose} aria-label="Close">
-          <CloseSquare size={24} color="#82B1FF" />
+          <Icon Component={CloseCircle} size="medium" color="primary.main" />
         </IconButton>
         {t('settingForm.addEmailButton')}
       </DialogTitle>
@@ -90,11 +88,9 @@ export default function SocialMediaDialog({
       <DialogContent
         dividers
         sx={{
-          width: '100%',
           display: 'flex',
           flexDirection: 'column',
           gap: 2,
-          px: { xs: 2, sm: 3 },
           py: { xs: 1.5, sm: 2 },
         }}
       >
@@ -128,59 +124,6 @@ export default function SocialMediaDialog({
         >
           {t('settingForm.verificationCodeButton')}
         </Button>
-
-        <Box sx={{ display: 'flex', alignItems: 'center', my: 2 }}>
-          <Box sx={{ flex: 1, height: 1, bgcolor: 'divider' }} />
-          <Typography sx={{ mx: 1, fontSize: 12, color: 'text.secondary' }}>
-            {t('settingForm.or')}
-          </Typography>
-          <Box sx={{ flex: 1, height: 1, bgcolor: 'divider' }} />
-        </Box>
-
-        <Box
-          sx={{
-            display: 'flex',
-            gap: 1,
-            flexDirection: { xs: 'column', sm: 'row' },
-          }}
-        >
-          <Button
-            fullWidth
-            sx={{
-              textTransform: 'none',
-              border: 2,
-              borderColor: 'primary.main',
-              color: 'primary.main',
-              borderRadius: 2,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-          >
-            <Google
-              size="20"
-              color="#4285F4"
-              style={{ marginInlineStart: 8 }}
-            />
-            {t('settingForm.google')}
-          </Button>
-          <Button
-            fullWidth
-            sx={{
-              textTransform: 'none',
-              border: 2,
-              borderColor: 'primary.main',
-              color: 'primary.main',
-              borderRadius: 2,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-          >
-            <Apple size="20" color="black" style={{ marginInlineStart: 8 }} />
-            {t('settingForm.apple')}
-          </Button>
-        </Box>
       </DialogContent>
     </Dialog>
   );