feat(notifications): Auto-mark as read and enhance UI

This commit improves the user experience for notifications by automatically marking them as read upon viewing and refining the UI.

- Notifications are now marked as read immediately when the modal is opened, removing the need for an extra confirmation click.
- The "Mark as read" button has been removed from the modal to streamline the user flow.
- In the notification history table, a new reusable `Boolean` component is used to display the 'seen' status, replacing the previous icon-based implementation.
- Long messages in the history table are now truncated to improve readability and prevent layout issues.
- Added hover effects to the notification dropdown list for better visual feedback.
- Standardized the required field indicator color to use the `text-error` class for consistency.

src/css/style.css

@@ -53,6 +53,12 @@
 .rmdp-calendar {
   @apply !p-6 dark:!bg-gray-dark;
 }
+.rmdp-time-picker {
+  @apply dark:!bg-gray-dark;
+}
+.rmdp-time-picker div input {
+  @apply dark:!bg-gray-dark dark:!text-gray-5;
+}
 .rmdp-month-picker {
   @apply dark:!bg-gray-dark;
 }
@@ -95,10 +101,10 @@
   color: inherit !important;
 }
 .rmdp-day.rmdp-range.start {
-  @apply !bg-gray-2 !shadow-none dark:!bg-dark-2 !text-white;
+  @apply !bg-gray-2 !text-white !shadow-none dark:!bg-dark-2;
 }
 .rmdp-day.rmdp-range.end {
-  @apply !bg-gray-2 !shadow-none dark:!bg-dark-2 !text-white;
+  @apply !bg-gray-2 !text-white !shadow-none dark:!bg-dark-2;
 }
 
 .rmdp-day.rmdp-range.start,