updates to notifs, add more predefined give packages

public/css/style.css

@@ -242,7 +242,9 @@
     word-break: break-word;
     font-size: 0.875rem;
     animation: slideIn 0.3s ease-out;
-    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
+    transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.2s ease;
+    opacity: 0;
+    transform: translateX(100%);
   }
 
   .notification:hover {
@@ -262,6 +264,28 @@
     backdrop-filter: blur(12px);
   }
 
+  .notification-message {
+    flex: 1;
+  }
+
+  .notification-dismiss {
+    @apply bg-transparent border-none text-white text-xl cursor-pointer hover:text-gray-300 transition-colors;
+    padding: 0;
+    margin-left: 8px;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    font-size: 1.25rem;
+    opacity: 0.7;
+  }
+
+  .notification-dismiss:hover {
+    opacity: 1;
+  }
+
   .notification::-webkit-scrollbar {
     width: 6px;
   }