changes

src/App.css

@@ -1,12 +0,0 @@
-body {
-  background-color: #f5f5f5 !important;
-  direction: rtl;
-}
-button {
-  outline: none !important;
-  border: none !important;
-}
-
-input {
-  outline: none !important;
-}

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>
   );
 };

src/components/alert/alert.css

@@ -1,9 +1,3 @@
-:root {
-  --error-color1: #06bace;
-  --error-color2: #3ee924;
-  --white: #fff;
-  --content-color: #646464;
-}
 /* TODO common styles */
 .swal2-container.swal2-center > .swal2-popup {
   border: solid 2px #707070;
@@ -63,7 +57,6 @@
   box-shadow: 0px 0px 0px black !important;
   border: 0px;
 }
-
 /* ? دکمه ضربدر بالا سمت چپ */
 .close-button-1 {
   background-color: var(--error-color1) !important;
@@ -142,6 +135,9 @@
   text-align: center !important;
   color: var(--error-color2) !important;
 }
+.alert-popup4 {
+  width: 440px;
+}
 /* !error5 */
 /* ? کانفرم باتن */
 .confirm-button-5 {
@@ -170,3 +166,89 @@
   color: var(--white) !important;
   border: solid 4px var(--error-color1) !important;
 }
+/* !error7 */
+/* ? تایتل */
+.title-error-7 {
+  color: var(--error-color7) !important;
+}
+/* ? دکمه ضربدر بالا سمت چپ */
+.close-button-7 {
+  background-color: var(--error-color7-button) !important;
+  color: var(--white) !important;
+}
+/* ?  هاور دکمه ضربدر بالا سمت چپ */
+.close-button-7:hover {
+  background-color: var(--white) !important;
+  color: var(--error-color7) !important;
+  border: solid 4px var(--error-color7-button) !important;
+}
+/* ? کانفرم باتن */
+.confirm-button-7 {
+  background-color: var(--white) !important;
+  border: solid 2px var(--error-color7-button) !important;
+  color: var(--error-color7) !important;
+}
+/* ? هاور کانفرم باتن */
+.confirm-button-7:hover {
+  background-color: var(--error-color7-button) !important;
+  color: var(--white) !important;
+}
+/* ? کنسل باتن */
+.cancle-button7 {
+  background-color: var(--error-color7-button) !important;
+  color: var(--white) !important;
+  border: solid 2px var(--error-color7-button) !important;
+}
+/* ? هاور کنسل باتن */
+.cancle-button7:hover {
+  background-color: var(--white) !important;
+  color: var(--error-color7-button) !important;
+}
+/* !error8 */
+.title-error-8 {
+  color: var(--error-color7-button) !important;
+  text-align: center !important;
+}
+.alert-popup8 {
+  width: 440px;
+}
+/* !error9 */
+.title-error-9 {
+  color: var(--white) !important;
+}
+.alert-popup9 {
+  background-color: var(--error-color2) !important;
+  border-color: var(--error-color2) !important;
+}
+.close-button-9 {
+  background-color: var(--toast-bg-success) !important;
+  color: var(--toast-success-color) !important;
+}
+.confirm-button-9 {
+  background-color: #35bb20 !important;
+}
+.cancle-button9 {
+  background-color: var(--white) !important;
+  color: var(--error-color2) !important;
+}
+.footer-error-9 a {
+  color: var(--white) !important;
+  border-bottom-color: var(--white) !important;
+  font-size: 18px !important;
+}
+/* !error10 */
+.alert-popup10 {
+  background-color: var(--error-color7-button) !important;
+  border-color: var(--error-color7-button) !important;
+}
+.close-button-10 {
+  background-color: #fd6a6a !important;
+  color: var(--white) !important;
+}
+.confirm-button-10 {
+  background-color: #bb2020 !important;
+}
+.cancle-button10 {
+  background-color: var(--white) !important;
+  color: var(--error-color7-button) !important;
+}

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;
 }

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>

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;
+}