1. Change Password fixed. 2. Personal Data implemented. 3. New alerts style. 4. Better dropdowns.

components/Snackbar.tsx

@@ -0,0 +1,49 @@
+import React, { useEffect } from 'react';
+import { X, CheckCircle, AlertCircle, Info } from 'lucide-react';
+
+export type SnackbarType = 'success' | 'error' | 'info';
+
+interface SnackbarProps {
+    message: string;
+    type?: SnackbarType;
+    isOpen: boolean;
+    onClose: () => void;
+    duration?: number;
+}
+
+const Snackbar: React.FC<SnackbarProps> = ({ message, type = 'info', isOpen, onClose, duration = 3000 }) => {
+    useEffect(() => {
+        if (isOpen && duration > 0) {
+            const timer = setTimeout(() => {
+                onClose();
+            }, duration);
+            return () => clearTimeout(timer);
+        }
+    }, [isOpen, duration, onClose]);
+
+    if (!isOpen) return null;
+
+    const bgColors = {
+        success: 'bg-primary-container text-on-primary-container',
+        error: 'bg-error-container text-on-error-container',
+        info: 'bg-secondary-container text-on-secondary-container'
+    };
+
+    const icons = {
+        success: <CheckCircle size={20} />,
+        error: <AlertCircle size={20} />,
+        info: <Info size={20} />
+    };
+
+    return (
+        <div className={`fixed bottom-4 left-1/2 transform -translate-x-1/2 z-50 flex items-center gap-3 px-4 py-3 rounded-lg shadow-elevation-3 ${bgColors[type]} min-w-[300px] animate-in fade-in slide-in-from-bottom-4 duration-300`}>
+            <div className="shrink-0">{icons[type]}</div>
+            <p className="flex-1 text-sm font-medium">{message}</p>
+            <button onClick={onClose} className="p-1 hover:bg-black/10 rounded-full transition-colors">
+                <X size={16} />
+            </button>
+        </div>
+    );
+};
+
+export default Snackbar;