Compare commits

..

7 Commits

  1. 267
      package-lock.json
  2. 3
      package.json
  3. 42
      src/App.js
  4. 30
      src/components/Functionalities/Functionalities.css
  5. 36
      src/components/Functionalities/Functionalities.js
  6. 457
      src/components/alert/Alert.js
  7. 43
      src/components/alert/alert.css
  8. 6
      src/components/footer/Footer.js
  9. 14
      src/components/footer/footer.css
  10. 2
      src/components/header/Header.js
  11. 14
      src/components/header/header.css
  12. 59
      src/components/sweetAlertToast/SweetAlert.css
  13. 160
      src/components/sweetAlertToast/SweetToast.js
  14. 631
      src/components/testt/Testt.js
  15. 97
      src/components/testt/testt.css
  16. 15
      src/redux/actions/modalActions.js
  17. 2
      src/redux/actions/types.js
  18. 44
      src/redux/reducers/modalReducer.js
  19. 10
      src/redux/reducers/rootReducer.js
  20. 34
      src/redux/reducers/toastReducer.js
  21. 6
      src/redux/store.js
  22. 100
      yarn.lock

267
package-lock.json generated

@ -14,8 +14,11 @@
"bootstrap": "^5.1.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6",
"react-scripts": "4.0.3",
"react-toastify": "^8.1.0",
"redux": "^4.1.2",
"redux-thunk": "^2.4.0",
"styled-components": "^5.3.3",
"sweetalert": "^2.1.2",
"sweetalert2": "^11.1.10",
@ -1293,11 +1296,14 @@
}
},
"node_modules/@babel/runtime": {
"version": "7.12.18",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.18.tgz",
"integrity": "sha512-BogPQ7ciE6SYAUPtlm9tWbgI9+2AgqSam6QivMgXgAT+fKbgppaj4ZX15MHeLC1PVF5sNk70huBu20XxWOs8Cg==",
"version": "7.16.3",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.3.tgz",
"integrity": "sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==",
"dependencies": {
"regenerator-runtime": "^0.13.4"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/runtime-corejs3": {
@ -2234,17 +2240,6 @@
"node": ">=10"
}
},
"node_modules/@testing-library/dom/node_modules/@babel/runtime": {
"version": "7.16.0",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.0.tgz",
"integrity": "sha512-Nht8L0O8YCktmsDV6FqFue7vQLRx3Hb0B37lS5y0jDRqRxlBG4wIJHnf9/bgSE2UyipKFA01YtS+npRdTWBUyw==",
"dependencies": {
"regenerator-runtime": "^0.13.4"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@testing-library/dom/node_modules/chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@ -2281,17 +2276,6 @@
"yarn": ">=1"
}
},
"node_modules/@testing-library/jest-dom/node_modules/@babel/runtime": {
"version": "7.16.0",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.0.tgz",
"integrity": "sha512-Nht8L0O8YCktmsDV6FqFue7vQLRx3Hb0B37lS5y0jDRqRxlBG4wIJHnf9/bgSE2UyipKFA01YtS+npRdTWBUyw==",
"dependencies": {
"regenerator-runtime": "^0.13.4"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@testing-library/jest-dom/node_modules/chalk": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
@ -2320,17 +2304,6 @@
"react-dom": "*"
}
},
"node_modules/@testing-library/react/node_modules/@babel/runtime": {
"version": "7.16.0",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.0.tgz",
"integrity": "sha512-Nht8L0O8YCktmsDV6FqFue7vQLRx3Hb0B37lS5y0jDRqRxlBG4wIJHnf9/bgSE2UyipKFA01YtS+npRdTWBUyw==",
"dependencies": {
"regenerator-runtime": "^0.13.4"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@testing-library/user-event": {
"version": "12.8.3",
"resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-12.8.3.tgz",
@ -2346,17 +2319,6 @@
"@testing-library/dom": ">=7.21.4"
}
},
"node_modules/@testing-library/user-event/node_modules/@babel/runtime": {
"version": "7.16.0",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.0.tgz",
"integrity": "sha512-Nht8L0O8YCktmsDV6FqFue7vQLRx3Hb0B37lS5y0jDRqRxlBG4wIJHnf9/bgSE2UyipKFA01YtS+npRdTWBUyw==",
"dependencies": {
"regenerator-runtime": "^0.13.4"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@types/anymatch": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",
@ -2435,6 +2397,15 @@
"@types/node": "*"
}
},
"node_modules/@types/hoist-non-react-statics": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
"integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
"dependencies": {
"@types/react": "*",
"hoist-non-react-statics": "^3.3.0"
}
},
"node_modules/@types/html-minifier-terser": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
@ -2591,11 +2562,37 @@
"resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.2.1.tgz",
"integrity": "sha512-DxZZbyMAM9GWEzXL+BMZROWz9oo6A9EilwwOMET2UVu2uZTqMWS5S69KVtuVKaRjCUpcrOXRalet86/OpG4kqw=="
},
"node_modules/@types/prop-types": {
"version": "15.7.4",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
"integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
},
"node_modules/@types/q": {
"version": "1.5.4",
"resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
"integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug=="
},
"node_modules/@types/react": {
"version": "17.0.34",
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.34.tgz",
"integrity": "sha512-46FEGrMjc2+8XhHXILr+3+/sTe3OfzSPU9YGKILLrUYbQ1CLQC9Daqo1KzENGXAWwrFwiY0l4ZbF20gRvgpWTg==",
"dependencies": {
"@types/prop-types": "*",
"@types/scheduler": "*",
"csstype": "^3.0.2"
}
},
"node_modules/@types/react-redux": {
"version": "7.1.20",
"resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.20.tgz",
"integrity": "sha512-q42es4c8iIeTgcnB+yJgRTTzftv3eYYvCZOh1Ckn2eX/3o5TdsQYKUWpLoLuGlcY/p+VAhV9IOEZJcWk/vfkXw==",
"dependencies": {
"@types/hoist-non-react-statics": "^3.3.0",
"@types/react": "*",
"hoist-non-react-statics": "^3.3.0",
"redux": "^4.0.0"
}
},
"node_modules/@types/resolve": {
"version": "0.0.8",
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
@ -2604,6 +2601,11 @@
"@types/node": "*"
}
},
"node_modules/@types/scheduler": {
"version": "0.16.2",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
},
"node_modules/@types/source-list-map": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
@ -6260,6 +6262,11 @@
"resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
"integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg=="
},
"node_modules/csstype": {
"version": "3.0.9",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.9.tgz",
"integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw=="
},
"node_modules/cyclist": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@ -14291,9 +14298,33 @@
"integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
},
"node_modules/react-is": {
"version": "17.0.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",
"integrity": "sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA=="
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
},
"node_modules/react-redux": {
"version": "7.2.6",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz",
"integrity": "sha512-10RPdsz0UUrRL1NZE0ejTkucnclYSgXp5q+tB5SWx2qeG2ZJQJyymgAhwKy73yiL/13btfB6fPr+rgbMAaZIAQ==",
"dependencies": {
"@babel/runtime": "^7.15.4",
"@types/react-redux": "^7.1.20",
"hoist-non-react-statics": "^3.3.2",
"loose-envify": "^1.4.0",
"prop-types": "^15.7.2",
"react-is": "^17.0.2"
},
"peerDependencies": {
"react": "^16.8.3 || ^17"
},
"peerDependenciesMeta": {
"react-dom": {
"optional": true
},
"react-native": {
"optional": true
}
}
},
"node_modules/react-refresh": {
"version": "0.8.3",
@ -14849,6 +14880,22 @@
"node": ">=8"
}
},
"node_modules/redux": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/redux/-/redux-4.1.2.tgz",
"integrity": "sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==",
"dependencies": {
"@babel/runtime": "^7.9.2"
}
},
"node_modules/redux-thunk": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.0.tgz",
"integrity": "sha512-/y6ZKQNU/0u8Bm7ROLq9Pt/7lU93cT0IucYMrubo89ENjxPa7i8pqLKu6V4X7/TvYovQ6x01unTeyeZ9lgXiTA==",
"peerDependencies": {
"redux": "^4"
}
},
"node_modules/regenerate": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@ -19973,9 +20020,9 @@
}
},
"@babel/runtime": {
"version": "7.12.18",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.18.tgz",
"integrity": "sha512-BogPQ7ciE6SYAUPtlm9tWbgI9+2AgqSam6QivMgXgAT+fKbgppaj4ZX15MHeLC1PVF5sNk70huBu20XxWOs8Cg==",
"version": "7.16.3",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.3.tgz",
"integrity": "sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==",
"requires": {
"regenerator-runtime": "^0.13.4"
}
@ -20655,14 +20702,6 @@
"pretty-format": "^26.6.2"
},
"dependencies": {
"@babel/runtime": {
"version": "7.16.0",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.0.tgz",
"integrity": "sha512-Nht8L0O8YCktmsDV6FqFue7vQLRx3Hb0B37lS5y0jDRqRxlBG4wIJHnf9/bgSE2UyipKFA01YtS+npRdTWBUyw==",
"requires": {
"regenerator-runtime": "^0.13.4"
}
},
"chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@ -20690,14 +20729,6 @@
"redent": "^3.0.0"
},
"dependencies": {
"@babel/runtime": {
"version": "7.16.0",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.0.tgz",
"integrity": "sha512-Nht8L0O8YCktmsDV6FqFue7vQLRx3Hb0B37lS5y0jDRqRxlBG4wIJHnf9/bgSE2UyipKFA01YtS+npRdTWBUyw==",
"requires": {
"regenerator-runtime": "^0.13.4"
}
},
"chalk": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
@ -20716,16 +20747,6 @@
"requires": {
"@babel/runtime": "^7.12.5",
"@testing-library/dom": "^7.28.1"
},
"dependencies": {
"@babel/runtime": {
"version": "7.16.0",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.0.tgz",
"integrity": "sha512-Nht8L0O8YCktmsDV6FqFue7vQLRx3Hb0B37lS5y0jDRqRxlBG4wIJHnf9/bgSE2UyipKFA01YtS+npRdTWBUyw==",
"requires": {
"regenerator-runtime": "^0.13.4"
}
}
}
},
"@testing-library/user-event": {
@ -20734,16 +20755,6 @@
"integrity": "sha512-IR0iWbFkgd56Bu5ZI/ej8yQwrkCv8Qydx6RzwbKz9faXazR/+5tvYKsZQgyXJiwgpcva127YO6JcWy7YlCfofQ==",
"requires": {
"@babel/runtime": "^7.12.5"
},
"dependencies": {
"@babel/runtime": {
"version": "7.16.0",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.0.tgz",
"integrity": "sha512-Nht8L0O8YCktmsDV6FqFue7vQLRx3Hb0B37lS5y0jDRqRxlBG4wIJHnf9/bgSE2UyipKFA01YtS+npRdTWBUyw==",
"requires": {
"regenerator-runtime": "^0.13.4"
}
}
}
},
"@types/anymatch": {
@ -20824,6 +20835,15 @@
"@types/node": "*"
}
},
"@types/hoist-non-react-statics": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
"integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
"requires": {
"@types/react": "*",
"hoist-non-react-statics": "^3.3.0"
}
},
"@types/html-minifier-terser": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
@ -20958,11 +20978,37 @@
"resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.2.1.tgz",
"integrity": "sha512-DxZZbyMAM9GWEzXL+BMZROWz9oo6A9EilwwOMET2UVu2uZTqMWS5S69KVtuVKaRjCUpcrOXRalet86/OpG4kqw=="
},
"@types/prop-types": {
"version": "15.7.4",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
"integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
},
"@types/q": {
"version": "1.5.4",
"resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
"integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug=="
},
"@types/react": {
"version": "17.0.34",
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.34.tgz",
"integrity": "sha512-46FEGrMjc2+8XhHXILr+3+/sTe3OfzSPU9YGKILLrUYbQ1CLQC9Daqo1KzENGXAWwrFwiY0l4ZbF20gRvgpWTg==",
"requires": {
"@types/prop-types": "*",
"@types/scheduler": "*",
"csstype": "^3.0.2"
}
},
"@types/react-redux": {
"version": "7.1.20",
"resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.20.tgz",
"integrity": "sha512-q42es4c8iIeTgcnB+yJgRTTzftv3eYYvCZOh1Ckn2eX/3o5TdsQYKUWpLoLuGlcY/p+VAhV9IOEZJcWk/vfkXw==",
"requires": {
"@types/hoist-non-react-statics": "^3.3.0",
"@types/react": "*",
"hoist-non-react-statics": "^3.3.0",
"redux": "^4.0.0"
}
},
"@types/resolve": {
"version": "0.0.8",
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
@ -20971,6 +21017,11 @@
"@types/node": "*"
}
},
"@types/scheduler": {
"version": "0.16.2",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
},
"@types/source-list-map": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
@ -23914,6 +23965,11 @@
}
}
},
"csstype": {
"version": "3.0.9",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.9.tgz",
"integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw=="
},
"cyclist": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@ -30148,9 +30204,22 @@
"integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
},
"react-is": {
"version": "17.0.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",
"integrity": "sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA=="
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
},
"react-redux": {
"version": "7.2.6",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz",
"integrity": "sha512-10RPdsz0UUrRL1NZE0ejTkucnclYSgXp5q+tB5SWx2qeG2ZJQJyymgAhwKy73yiL/13btfB6fPr+rgbMAaZIAQ==",
"requires": {
"@babel/runtime": "^7.15.4",
"@types/react-redux": "^7.1.20",
"hoist-non-react-statics": "^3.3.2",
"loose-envify": "^1.4.0",
"prop-types": "^15.7.2",
"react-is": "^17.0.2"
}
},
"react-refresh": {
"version": "0.8.3",
@ -30574,6 +30643,20 @@
"strip-indent": "^3.0.0"
}
},
"redux": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/redux/-/redux-4.1.2.tgz",
"integrity": "sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==",
"requires": {
"@babel/runtime": "^7.9.2"
}
},
"redux-thunk": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.0.tgz",
"integrity": "sha512-/y6ZKQNU/0u8Bm7ROLq9Pt/7lU93cT0IucYMrubo89ENjxPa7i8pqLKu6V4X7/TvYovQ6x01unTeyeZ9lgXiTA==",
"requires": {}
},
"regenerate": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",

@ -9,8 +9,11 @@
"bootstrap": "^5.1.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6",
"react-scripts": "4.0.3",
"react-toastify": "^8.1.0",
"redux": "^4.1.2",
"redux-thunk": "^2.4.0",
"styled-components": "^5.3.3",
"sweetalert": "^2.1.2",
"sweetalert2": "^11.1.10",

@ -5,7 +5,11 @@ import Functionalities from "./components/Functionalities/Functionalities";
import Footer from "./components/footer/Footer";
import Alert from "./components/alert/Alert";
import Toast from "./components/toast/Toast";
import Testt from "./components/testt/Testt";
import SweetAlert from "./components/sweetAlertToast/SweetToast";
import { useState, useEffect } from "react";
import { Provider } from "react-redux";
import store from "./redux/store";
function App() {
// state
@ -32,26 +36,30 @@ function App() {
};
return (
<div className={`App ${isDark ? "theme-dark" : ""}`}>
<div className="w-75 m-auto">
<div className="theme-switcher-wrap">
<div class="form-check form-switch">
<input
class="form-check-input"
type="checkbox"
id="flexSwitchCheckDefault"
onClick={handleLabelClick}
/>
<Provider store={store}>
<div className={`App ${isDark ? "theme-dark" : ""}`}>
<div className="w-75 m-auto">
<div className="theme-switcher-wrap">
<div class="form-check form-switch">
<input
class="form-check-input"
type="checkbox"
id="flexSwitchCheckDefault"
onClick={handleLabelClick}
/>
</div>
</div>
</div>
{/* <Testt /> */}
<Header />
<Functionalities />
<Footer />
<Alert />
<Toast />
{/* <Header />
<Functionalities />
<Footer /> */}
<Alert />
{/* <Toast /> */}
<SweetAlert />
</div>
</div>
</div>
</Provider>
);
}

@ -23,3 +23,33 @@
.content-holder {
width: 70%;
}
/* ?media */
/* On screens that are 1200px or less, set the background color to blue */
@media screen and (max-width: 1200px) {
.title-holder h1 {
font-size: 16px !important;
}
.title-holder button {
font-size: 14px !important;
}
.content-holder p {
font-size: 14px !important;
}
.image-box .image-bg {
width: 64px;
height: 64px;
}
}
@media screen and (max-width: 975px) {
.functionality .container .row {
padding: 0px 33px;
}
.image-box .image-bg {
width: 96px;
height: 96px;
}
.functionality .container .row > :first-child {
margin: 25px 0px;
}
}

@ -8,10 +8,10 @@ const Functionalities = () => {
<div className="container">
<div className="row justify-content-around py-5">
{/* box1 */}
<div className="col-5 box d-flex justify-content-around align-items-center p-4 border border-white">
<div className="col-lg-5 box d-flex justify-content-around align-items-center p-4 border border-white">
{/* imageHolder */}
<div className="image-box rounded-3 shadow-sm border">
<img src={airplane} alt="" className="p-2 image-bg" />
<div className="image-box rounded-3 shadow-sm border text-center">
<img src={airplane} alt="" className="p-2 image-bg img-fluid" />
</div>
{/* text holder */}
<div className="content-holder ">
@ -30,10 +30,10 @@ const Functionalities = () => {
</div>
</div>
{/* box2 */}
<div className="col-5 box d-flex justify-content-around align-items-center p-4 border border-white">
<div className="col-lg-5 box d-flex justify-content-around align-items-center p-4 border border-white">
{/* imageHolder */}
<div className="image-box rounded-3 shadow-sm border">
<img src={airplane} alt="" className="p-2 image-bg" />
<div className="image-box rounded-3 shadow-sm border text-center">
<img src={airplane} alt="" className="p-2 image-bg img-fluid" />
</div>
{/* text holder */}
<div className="content-holder ">
@ -52,10 +52,10 @@ const Functionalities = () => {
</div>
</div>
{/* box3 */}
<div className="col-5 box d-flex justify-content-around align-items-center p-4 border border-white mt-4">
<div className="col-lg-5 box d-flex justify-content-around align-items-center p-4 border border-white mt-4">
{/* imageHolder */}
<div className="image-box rounded-3 shadow-sm border">
<img src={airplane} alt="" className="p-2 image-bg" />
<div className="image-box rounded-3 shadow-sm border text-center">
<img src={airplane} alt="" className="p-2 image-bg img-fluid" />
</div>
{/* text holder */}
<div className="content-holder ">
@ -74,10 +74,10 @@ const Functionalities = () => {
</div>
</div>
{/* box4 */}
<div className="col-5 box d-flex justify-content-around align-items-center p-4 border border-white mt-4">
<div className="col-lg-5 box d-flex justify-content-around align-items-center p-4 border border-white mt-4">
{/* imageHolder */}
<div className="image-box rounded-3 shadow-sm border">
<img src={airplane} alt="" className="p-2 image-bg" />
<div className="image-box rounded-3 shadow-sm border text-center">
<img src={airplane} alt="" className="p-2 image-bg img-fluid" />
</div>
{/* text holder */}
<div className="content-holder ">
@ -96,10 +96,10 @@ const Functionalities = () => {
</div>
</div>
{/* box5 */}
<div className="col-5 box d-flex justify-content-around align-items-center p-4 border border-white mt-4">
<div className="col-lg-5 box d-flex justify-content-around align-items-center p-4 border border-white mt-4">
{/* imageHolder */}
<div className="image-box rounded-3 shadow-sm border">
<img src={airplane} alt="" className="p-2 image-bg" />
<div className="image-box rounded-3 shadow-sm border text-center">
<img src={airplane} alt="" className="p-2 image-bg img-fluid" />
</div>
{/* text holder */}
<div className="content-holder ">
@ -118,10 +118,10 @@ const Functionalities = () => {
</div>
</div>
{/* box6 */}
<div className="col-5 box d-flex justify-content-around align-items-center p-4 border border-white mt-4">
<div className="col-lg-5 box d-flex justify-content-around align-items-center p-4 border border-white mt-4">
{/* imageHolder */}
<div className="image-box rounded-3 shadow-sm border">
<img src={airplane} alt="" className="p-2 image-bg" />
<div className="image-box rounded-3 shadow-sm border text-center">
<img src={airplane} alt="" className="p-2 image-bg img-fluid" />
</div>
{/* text holder */}
<div className="content-holder ">

@ -1,246 +1,247 @@
import React from "react";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import "./alert.css";
import undraw from "../../icons/undraw.png";
import { infoAlert } from "../../redux/actions/modalActions";
import { connect } from "react-redux";
const Alert = () => {
// error1
const showAlert = () => {
Swal.fire({
title: "عنوان متن ارور",
text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
confirmButtonText: "متوجه شدم",
showCloseButton: true,
customClass: {
title: "title-error-1",
closeButton: "close-button-1",
confirmButton: "confirm-button-1",
},
});
};
// error2
const showAlert2 = () => {
Swal.fire({
title: "عنوان متن ارور",
text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
confirmButtonText: "توضیح بیشتر",
showCloseButton: true,
showCancelButton: true,
cancelButtonText: "متوجه شدم",
customClass: {
title: "title-error-1",
closeButton: "close-button-1",
confirmButton: "confirm-button-1",
cancelButton: "cancle-button1",
},
}).then((result) => {
if (result.isConfirmed) {
Swal.fire("Deleted!", "Your file has been deleted.", "success");
}
});
};
// error3
const showAlert3 = () => {
Swal.fire({
title: "عنوان متن ارور",
text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
confirmButtonText: "توضیح بیشتر",
customClass: {
title: "title-error-2",
closeButton: "close-button-2",
confirmButton: "confirm-button-2",
cancelButton: "cancle-button2",
},
showCloseButton: true,
showCancelButton: true,
cancelButtonText: "متوجه شدم",
}).then((result) => {
if (result.isConfirmed) {
Swal.fire("Deleted!", "Your file has been deleted.", "success");
}
});
};
// error4
const showAlert4 = () => {
Swal.fire({
icon: "success",
title: "عنوان متن ارور",
text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
confirmButtonText: "توضیح بیشتر",
showCloseButton: false,
showCancelButton: true,
cancelButtonText: "متوجه شدم",
customClass: {
title: "title-error-4",
confirmButton: "confirm-button-2",
cancelButton: "cancle-button2",
popup: "alert-popup4",
},
}).then((result) => {
if (result.isConfirmed) {
Swal.fire("Deleted!", "Your file has been deleted.", "success");
}
});
};
// error5
const showAlert5 = () => {
const { value: email } = Swal.fire({
input: "email",
inputPlaceholder: "ایمیل خود را اینجا بنویسید",
imageUrl: "https://unsplash.it/400/200",
imageAlt: "Custom image",
showCloseButton: true,
imageWidth: 400,
imageHeight: 200,
confirmButtonText: "عضو شوید",
html: "<p> این یک پیام تستی است <span style='color:#3ee924;'> که میتوان استایل دلخواه با استفاده از کدهای اچ تی ام ال داد و من اول یه تگ پی گذاشتم و بعد داخل تگ یه اسپن گذاشتم و به این استایل اینلاین دادم</span></p>",
customClass: {
confirmButton: "confirm-button-5",
input: "input-error-5",
closeButton: "close-button-2",
},
});
if (email) {
Swal.fire(`Entered email: ${email}`);
}
};
// error6
const showAlert6 = () => {
Swal.fire({
title: "عنوان متن ارور",
text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
confirmButtonText: "مشاهده امکانات",
showCloseButton: true,
customClass: {
title: "title-error-1",
closeButton: "close-button-6",
confirmButton: "confirm-button-1",
},
}).then((result) => {
if (result.isConfirmed) {
Swal.fire("Deleted!", "Your file has been deleted.", "success");
}
});
};
// 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",
},
});
};
function Alert(props) {
return (
<div className="mt-5">
<button className="btn btn-danger btn-lg" onClick={showAlert}>
اررور 1
<div>
{/* 1 */}
<button
className="btn btn-danger btn-lg"
onClick={() =>
props.customAlert({
title: "اررور شماره 1",
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.",
confirmButtonText: "متوجه شدم",
showCloseButton: true,
showCancelButton: false,
customClass: {
title: "title-error-1",
closeButton: "close-button-1",
confirmButton: "confirm-button-1",
},
})
}
>
alert1
</button>
<button className="btn btn-danger btn-lg" onClick={showAlert2}>
اررور 2
{/* 2 */}
<button
className="btn btn-danger btn-lg"
onClick={() =>
props.customAlert({
title: "اررور شماره 1",
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.",
confirmButtonText: "توضیح بیشتر",
showCancelButton: true,
cancelButtonText: "متوجه شدم",
showCloseButton: true,
customClass: {
title: "title-error-1",
closeButton: "close-button-1",
confirmButton: "confirm-button-1",
cancelButton: "cancle-button1",
},
})
}
>
alert2
</button>
<button className="btn btn-danger btn-lg eroorr" onClick={showAlert3}>
اررور 3
{/* 3 */}
<button
className="btn btn-danger btn-lg"
onClick={() =>
props.customAlert({
title: "اررور شماره 1",
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.",
confirmButtonText: "توضیح بیشتر",
showCancelButton: true,
showCloseButton: true,
cancelButtonText: "متوجه شدم",
customClass: {
title: "title-error-2",
closeButton: "close-button-2",
confirmButton: "confirm-button-2",
cancelButton: "cancle-button2",
},
})
}
>
alert3
</button>
<button className="btn btn-danger btn-lg" onClick={showAlert4}>
4 اررور
{/* 4 */}
<button
className="btn btn-danger btn-lg"
onClick={() =>
props.customAlert({
icon: "success",
title: "اررور شماره 1",
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.",
confirmButtonText: "توضیح بیشتر",
showCancelButton: true,
showCloseButton: false,
cancelButtonText: "متوجه شدم",
customClass: {
title: "title-error-4",
confirmButton: "confirm-button-2",
cancelButton: "cancle-button2",
popup: "alert-popup4",
},
})
}
>
alert4
</button>
<button className="btn btn-danger btn-lg" onClick={showAlert5}>
5 اررور
{/* 5 */}
<button
className="btn btn-danger btn-lg"
onClick={() =>
props.customAlert({
input: "email",
inputPlaceholder: "ایمیل خود را اینجا بنویسید",
imageUrl: "https://unsplash.it/400/200",
imageAlt: "Custom image",
imageWidth: 400,
imageHeight: 200,
html: "<p> این یک پیام تستی است <span style='color:#3ee924;'> که میتوان استایل دلخواه با استفاده از کدهای اچ تی ام ال داد و من اول یه تگ پی گذاشتم و بعد داخل تگ یه اسپن گذاشتم و به این استایل اینلاین دادم</span></p>",
confirmButtonText: "عضو شوید",
showCancelButton: false,
showCloseButton: true,
cancelButtonText: "متوجه شدم",
customClass: {
confirmButton: "confirm-button-5",
input: "input-error-5",
closeButton: "close-button-2",
},
})
}
>
alert5
</button>
<button className="btn btn-danger btn-lg" onClick={showAlert6}>
6 اررور
{/* 6 */}
<button
className="btn btn-danger btn-lg"
onClick={() =>
props.customAlert({
title: "اررور شماره 1",
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.",
confirmButtonText: "توضیح بیشتر",
showCancelButton: false,
showCloseButton: true,
customClass: {
title: "title-error-1",
closeButton: "close-button-6",
confirmButton: "confirm-button-1",
},
})
}
>
alert6
</button>
<button className="btn btn-danger btn-lg" onClick={showAlert7}>
7 اررور
{/* 7 */}
<button
className="btn btn-danger btn-lg"
onClick={() =>
props.customAlert({
title: "اررور شماره 1",
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.",
confirmButtonText: "توضیح بیشتر",
showCancelButton: true,
cancelButtonText: "متوجه شدم",
showCloseButton: true,
customClass: {
title: "title-error-7",
closeButton: "close-button-7",
confirmButton: "confirm-button-7",
cancelButton: "cancle-button7",
},
})
}
>
alert7
</button>
<button className="btn btn-danger btn-lg" onClick={showAlert8}>
8 اررور
{/* 8 */}
<button
className="btn btn-danger btn-lg"
onClick={() =>
props.customAlert({
icon: "error",
title: "اررور شماره 1",
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.",
confirmButtonText: "توضیح بیشتر",
showCancelButton: true,
showCloseButton: false,
cancelButtonText: "متوجه شدم",
customClass: {
title: "title-error-8",
confirmButton: "confirm-button-7",
cancelButton: "cancle-button7",
popup: "alert-popup8",
},
})
}
>
alert8
</button>
<button className="btn btn-danger btn-lg" onClick={showAlert9}>
9 اررور
{/* 9 */}
<button
className="btn btn-danger btn-lg"
onClick={() =>
props.customAlert({
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",
},
})
}
>
alert9
</button>
<button className="btn btn-danger btn-lg" onClick={showAlert10}>
10 اررور
{/* 10 */}
<button
className="btn btn-danger btn-lg"
onClick={() =>
props.customAlert({
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",
},
})
}
>
alert10
</button>
</div>
);
}
const mapStateToProps = (state) => {
return {};
};
export default Alert;
// export default Alert;
export default connect(mapStateToProps, { customAlert: infoAlert })(Alert);

@ -1,30 +1,30 @@
/* TODO common styles */
.swal2-container.swal2-center > .swal2-popup {
border: solid 2px #707070;
padding: 10px;
border: solid 2px #707070 !important;
padding: 10px !important;
}
/* ? کلاس تمامی تایتل ها */
.swal2-title {
text-align: right;
font-size: 26px;
text-align: right !important;
font-size: 26px !important;
}
/* ? کلاس متن داخل الرت باکس */
.swal2-html-container {
text-align: justify;
line-height: 1.8;
text-align: justify !important;
line-height: 1.8 !important;
color: var(--content-color) !important;
font-weight: 600;
font-weight: 600 !important;
}
/* ? کلاس ایکن کنسل یا ضربدر بالا سمت چپ الرت باکس */
.swal2-rtl .swal2-close {
border-radius: 10px;
margin-left: 10px;
margin-top: 13px;
transition: all 0.4s;
border-radius: 10px !important;
margin-left: 10px !important;
margin-top: 13px !important;
transition: all 0.4s !important;
}
/* ? کلاس کانفرم باتن */
.swal2-styled.swal2-confirm {
transition: all 0.4s;
transition: all 0.4s !important;
outline: none !important;
}
/* ? کلاس هاور کانفرم باتن */
@ -33,7 +33,7 @@
}
/* ? کلاس کنسل باتن */
.swal2-styled.swal2-cancel {
transition: all 0.4s;
transition: all 0.4s !important;
}
/* ? کلاس هاور کنسل باتن */
.swal2-styled.swal2-cancel:hover {
@ -41,8 +41,8 @@
}
/* ? ایکن اررور */
.swal2-icon.swal2-error {
border-color: #e92424;
color: #e92424;
border-color: var(--error-color7-button) !important;
color: var(--error-color7-button) !important;
}
/* !error 1 */
/* به اررور های ابی رنگ کلاس هایی دادم که اخرش با 1 تمام میشود */
@ -55,7 +55,7 @@
.eroorr:focus {
outline: none !important;
box-shadow: 0px 0px 0px black !important;
border: 0px;
border: 0px !important;
}
/* ? دکمه ضربدر بالا سمت چپ */
.close-button-1 {
@ -73,6 +73,7 @@
background-color: var(--white) !important;
border: solid 2px var(--error-color1) !important;
color: var(--error-color1) !important;
text-align: left !important;
}
/* ? هاور کانفرم باتن */
.confirm-button-1:hover {
@ -136,15 +137,15 @@
color: var(--error-color2) !important;
}
.alert-popup4 {
width: 440px;
width: 440px !important;
}
/* !error5 */
/* ? کانفرم باتن */
.confirm-button-5 {
background-color: var(--error-color2) !important;
margin-top: -81px;
margin-left: -260px;
padding: 12px 15px;
margin-top: -81px !important;
margin-left: -260px !important;
padding: 12px 15px !important;
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}
@ -210,7 +211,7 @@
text-align: center !important;
}
.alert-popup8 {
width: 440px;
width: 440px !important;
}
/* !error9 */
.title-error-9 {

@ -7,15 +7,15 @@ const Footer = () => {
<div className="container">
<div className="row align-items-center">
<div className="col-8">
<h4 className="text-white">هزاران درصد تخفیف بیشتر</h4>
<p className="me-4 text-white">
<h4 className="text-white title">هزاران درصد تخفیف بیشتر</h4>
<p className="me-4 text-white explain">
با وارد کردن کد بهار تابستون از تخفیف 10 درصدی ویژه برخوردار شوید
</p>
</div>
<div className="col-4 d-flex justify-content-end">
<button
type="button"
class="btn btn-outline-info btn-lg text-white text-center"
class="btn btn-outline-info btn-lg text-white text-center footer-button"
>
مشاهده امکانات
</button>

@ -1,3 +1,17 @@
footer {
background-color: #2f6aa1;
}
/* ?media */
/* On screens that are 1200px or less, set the background color to blue */
@media screen and (max-width: 992px) {
.title {
font-size: 16px;
}
.explain {
font-size: 14px;
}
.footer-button {
font-size: 14px;
}
}

@ -7,7 +7,7 @@ const Header = () => {
<div className="container">
<div className="row justify-content-between align-items-center">
{/* header title */}
<div className="col-6 mt-5 ">
<div className="col-md-6 mt-5">
<h4 className="header-title d-inline rounded p-2 border">
امکانات و ویژگی های پلتفرم
</h4>

@ -12,3 +12,17 @@ header {
.header-title:hover {
background-color: #fff !important;
}
/* ?media */
/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
.header-title {
font-size: 18px;
}
}
@media screen and (max-width: 540px) {
.header-title {
font-size: 14px;
}
}

@ -0,0 +1,59 @@
.swal2-popup.swal2-toast .swal2-title {
font-size: 1em !important;
}
.swal2-popup.swal2-toast .swal2-close {
margin-left: 0px !important;
margin-top: 0px !important;
}
.swal2-timer-progress-bar-container {
direction: ltr !important;
}
/* .swal2-timer-progress-bar {
background-color: var(--toast-bg-error) !important;
} */
.swal2-icon {
font-size: 13px !important;
}
/* !error Toast */
.error-toast-title {
color: var(--error-color7) !important;
}
.error-toast-modalBox,
.error-toast-modalBox-timer {
background-color: var(--toast-bg-error) !important;
}
.error-toast-closeButton {
background-color: #ffc6c6 !important;
color: var(--white) !important;
padding: 15px !important;
}
/* *success Toast */
.success-toast-title {
color: var(--toast-success-color) !important;
}
.success-toast-modalBox,
.success-toast-modalBox-timer {
background-color: var(--toast-bg-success) !important;
}
.success-toast-closeButton {
background-color: #77df65 !important;
color: var(--toast-bg-success) !important;
padding: 15px !important;
}
.error-toast-modalBox-timer .swal2-timer-progress-bar-container {
background-color: var(--error-color7) !important;
}
.error-toast-modalBox-timer .swal2-timer-progress-bar {
background-color: var(--toast-bg-error) !important;
}
.success-toast-modalBox-timer .swal2-timer-progress-bar-container {
background-color: var(--toast-success-color) !important;
}
.success-toast-modalBox-timer .swal2-timer-progress-bar {
background-color: var(--toast-bg-success) !important;
}

@ -0,0 +1,160 @@
import React from "react";
import "./SweetAlert.css";
import { toastAlert } from "../../redux/actions/modalActions";
import { connect } from "react-redux";
import Swal from "sweetalert2";
function SweetToast(props) {
return (
<div className="mt-5">
{/* toast1 */}
<button
className="btn btn-danger btn-lg"
onClick={() =>
props.customAlert({
icon: "error",
title: "ارور شماره 1",
showCloseButton: true,
toast: true,
position: "top-end",
showConfirmButton: false,
timer: false,
timerProgressBar: false,
customClass: {
title: "error-toast-title",
closeButton: "error-toast-closeButton",
popup: "error-toast-modalBox",
iconColor: "icon-color",
},
})
}
>
toast1
</button>
{/* toast2 */}
<button
className="btn btn-danger btn-lg"
onClick={() =>
props.customAlert({
icon: "success",
title: "ارور شماره 2",
showCloseButton: true,
toast: true,
position: "top-end",
showConfirmButton: false,
timer: false,
timerProgressBar: false,
customClass: {
title: "success-toast-title",
closeButton: "success-toast-closeButton",
popup: "success-toast-modalBox",
},
})
}
>
toast2
</button>
{/* toast3 */}
<button
className="btn btn-danger btn-lg"
onClick={() =>
props.customAlert({
icon: false,
title: "ارور شماره 1",
showCloseButton: true,
toast: true,
position: "top-end",
showConfirmButton: false,
timer: false,
timerProgressBar: false,
customClass: {
title: "error-toast-title",
closeButton: "error-toast-closeButton",
popup: "error-toast-modalBox",
iconColor: "icon-color",
},
})
}
>
toast3
</button>
{/* toast4 */}
<button
className="btn btn-danger btn-lg"
onClick={() =>
props.customAlert({
icon: false,
title: "ارور شماره 2",
showCloseButton: true,
toast: true,
position: "top-end",
showConfirmButton: false,
timer: false,
timerProgressBar: false,
customClass: {
title: "success-toast-title",
closeButton: "success-toast-closeButton",
popup: "success-toast-modalBox",
},
})
}
>
toast4
</button>
{/* toast5 */}
<button
className="btn btn-danger btn-lg"
onClick={() =>
props.customAlert({
icon: false,
title: "ارور شماره 2",
showCloseButton: true,
toast: true,
position: "top-end",
showConfirmButton: false,
timer: 3000,
timerProgressBar: true,
customClass: {
title: "error-toast-title",
closeButton: "error-toast-closeButton",
popup: "error-toast-modalBox-timer",
},
})
}
>
toast5
</button>
{/* toast6 */}
<button
className="btn btn-danger btn-lg"
onClick={() =>
props.customAlert({
icon: false,
title: "ارور شماره 2",
showCloseButton: true,
toast: true,
position: "top-end",
showConfirmButton: false,
timer: 3000,
timerProgressBar: true,
customClass: {
title: "success-toast-title",
closeButton: "success-toast-closeButton",
popup: "success-toast-modalBox-timer",
},
})
}
>
toast6
</button>
</div>
);
}
const mapStateToProps = (state) => {
return {};
};
export default connect(mapStateToProps, { customAlert: toastAlert })(
SweetToast
);

@ -0,0 +1,631 @@
import React from "react";
import "./testt.css";
import { infoAlert } from "../../redux/actions/modalActions";
import { connect } from "react-redux";
function Testt(props) {
return (
<div>
{/* 1 */}
<button
className="btn btn-danger btn-lg"
onClick={() =>
props.customAlert({
title: "اررور شماره 1",
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.",
confirmButtonText: "متوجه شدم",
showCloseButton: true,
showCancelButton: false,
customClass: {
title: "title-error-1",
closeButton: "close-button-1",
confirmButton: "confirm-button-1",
},
})
}
>
اررور 1
</button>
{/* 2 */}
<button
className="btn btn-danger btn-lg"
onClick={() =>
props.customAlert({
title: "اررور شماره 1",
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.",
confirmButtonText: "توضیح بیشتر",
showCancelButton: true,
cancelButtonText: "متوجه شدم",
showCloseButton: true,
customClass: {
title: "title-error-1",
closeButton: "close-button-1",
confirmButton: "confirm-button-1",
cancelButton: "cancle-button1",
},
})
}
>
اررور 1
</button>
{/* 3 */}
<button
className="btn btn-danger btn-lg"
onClick={() =>
props.customAlert({
title: "اررور شماره 1",
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.",
confirmButtonText: "توضیح بیشتر",
showCancelButton: true,
showCloseButton: true,
cancelButtonText: "متوجه شدم",
customClass: {
title: "title-error-2",
closeButton: "close-button-2",
confirmButton: "confirm-button-2",
cancelButton: "cancle-button2",
},
})
}
>
اررور 1
</button>
{/* 4 */}
<button
className="btn btn-danger btn-lg"
onClick={() =>
props.customAlert({
icon: "success",
title: "اررور شماره 1",
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.",
confirmButtonText: "توضیح بیشتر",
showCancelButton: true,
showCloseButton: false,
cancelButtonText: "متوجه شدم",
customClass: {
title: "title-error-4",
confirmButton: "confirm-button-2",
cancelButton: "cancle-button2",
popup: "alert-popup4",
},
})
}
>
اررور 4
</button>
{/* 5 */}
<button
className="btn btn-danger btn-lg"
onClick={() =>
props.customAlert({
input: "email",
inputPlaceholder: "ایمیل خود را اینجا بنویسید",
imageUrl: "https://unsplash.it/400/200",
imageAlt: "Custom image",
imageWidth: 400,
imageHeight: 200,
html: "<p> این یک پیام تستی است <span style='color:#3ee924;'> که میتوان استایل دلخواه با استفاده از کدهای اچ تی ام ال داد و من اول یه تگ پی گذاشتم و بعد داخل تگ یه اسپن گذاشتم و به این استایل اینلاین دادم</span></p>",
confirmButtonText: "عضو شوید",
showCancelButton: false,
showCloseButton: true,
cancelButtonText: "متوجه شدم",
customClass: {
confirmButton: "confirm-button-5",
input: "input-error-5",
closeButton: "close-button-2",
},
})
}
>
اررور 4
</button>
{/* 6 */}
<button
className="btn btn-danger btn-lg"
onClick={() =>
props.customAlert({
title: "اررور شماره 1",
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.",
confirmButtonText: "توضیح بیشتر",
showCancelButton: false,
showCloseButton: true,
customClass: {
title: "title-error-1",
closeButton: "close-button-6",
confirmButton: "confirm-button-1",
},
})
}
>
اررور 1
</button>
{/* 7 */}
<button
className="btn btn-danger btn-lg"
onClick={() =>
props.customAlert({
title: "اررور شماره 1",
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.",
confirmButtonText: "توضیح بیشتر",
showCancelButton: true,
cancelButtonText: "متوجه شدم",
showCloseButton: true,
customClass: {
title: "title-error-7",
closeButton: "close-button-7",
confirmButton: "confirm-button-7",
cancelButton: "cancle-button7",
},
})
}
>
اررور 1
</button>
{/* 8 */}
<button
className="btn btn-danger btn-lg"
onClick={() =>
props.customAlert({
icon: "error",
title: "اررور شماره 1",
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.",
confirmButtonText: "توضیح بیشتر",
showCancelButton: true,
showCloseButton: false,
cancelButtonText: "متوجه شدم",
customClass: {
title: "title-error-8",
confirmButton: "confirm-button-7",
cancelButton: "cancle-button7",
popup: "alert-popup8",
},
})
}
>
اررور 4
</button>
{/* 9 */}
<button
className="btn btn-danger btn-lg"
onClick={() =>
props.customAlert({
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",
},
})
}
>
اررور 1
</button>
{/* 10 */}
<button
className="btn btn-danger btn-lg"
onClick={() =>
props.customAlert({
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",
},
})
}
>
اررور 1
</button>
</div>
);
}
const mapStateToProps = (state) => {
return {};
};
export default connect(mapStateToProps, { customAlert: infoAlert })(Testt);
// const Alert = () => {
// // error1
// const showAlert = () => {
// Swal.fire({
// title: "عنوان متن ارور",
// text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
// confirmButtonText: "متوجه شدم",
// showCloseButton: true,
// customClass: {
// title: "title-error-1",
// closeButton: "close-button-1",
// confirmButton: "confirm-button-1",
// },
// });
// };
// // error2
// const showAlert2 = () => {
// Swal.fire({
// title: "عنوان متن ارور",
// text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
// confirmButtonText: "توضیح بیشتر",
// showCloseButton: true,
// showCancelButton: true,
// cancelButtonText: "متوجه شدم",
// customClass: {
// title: "title-error-1",
// closeButton: "close-button-1",
// confirmButton: "confirm-button-1",
// cancelButton: "cancle-button1",
// },
// }).then((result) => {
// if (result.isConfirmed) {
// Swal.fire("Deleted!", "Your file has been deleted.", "success");
// }
// });
// };
// // error3
// const showAlert3 = () => {
// Swal.fire({
// title: "عنوان متن ارور",
// text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
// confirmButtonText: "توضیح بیشتر",
// customClass: {
// title: "title-error-2",
// closeButton: "close-button-2",
// confirmButton: "confirm-button-2",
// cancelButton: "cancle-button2",
// },
// showCloseButton: true,
// showCancelButton: true,
// cancelButtonText: "متوجه شدم",
// }).then((result) => {
// if (result.isConfirmed) {
// Swal.fire("Deleted!", "Your file has been deleted.", "success");
// }
// });
// };
// // error4
// const showAlert4 = () => {
// Swal.fire({
// icon: "success",
// title: "عنوان متن ارور",
// text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
// confirmButtonText: "توضیح بیشتر",
// showCloseButton: false,
// showCancelButton: true,
// cancelButtonText: "متوجه شدم",
// customClass: {
// title: "title-error-4",
// confirmButton: "confirm-button-2",
// cancelButton: "cancle-button2",
// popup: "alert-popup4",
// },
// }).then((result) => {
// if (result.isConfirmed) {
// Swal.fire("Deleted!", "Your file has been deleted.", "success");
// }
// });
// };
// // error5
// const showAlert5 = () => {
// const { value: email } = Swal.fire({
// input: "email",
// inputPlaceholder: "ایمیل خود را اینجا بنویسید",
// imageUrl: "https://unsplash.it/400/200",
// imageAlt: "Custom image",
// showCloseButton: true,
// imageWidth: 400,
// imageHeight: 200,
// confirmButtonText: "عضو شوید",
// html: "<p> این یک پیام تستی است <span style='color:#3ee924;'> که میتوان استایل دلخواه با استفاده از کدهای اچ تی ام ال داد و من اول یه تگ پی گذاشتم و بعد داخل تگ یه اسپن گذاشتم و به این استایل اینلاین دادم</span></p>",
// customClass: {
// confirmButton: "confirm-button-5",
// input: "input-error-5",
// closeButton: "close-button-2",
// },
// });
// if (email) {
// Swal.fire(`Entered email: ${email}`);
// }
// };
// // error6
// const showAlert6 = () => {
// Swal.fire({
// title: "عنوان متن ارور",
// text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
// confirmButtonText: "مشاهده امکانات",
// showCloseButton: true,
// customClass: {
// title: "title-error-1",
// closeButton: "close-button-6",
// confirmButton: "confirm-button-1",
// },
// }).then((result) => {
// if (result.isConfirmed) {
// Swal.fire("Deleted!", "Your file has been deleted.", "success");
// }
// });
// };
// // 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}>
// اررور 1
// </button>
// <button className="btn btn-danger btn-lg" onClick={showAlert2}>
// اررور 2
// </button>
// <button className="btn btn-danger btn-lg eroorr" onClick={showAlert3}>
// اررور 3
// </button>
// <button className="btn btn-danger btn-lg" onClick={showAlert4}>
// 4 اررور
// </button>
// <button className="btn btn-danger btn-lg" onClick={showAlert5}>
// 5 اررور
// </button>
// <button className="btn btn-danger btn-lg" onClick={showAlert6}>
// 6 اررور
// </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>
// );
// };
// toast
// const SweetToast = () => {
// const sweetAlert1 = () => {
// Swal.fire({
// icon: "error",
// title: "ارور شماره 1",
// showCloseButton: true,
// toast: true,
// position: "top-end",
// customClass: {
// title: "error-toast-title",
// closeButton: "error-toast-closeButton",
// popup: "error-toast-modalBox",
// iconColor: "icon-color",
// },
// showConfirmButton: false,
// timer: 3000,
// timerProgressBar: true,
// didOpen: (toast) => {
// toast.addEventListener("mouseenter", Swal.stopTimer);
// toast.addEventListener("mouseleave", Swal.resumeTimer);
// },
// });
// };
// const sweetAlert2 = () => {
// Swal.fire({
// icon: "success",
// title: "ارور شماره 2",
// showCloseButton: true,
// toast: true,
// position: "top-end",
// customClass: {
// title: "success-toast-title",
// closeButton: "success-toast-closeButton",
// popup: "success-toast-modalBox",
// },
// showConfirmButton: false,
// timer: 3000,
// timerProgressBar: true,
// didOpen: (toast) => {
// toast.addEventListener("mouseenter", Swal.stopTimer);
// toast.addEventListener("mouseleave", Swal.resumeTimer);
// },
// });
// };
// const sweetAlert3 = () => {
// Swal.fire({
// title: "ارور شماره 1",
// showCloseButton: true,
// toast: true,
// position: "top-end",
// customClass: {
// title: "error-toast-title",
// closeButton: "error-toast-closeButton",
// popup: "error-toast-modalBox",
// },
// showConfirmButton: false,
// });
// };
// const sweetAlert4 = () => {
// Swal.fire({
// title: "ارور شماره 2",
// showCloseButton: true,
// toast: true,
// position: "top-end",
// customClass: {
// title: "success-toast-title",
// closeButton: "success-toast-closeButton",
// popup: "success-toast-modalBox",
// },
// showConfirmButton: false,
// });
// };
// const sweetAlert5 = () => {
// Swal.fire({
// title: "ارور شماره 1",
// showCloseButton: true,
// toast: true,
// position: "top-end",
// customClass: {
// title: "error-toast-title",
// closeButton: "error-toast-closeButton",
// popup: "error-toast-modalBox",
// },
// showConfirmButton: false,
// timer: 3000,
// timerProgressBar: true,
// didOpen: (toast) => {
// toast.addEventListener("mouseenter", Swal.stopTimer);
// toast.addEventListener("mouseleave", Swal.resumeTimer);
// },
// });
// };
// const sweetAlert6 = () => {
// Swal.fire({
// title: "ارور شماره 2",
// showCloseButton: true,
// toast: true,
// position: "top-end",
// customClass: {
// title: "success-toast-title",
// closeButton: "success-toast-closeButton",
// popup: "success-toast-modalBox",
// },
// showConfirmButton: false,
// timer: 3000,
// timerProgressBar: true,
// didOpen: (toast) => {
// toast.addEventListener("mouseenter", Swal.stopTimer);
// toast.addEventListener("mouseleave", Swal.resumeTimer);
// },
// });
// };
// return (
// <div className="my-5">
// <button className="bg-primary" onClick={sweetAlert1}>
// error sweet alert TOAST 1
// </button>
// <button className="bg-primary" onClick={sweetAlert2}>
// success sweet alert TOAST 1
// </button>
// <button className="bg-primary" onClick={sweetAlert3}>
// error sweet alert TOAST 3
// </button>
// <button className="bg-primary" onClick={sweetAlert4}>
// success sweet alert TOAST 4
// </button>
// <button className="bg-primary" onClick={sweetAlert5}>
// error sweet alert TOAST 5
// </button>
// <button className="bg-primary" onClick={sweetAlert6}>
// success sweet alert TOAST 6
// </button>
// </div>
// );
// };
// export default SweetToast;

@ -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;
@ -80,6 +73,7 @@
background-color: var(--white) !important;
border: solid 2px var(--error-color1) !important;
color: var(--error-color1) !important;
text-align: left !important;
}
/* ? هاور کانفرم باتن */
.confirm-button-1:hover {
@ -142,6 +136,9 @@
text-align: center !important;
color: var(--error-color2) !important;
}
.alert-popup4 {
width: 440px;
}
/* !error5 */
/* ? کانفرم باتن */
.confirm-button-5 {
@ -170,3 +167,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;
}

@ -0,0 +1,15 @@
import { INFO_ALERT, TOAST_ALERT } from "./types";
export const infoAlert = (data) => (dispatch) => {
dispatch({
type: INFO_ALERT,
data: data,
});
};
export const toastAlert = (data) => (dispatch) => {
dispatch({
type: TOAST_ALERT,
data: data,
});
};

@ -0,0 +1,2 @@
export const INFO_ALERT = "INFO_ALERT";
export const TOAST_ALERT = "TOAST_ALERT";

@ -0,0 +1,44 @@
import { INFO_ALERT } from "../actions/types";
import Swal from "sweetalert2";
const initialState = {};
const modalReducer = (state = initialState, action) => {
const { type, data } = action;
switch (type) {
case INFO_ALERT:
Swal.fire({
icon: data.icon,
title: data.title,
text: data.text,
input: data.input,
inputPlaceholder: data.inputPlaceholder,
imageUrl: data.imageUrl,
imageAlt: data.imageAlt,
imageWidth: data.imageWidth,
imageHeight: data.imageHeight,
confirmButtonText: data.confirmButtonText,
showCloseButton: data.showCloseButton,
showCancelButton: data.showCancelButton,
cancelButtonText: data.cancelButtonText,
html: data.html,
footer: data.footer,
customClass: {
title: data.customClass.title,
closeButton: data.customClass.closeButton,
confirmButton: data.customClass.confirmButton,
cancelButton: data.customClass.cancelButton,
popup: data.customClass.popup,
input: data.customClass.input,
footer: data.customClass.footer,
},
});
return {
...state,
};
default:
return state;
}
};
export default modalReducer;

@ -0,0 +1,10 @@
import modalReducer from "./modalReducer";
import toastReducer from "./toastReducer";
import { combineReducers } from "redux";
const rootReducer = combineReducers({
modalReducer: modalReducer,
toastReducer: toastReducer,
});
export default rootReducer;

@ -0,0 +1,34 @@
import { INFO_ALERT, TOAST_ALERT } from "../actions/types";
import Swal from "sweetalert2";
const initialState = {};
const toastReducer = (state = initialState, action) => {
const { type, data } = action;
switch (type) {
case TOAST_ALERT:
Swal.fire({
icon: data.icon,
title: data.title,
showCloseButton: data.showCloseButton,
toast: data.toast,
position: data.position,
showConfirmButton: data.showConfirmButton,
timer: data.timer,
timerProgressBar: data.timerProgressBar,
customClass: {
title: data.customClass.title,
closeButton: data.customClass.closeButton,
popup: data.customClass.popup,
footer: data.customClass.footer,
},
});
return {
...state,
};
default:
return state;
}
};
export default toastReducer;

@ -0,0 +1,6 @@
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers/rootReducer";
const store = createStore(rootReducer, applyMiddleware(thunk));
export default store;

@ -1131,24 +1131,10 @@
"core-js-pure" "^3.0.0"
"regenerator-runtime" "^0.13.4"
"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
"integrity" "sha512-BogPQ7ciE6SYAUPtlm9tWbgI9+2AgqSam6QivMgXgAT+fKbgppaj4ZX15MHeLC1PVF5sNk70huBu20XxWOs8Cg=="
"resolved" "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.18.tgz"
"version" "7.12.18"
dependencies:
"regenerator-runtime" "^0.13.4"
"@babel/runtime@^7.12.5":
"integrity" "sha512-Nht8L0O8YCktmsDV6FqFue7vQLRx3Hb0B37lS5y0jDRqRxlBG4wIJHnf9/bgSE2UyipKFA01YtS+npRdTWBUyw=="
"resolved" "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.0.tgz"
"version" "7.16.0"
dependencies:
"regenerator-runtime" "^0.13.4"
"@babel/runtime@^7.9.2":
"integrity" "sha512-Nht8L0O8YCktmsDV6FqFue7vQLRx3Hb0B37lS5y0jDRqRxlBG4wIJHnf9/bgSE2UyipKFA01YtS+npRdTWBUyw=="
"resolved" "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.0.tgz"
"version" "7.16.0"
"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
"integrity" "sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ=="
"resolved" "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.3.tgz"
"version" "7.16.3"
dependencies:
"regenerator-runtime" "^0.13.4"
@ -1801,6 +1787,14 @@
dependencies:
"@types/node" "*"
"@types/hoist-non-react-statics@^3.3.0":
"integrity" "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA=="
"resolved" "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz"
"version" "3.3.1"
dependencies:
"@types/react" "*"
"hoist-non-react-statics" "^3.3.0"
"@types/html-minifier-terser@^5.0.0":
"integrity" "sha512-giAlZwstKbmvMk1OO7WXSj4OZ0keXAcl2TQq4LWHiiPH2ByaH7WeUzng+Qej8UPxxv+8lRTuouo0iaNDBuzIBA=="
"resolved" "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz"
@ -1868,11 +1862,35 @@
"resolved" "https://registry.npmjs.org/@types/prettier/-/prettier-2.2.1.tgz"
"version" "2.2.1"
"@types/prop-types@*":
"integrity" "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
"resolved" "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz"
"version" "15.7.4"
"@types/q@^1.5.1":
"integrity" "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug=="
"resolved" "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz"
"version" "1.5.4"
"@types/react-redux@^7.1.20":
"integrity" "sha512-q42es4c8iIeTgcnB+yJgRTTzftv3eYYvCZOh1Ckn2eX/3o5TdsQYKUWpLoLuGlcY/p+VAhV9IOEZJcWk/vfkXw=="
"resolved" "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.20.tgz"
"version" "7.1.20"
dependencies:
"@types/hoist-non-react-statics" "^3.3.0"
"@types/react" "*"
"hoist-non-react-statics" "^3.3.0"
"redux" "^4.0.0"
"@types/react@*":
"integrity" "sha512-46FEGrMjc2+8XhHXILr+3+/sTe3OfzSPU9YGKILLrUYbQ1CLQC9Daqo1KzENGXAWwrFwiY0l4ZbF20gRvgpWTg=="
"resolved" "https://registry.npmjs.org/@types/react/-/react-17.0.34.tgz"
"version" "17.0.34"
dependencies:
"@types/prop-types" "*"
"@types/scheduler" "*"
"csstype" "^3.0.2"
"@types/resolve@0.0.8":
"integrity" "sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ=="
"resolved" "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz"
@ -1880,6 +1898,11 @@
dependencies:
"@types/node" "*"
"@types/scheduler@*":
"integrity" "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
"resolved" "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz"
"version" "0.16.2"
"@types/source-list-map@*":
"integrity" "sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA=="
"resolved" "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz"
@ -4043,6 +4066,11 @@
dependencies:
"cssom" "~0.3.6"
"csstype@^3.0.2":
"integrity" "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw=="
"resolved" "https://registry.npmjs.org/csstype/-/csstype-3.0.9.tgz"
"version" "3.0.9"
"cyclist@^1.0.1":
"integrity" "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk="
"resolved" "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz"
@ -5674,7 +5702,7 @@
"minimalistic-assert" "^1.0.0"
"minimalistic-crypto-utils" "^1.0.1"
"hoist-non-react-statics@^3.0.0":
"hoist-non-react-statics@^3.0.0", "hoist-non-react-statics@^3.3.0", "hoist-non-react-statics@^3.3.2":
"integrity" "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw=="
"resolved" "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
"version" "3.3.2"
@ -9366,10 +9394,22 @@
"resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
"version" "16.13.1"
"react-is@^17.0.1", "react-is@>= 16.8.0":
"integrity" "sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA=="
"resolved" "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz"
"version" "17.0.1"
"react-is@^17.0.1", "react-is@^17.0.2", "react-is@>= 16.8.0":
"integrity" "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
"resolved" "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
"version" "17.0.2"
"react-redux@^7.2.6":
"integrity" "sha512-10RPdsz0UUrRL1NZE0ejTkucnclYSgXp5q+tB5SWx2qeG2ZJQJyymgAhwKy73yiL/13btfB6fPr+rgbMAaZIAQ=="
"resolved" "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz"
"version" "7.2.6"
dependencies:
"@babel/runtime" "^7.15.4"
"@types/react-redux" "^7.1.20"
"hoist-non-react-statics" "^3.3.2"
"loose-envify" "^1.4.0"
"prop-types" "^15.7.2"
"react-is" "^17.0.2"
"react-refresh@^0.8.3", "react-refresh@>=0.8.3 <0.10.0":
"integrity" "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
@ -9449,7 +9489,7 @@
dependencies:
"clsx" "^1.1.1"
"react@*", "react@^16.0.0 || ^17.0.0", "react@^17.0.2", "react@>= 16", "react@>= 16.8.0", "react@>=16", "react@17.0.2":
"react@*", "react@^16.0.0 || ^17.0.0", "react@^16.8.3 || ^17", "react@^17.0.2", "react@>= 16", "react@>= 16.8.0", "react@>=16", "react@17.0.2":
"integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA=="
"resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
"version" "17.0.2"
@ -9564,6 +9604,18 @@
"indent-string" "^4.0.0"
"strip-indent" "^3.0.0"
"redux-thunk@^2.4.0":
"integrity" "sha512-/y6ZKQNU/0u8Bm7ROLq9Pt/7lU93cT0IucYMrubo89ENjxPa7i8pqLKu6V4X7/TvYovQ6x01unTeyeZ9lgXiTA=="
"resolved" "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.0.tgz"
"version" "2.4.0"
"redux@^4", "redux@^4.0.0", "redux@^4.1.2":
"integrity" "sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw=="
"resolved" "https://registry.npmjs.org/redux/-/redux-4.1.2.tgz"
"version" "4.1.2"
dependencies:
"@babel/runtime" "^7.9.2"
"regenerate-unicode-properties@^8.2.0":
"integrity" "sha512-F9DjY1vKLo/tPePDycuH3dn9H1OTPIkVD9Kz4LODu+F2C75mgjAJ7x/gwy6ZcSNRAAkhNlJSOHRe8k3p+K9WhA=="
"resolved" "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz"

Loading…
Cancel
Save