feat: responsive design and english translator for this section

src/features/profile/components/SocialMedia.tsx

@@ -54,37 +54,67 @@ export function SocialMedia() {
   return (
     <Box
       sx={{
-        // backgroundColor: '#F5F5F5',
         display: 'flex',
         justifyContent: 'center',
-        // p: 2,
+        alignItems: 'center',
+        px: 2,
       }}
     >
       <CardContainer
         title={t('settingForm.titleSocial')}
         subtitle={t('settingForm.descriptionSocial')}
         action={
-          <Box sx={{ display: 'flex', justifyContent: 'flex-start' }}>
-            <Button
-              onClick={handleClickMenu}
-              variant="outlined"
-              size="large"
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'flex-start',
+              flexWrap: 'wrap',
+              gap: 1,
+            }}
+          >
+            <Box
               sx={{
-                maxWidth: '187px',
-                height: '42px',
-                border: '1px solid',
-                borderColor: '#2979FF',
-                borderRadius: '8px',
-                color: '#2979FF',
-                fontSize: '14px',
                 display: 'flex',
-                justifyContent: 'space-between',
-                px: 2,
+                flexDirection: { xs: 'column', sm: 'row' },
+                alignItems: { xs: 'stretch', sm: 'flex-start' },
+                gap: 1,
+                width: '100%',
               }}
             >
-              {t('settingForm.addEmailOrSocialButton')}
-              {openMenu && <ArrowDown3 size="20" color="#2979FF" />}
-            </Button>
+              <Button
+                onClick={handleClickMenu}
+                variant="outlined"
+                sx={{
+                  width: '100%',
+                  maxWidth: { sm: '187px' },
+                  textTransform: 'none',
+                  border: '1px solid',
+                  borderColor: 'primary.main',
+                  borderRadius: '8px',
+                  color: 'primary.main',
+                  fontSize: '14px',
+                  px: 2,
+                  py: 1,
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                <Box
+                  component="span"
+                  sx={{
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    direction: 'rtl',
+                  }}
+                >
+                  {t('settingForm.addEmailOrSocialButton')}
+                </Box>
+                <ArrowDown3 size="20" color="#2979FF" />
+              </Button>
+            </Box>
+
             <Menu
               anchorEl={anchor}
               open={openMenu}
@@ -125,9 +155,9 @@ export function SocialMedia() {
         <Box
           sx={{
             width: '100%',
-            backgroundColor: 'white',
+            backgroundColor: 'background.paper',
             borderRadius: '8px',
-            p: 2,
+            p: { xs: 1, sm: 2 },
           }}
         >
           {emailList.map((item, index) => (
@@ -137,40 +167,25 @@ export function SocialMedia() {
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'space-between',
-                p: 1,
+                flexWrap: 'wrap',
+                py: 1,
+                gap: 1,
                 borderBottom:
                   index !== emailList.length - 1 ? '1px solid #eee' : 'none',
               }}
             >
-              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                 {item.provider === 'google' && (
-                  <Google
-                    size="20"
-                    variant="Bold"
-                    color="#4285F4"
-                    style={{ marginLeft: 8 }}
-                  />
+                  <Google size="20" variant="Bold" color="#4285F4" />
                 )}
                 {item.provider === 'apple' && (
-                  <Apple
-                    size="20"
-                    variant="Bold"
-                    color="black"
-                    style={{ marginLeft: 8 }}
-                  />
+                  <Apple size="20" variant="Bold" color="black" />
                 )}
                 {item.provider === 'email' && (
-                  <Sms
-                    size="20"
-                    variant="Bold"
-                    color="#1976d2"
-                    style={{ marginLeft: 8 }}
-                  />
+                  <Sms size="20" variant="Bold" color="#1976d2" />
                 )}
                 <Box>
-                  <Typography sx={{ fontWeight: 'bold', fontSize: '14px' }}>
-                    {item.email}
-                  </Typography>
+                  <Typography variant="h6">{item.email}</Typography>
                   <Typography variant="caption" color="text.secondary">
                     {item.time}
                   </Typography>
@@ -194,14 +209,14 @@ export function SocialMedia() {
               display: 'flex',
               flexDirection: 'row',
               alignItems: 'center',
-              backgroundColor: '#F5F5F5',
+              // backgroundColor: 'background.paper',
               fontWeight: 'bold',
               fontSize: '16px',
               gap: 1,
             }}
           >
             <IconButton onClick={handleCloseDialog} size="small">
-              <CloseSquare size="24" color="gray" />
+              <CloseSquare size="24" color="#F5F5F5" />
             </IconButton>
             {t('settingForm.addEmailButton')}
           </DialogTitle>
@@ -241,6 +256,7 @@ export function SocialMedia() {
                 variant="contained"
                 fullWidth
                 sx={{
+                  textTransform: 'none',
                   borderRadius: '8px',
                   backgroundColor: '#1976d2',
                 }}
@@ -257,10 +273,17 @@ export function SocialMedia() {
                 <Box sx={{ flex: 1, height: '1px', backgroundColor: '#ccc' }} />
               </Box>
 
-              <Box sx={{ display: 'flex', gap: 1 }}>
+              <Box
+                sx={{
+                  display: 'flex',
+                  gap: 1,
+                  flexDirection: { xs: 'column', sm: 'row' },
+                }}
+              >
                 <Button
+                  fullWidth
                   sx={{
-                    width: '50%',
+                    textTransform: 'none',
                     border: 2,
                     borderColor: '#1976d2',
                     color: '#1976d2',
@@ -274,8 +297,9 @@ export function SocialMedia() {
                   {t('settingForm.google')}
                 </Button>
                 <Button
+                  fullWidth
                   sx={{
-                    width: '50%',
+                    textTransform: 'none',
                     border: 2,
                     borderColor: '#1976d2',
                     color: '#1976d2',