update

src/App.js

@@ -72,7 +72,7 @@ function App() {
         {/* <Design2D /> */}
         {/* <Features /> */}
         {/* <Feedback /> */}
-        {/* <Alert /> */}
+        <Alert />
         {/* <Toast /> */}
         {/* <ProductSuggestion /> */}
         {/* <ProductImage /> */}
@@ -90,7 +90,7 @@ function App() {
         {/* <TableDesign1 /> */}
         {/* <ReactTable2 /> */}
         {/* <ReactTable3 /> */}
-        <ReactTable4 />
+        {/* <ReactTable4 /> */}
         {/* <Digikala /> */}
         {/* <DigikalaShop /> */}
         {/* <HeaderDesign1 />

src/components/Alert/index.js

@@ -7,7 +7,9 @@ import { connect } from "react-redux";
 function Alert(props) {
   return (
     <div className="">
-      <h2 className="mt-4 mx-7 bg-pink-600 rounded p-4 text-center text-white">inside Alert Components</h2>
+      <h2 className="mt-4 mx-7 bg-pink-600 rounded p-4 text-center text-white">
+        inside Alert Components
+      </h2>
       {/* 1 */}
       <button
         className="bg-red-600 p-4 rounded text-white m-4"

src/components/Alert/index.scss

@@ -6,10 +6,17 @@ $alertContentColor: #646464;
 $white: #fff;
 // $BgHeaderColor
 
-// ? bluee alert Box , error1
+// ? blue alert Box , error1
 $lightBlue: #06bace;
+$confirmBtnBgColor: #f6feff;
+$blueTitleBgColor: #dfe6e9;
+
+// ? green alert Box , error1
+$lightGreen: #3ee924;
+$darkGreen: #21ae0b;
+$greenTitleBgColor: #91ff5233;
+
 $darkRed: #e92424;
-$headerBgClr: #dfe6e9;
 
 // $errorcolor1: #06bace;
 // $errorcolor2: #3ee924;
@@ -21,17 +28,17 @@ $headerBgClr: #dfe6e9;
 // $toastbgerror: #ffeaea;
 // $toastbgsuccess: #c3ffb9;
 // $toastsuccesscolor: #21ae0b;
-
 // ! common styles
-
+// * alert box
-// alert box
 .swal2-container.swal2-center > .swal2-popup {
   border: solid 2px $alertBorderClr !important;
   border-top-right-radius: 10px !important;
   border-top-left-radius: 10px !important;
+  //
+  position: relative;
 }
 
-/* ? کلاس تمامی تایتل ها */
+// * کلاس تمامی تایتل ها
 .swal2-title {
   text-align: right !important;
   font-size: 20px !important;
@@ -42,7 +49,7 @@ $headerBgClr: #dfe6e9;
   border-top-left-radius: 10px !important;
 }
 
-/* ? کلاس متن داخل الرت باکس */
+// * کلاس متن داخل الرت باکس
 .swal2-html-container {
   text-align: justify !important;
   line-height: 1.8 !important;
@@ -50,7 +57,7 @@ $headerBgClr: #dfe6e9;
   font-size: 16px !important;
 }
 
-/* ? کلاس ایکن کنسل یا ضربدر بالا سمت چپ الرت باکس */
+// * کلاس ایکن کنسل یا ضربدر بالا سمت چپ الرت باکس
 .swal2-rtl .swal2-close {
   width: 31px !important;
   height: 30px !important;
@@ -66,93 +73,102 @@ $headerBgClr: #dfe6e9;
   z-index: 2;
 }
 
-/* ? کلاس کانفرم باتن */
+// * کلاس کانفرم باتن
 .swal2-styled.swal2-confirm {
   transition: all 0.4s !important;
   outline: none !important;
+  border-radius: 4px !important;
 }
 
-/* ? کلاس هاور کانفرم باتن */
+// * کلاس هاور کانفرم باتن
 .swal2-styled.swal2-confirm:hover {
   transform: translateY(-5px) !important;
 }
 
-/* ? کلاس کنسل باتن */
+// * کلاس کنسل باتن
 .swal2-styled.swal2-cancel {
   transition: all 0.4s !important;
 }
 
-/* ? کلاس هاور کنسل باتن */
+// * کلاس هاور کنسل باتن
 .swal2-styled.swal2-cancel:hover {
   transform: translateY(-5px) !important;
 }
 
-/* ? ایکن اررور  */
+// * ایکن اررور
 .swal2-icon.swal2-error {
   border-color: $darkRed !important;
   color: $darkRed !important;
 }
 
 // ? error 1 lightBlue
-// به اررور های ابی رنگ کلاس هایی دادم که اخرش با 1 تمام میشود
+// * به اررور های ابی رنگ کلاس هایی دادم که اخرش با 1 تمام میشود
 //  TODO باکس اول از سمت راست در فایل پی اس دی
 //  ? تایتل
 .title-error-1 {
   color: $lightBlue !important;
-  background-color: $headerBgClr !important;
+  background-color: $blueTitleBgColor !important;
 }
 
-.eroorr:focus {
+// * دکمه ضربدر بالا سمت چپ
-  outline: none !important;
-  box-shadow: 0px 0px 0px black !important;
-  border: 0px !important;
-}
-
-/* ? دکمه ضربدر بالا سمت چپ */
 .close-button-1 {
   background-color: $lightBlue !important;
   color: $white !important;
 }
 
-/* ?  هاور دکمه ضربدر بالا سمت چپ */
+// * هاور دکمه ضربدر بالا سمت چپ
 .close-button-1:hover {
-  background-color: var(--white) !important;
+  background-color: $white !important;
   color: $lightBlue !important;
   border: solid 2px $lightBlue !important;
 }
-/* ? کانفرم باتن */
+
+// * کانفرم باتن
 .confirm-button-1 {
-  background-color: var(--white) !important;
+  background-color: $confirmBtnBgColor !important;
-  border: solid 2px var(--error-color1) !important;
+  border: solid 1px $lightBlue !important;
-  color: var(--error-color1) !important;
+  color: $lightBlue !important;
-  text-align: left !important;
+  //
+  position: absolute !important;
+  left: 20px !important;
+  margin-bottom: 33px !important;
 }
-/* ? هاور کانفرم باتن */
+
+// * هاور کانفرم باتن
 .confirm-button-1:hover {
-  background-color: var(--error-color1) !important;
+  background-color: $lightBlue !important;
-  color: var(--white) !important;
+  color: $white !important;
 }
-/* !error 2 */
+
-/* ? کنسل باتن */
+// ? error 2 lightBlue
+// TODO کنسل باتن
 .cancle-button1 {
-  background-color: var(--error-color1) !important;
+  background-color: $lightBlue !important;
-  color: var(--white) !important;
+  color: $white !important;
-  border: solid 2px var(--error-color1) !important;
+  border: solid 1px $lightBlue !important;
+  //
+  position: absolute !important;
+  left: 33% !important;
+  margin-bottom: 33px !important;
 }
-/* ? هاور کنسل باتن */
+
+// TODO هاور کنسل باتن
 .cancle-button1:hover {
-  background-color: var(--white) !important;
+  background: $white !important;
-  color: var(--error-color1) !important;
+  color: $lightBlue !important;
 }
-/* !error3 */
+
-/* ? تایتل */
+// ? error3
+// TODO تایتل
 .title-error-2 {
-  color: var(--error-color2) !important;
+  color: $darkGreen !important;
+  background-color: $greenTitleBgColor !important;
 }
-/* ? دکمه ضربدر بالا سمت چپ */
+
+// * دکمه ضربدر بالا سمت چپ
 .close-button-2 {
-  background-color: var(--error-color2) !important;
+  background-color: $lightGreen !important;
-  color: var(--white) !important;
+  color: $white !important;
 }
 /* ?  هاور دکمه ضربدر بالا سمت چپ */
 .close-button-2:hover {

src/components/ReactTable4/BasicTable.js

@@ -73,15 +73,15 @@ const BasicTable = ({
     []
   );
 
-  const defaultColumn = {
+  // const defaultColumn = {
-    Cell: EditableCell,
+  //   Cell: EditableCell,
-  };
+  // };
   // یعنی فیلتر دیفالت هدر های ما سرچ خواهد بود مگه اینکه خودمون تغییرش بدیم
-  // const defaultColumn = useMemo(() => {
+  const defaultColumn = useMemo(() => {
-  //   return {
+    return {
-  //     Filter: ColumnSearch,
+      Filter: ColumnSearch,
-  //   };
+    };
-  // }, []);
+  }, []);
 
   //   اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند
   const isEven = (idx) => idx % 2 === 0;
@@ -326,7 +326,7 @@ const BasicTable = ({
             rows.find((e) => e.original && +e.original.id === activeTab)
               ?.original || {}
           }
-          columns={columns}
+          columns={defaultColumn}
         />
       )}
       {/* <pre>