redux added

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 (
-    <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 />
-        <SweetAlert />
+          {/* <Header />
+          <Functionalities />
+          <Footer />
+          <Alert />
+          <Toast />
+          <SweetAlert /> */}
+        </div>
       </div>
-    </div>
+    </Provider>
   );
 }
 

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 (
     <div className="mt-5">
       <button className="btn btn-danger btn-lg" onClick={showAlert}>

src/components/sweetAlertToast/SweetAlert.css

@@ -1,8 +1,16 @@
+.swal2-timer-progress-bar-container {
+  background-color: var(--error-color7) !important;
+  direction: ltr !important;
+}
+.swal2-timer-progress-bar {
+  background-color: var(--toast-bg-error) !important;
+}
 .swal2-icon {
   font-size: 13px !important;
 }
 .swal2-timer-progress-bar {
-  background-color: palevioletred !important;
+  /* background-color: #000 !important; */
+  direction: rtl !important;
 }
 /* !error Toast */
 .error-toast-title {
@@ -29,3 +37,6 @@
   color: var(--toast-bg-success) !important;
   padding: 15px !important;
 }
+.iconColor {
+  color: slateblue !important;
+}

src/components/sweetAlertToast/SweetToast.js

@@ -14,6 +14,7 @@ const SweetToast = () => {
         title: "error-toast-title",
         closeButton: "error-toast-closeButton",
         popup: "error-toast-modalBox",
+        iconColor: "icon-color",
       },
       showConfirmButton: false,
       timer: 3000,

src/components/testt/Testt.js

@@ -0,0 +1,28 @@
+import React from "react";
+import "./testt.css";
+import { infoAlert } from "../../redux";
+import { connect } from "react-redux";
+
+function Testt(props) {
+  return (
+    <div>
+      <button className="btn btn-danger btn-lg" onClick={props.infoAlert}>
+        اررور 1
+      </button>
+    </div>
+  );
+}
+
+const mapStateToProps = (state) => {
+  return {
+    showCloseButton: state.showCloseButton,
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    infoAlert: () => dispatch(infoAlert()),
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Testt);

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;
+}

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;

src/redux/index.js

@@ -0,0 +1 @@
+export { infoAlert } from "./modalBox/modalActions";

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,
+  };
+};

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;

src/redux/modalBox/modalTypes.js

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

src/redux/store.js

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