fix: code styles

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

@@ -8,27 +8,35 @@ import {
   ListItemText,
 } from '@mui/material';
 import { Message, Google, Apple, ArrowDown3 } from 'iconsax-react';
+import { Icon } from '@rkheftan/harmony-ui';
+
+interface SocialMediaMenuProps {
+  t: (key: string) => string;
+  onOpenDialog: () => void;
+}
 
 export default function SocialMediaMenu({
   t,
   onOpenDialog,
-}: {
-  t: (key: string) => string;
-  onOpenDialog: () => void;
-}) {
+}: SocialMediaMenuProps) {
   const [anchor, setAnchor] = useState<null | HTMLElement>(null);
   const openMenu = Boolean(anchor);
+  const [open, setOpen] = useState(false);
 
-  const handleClickMenu = (e: React.MouseEvent<HTMLButtonElement>) =>
+  const handleClickMenu = (e: React.MouseEvent<HTMLButtonElement>) => {
+    setOpen(true);
     setAnchor(e.currentTarget);
-  const handleCloseMenu = () => setAnchor(null);
+  };
+  const handleCloseMenu = () => {
+    setOpen(false);
+    setAnchor(null);
+  };
 
   return (
     <Box
       sx={{
         display: 'flex',
         justifyContent: 'flex-start',
-        flexWrap: 'wrap',
         gap: 1,
       }}
     >
@@ -38,40 +46,28 @@ export default function SocialMediaMenu({
           flexDirection: { xs: 'column', sm: 'row' },
           alignItems: { xs: 'stretch', sm: 'flex-start' },
           gap: 1,
-          width: '100%',
         }}
       >
         <Button
           onClick={handleClickMenu}
           variant="outlined"
           sx={{
-            width: '100%',
-            maxWidth: { sm: 187 },
-            textTransform: 'none',
             border: '1px solid',
-            borderColor: 'primary.main',
-            borderRadius: '8px',
-            color: 'primary.main',
-            fontSize: '14px',
-            px: 2,
-            py: 1,
+            borderRadius: 1,
             display: 'flex',
             justifyContent: 'space-between',
             alignItems: 'center',
             whiteSpace: 'nowrap',
+            backgroundColor: open ? 'primary.light' : 'primary.default',
           }}
         >
-          <Box
-            component="span"
-            sx={{
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              direction: 'rtl',
-            }}
-          >
-            {t('settingForm.addEmailOrSocialButton')}
-          </Box>
-          <ArrowDown3 size="20" color="#2979FF" />
+          <Box component="span">{t('settingForm.addEmailOrSocialButton')}</Box>
+          <Icon
+            Component={ArrowDown3}
+            size="medium"
+            color="primary.main"
+            variant={open ? 'Bold' : 'Outline'}
+          />
         </Button>
       </Box>
 
@@ -81,7 +77,7 @@ export default function SocialMediaMenu({
         onClose={handleCloseMenu}
         PaperProps={{
           sx: {
-            minWidth: 240,
+            minWidth: 187,
             maxWidth: '90vw',
           },
         }}
@@ -95,19 +91,19 @@ export default function SocialMediaMenu({
           }}
         >
           <ListItemIcon>
-            <Message size={20} color="black" />
+            <Icon Component={Message} size="medium" color="primary.main" />
           </ListItemIcon>
           <ListItemText>{t('settingForm.email')}</ListItemText>
         </MenuItem>
         <MenuItem>
           <ListItemIcon>
-            <Google size={20} color="#4285F4" />
+            <Icon Component={Google} size="medium" color="primary.main" />
           </ListItemIcon>
           <ListItemText>{t('settingForm.google')}</ListItemText>
         </MenuItem>
         <MenuItem>
           <ListItemIcon>
-            <Apple size={20} color="black" />
+            <Icon Component={Apple} size="medium" color="primary.main" />
           </ListItemIcon>
           <ListItemText>{t('settingForm.apple')}</ListItemText>
         </MenuItem>