fix: merge style bugs

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

@@ -65,7 +65,6 @@ export function PasswordDialog({
           px: { xs: 2, sm: 3 },
         }}
       >
-        {/* ✅ 4. API ERROR DISPLAY ADDED */}
         {apiError && (
           <Typography color="error" variant="body2" textAlign="center">
             {apiError}

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

@@ -21,6 +21,7 @@ import { containsNumber } from '@/utils/regexes/containsNumber';
 import { least8Chars } from '@/utils/regexes/least8Chars';
 import { hasUpperAndLowerLetter } from '@/utils/regexes/hasUpperAndLowerLetter';
 import { containsSymbol } from '@/utils/regexes/containsSymbol';
+import { useToast } from '@rkheftan/harmony-ui';
 
 export function PasswordSecurity() {
   const theme = useTheme();
@@ -42,6 +43,7 @@ export function PasswordSecurity() {
     hasNumber && hasMinLength && hasUpperAndLower && hasSpecialChar;
 
   const matchPassword = password === confirmPassword;
+  const showToast = useToast();
 
   const {
     data: profileData,
@@ -79,6 +81,12 @@ export function PasswordSecurity() {
 
   useEffect(() => {
     if (addData?.success || changeData?.success) {
+      showToast({
+        message: changePasswordUI
+          ? t('securityForm.passwordChanged')
+          : t('securityForm.passwordAdded'),
+        severity: 'success',
+      });
       if (!changePasswordUI) {
         setChangePasswordUI(true);
       }
@@ -87,7 +95,16 @@ export function PasswordSecurity() {
       setConfirmPassword('');
       setCurrentPassword('');
     }
-  }, [addData, changeData, changePasswordUI]);
+  }, [addData, changeData, changePasswordUI, showToast, t]);
+
+  useEffect(() => {
+    if (addError || changeError) {
+      showToast({
+        message: getErrorMessage(addError || changeError) || t('error.general'),
+        severity: 'error',
+      });
+    }
+  }, [addError, changeError, t, showToast]);
 
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
@@ -120,7 +137,12 @@ export function PasswordSecurity() {
         title={t('securityForm.password')}
         subtitle={t('securityForm.determinePassword')}
         action={
-          <Button variant="contained" onClick={handleOpen}>
+          <Button
+            variant="contained"
+            onClick={handleOpen}
+            size="medium"
+            sx={{ flexShrink: 0, flexGrow: 0, width: 'auto' }}
+          >
             {changePasswordUI
               ? t('securityForm.changePassword')
               : t('securityForm.addPassword')}

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

@@ -13,12 +13,14 @@ import { fetchProfile } from '../../api/settingsApi';
 import type { LoginLog } from '../../types/settingsApiType';
 import { useApi } from '@/hooks/useApi';
 import { formatDate } from '@/utils/formatSessionDate';
+import { useToast } from '@rkheftan/harmony-ui';
 
 export function RecentLogins() {
   const { t, i18n } = useTranslation('setting');
   const [logs, setLogs] = useState<LoginLog[]>([]);
   const theme = useTheme();
   const isXsup = useMediaQuery(theme.breakpoints.up('xs'));
+  const showToast = useToast();
 
   const {
     data: profileData,
@@ -32,6 +34,14 @@ export function RecentLogins() {
     }
   }, [profileData]);
 
+  useEffect(() => {
+    if (fetchError) {
+      showToast({
+        message: getErrorMessage(fetchError) || t('active.errorFetch'),
+        severity: 'error',
+      });
+    }
+  }, [fetchError, t, showToast]);
   const getErrorMessage = (error: unknown): string | null => {
     if (!error) return null;
     if (error instanceof Error) return error.message;