fix: sidebar style

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,19 +86,35 @@ export function PasswordSecurity() {
         title={t('securityForm.password')}
         subtitle={t('securityForm.determinePassword')}
         action={
-          <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.addPassword')}
-          </Button>
+          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}
+              sx={{
+                mt: { xs: 2, sm: 0 },
+                backgroundColor: 'primary.main',
+                color: 'background.paper',
+                width: { xs: '100%', sm: '142px' },
+                textTransform: 'none',
+              }}
+            >
+              {t('securityForm.addPassword')}
+            </Button>
+          )
         }
       >
         <Box
@@ -142,70 +161,142 @@ 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',
+                  flexDirection: 'column',
+                  gap: 2,
+                  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"
+                  fullWidth
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
+                />
 
-            <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 } }}
-              />
-
-              {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')}
-                    />
+                {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>
-                </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>
+                <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>
+            ) : (
+              <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')}