From 60276b3ba0147c95229b203352855a0399d1743d Mon Sep 17 00:00:00 2001 From: Ehsan Date: Sat, 26 Oct 2024 00:51:59 +0330 Subject: [PATCH] add toastify component --- app/CustomToastify.js | 18 ++++++ app/globals.css | 59 +++++++++++++++++++ app/layout.js | 5 ++ components/icons/NotFoundCover.js | 2 +- components/icons/TickAlert.js | 6 +- .../panel/userAccount/account/form/index.js | 2 +- helper/index.js | 20 +++++++ package-lock.json | 13 ++++ package.json | 1 + 9 files changed, 121 insertions(+), 5 deletions(-) create mode 100644 app/CustomToastify.js diff --git a/app/CustomToastify.js b/app/CustomToastify.js new file mode 100644 index 0000000..e6e84ab --- /dev/null +++ b/app/CustomToastify.js @@ -0,0 +1,18 @@ +import { ToastContainer } from "react-toastify"; +import TickAlert from "@/components/icons/TickAlert"; + +function CustomToastify() { + return ( + } + position="top-center" + hideProgressBar={true} + /> + ); +} + +export default CustomToastify; diff --git a/app/globals.css b/app/globals.css index a927429..99fd243 100644 --- a/app/globals.css +++ b/app/globals.css @@ -783,3 +783,62 @@ html { background: transparent !important; transition: 0.5s ease-in !important; } + +/* Toastify */ + +.Toastify__toast { + padding: 12px 40px 12px 12px !important; + font-family: iran-sans !important; +} + +.Toastify__toast .Toastify__toast-body { + padding: 0 !important; +} + +.Toastify__toast--success { + background: #d1e7dd !important; + border: 1px solid #badbcc !important; + color: #0f5132 !important; +} + +.Toastify__toast--success .Toastify__toast-icon svg path { + fill: #0f5132 !important; +} + +.Toastify__toast--warning { + background: #fff5d4 !important; + border: 1px solid #ffecb5 !important; + color: #664d03 !important; +} + +.Toastify__toast--warning .Toastify__toast-icon svg path { + fill: #664d03 !important; +} + +.Toastify__toast--error { + background: #f9dcdf !important; + border: 1px solid #f5c2c7 !important; + color: #842029 !important; +} + +.Toastify__toast--error .Toastify__toast-icon svg path { + fill: #842029 !important; +} + +.Toastify__toast--info { + background: #d5f5fc !important; + border: 1px solid #b6effb !important; + color: #055160 !important; +} + +.Toastify__toast--info .Toastify__toast-icon svg path { + fill: #055160 !important; +} + +.Toastify__toast-container .Toastify__toast-icon { + position: absolute; + right: 12px; + top: 16px; +} + +/* End Of Toastify */ diff --git a/app/layout.js b/app/layout.js index 88d8126..00ed4cb 100644 --- a/app/layout.js +++ b/app/layout.js @@ -3,6 +3,10 @@ import ThemeRegistry from "./component/ThemeRegistry"; import "jalaali-react-date-picker/lib/styles/index.css"; import { Providers } from "./Providers"; +// Toastify +import "react-toastify/dist/ReactToastify.css"; +import CustomToastify from "./CustomToastify"; + export const metadata = { title: "نوبت724", description: @@ -22,6 +26,7 @@ export default function RootLayout({ children }) { {children} + diff --git a/components/icons/NotFoundCover.js b/components/icons/NotFoundCover.js index 07c0e1e..f9bc410 100644 --- a/components/icons/NotFoundCover.js +++ b/components/icons/NotFoundCover.js @@ -7,7 +7,7 @@ function NotFoundCover() { viewBox="0 0 235 235" fill="none" > - + - + diff --git a/components/panel/userAccount/account/form/index.js b/components/panel/userAccount/account/form/index.js index 717d9fd..1d4c511 100644 --- a/components/panel/userAccount/account/form/index.js +++ b/components/panel/userAccount/account/form/index.js @@ -144,7 +144,7 @@ function Form() {