fix: sweet alert darkmode

src/components/UI/SwalConfig.ts

@@ -0,0 +1,29 @@
+
+import Swal from 'sweetalert2/dist/sweetalert2.js';
+
+// Default dark theme configuration
+export const defaultSwalConfig = {
+  customClass: {
+    popup: 'swal2-popup swal2-dark',
+    confirmButton: 'swal2-confirm',
+    cancelButton: 'swal2-cancel',
+    htmlContainer: 'swal2-dark',
+    title: 'swal2-dark'
+  },
+  background: '#1a1a1a',
+  color: '#ffffff'
+};
+
+// Light theme configuration for optional use
+export const lightSwalConfig = {
+  customClass: {
+    popup: 'swal2-popup swal2-light',
+    confirmButton: 'swal2-confirm',
+    cancelButton: 'swal2-cancel'
+  },
+  background: '#ffffff',
+  color: '#000000'
+};
+
+// Initialize Swal with default dark theme
+Swal.mixin(defaultSwalConfig);

src/components/UI/SwalConfirm.tsx

@@ -4,24 +4,26 @@ import Swal from 'sweetalert2/dist/sweetalert2.js';
 import withReactContent from 'sweetalert2-react-content';
 
 export const swalConfirm = () => {
+  const commonConfig = {
+    showCancelButton: true,
+  };
+
   const showSwal = (onConfirm: () => void) => {
     withReactContent(Swal)
       .fire({
         title: 'Do you want to delete the item?',
-        showCancelButton: true,
         confirmButtonText: 'Delete',
         denyButtonText: 'Cancel',
-        customClass: {
-          popup: 'swal2-popup',
-          confirmButton: 'swal2-confirm',
-        },
+        ...commonConfig,
       })
       .then((result: any) => {
         if (result.isConfirmed) {
           onConfirm();
-          Swal.fire('Deleted!', '', 'success');
-        } else if (result.isDenied) {
-          Swal.fire('Changes are not saved', '', 'info');
+          Swal.fire({
+            title: 'Deleted!',
+            icon: 'success',
+            ...commonConfig,
+          });
         }
       });
   };
@@ -30,20 +32,18 @@ export const swalConfirm = () => {
     withReactContent(Swal)
       .fire({
         title: 'Do you want to approve this item?',
-        showCancelButton: true,
         confirmButtonText: 'Approve',
         denyButtonText: 'Cancel',
-        customClass: {
-          popup: 'swal2-popup',
-          confirmButton: 'swal2-confirm',
-        },
+        ...commonConfig,
       })
       .then((result: any) => {
         if (result.isConfirmed) {
           onConfirm();
-          Swal.fire('Approved!', '', 'success');
-        } else if (result.isDenied) {
-          Swal.fire('Changes are not saved', '', 'info');
+          Swal.fire({
+            title: 'Approved!',
+            icon: 'success',
+            ...commonConfig,
+          });
         }
       });
   };
@@ -52,20 +52,18 @@ export const swalConfirm = () => {
     withReactContent(Swal)
       .fire({
         title: 'Do you want to reject this item?',
-        showCancelButton: true,
         confirmButtonText: 'Reject',
         denyButtonText: 'Cancel',
-        customClass: {
-          popup: 'swal2-popup',
-          confirmButton: 'swal2-confirm',
-        },
+        ...commonConfig,
       })
       .then((result: any) => {
         if (result.isConfirmed) {
           onConfirm();
-          Swal.fire('Rejected!', '', 'success');
-        } else if (result.isDenied) {
-          Swal.fire('Changes are not saved', '', 'info');
+          Swal.fire({
+            title: 'Rejected!',
+            icon: 'success',
+            ...commonConfig,
+          });
         }
       });
   };

src/components/UI/SwalSuccess.tsx

@@ -13,10 +13,6 @@ export const swalSuccess = ({ message }: SwalSuccessProps) => {
       title: message,
       icon: 'success',
       confirmButtonText: 'OK',
-      customClass: {
-        popup: 'swal2-popup',
-        confirmButton: 'swal2-confirm',
-      },
     });
   };
 

src/components/UI/swal.css

@@ -1,7 +1,26 @@
 .swal2-popup {
+  background: #1a1a1a !important;
+  color: #ffffff !important;
   box-shadow: 0 0 3px white !important;
+  border: 1px solid #2d2d2d;
 }
+
 .swal2-confirm {
-  background-color: red !important;
+  background-color: #28a745 !important;
   border-color: red !important;
 }
+
+.swal2-dark {
+  color: #ffffff !important;
+}
+
+.swal2-popup.swal2-light {
+  background: #ffffff !important;
+  color: #000000 !important;
+  border: 1px solid #ddd;
+}
+
+.swal2-cancel {
+  background-color: #dc3545 !important;
+  color: #ffffff !important;
+}