fix: Resolved styling issues with the password reset feature

Author: Michael-lin6677

frontend/src/pages/ProfilePage.css

@@ -209,6 +209,63 @@
   opacity: 0.8;
 }
 
+/* Security Actions */
+.security-actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.security-action-button {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  padding: var(--space-4);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--radius-lg);
+  text-decoration: none;
+  color: var(--color-text-primary);
+  transition: all var(--duration-fast) var(--ease-out);
+}
+
+.security-action-button:hover {
+  background: var(--color-surface-hover);
+  border-color: var(--color-border);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
+}
+
+.security-icon {
+  font-size: var(--text-xl);
+  flex-shrink: 0;
+}
+
+.security-action-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  flex: 1;
+}
+
+.security-action-title {
+  font-size: var(--text-base);
+  font-weight: var(--font-semibold);
+  color: var(--color-text-primary);
+}
+
+.security-action-description {
+  font-size: var(--text-sm);
+  color: var(--color-text-muted);
+  line-height: 1.4;
+}
+
+.security-arrow {
+  font-size: var(--text-lg);
+  color: var(--color-text-muted);
+  flex-shrink: 0;
+}
+
 /* Responsive */
 @media (max-width: 640px) {
   .profile-header {

frontend/src/pages/ProfilePage.jsx

@@ -7,7 +7,7 @@ import { LoadingSpinner, ErrorMessage } from '../components/shared';
 import './ProfilePage.css';
 
 const ProfilePage = () => {
-    const { t, i18n } = useTranslation(['users', 'common']);
+    const { t, i18n } = useTranslation(['users', 'common', 'auth']);
     const { user, loading } = useAuth();
     const [error, setError] = useState(null);
 
@@ -122,7 +122,7 @@ const ProfilePage = () => {
                                 <span className="security-icon">🔒</span>
                                 <div className="security-action-content">
                                     <span className="security-action-title">{t('auth:changePassword.title')}</span>
-                                    <span className="security-action-description">{t('auth:changePassword.submit')}</span>
+                                    <span className="security-action-description">{t('auth:changePassword.subtitle')}</span>
                                 </div>
                                 <span className="security-arrow">→</span>
                             </Link>