From 39208b6568c802ca02cb8b042e9fc3853a853f0f Mon Sep 17 00:00:00 2001
From: mahdi <andalibmahdi45@gmail.com>
Date: Sun, 14 Nov 2021 11:31:36 +0330
Subject: [PATCH] changes

---
 src/components/alert/Alert.js  | 101 +++++++++++++++++++++++++++++++--
 src/components/toast/Toast.css |  27 ++++++---
 src/components/toast/Toast.js  |  29 +++++++---
 src/index.css                  |  38 +++++++++++++
 4 files changed, 175 insertions(+), 20 deletions(-)

diff --git a/src/components/alert/Alert.js b/src/components/alert/Alert.js
index 13ee3f1..f036061 100644
--- a/src/components/alert/Alert.js
+++ b/src/components/alert/Alert.js
@@ -68,14 +68,14 @@ const Alert = () => {
       title: "عنوان متن ارور",
       text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
       confirmButtonText: "توضیح بیشتر",
-      showCloseButton: true,
+      showCloseButton: false,
       showCancelButton: true,
       cancelButtonText: "متوجه شدم",
       customClass: {
         title: "title-error-4",
-        closeButton: "close-button-2",
         confirmButton: "confirm-button-2",
         cancelButton: "cancle-button2",
+        popup: "alert-popup4",
       },
     }).then((result) => {
       if (result.isConfirmed) {
@@ -124,7 +124,89 @@ const Alert = () => {
       }
     });
   };
-
+  // error7
+  const showAlert7 = () => {
+    Swal.fire({
+      title: "عنوان متن ارور",
+      text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
+      confirmButtonText: "توضیح بیشتر",
+      showCloseButton: true,
+      showCancelButton: true,
+      cancelButtonText: "متوجه شدم",
+      customClass: {
+        title: "title-error-7",
+        closeButton: "close-button-7",
+        confirmButton: "confirm-button-7",
+        cancelButton: "cancle-button7",
+      },
+    }).then((result) => {
+      if (result.isConfirmed) {
+        Swal.fire("Deleted!", "Your file has been deleted.", "success");
+      }
+    });
+  };
+  // error8
+  const showAlert8 = () => {
+    Swal.fire({
+      icon: "error",
+      title: "این یک متن موفقیت امیز است!!!",
+      text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
+      confirmButtonText: "توضیح بیشتر",
+      showCloseButton: false,
+      showCancelButton: true,
+      cancelButtonText: "متوجه شدم",
+      customClass: {
+        title: "title-error-8",
+        confirmButton: "confirm-button-7",
+        cancelButton: "cancle-button7",
+        popup: "alert-popup8",
+      },
+    }).then((result) => {
+      if (result.isConfirmed) {
+        Swal.fire("Deleted!", "Your file has been deleted.", "success");
+      }
+    });
+  };
+  // error9
+  const showAlert9 = () => {
+    Swal.fire({
+      title: "این ارور بسیار مهم ",
+      html: "<p style='color:#fff;'>در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند</p>",
+      confirmButtonText: "رد کردن",
+      showCloseButton: true,
+      showCancelButton: true,
+      cancelButtonText: "متوجه شدم",
+      footer: '<a href="">یک لینک در این قسمت است</a>',
+      customClass: {
+        title: "title-error-9",
+        closeButton: "close-button-9",
+        confirmButton: "confirm-button-9",
+        cancelButton: "cancle-button9",
+        popup: "alert-popup9",
+        footer: "footer-error-9",
+      },
+    });
+  };
+  // error10
+  const showAlert10 = () => {
+    Swal.fire({
+      title: "این ارور بسیار مهم ",
+      html: "<p style='color:#fff;'>در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند</p>",
+      confirmButtonText: "رد کردن",
+      showCloseButton: true,
+      showCancelButton: true,
+      cancelButtonText: "متوجه شدم",
+      footer: '<a href="">یک لینک در این قسمت است</a>',
+      customClass: {
+        title: "title-error-9",
+        closeButton: "close-button-10",
+        confirmButton: "confirm-button-10",
+        cancelButton: "cancle-button10",
+        popup: "alert-popup10",
+        footer: "footer-error-9",
+      },
+    });
+  };
   return (
     <div className="mt-5">
       <button className="btn btn-danger btn-lg" onClick={showAlert}>
@@ -145,7 +227,18 @@ const Alert = () => {
       <button className="btn btn-danger btn-lg" onClick={showAlert6}>
         6 اررور
       </button>
-      <button className="btn btn-danger btn-lg">7 اررور</button>
+      <button className="btn btn-danger btn-lg" onClick={showAlert7}>
+        7 اررور
+      </button>
+      <button className="btn btn-danger btn-lg" onClick={showAlert8}>
+        8 اررور
+      </button>
+      <button className="btn btn-danger btn-lg" onClick={showAlert9}>
+        9 اررور
+      </button>
+      <button className="btn btn-danger btn-lg" onClick={showAlert10}>
+        10 اررور
+      </button>
     </div>
   );
 };
diff --git a/src/components/toast/Toast.css b/src/components/toast/Toast.css
index 06b5aa5..455ceca 100644
--- a/src/components/toast/Toast.css
+++ b/src/components/toast/Toast.css
@@ -1,17 +1,26 @@
+/* ? common styles */
+.Toastify__close-button > svg {
+  color: var(--black) !important;
+}
+/* TODO toast error */
+/* error1 with icon */
 .Toastify__toast-theme--colored.Toastify__toast--error {
-  background: #ffeaea;
-  color: #c70000;
+  background: var(--toast-bg-error) !important;
+  color: var(--error-color7) !important;
+  font-family: iransans;
 }
+/* error progress bar */
 .Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
-  background: #c70000;
-}
-.Toastify__close-button > svg {
-  color: #000 !important;
+  background: var(--error-color7) !important;
 }
+/* TODO toast success */
+/* success with icon */
 .Toastify__toast-theme--colored.Toastify__toast--success {
-  color: #21ae0b !important;
-  background: #c3ffb9 !important;
+  color: var(--toast-success-color) !important;
+  background: var(--toast-bg-success) !important;
+  font-family: iransans;
 }
+/* success progress bar */
 .Toastify__progress-bar-theme--colored.Toastify__progress-bar--success {
-  background: #21ae0b !important;
+  background: var(--toast-success-color) !important;
 }
diff --git a/src/components/toast/Toast.js b/src/components/toast/Toast.js
index 91a6c62..b059204 100644
--- a/src/components/toast/Toast.js
+++ b/src/components/toast/Toast.js
@@ -5,25 +5,20 @@ import "./Toast.css";
 
 const Toast = () => {
   const notify = () =>
-    toast.success("اررور شماره 1", {
+    toast.error("اررور شماره 1", {
       position: "top-right",
       autoClose: false,
-      hideProgressBar: false,
-      closeOnClick: true,
       pauseOnHover: false,
       draggable: true,
-      progress: undefined,
       theme: "colored",
     });
   const notify2 = () =>
-    toast.error("اررور شماره 1", {
+    toast.success("اررور شماره 2", {
       position: "top-right",
       autoClose: false,
-      hideProgressBar: false,
       closeOnClick: true,
       pauseOnHover: false,
       draggable: true,
-      progress: undefined,
       theme: "colored",
     });
   const notify3 = () =>
@@ -31,8 +26,22 @@ const Toast = () => {
       position: "top-right",
       theme: "colored",
       icon: false,
+      hideProgressBar: true,
     });
   const notify4 = () =>
+    toast.error("اررور شماره 1", {
+      position: "top-right",
+      theme: "colored",
+      icon: false,
+    });
+  const notify5 = () =>
+    toast.success("اررور شماره 1", {
+      position: "top-right",
+      theme: "colored",
+      icon: false,
+      hideProgressBar: true,
+    });
+  const notify6 = () =>
     toast.success("اررور شماره 1", {
       position: "top-right",
       theme: "colored",
@@ -53,6 +62,12 @@ const Toast = () => {
       <button onClick={notify4} className="btn btn-lg bg-warning">
         toast notification 4
       </button>
+      <button onClick={notify5} className="btn btn-lg bg-warning">
+        toast notification 5
+      </button>
+      <button onClick={notify6} className="btn btn-lg bg-warning">
+        toast notification 6
+      </button>
 
       <ToastContainer position="top-right" rtl />
     </div>
diff --git a/src/index.css b/src/index.css
index e69de29..4403845 100644
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,38 @@
+:root {
+  --error-color1: #06bace;
+  --error-color2: #3ee924;
+  --error-color7: #c70000;
+  --error-color7-button: #e92424;
+  --white: #fff;
+  --black: #000;
+  --content-color: #646464;
+  --toast-bg-error: #ffeaea;
+  --toast-bg-success: #c3ffb9;
+  --toast-success-color: #21ae0b;
+}
+body {
+  background-color: #f5f5f5 !important;
+  direction: rtl;
+  font-family: iransans;
+}
+
+@font-face {
+  font-family: "iransans";
+  src: local("iransans"),
+    url(./iransans/woff/IRANSansWeb_Medium.woff) format("woff"),
+    url(./iransans/woff2/IRANSansWeb_Medium.woff2) format("woff2"),
+    url(./iransans/eot/IRANSansWeb_Medium.eot) format("eot"),
+    url(./iransans/ttf/IRANSansWeb_Medium.ttf) format("ttf");
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+a,
+button {
+  font-family: iransans;
+}