solved the issue no 1210

[prekshapatel7]

Related Issue

Closes #1210

Summary

Restores the missing toast notification styling rules, variant styles, and slide keyframes in css/index.css. This fixes the unstyled rendering bug and resolves the issue where notifications could not be dismissed (which was caused by the JS animationend listener failing to trigger in the absence of CSS transition animations).

Changes Made

• Added a fixed-position .toast-container in the top-right corner of the screen to handle vertical stacking of notifications.
• Restored glassmorphic styles for .toast-notification with appropriate borders, spacing, padding, shadows, and backdrop blur.
• Implemented specific styles for success, error, warning, and info toast variants (.toast-success, .toast-error, .toast-warning, .toast-info), ensuring they adapt dynamically to light/dark themes via existing theme variables.
• Added styling for the close (×) button (.toast-close) and its hover interactions.
• Defined @keyframes toastSlideIn and @keyframes toastSlideOut animations and linked the slide-out animation to the .toast-notification.toast-hiding class. This allows the JavaScript 'animationend' listener to fire correctly and cleanly unmount the element from the DOM.

Testing

• Started the application locally via npm start.
• Manually triggered the warning toast notification by attempting to save an empty subject field.
• Verified that the toast notification renders correctly in the top-right corner with the appropriate variant colors in both light and dark modes.
• Verified that clicking the close (×) button dismisses the toast instantly.
• Verified that the auto-dismiss timer successfully hides and removes the notification node from the DOM after the default timeout duration.