UPDATE new toast modal box using sweet alert

master
mahdi 3 years ago
parent c4c4478a4c
commit fe86c1fd7a
  1. 252
      package-lock.json
  2. 2
      package.json
  3. 2
      src/App.js
  4. 30
      src/components/Functionalities/Functionalities.css
  5. 36
      src/components/Functionalities/Functionalities.js
  6. 1
      src/components/alert/alert.css
  7. 6
      src/components/footer/Footer.js
  8. 14
      src/components/footer/footer.css
  9. 2
      src/components/header/Header.js
  10. 14
      src/components/header/header.css
  11. 31
      src/components/sweetAlertToast/SweetAlert.css
  12. 146
      src/components/sweetAlertToast/SweetToast.js
  13. 0
      src/reducers/index.js
  14. 95
      yarn.lock

252
package-lock.json generated

@ -14,8 +14,10 @@
"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",
"styled-components": "^5.3.3",
"sweetalert": "^2.1.2",
"sweetalert2": "^11.1.10",
@ -1293,11 +1295,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 +2239,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 +2275,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 +2303,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 +2318,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 +2396,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 +2561,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 +2600,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 +6261,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 +14297,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 +14879,14 @@
"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/regenerate": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@ -19973,9 +20011,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 +20693,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 +20720,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 +20738,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 +20746,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 +20826,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 +20969,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 +21008,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 +23956,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 +30195,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 +30634,14 @@
"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"
}
},
"regenerate": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",

@ -9,8 +9,10 @@
"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",
"styled-components": "^5.3.3",
"sweetalert": "^2.1.2",
"sweetalert2": "^11.1.10",

@ -5,6 +5,7 @@ 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 SweetAlert from "./components/sweetAlertToast/SweetToast";
import { useState, useEffect } from "react";
function App() {
@ -50,6 +51,7 @@ function App() {
<Footer />
<Alert />
<Toast />
<SweetAlert />
</div>
</div>
);

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

@ -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 {

@ -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,31 @@
.swal2-icon {
font-size: 13px !important;
}
.swal2-timer-progress-bar {
background-color: palevioletred !important;
}
/* !error Toast */
.error-toast-title {
color: var(--error-color7) !important;
}
.error-toast-modalBox {
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);
}
.success-toast-modalBox {
background-color: var(--toast-bg-success) !important;
}
.success-toast-closeButton {
background-color: #77df65 !important;
color: var(--toast-bg-success) !important;
padding: 15px !important;
}

@ -0,0 +1,146 @@
import React from "react";
import Swal from "sweetalert2";
import "./SweetAlert.css";
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",
},
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;

@ -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,13 @@
"indent-string" "^4.0.0"
"strip-indent" "^3.0.0"
"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