diff --git a/src/App.js b/src/App.js index 570855d..314318f 100644 --- a/src/App.js +++ b/src/App.js @@ -5,8 +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 @@ -33,27 +36,30 @@ function App() { }; return ( -
-
-
-
- + +
+
+
+
+ +
-
+ -
- -
- - - + {/*
+ +
+ + + */} +
-
+ ); } diff --git a/src/components/alert/Alert.js b/src/components/alert/Alert.js index f036061..90ccd91 100644 --- a/src/components/alert/Alert.js +++ b/src/components/alert/Alert.js @@ -3,6 +3,8 @@ import Swal from "sweetalert2"; import withReactContent from "sweetalert2-react-content"; import "./alert.css"; import undraw from "../../icons/undraw.png"; +import { INFO_ALERT } from "../../redux"; +import { connect } from "react-redux"; const Alert = () => { // error1 @@ -207,6 +209,7 @@ const Alert = () => { }, }); }; + return (
+
+ ); +} + +const mapStateToProps = (state) => { + return { + showCloseButton: state.showCloseButton, + }; +}; + +const mapDispatchToProps = (dispatch) => { + return { + infoAlert: () => dispatch(infoAlert()), + }; +}; + +export default connect(mapStateToProps, mapDispatchToProps)(Testt); diff --git a/src/components/alert/test.css b/src/components/testt/testt.css similarity index 65% rename from src/components/alert/test.css rename to src/components/testt/testt.css index 82b5fd1..f1957fd 100644 --- a/src/components/alert/test.css +++ b/src/components/testt/testt.css @@ -1,9 +1,3 @@ -:root { - --error-color1: #06bace; - --error-color2: #3ee924; - --white: #fff; - --content-color: #646464; -} /* TODO common styles */ .swal2-container.swal2-center > .swal2-popup { border: solid 2px #707070; @@ -63,7 +57,6 @@ box-shadow: 0px 0px 0px black !important; border: 0px; } - /* ? دکمه ضربدر بالا سمت چپ */ .close-button-1 { background-color: var(--error-color1) !important; @@ -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; +} diff --git a/src/reducers/Public.js b/src/reducers/Public.js new file mode 100644 index 0000000..e1a475a --- /dev/null +++ b/src/reducers/Public.js @@ -0,0 +1,18 @@ +let initialState = { + alert: null, +}; + +const PublicApi = (state = initialState, payload) => { + const { type, data } = payload; + switch (type) { + case "alert": + return { + ...state, + alert: { title: data.title, message: data.message, type: data.type }, + }; + default: + return { ...state }; + } +}; + +export default PublicApi; diff --git a/src/reducers/index.js b/src/reducers/index.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/redux/index.js b/src/redux/index.js new file mode 100644 index 0000000..abf60cb --- /dev/null +++ b/src/redux/index.js @@ -0,0 +1 @@ +export { infoAlert } from "./modalBox/modalActions"; diff --git a/src/redux/modalBox/modalActions.js b/src/redux/modalBox/modalActions.js new file mode 100644 index 0000000..3299b7d --- /dev/null +++ b/src/redux/modalBox/modalActions.js @@ -0,0 +1,46 @@ +import { INFO_ALERT } from "./modalTypes"; +import Swal from "sweetalert2"; + +// export const infoAlert = () => { +// return { +// type: INFO_ALERT, +// title: "", +// text: "", +// confirmButton: true, +// confirmButtonText: "", +// showCloseButton: true, +// showCancelButton: false, +// cancelButtonText: "", +// }; +// }; + +// export const infoAlert = () => { +// Swal.fire({ +// title: "عنوان متن ارور", +// text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند", +// confirmButtonText: "متوجه شدم", +// showCloseButton: true, +// customClass: { +// title: "title-error-1", +// closeButton: "close-button-1", +// confirmButton: "confirm-button-1", +// }, +// }); +// }; + +export const infoAlert = () => { + Swal.fire({ + title: "عنوان متن ارور", + text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند", + confirmButtonText: "متوجه شدم", + showCloseButton: true, + customClass: { + title: "title-error-1", + closeButton: "close-button-1", + confirmButton: "confirm-button-1", + }, + }); + return { + type: INFO_ALERT, + }; +}; diff --git a/src/redux/modalBox/modalReducer.js b/src/redux/modalBox/modalReducer.js new file mode 100644 index 0000000..8eec71f --- /dev/null +++ b/src/redux/modalBox/modalReducer.js @@ -0,0 +1,18 @@ +import { INFO_ALERT } from "./modalTypes"; + +const initialState = { + showCloseButton: false, +}; + +const modalReducer = (state = initialState, action) => { + switch (action.type) { + case INFO_ALERT: + return { + ...state, + }; + default: + return state; + } +}; + +export default modalReducer; diff --git a/src/redux/modalBox/modalTypes.js b/src/redux/modalBox/modalTypes.js new file mode 100644 index 0000000..f6b3981 --- /dev/null +++ b/src/redux/modalBox/modalTypes.js @@ -0,0 +1 @@ +export const INFO_ALERT = "INFO_ALERT"; diff --git a/src/redux/store.js b/src/redux/store.js new file mode 100644 index 0000000..ec3d57f --- /dev/null +++ b/src/redux/store.js @@ -0,0 +1,6 @@ +import { createStore } from "redux"; +import modalReducer from "./modalBox/modalReducer"; + +const store = createStore(modalReducer); + +export default store;