Added close button for toast (ToolJet#3821)

frontend/src/App/App.jsx

@@ -21,7 +21,7 @@ import { ResetPassword } from '@/ResetPassword';
 import { ManageSSO } from '@/ManageSSO';
 import { ManageOrgVars } from '@/ManageOrgVars';
 import { lt } from 'semver';
-import { Toaster } from 'react-hot-toast';
+import Toast from '@/_ui/Toast';
 import { RealtimeEditor } from '@/Editor/RealtimeEditor';
 import { Editor } from '@/Editor/Editor';
 import { RedirectSso } from '@/RedirectSso/RedirectSso';
@@ -76,6 +76,7 @@ class App extends React.Component {
 
     if (darkMode) {
       toastOptions = {
+        className: 'toast-dark-mode',
         style: {
           borderRadius: '10px',
           background: '#333',
@@ -259,7 +260,7 @@ class App extends React.Component {
             />
           </div>
         </Router>
-        <Toaster toastOptions={toastOptions} />
+        <Toast toastOptions={toastOptions} />
       </>
     );
   }

frontend/src/_styles/theme.scss

@@ -5034,6 +5034,12 @@ div#driver-page-overlay {
   }
 }
 
+.toast-dark-mode {
+   .btn-close {
+    filter: brightness(0) invert(1);
+  }
+}
+
 .editor .editor-sidebar .inspector .form-control-plaintext {
   padding: 2px 4px;
 }

frontend/src/_ui/Toast/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { toast, Toaster, ToastBar } from 'react-hot-toast';
+
+const Toast = ({ toastOptions }) => {
+  return (
+    <Toaster toastOptions={toastOptions}>
+      {(t) => (
+        <ToastBar toast={t}>
+          {({ icon, message }) => (
+            <>
+              {icon}
+              {message}
+              <button className="btn-close" onClick={() => toast.dismiss(t.id)} />
+            </>
+          )}
+        </ToastBar>
+      )}
+    </Toaster>
+  );
+};
+
+export default Toast;