Add dismiss option & fix toast style

src/index.css

@@ -182,10 +182,12 @@ html, body {
     --greenAlpha: #18a97978;
     --greenAlphaGradient: #09a16e85;
     --darkGreen: #18a979;
+    --blackGreen: #123f30;
     --red: #d73e36;
     --redAlpha: #d73e3678;
     --redAlphaGradient: #e124175e;
     --darkRed: #d73e36;
+    --blackRed: #79150f;
     --orange: #ff8124;
     --orangeAlpha: #e97b50b0;
     --blue: #0e4095;
@@ -222,10 +224,12 @@ html, body {
     --greenAlpha: #18a97978;
     --greenAlphaGradient: #31cc6a4d;
     --darkGreen: #18a979;
+    --blackGreen: #123f30;
     --red: #ff5555;
     --redAlpha: #d73e3678;
     --redAlphaGradient: #e8201236;
     --darkRed: #d73e36;
+    --blackRed: #79150f;
     --orange: #ff8124;
     --orangeAlpha: #b16649d9;
     --blue: #6f9ffff5;

src/index.js

@@ -20,6 +20,9 @@ import i18n from "i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
 import Backend from "i18next-http-backend";
 import {initReactI18next} from "react-i18next";
+import toast, {ToastBar, Toaster} from "react-hot-toast";
+import Icon from "./components/Icon/Icon";
+
 
 const sagaMiddleware = createSagaMiddleware();
 const rootReducer = combineReducers({
@@ -73,6 +76,59 @@ i18n
     });
 
 
+const Toast = () => {
+    return <Toaster position="top-right" toastOptions={
+        {
+            className: `${i18n.language !== "fa" ? "ltr" : "rtl"}`,
+            style: {
+                width: "100%",
+                padding: "0.3vh 0.8vw 0.3vh 0.8vw",
+                color: "white",
+                lineHeight: "3vh",
+                fontSize: "0.8vw",
+                borderRadius: "4px",
+                background: "var(--mainContent)",
+
+            },
+            success: {
+                style: {
+                    background: "var(--darkGreen)",
+                    border: "2px solid var(--darkGreen)"
+                },
+            },
+            error: {
+                style: {
+                    background: "var(--darkRed)",
+                    border: "2px solid var(--darkRed)"
+                },
+            },
+            custom: {
+                style: {
+                    background: "var(--Orange)",
+                },
+            },
+        }} containerStyle={{}}>
+        {(t) => {
+            return <ToastBar toast={t}>
+                {({ icon, message }) => (
+                    <>
+                        {t.type !== 'loading' && (
+                            /*<button >بستن</button>*/
+                            <Icon
+                                iconName="icon-cancel-circle-1 fs-03 flex "
+                                iconClass={`toastIcon cursor-pointer mx-2`}
+                                onClick={() => toast.dismiss(t.id)}
+                            />
+                        )}
+                        {message}
+                    </>
+                )}
+            </ToastBar>
+        }
+        }
+    </Toaster>;
+}
+
 
 //React query client
 const queryClient = new QueryClient()
@@ -85,6 +141,7 @@ root.render(
         {/*<StyleRoot>*/}
         <QueryClientProvider client={queryClient}>
             <Main baseURL={PUBLIC_URL}/>
+            <Toast/>
             <ReactQueryDevtools initialIsOpen={false}/>
         </QueryClientProvider>
         {/*</StyleRoot>*/}

src/main/Browser/Browser.js

@@ -59,35 +59,6 @@ const Browser = () => {
         meta.description.content = description ? description : " "
     }, [title, description])
 
-    const Toast = () => <Toaster position="bottom-right" toastOptions={
-        {
-            className: "rtl",
-            style: {
-                padding: "0.3vh 0.8vw 0.3vh 0.8vw",
-                color: "white",
-                lineHeight: "3vh",
-                fontSize: "0.8vw",
-                borderRadius: "4px",
-                background: "var(--mainContent)",
-            },
-            success: {
-                style: {
-                    background: "var(--darkGreen)",
-                },
-            },
-            error: {
-                style: {
-                    background: "var(--darkRed)",
-                },
-            },
-            custom: {
-                style: {
-                    background: "var(--Orange)",
-                },
-            },
-        }} containerStyle={{}}/>
-
-
     if (isLoading) return <FullWidthLoading/>
 
     if (hasError) return <FullWidthError/>
@@ -111,7 +82,6 @@ const Browser = () => {
                 </Route>
             </Routes>
             <Tooltip id="opex-tooltip"/>
-            <Toast/>
         </>
     );
 };