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: "

در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند

", + confirmButtonText: "رد کردن", + showCloseButton: true, + showCancelButton: true, + cancelButtonText: "متوجه شدم", + footer: 'یک لینک در این قسمت است', + 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: "

در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند

", + confirmButtonText: "رد کردن", + showCloseButton: true, + showCancelButton: true, + cancelButtonText: "متوجه شدم", + footer: 'یک لینک در این قسمت است', + customClass: { + title: "title-error-9", + closeButton: "close-button-10", + confirmButton: "confirm-button-10", + cancelButton: "cancle-button10", + popup: "alert-popup10", + footer: "footer-error-9", + }, + }); + }; return (
- + + + +
); }; 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 = () => { + + 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; +}