fix: email limit and sidenav fixes

public/locales/en/setting.json

@@ -70,7 +70,8 @@
     "phoneVerified": "Phone number verified",
     "errorConfirmCode": "Failed to confirm code",
     "errorChangePhone": "Failed to change phone number",
-    "verificationCodeSent": "Verification code sent"
+    "verificationCodeSent": "Verification code sent",
+    "onlyOneAccountAllowed": "You can only link one email account."
   },
 
   "active": {

public/locales/fa/setting.json

@@ -71,7 +71,8 @@
     "phoneVerified": "تلفن همراه تایید شد",
     "errorConfirmCode": "تایید کد با خطا مواجه شد",
     "errorChangePhone": "تغییر تلفن همراه با خطا مواجه شد",
-    "verificationCodeSent": "کد تایید ارسال شد"
+    "verificationCodeSent": "کد تایید ارسال شد",
+    "onlyOneAccountAllowed": "شما فقط می‌توانید یک حساب ایمیل را متصل کنید"
   },
 
   "active": {

src/features/profile/components/userInformation/SocialMedia.tsx

@@ -107,6 +107,13 @@ export function SocialMedia() {
         severity: 'success',
       });
       setDialogStep('enterCode');
+
+      setTimeout(
+        () => {
+          resetDialog();
+        },
+        3 * 60 * 1000,
+      );
     }
   };
 
@@ -128,34 +135,35 @@ export function SocialMedia() {
         message: confirmData.message || t('settingForm.error'),
         severity: 'error',
       });
-
       return;
     }
 
-    toast({
-      message: confirmData.message || t('settingForm.verificationSuccessful'),
-      severity: 'success',
-    });
+    if (emailList.length >= 1) {
+      toast({
+        message: t('settingForm.onlyOneAccountAllowed'),
+        severity: 'error',
+      });
+      return;
+    }
 
     const changeEmailData = await executeChangeEmail({ email: emailInput });
-
     if (!changeEmailData) return;
 
     if (changeEmailData.success) {
-      setEmailList((prev) => [
-        ...prev,
+      setEmailList([
         {
           email: emailInput,
           provider: emailInput.includes('@gmail.') ? 'google' : 'email',
           time: t('settingForm.justNow'),
         },
       ]);
+
       toast({
         message: t('settingForm.emailChangedSuccessfully'),
         severity: 'success',
       });
-      resetDialog();
 
+      resetDialog();
       refetchProfile({ force: true });
     }
   };

src/features/profile/routes/ActiveDevicesPage.tsx

@@ -118,25 +118,27 @@ export function ActiveDevicesPage() {
         title={t('active.activeDevices')}
         subtitle={t('active.activeDevicesCaption')}
         action={
-          <Button
-            size="medium"
-            variant="outlined"
-            onClick={handleTerminateAllOtherSessions}
-            sx={{
-              borderRadius: 1,
-              borderColor: 'error.main',
-              color: 'error.main',
-              textTransform: 'none',
-              flexShrink: 0,
-              flexGrow: 0,
-              width: 'auto',
-            }}
-            disabled={isLoadingProfile || isTerminating}
-          >
-            {isTerminating
-              ? t('active.deleting')
-              : t('active.deleteDevicesButton')}
-          </Button>
+          <Box sx={{ display: 'flex', gap: 1 }}>
+            <Button
+              size="medium"
+              variant="outlined"
+              onClick={handleTerminateAllOtherSessions}
+              sx={{
+                borderRadius: 1,
+                borderColor: 'error.main',
+                color: 'error.main',
+                textTransform: 'none',
+                flexShrink: 0,
+                flexGrow: 0,
+                width: 'auto',
+              }}
+              disabled={isLoadingProfile || isTerminating}
+            >
+              {isTerminating
+                ? t('active.deleting')
+                : t('active.deleteDevicesButton')}
+            </Button>
+          </Box>
         }
       >
         {isLoadingProfile ? (
@@ -154,10 +156,12 @@ export function ActiveDevicesPage() {
         ) : (
           <Box
             sx={{
-              px: { xs: 2, sm: 3, md: 4 },
+              mx: { xs: 2, sm: 3, md: 4 },
               py: 2,
               display: 'flex',
               flexDirection: 'column',
+              gap: 2,
+              bgcolor: 'background.paper',
             }}
           >
             {devices.map((device) => (
@@ -218,7 +222,7 @@ export function ActiveDevicesPage() {
                     sx={{
                       flexBasis: { xs: '100%', sm: 'auto' },
                       mb: { xs: 1, sm: 0 },
-                      minWidth: { sm: '138px' },
+                      minWidth: { sm: '126px' },
                       order: { xs: 4, sm: 4 },
                       alignItems: 'center',
                       justifyContent: 'center',