fix: sidebar style

2025-08-04 16:35:53 -07:00
parent bf87dd8123
commit c3da326fec
14 changed files with 743 additions and 539 deletions
--- a/.npmrc
+++ b/.npmrc
@@ -0,0 +1,2 @@
+@rkheftan:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=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
--- a/package-lock.json
+++ b/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",
-      "resolved": "https://npm.pkg.github.com/download/@rkheftan/harmony-ui/0.1.2/75290c938c36fe3cfe5f334b997192c0503ceb29",
-      "integrity": "sha512-0yM5E2ptuWKvlR3Skk/9tuDaoQue0Hdr9g7ycsKtM1TBsh6011IiewKCA/drPcPc7CbmYDIvrU03mpA77lUFXw==",
+      "version": "0.1.4",
+      "resolved": "https://npm.pkg.github.com/download/@rkheftan/harmony-ui/0.1.4/01829061a531171f16aa92ac2c006d2553254797",
+      "integrity": "sha512-hxwhuBfiHqaJpFC75s0/l+pUChE4gzr+ynZ4Wl/wCI4pdFvwQuTh6BrSl4LotfTKO6v0cK8Ii9brEX3Yr7bXBA==",
      "peerDependencies": {
        "@emotion/react": "^11.14.0",
        "@emotion/styled": "^11.14.1",
--- a/package.json
+++ b/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",
--- a/public/locales/en/profileSetting.json
+++ b/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"
  }
 }
--- a/public/locales/en/security.json
+++ b/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"
  }
 }
--- a/public/locales/fa/security.json
+++ b/public/locales/fa/security.json
@@ -17,6 +17,9 @@
    "activePassword": "رمز عبور فعال است",
    "recentLogins": "ورود های اخیر",
    "description": "در این بخش از ورود های اخیر به اکانت هارمونی خود را مشاهده می کنید",
-    "currentDevice": "دستگاه فعلی"
+    "currentDevice": "دستگاه فعلی",
+    "changePassword": "تغییر رمز عبور",
+    "currentPassword": "رمز عبور فعلی",
+    "forgetPassword": "رمز عبور را فراموش کرده اید؟"
  }
 }
--- a/src/features/profile/components/activeDevices/ActiveDevices.tsx
+++ b/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',
--- a/src/features/profile/components/security/PasswordSecurity.tsx
+++ b/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
--- a/src/features/profile/components/security/RecentLogins.tsx
+++ b/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')}
--- a/src/features/profile/components/setting/Setting.tsx
+++ b/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}
--- a/src/features/profile/components/userInformation/PhoneNumber.tsx
+++ b/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.verb')}
+                {t('settingForm.phoneNumberText')}(
+                {phones.map((p) => p.withCode)}){t('settingForm.verb')}
              </Typography>
            </Box>

@@ -282,5 +283,6 @@ export function PhoneNumber() {
          </Box>
        )}
      </CardContainer>
+    </Box>
  );
 }
--- a/src/features/profile/components/userInformation/SocialMedia.tsx
+++ b/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>
  );
 }
--- a/src/features/profile/components/userInformation/personlInformation/InfoRowDisplay.tsx
+++ b/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>
--- a/src/features/profile/routes/SettingPage.tsx
+++ b/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}
-            maxWidth={contentWidth}
-            width="100%"
-            // px={{ xs: 2, sm: 3 }}
+            sx={{
+              width: contentWidth,
+              height: contentHeight,
+              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 /> },
    ],
  },
 ]);