Adding some customizations to the toast component. This will now look…

… better on dark mode
thedevdojo · Feb 16, 2024 · 7b91e84 · 7b91e84
1 parent 7f17d29
commit 7b91e84
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/stubs/class/resources/views/livewire/toast.blade.php b/stubs/class/resources/views/livewire/toast.blade.php
@@ -389,7 +389,7 @@ class="fixed block w-full group z-[99] sm:max-w-xs"
                                     deleteToastWithId(toast.id)
                                 }, 300);
                             }, 5);
-                        }, 4000); 
+                        }, 5000); 
                     "
                     @mouseover="toastHovered=true"
                     @mouseout="toastHovered=false"
@@ -409,11 +409,11 @@ class="relative flex flex-col items-start shadow-[0_5px_15px_-3px_rgb(0_0_0_/_0.
                                     <svg x-show="toast.type=='info'" class="w-[18px] h-[18px] mr-1.5 -ml-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM12 9C12.5523 9 13 8.55228 13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9ZM13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12V16C11 16.5523 11.4477 17 12 17C12.5523 17 13 16.5523 13 16V12Z" fill="currentColor"></path></svg>
                                     <svg x-show="toast.type=='warning'" class="w-[18px] h-[18px] mr-1.5 -ml-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.44829 4.46472C10.5836 2.51208 13.4105 2.51168 14.5464 4.46401L21.5988 16.5855C22.7423 18.5509 21.3145 21 19.05 21L4.94967 21C2.68547 21 1.25762 18.5516 2.4004 16.5862L9.44829 4.46472ZM11.9995 8C12.5518 8 12.9995 8.44772 12.9995 9V13C12.9995 13.5523 12.5518 14 11.9995 14C11.4473 14 10.9995 13.5523 10.9995 13V9C10.9995 8.44772 11.4473 8 11.9995 8ZM12.0009 15.99C11.4486 15.9892 11.0003 16.4363 10.9995 16.9886L10.9995 16.9986C10.9987 17.5509 11.4458 17.9992 11.9981 18C12.5504 18.0008 12.9987 17.5537 12.9995 17.0014L12.9995 16.9914C13.0003 16.4391 12.5532 15.9908 12.0009 15.99Z" fill="currentColor"></path></svg>
                                     <svg x-show="toast.type=='danger'" class="w-[18px] h-[18px] mr-1.5 -ml-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM11.9996 7C12.5519 7 12.9996 7.44772 12.9996 8V12C12.9996 12.5523 12.5519 13 11.9996 13C11.4474 13 10.9996 12.5523 10.9996 12V8C10.9996 7.44772 11.4474 7 11.9996 7ZM12.001 14.99C11.4488 14.9892 11.0004 15.4363 10.9997 15.9886L10.9996 15.9986C10.9989 16.5509 11.446 16.9992 11.9982 17C12.5505 17.0008 12.9989 16.5537 12.9996 16.0014L12.9996 15.9914C13.0004 15.4391 12.5533 14.9908 12.001 14.99Z" fill="currentColor"></path></svg>
-                                    <p class="text-[13px] font-medium leading-none text-gray-800 dark:text-white/70" x-text="toast.message"></p>
+                                    <p class="text-[13px] font-medium leading-none text-gray-800 dark:text-white/80" x-text="toast.message"></p>
                                 </div>
                                 <p x-show="toast.description" 
                                     :class="{ 'pl-5' : toast.type!='default' }"
-                                    class="mt-1.5 text-xs leading-none opacity-70" x-text="toast.description"></p>
+                                    class="mt-1.5 text-xs leading-tight opacity-70 dark:text-white/80" x-text="toast.description"></p>
                             </div>
                         </template>
                         <template x-if="toast.html">