Enhance Toastify notifications with custom icons and adjust autoClose timing

src/assets/styles/global.css

@@ -8,6 +8,10 @@
   --font-mono: "Geist Mono", ui-monospace, monospace;
 }
 
+:root {
+    --toastify-icon-color-success: #fefdf3 !important;
+}
+
 ::selection {
   background-color: #47a3f3;
   color: #fefefe;
@@ -265,6 +269,14 @@ Toastify customizations
 }
 
 .Toastify__toast--success {
-  background-color: rgba(46, 186, 106, 1) !important;
+  background-color: rgba(46, 186, 106, 0.8) !important;
   color: inherit !important;
-}
+}
+
+.Toastify__toast--success > .Toastify__toast-icon svg {
+  display: none;
+}
+
+.Toastify__toast--success > .Toastify__toast-icon::after {
+  content: "🦄" !important;
+}

src/components/LyricSearch.jsx

@@ -164,18 +164,15 @@ export function LyricSearchInputField({ id, placeholder, setShowLyrics }) {
 
       toast.update(toastId, {
         type: "success",
-        render: `🦄 Found! (Took ${duration}s)`,
-        type: "",
+        render: `Found! (Took ${duration}s)`,
         className: "Toastify__toast--success",
-        autoClose: 2000,
-        hideProgressBar: true,
+        autoClose: 2500,
       });
     } catch (error) {
       toast.update(toastId, {
         type: "error",
         render: `😕 ${error.message}`,
         autoClose: 5000,
-        hideProgressBar: true,
       });
     } finally {
       setIsLoading(false);

src/components/qs2/RequestManagement.jsx

@@ -4,9 +4,10 @@ import { Column } from "primereact/column";
 import { Dropdown } from "primereact/dropdown";
 import { Button } from "@mui/joy";
 import { toast } from "react-toastify";
-import { confirmDialog } from "primereact/confirmdialog";
+import { confirmDialog, ConfirmDialog } from "primereact/confirmdialog";
 import BreadcrumbNav from "./BreadcrumbNav";
 
+
 const STATUS_OPTIONS = ["Pending", "Completed", "Failed"];
 const TYPE_OPTIONS = ["Artist", "Album", "Track"];
 
@@ -63,6 +64,7 @@ export default function RequestManagement() {
   }, [filterType, filterStatus, requests]);
 
   const confirmDelete = (requestId) => {
+    console.log("WHOAA");
     confirmDialog({
       message: "Are you sure you want to delete this request?",
       header: "Confirm Delete",
@@ -271,7 +273,64 @@ export default function RequestManagement() {
     background-color: #333;
     color: #fff;
     border-radius: 6px;
-  }`}</style>
+  }
+    /* ConfirmDialog - Light Theme */
+.p-confirm-dialog {
+  background-color: #ffffff;
+  color: #1a1a1a;
+  border: 1px solid #ccc;
+}
+.p-confirm-dialog .p-dialog-header {
+  background-color: #f5f5f5;
+  color: #222;
+}
+.p-confirm-dialog .p-dialog-content {
+  background-color: #ffffff;
+  color: #333;
+}
+.p-confirm-dialog .p-dialog-footer {
+  background-color: #fafafa;
+  border-top: 1px solid #ddd;
+}
+.p-confirm-dialog .p-button {
+  border-radius: 0.5rem;
+}
+
+/* ConfirmDialog - Dark Theme */
+[data-theme='dark'] .p-confirm-dialog {
+  background-color: #2a2a2a;
+  color: #e5e5e5;
+  border: 1px solid #444;
+}
+[data-theme='dark'] .p-confirm-dialog .p-dialog-header {
+  background-color: #1f1f1f;
+  color: #ddd;
+}
+[data-theme='dark'] .p-confirm-dialog .p-dialog-content {
+  background-color: #2a2a2a;
+  color: #ccc;
+}
+[data-theme='dark'] .p-confirm-dialog .p-dialog-footer {
+  background-color: #242424;
+  border-top: 1px solid #333;
+}
+[data-theme='dark'] .p-confirm-dialog .p-button {
+  background-color: transparent !important;
+  color: #ddd !important;
+  border-color: #555 !important;
+}
+[data-theme='dark'] .p-confirm-dialog .p-button.p-button-danger {
+  color: #ff4d4f !important;
+  border-color: #ff4d4f !important;
+}
+[data-theme='dark'] .p-dialog-title {
+  color: #eee;
+}
+[data-theme='dark'] .p-dialog-header-icon {
+  color: #ccc;
+}
+
+  `}</style>
       <BreadcrumbNav currentPage="management" />
       <h2 className="text-3xl font-semibold" style={{ marginTop: 0 }}>
         Media Request Management
@@ -328,6 +387,7 @@ export default function RequestManagement() {
           style={{ width: "9rem", textAlign: "center" }}
         />
       </DataTable>
+      <ConfirmDialog />
     </div>
   );
 }