Add dark mode in NotificationItem

resources/scripts/components/base/BaseErrorAlert.vue

@@ -1,18 +1,11 @@
 <template>
-  <div
+  <div class="rounded-md bg-red-50 p-4">
-    class="
-      rounded-md
-      bg-red-50
-      p-4
-      dark:border dark:border-red-400 dark:bg-transparent
-    "
-  >
     <div class="flex">
       <div class="shrink-0">
-        <XCircleIcon class="h-5 w-5 text-red-400 dark:text-red-500" aria-hidden="true" />
+        <XCircleIcon class="h-5 w-5 text-red-400" aria-hidden="true" />
       </div>
       <div class="ml-3">
-        <h3 class="text-sm font-medium text-red-800 dark:text-red-500">
+        <h3 class="text-sm font-medium text-red-800">
           {{ errorTitle }}
         </h3>
         <div class="mt-2 text-sm text-red-700">

resources/scripts/components/notifications/NotificationItem.vue

@@ -1,6 +1,8 @@
 <template>
   <div
-    :class="success || info ? 'bg-white' : 'bg-red-50'"
+    :class="success || info
+      ? 'bg-white dark:border dark:border-white/10 dark:text-white dark:bg-gray-800/[.80] dark:shadow-glass dark:backdrop-blur-sm'
+      : 'bg-red-50 dark:bg-red-400/[.70] dark:shadow-glass dark:backdrop-blur-sm'"
     class="
       max-w-sm
       mb-3
@@ -48,7 +50,7 @@
             </svg>
             <svg
               v-if="error"
-              class="w-6 h-6 text-red-400"
+              class="w-6 h-6 text-red-400 dark:text-white"
               fill="currentColor"
               viewBox="0 0 24 24"
             >
@@ -62,7 +64,9 @@
           <div class="flex-1 w-0 ml-3 text-left">
             <p
               :class="`text-sm leading-5 font-medium ${
-                success || info ? 'text-gray-900' : 'text-red-800'
+                success || info
+                  ? 'text-gray-900 dark:text-white'
+                  : 'text-red-800 dark:text-white'
               }`"
             >
               {{
@@ -75,7 +79,9 @@
             </p>
             <p
               :class="`mt-1 text-sm leading-5 ${
-                success || info ? 'text-gray-500' : 'text-red-700'
+                success || info
+                  ? 'text-gray-500 dark:text-gray-400'
+                  : 'text-red-700 dark:text-red-200'
               }`"
             >
               {{
@@ -92,7 +98,7 @@
               :class="
                 success || info
                   ? ' text-gray-400 focus:text-gray-500'
-                  : 'text-red-400 focus:text-red-500'
+                  : 'text-red-400 focus:text-red-500 dark:text-red-100'
               "
               class="
                 inline-flex