fix: sidebar style

.npmrc

@@ -0,0 +1,2 @@
+@rkheftan:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=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

package-lock.json

@@ -12,7 +12,7 @@
         "@emotion/styled": "^11.14.1",
         "@mui/material": "^7.2.0",
         "@mui/stylis-plugin-rtl": "^7.2.0",
-        "@rkheftan/harmony-ui": "^0.1.2",
+        "@rkheftan/harmony-ui": "^0.1.4",
         "i18next": "^25.3.0",
         "i18next-browser-languagedetector": "^8.2.0",
         "i18next-http-backend": "^3.0.2",
@@ -1739,9 +1739,9 @@
       }
     },
     "node_modules/@rkheftan/harmony-ui": {
-      "version": "0.1.2",
+      "version": "0.1.4",
-      "resolved": "https://npm.pkg.github.com/download/@rkheftan/harmony-ui/0.1.2/75290c938c36fe3cfe5f334b997192c0503ceb29",
+      "resolved": "https://npm.pkg.github.com/download/@rkheftan/harmony-ui/0.1.4/01829061a531171f16aa92ac2c006d2553254797",
-      "integrity": "sha512-0yM5E2ptuWKvlR3Skk/9tuDaoQue0Hdr9g7ycsKtM1TBsh6011IiewKCA/drPcPc7CbmYDIvrU03mpA77lUFXw==",
+      "integrity": "sha512-hxwhuBfiHqaJpFC75s0/l+pUChE4gzr+ynZ4Wl/wCI4pdFvwQuTh6BrSl4LotfTKO6v0cK8Ii9brEX3Yr7bXBA==",
       "peerDependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",

package.json

@@ -15,7 +15,7 @@
     "@emotion/styled": "^11.14.1",
     "@mui/material": "^7.2.0",
     "@mui/stylis-plugin-rtl": "^7.2.0",
-    "@rkheftan/harmony-ui": "^0.1.2",
+    "@rkheftan/harmony-ui": "^0.1.4",
     "i18next": "^25.3.0",
     "i18next-browser-languagedetector": "^8.2.0",
     "i18next-http-backend": "^3.0.2",

public/locales/en/profileSetting.json

@@ -37,6 +37,7 @@
     "uploadPicture": "Upload image",
     "phoneNumberText": "Your new contact number will replace your previous contact number.",
     "verb": ".",
-    "notDetermined": "Not determined"
+    "notDetermined": "Not determined",
+    "successfulChangePhone": "Phone number changed successfully"
   }
 }

public/locales/en/security.json

@@ -12,6 +12,11 @@
     "hasUpperAndLower": "Contains a lowercase and uppercase letter",
     "hasSpecialChar": "Contains sign (!@#$%^&*)",
     "notCompatibility": "Confirm password is not the same as password.",
-    "alertSuccess": "Password has successfully changed"
+    "alertSuccess": "Password has successfully changed",
+    "lastChange": "Last change a few seconds ago",
+    "activePassword": "Password is active",
+    "recentLogins": "Recent logins",
+    "description": "In this section, you can see the recent logins to your Harmony account.",
+    "currentDevice": "Current device"
   }
 }

public/locales/fa/security.json

@@ -17,6 +17,9 @@
     "activePassword": "رمز عبور فعال است",
     "recentLogins": "ورود های اخیر",
     "description": "در این بخش از ورود های اخیر به اکانت هارمونی خود را مشاهده می کنید",
-    "currentDevice": "دستگاه فعلی"
+    "currentDevice": "دستگاه فعلی",
+    "changePassword": "تغییر رمز عبور",
+    "currentPassword": "رمز عبور فعلی",
+    "forgetPassword": "رمز عبور را فراموش کرده اید؟"
   }
 }

src/features/profile/components/activeDevices/ActiveDevices.tsx

@@ -86,7 +86,7 @@ export function ActiveDevices() {
             flex: 1,
           }}
         >
-          <Box sx={{ width: '100%', maxWidth: '754px', px: 4 }}>
+          <Box sx={{ width: '100%', maxWidth: '754px' }}>
             {devices.map((device) => (
               <Box
                 key={device.id}
@@ -99,7 +99,7 @@ export function ActiveDevices() {
               >
                 <Typography
                   variant="body2"
-                  sx={{ width: { xs: '100%', sm: '172.5px' } }}
+                  sx={{ width: { xs: '100%', sm: '138px' } }}
                 >
                   {device.timeAndDate}
                 </Typography>
@@ -107,7 +107,7 @@ export function ActiveDevices() {
                   sx={{
                     display: 'flex',
                     alignItems: 'center',
-                    width: { xs: '100%', sm: '172.5px' },
+                    width: { xs: '100%', sm: '138px' },
                     gap: 1,
                   }}
                 >
@@ -122,13 +122,13 @@ export function ActiveDevices() {
                 </Box>
                 <Typography
                   variant="body2"
-                  sx={{ width: { xs: '100%', sm: '172.5px' } }}
+                  sx={{ width: { xs: '100%', sm: '138px' } }}
                 >
                   {device.ip}
                 </Typography>
                 <Box
                   sx={{
-                    width: { xs: '100%', sm: '172.5px' },
+                    width: { xs: '100%', sm: '138px' },
                     textAlign: { xs: 'left', sm: 'center' },
                   }}
                 >
@@ -142,7 +142,7 @@ export function ActiveDevices() {
                         height: '30px',
                         whiteSpace: 'nowrap',
                         color: 'success.main',
-                        width: '93px',
+                        // width: '93px',
                         textTransform: 'none',
                       }}
                     >
@@ -152,7 +152,7 @@ export function ActiveDevices() {
                 </Box>
                 <Box
                   sx={{
-                    width: { xs: '100%', sm: '172.5px' },
+                    width: { xs: '100%', sm: '138px' },
                     textAlign: { xs: 'left', sm: 'center' },
                   }}
                 >
@@ -163,7 +163,7 @@ export function ActiveDevices() {
                     disabled={device.current}
                     sx={{
                       color: 'error.main',
-                      width: '80%',
+                      // width: '80%',
                       minWidth: 0,
                       borderRadius: '15px',
                       borderColor: 'error.main',

src/features/profile/components/security/PasswordSecurity.tsx

@@ -9,11 +9,12 @@ import {
   DialogActions,
   IconButton,
   useMediaQuery,
+  Link,
 } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { useState, useEffect } from 'react';
-import { CloseSquare, Refresh } from 'iconsax-react';
+import { CloseCircle, Refresh } from 'iconsax-react';
 import { PasswordValidationItem } from './PasswordValidation';
 import { Toast } from '@/components/Toast';
 import Logo from '@/components/Logo';
@@ -26,6 +27,7 @@ export function PasswordSecurity() {
   const [open, setOpen] = useState(false);
   const [password, setPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
+  const [currentPassword, setCurrentPassword] = useState('');
   const [showValidation, setShowValidation] = useState(false);
   const [showPasswordAlert, setShowPasswordAlert] = useState(false);
   const [changePassword, setChangePassword] = useState(false);
@@ -50,6 +52,7 @@ export function PasswordSecurity() {
       handleClose();
       setPassword('');
       setConfirmPassword('');
+      setCurrentPassword('');
     }, 1500);
   };
 
@@ -83,6 +86,21 @@ export function PasswordSecurity() {
         title={t('securityForm.password')}
         subtitle={t('securityForm.determinePassword')}
         action={
+          changePassword ? (
+            <Button
+              variant="outlined"
+              onClick={handleOpen}
+              sx={{
+                mt: { xs: 2, sm: 0 },
+                backgroundColor: 'primary.main',
+                color: 'background.paper',
+                width: { xs: '100%', sm: '142px' },
+                textTransform: 'none',
+              }}
+            >
+              {t('securityForm.changePassword')}
+            </Button>
+          ) : (
             <Button
               variant="outlined"
               onClick={handleOpen}
@@ -96,6 +114,7 @@ export function PasswordSecurity() {
             >
               {t('securityForm.addPassword')}
             </Button>
+          )
         }
       >
         <Box
@@ -142,14 +161,14 @@ export function PasswordSecurity() {
             <DialogTitle sx={{ p: 2 }}>
               <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                 <IconButton onClick={handleClose}>
-                  <CloseSquare size={24} color="#82B1FF" />
+                  <CloseCircle size={24} color="#82B1FF" />
                 </IconButton>
                 <Typography variant="h6" fontWeight="bold">
                   {t('securityForm.addPassword')}
                 </Typography>
               </Box>
             </DialogTitle>
-
+            {changePassword ? (
               <DialogContent
                 sx={{
                   display: 'flex',
@@ -158,6 +177,19 @@ export function PasswordSecurity() {
                   px: { xs: 2, sm: 3 },
                 }}
               >
+                <TextField
+                  label={t('securityForm.currentPassword')}
+                  fullWidth
+                  value={currentPassword}
+                  onChange={(e) => setCurrentPassword(e.target.value)}
+                  sx={{
+                    '& .MuiOutlinedInput-root': { borderRadius: 2 },
+                    mt: 2,
+                  }}
+                />
+                <Link sx={{ fontSize: '15px' }}>
+                  {t('securityForm.forgetPassword')}
+                </Link>
                 <TextField
                   label={t('securityForm.newPassword')}
                   type="password"
@@ -205,7 +237,66 @@ export function PasswordSecurity() {
                   sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
                 />
               </DialogContent>
+            ) : (
+              <DialogContent
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: 2,
+                  px: { xs: 2, sm: 3 },
+                }}
+              >
+                <TextField
+                  label={t('securityForm.newPassword')}
+                  type="password"
+                  fullWidth
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  sx={{
+                    '& .MuiOutlinedInput-root': { borderRadius: 2 },
+                    mt: 2,
+                  }}
+                />
 
+                {password && showValidation && (
+                  <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+                    <Box sx={{ maxWidth: '364px', width: '100%' }}>
+                      <PasswordValidationItem
+                        isValid={hasNumber}
+                        label={t('securityForm.hasNumber')}
+                      />
+                      <PasswordValidationItem
+                        isValid={hasMinLength}
+                        label={t('securityForm.hasMinLength')}
+                      />
+                      <PasswordValidationItem
+                        isValid={hasUpperAndLower}
+                        label={t('securityForm.hasUpperAndLower')}
+                      />
+                      <PasswordValidationItem
+                        isValid={hasSpecialChar}
+                        label={t('securityForm.hasSpecialChar')}
+                      />
+                    </Box>
+                  </Box>
+                )}
+
+                <TextField
+                  label={t('securityForm.confirmPassword')}
+                  type="password"
+                  fullWidth
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  error={confirmPassword.length > 0 && !matchPassword}
+                  helperText={
+                    confirmPassword.length > 0 && !matchPassword
+                      ? t('securityForm.notCompatibility')
+                      : ' '
+                  }
+                  sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
+                />
+              </DialogContent>
+            )}
             <DialogActions sx={{ px: 3, pb: 2, justifyContent: 'center' }}>
               <Button
                 fullWidth

src/features/profile/components/security/RecentLogins.tsx

@@ -1,6 +1,5 @@
 import { Box, Typography, Button } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import Logo from '@/components/Logo';
 import { CardContainer } from '@/components/CardContainer';
 
 export function RecentLogins() {
@@ -88,6 +87,7 @@ export function RecentLogins() {
                         color: 'success.main',
                         width: '93px',
                         textTransform: 'none',
+                        fontSize: '0.75rem',
                       }}
                     >
                       {t('securityForm.currentDevice')}

src/features/profile/components/setting/Setting.tsx

@@ -57,7 +57,7 @@ export function Setting() {
     isEditing ? handleSave() : setIsEditing(true);
 
   return (
-    <Box sx={{ backgroundColor: 'background.paper' }}>
+    <Box sx={{ backgroundColor: 'background.paper', minHeight: '100vh' }}>
       <Box
         sx={{
           display: 'flex',
@@ -129,11 +129,11 @@ export function Setting() {
               gap: 2,
               mt: 2,
               mx: 'auto',
-              width: { xs: '100%', md: 700 },
+              width: { xs: '100%', md: 690 },
               // px: 4,
             }}
           >
-            <Box sx={{ flex: 1, maxWidth: { sm: 337 }, width: '100%' }}>
+            <Box sx={{ flex: 1, maxWidth: { sm: 310 }, width: '100%' }}>
               {isEditing ? (
                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                   <Typography variant="body1">{t('settings.theme')}</Typography>
@@ -152,7 +152,7 @@ export function Setting() {
                 </Box>
               )}
             </Box>
-            <Box sx={{ flex: 1, maxWidth: { sm: 337 }, width: '100%' }}>
+            <Box sx={{ flex: 1, maxWidth: { sm: 310 }, width: '100%' }}>
               {isEditing ? (
                 <Autocomplete
                   options={languageOptions}

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

@@ -72,6 +72,7 @@ export function PhoneNumber() {
   };
 
   return (
+    <Box sx={{ backgroundColor: 'background.paper' }}>
       <CardContainer
         title={t('settingForm.titlePhoneNumber')}
         subtitle={t('settingForm.descriptionPhoneNumber')}
@@ -121,8 +122,8 @@ export function PhoneNumber() {
                 {t('settingForm.editPhoneNumber')}
               </Typography>
               <Typography variant="body2" color="text.secondary">
-              {t('settingForm.phoneNumberText')}({phones.map((p) => p.withCode)}
+                {t('settingForm.phoneNumberText')}(
-              ){t('settingForm.verb')}
+                {phones.map((p) => p.withCode)}){t('settingForm.verb')}
               </Typography>
             </Box>
 
@@ -282,5 +283,6 @@ export function PhoneNumber() {
           </Box>
         )}
       </CardContainer>
+    </Box>
   );
 }

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

@@ -59,6 +59,7 @@ export function SocialMedia() {
   ] as const;
 
   return (
+    <Box sx={{ backgroundColor: 'background.paper' }}>
       <CardContainer
         title={t('settingForm.titleSocial')}
         subtitle={t('settingForm.descriptionSocial')}
@@ -327,5 +328,6 @@ export function SocialMedia() {
           </DialogContent>
         </Dialog>
       </CardContainer>
+    </Box>
   );
 }

src/features/profile/components/userInformation/personlInformation/InfoRowDisplay.tsx

@@ -30,8 +30,17 @@ export function InfoRowDisplay({
         }}
       >
         <Box
-          sx={{ display: 'flex', alignItems: 'center', gap: 2, width: '337px' }}
+          sx={{
+            width: '337px',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 1,
+          }}
         >
+          <Typography variant="caption" color="text.secondary">
+            {t('settingForm.name')} و {t('settingForm.familyName')}
+          </Typography>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
             <Avatar
               src={uploadedImageUrl || undefined}
               sx={{
@@ -43,10 +52,6 @@ export function InfoRowDisplay({
             >
               {initials}
             </Avatar>
-          <Box>
-            <Typography variant="caption" color="text.secondary">
-              {t('settingForm.name')} و {t('settingForm.familyName')}
-            </Typography>
             <Typography variant="body1" color="text.primary">
               {`${displayValue(data.firstName)} ${displayValue(data.lastName)}`}
             </Typography>

src/features/profile/routes/SettingPage.tsx

@@ -16,6 +16,7 @@ import {
   Setting as SettingIcon,
   Shield,
   Sms,
+  Menu,
 } from 'iconsax-react';
 import { Box, Typography, useTheme, useMediaQuery } from '@mui/material';
 import { useTranslation } from 'react-i18next';
@@ -61,68 +62,126 @@ export function Layout() {
   const drawerWidth = 274;
   const minimizedWidth = 64;
   const navWidth = isMdUp ? drawerWidth : minimizedWidth;
-  const contentWidth = 790;
+  const contentWidth = 810;
+  const contentHeight = '78vh';
   const totalWidth = navWidth + contentWidth;
 
   const navConfig: NavItemConfig[] = [
     {
       text: t('side.account'),
-      icon: <ProfileCircle size={24} />,
+      getIcon: (isSelected) =>
+        isSelected ? (
+          <ProfileCircle size={24} color="#1976d2" variant="Bold" />
+        ) : (
+          <ProfileCircle size={24} color="#82B1FF" />
+        ),
       path: '/profile',
       children: [
         {
           text: t('side.personalInfo'),
-          icon: <Personalcard size={24} />,
+          getIcon: (isSelected) =>
+            isSelected ? (
+              <Personalcard size={24} color="#1976d2" variant="Bold" />
+            ) : (
+              <Personalcard size={24} color="#82B1FF" />
+            ),
           path: '/profile#info',
         },
         {
           text: t('side.phoneNumber'),
-          icon: <Mobile size={24} />,
+          getIcon: (isSelected) =>
+            isSelected ? (
+              <Mobile size={24} color="#1976d2" variant="Bold" />
+            ) : (
+              <Mobile size={24} color="#82B1FF" />
+            ),
           path: '/profile#contact-info',
         },
         {
           text: t('side.email'),
-          icon: <Sms size={24} />,
+          getIcon: (isSelected) =>
+            isSelected ? (
+              <Sms size={24} color="#1976d2" variant="Bold" />
+            ) : (
+              <Sms size={24} color="#82B1FF" />
+            ),
           path: '/profile#email',
         },
       ],
     },
     {
       text: t('side.security'),
-      icon: <Shield size={24} />,
+      getIcon: (isSelected) =>
+        isSelected ? (
+          <Shield size={24} color="#1976d2" variant="Bold" />
+        ) : (
+          <Shield size={24} color="#82B1FF" />
+        ),
       path: '/security',
       children: [
         {
           text: t('side.password'),
-          icon: <PasswordCheck size={24} />,
+          getIcon: (isSelected) =>
+            isSelected ? (
+              <PasswordCheck size={24} color="#1976d2" variant="Bold" />
+            ) : (
+              <PasswordCheck size={24} color="#82B1FF" />
+            ),
           path: '/security#password',
         },
         {
           text: t('side.verifiedAddress'),
-          icon: <LocationTick size={24} />,
+          getIcon: (isSelected) =>
+            isSelected ? (
+              <LocationTick size={24} color="#1976d2" variant="Bold" />
+            ) : (
+              <LocationTick size={24} color="#82B1FF" />
+            ),
           path: '/security#locations',
         },
         {
           text: t('side.recentLogins'),
-          icon: <Devices size={24} />,
+          getIcon: (isSelected) =>
+            isSelected ? (
+              <Devices size={24} color="#1976d2" variant="Bold" />
+            ) : (
+              <Devices size={24} color="#82B1FF" />
+            ),
           path: '/security#sessions',
         },
       ],
     },
     {
       text: t('side.activeDevices'),
-      icon: <Devices size={24} />,
+      getIcon: (isSelected) =>
+        isSelected ? (
+          <Devices size={24} color="#1976d2" variant="Bold" />
+        ) : (
+          <Devices size={24} color="#82B1FF" />
+        ),
       path: '/devices',
     },
     {
       text: t('side.settings'),
-      icon: <SettingIcon size={24} />,
+      getIcon: (isSelected) =>
+        isSelected ? (
+          <SettingIcon size={24} color="#1976d2" variant="Bold" />
+        ) : (
+          <SettingIcon size={24} color="#82B1FF" />
+        ),
       path: '/setting',
     },
   ];
 
   return (
-    <Box display="flex" flexDirection="column" minHeight="100vh">
+    <Box
+      display="flex"
+      flexDirection="column"
+      minHeight="100vh"
+      justifyContent="center"
+      alignItems="center"
+      px={{ xs: 2, sm: 3 }}
+    >
       <Box>
         <Box
           width={totalWidth}
@@ -134,7 +193,7 @@ export function Layout() {
           <Box position="relative" width={navWidth}>
             <SideNav
               navConfig={navConfig}
-              header={<Header />}
+              header={isMdUp ? <Header /> : <Menu size={24} color="#1976d2" />}
               activePath={location.pathname + location.hash}
               sideNavVariant={isMdUp ? 'full' : 'minimized'}
               positioning="absolute"
@@ -143,10 +202,13 @@ export function Layout() {
             />
           </Box>
           <Box
-            // flex={1}
+            sx={{
-            maxWidth={contentWidth}
+              width: contentWidth,
-            width="100%"
+              height: contentHeight,
-            // px={{ xs: 2, sm: 3 }}
+              bgcolor: 'background.paper',
+              px: { xs: 2, sm: 3 },
+              overflowY: 'auto',
+            }}
           >
             <Outlet />
           </Box>
@@ -165,7 +227,16 @@ const router = createBrowserRouter([
       {
         path: '/profile',
         element: (
-          <>
+          <Box
+            sx={{
+              width: '100%',
+              height: '100%',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 2,
+              px: { xs: 2, sm: 0 },
+            }}
+          >
             <div id="info">
               <PersonalInformation />
             </div>
@@ -175,13 +246,21 @@ const router = createBrowserRouter([
             <div id="email">
               <SocialMedia />
             </div>
-          </>
+          </Box>
         ),
       },
       {
         path: '/security',
         element: (
-          <>
+          <Box
+            sx={{
+              width: '100%',
+              height: '100%',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 2,
+            }}
+          >
             <div id="password">
               <PasswordSecurity />
             </div>
@@ -189,11 +268,25 @@ const router = createBrowserRouter([
             <div id="sessions">
               <RecentLogins />
             </div>
-          </>
+          </Box>
+        ),
+      },
+      {
+        path: '/devices',
+        element: (
+          <Box sx={{ width: '100%', height: '100%' }}>
+            <ActiveDevices />
+          </Box>
+        ),
+      },
+      {
+        path: '/setting',
+        element: (
+          <Box sx={{ width: '100%', height: '100%' }}>
+            <Setting />
+          </Box>
         ),
       },
-      { path: '/devices', element: <ActiveDevices /> },
-      { path: '/setting', element: <Setting /> },
     ],
   },
 ]);