update

src/components/Alert/index.js

@@ -88,8 +88,8 @@ function Alert(props) {
             cancelButtonText: "متوجه شدم",
             customClass: {
               title: "title-error-4",
-              confirmButton: "confirm-button-2",
+              confirmButton: "confirm-button-4",
-              cancelButton: "cancle-button2",
+              cancelButton: "cancle-button4",
               popup: "alert-popup4",
             },
           })
@@ -179,8 +179,8 @@ function Alert(props) {
             cancelButtonText: "متوجه شدم",
             customClass: {
               title: "title-error-8",
-              confirmButton: "confirm-button-7",
+              confirmButton: "confirm-button-8",
-              cancelButton: "cancle-button7",
+              cancelButton: "cancle-button-8",
               popup: "alert-popup8",
             },
           })

src/components/Alert/index.scss

@@ -11,23 +11,16 @@ $lightBlue: #06bace;
 $confirmBtnBgColor: #f6feff;
 $blueTitleBgColor: #dfe6e9;
 
-// ? green alert Box , error1
+// * green alert Box , error1
 $lightGreen: #3ee924;
 $darkGreen: #21ae0b;
 $greenTitleBgColor: #91ff5233;
 
-$darkRed: #e92424;
+// ! red alert Box , error7
-
+$darkRed: #c70000;
-// $errorcolor1: #06bace;
+$redTitleBgColor: #ff525233;
-// $errorcolor2: #3ee924;
+$red: #e92424;
-// $errorcolor7: #c70000;
+
-// $errorcolor7button: #e92424;
-// $white: #fff;
-// $black: #000;
-// $contentcolor: #646464;
-// $toastbgerror: #ffeaea;
-// $toastbgsuccess: #c3ffb9;
-// $toastsuccesscolor: #21ae0b;
 // ! common styles
 // * alert box
 .swal2-container.swal2-center > .swal2-popup {
@@ -212,126 +205,205 @@ $darkRed: #e92424;
   color: $lightGreen !important;
 }
 
-/* !error4 */
+// ? error4
-/* ? تایتل */
+// TODO تایتل
 .title-error-4 {
   text-align: center !important;
-  color: var(--error-color2) !important;
+  color: $darkGreen !important;
+}
+
+// * کانفرم باتن
+.confirm-button-4 {
+  background-color: $white !important;
+  border: solid 1px $lightGreen !important;
+  color: $darkGreen !important;
+}
+
+// * هاور کانفرم باتن
+.confirm-button-4:hover {
+  background-color: $lightGreen !important;
+  color: $white !important;
+}
+
+// * کنسل باتن
+.cancle-button4 {
+  background-color: $lightGreen !important;
+  color: $white !important;
+  border: solid 1px $lightGreen !important;
 }
+
+// * هاور کنسل باتن
+.cancle-button4:hover {
+  background: $white !important;
+  color: $lightGreen !important;
+}
+
+// * alert box width
 .alert-popup4 {
   width: 440px !important;
 }
-/* !error5 */
+
-/* ? کانفرم باتن */
+// ? error5
+// TODO کانفرم باتن
 .confirm-button-5 {
-  background-color: var(--error-color2) !important;
+  background-color: $lightGreen !important;
-  margin-top: -81px !important;
-  margin-left: -260px !important;
   padding: 12px 15px !important;
   border-top-right-radius: 0px !important;
   border-bottom-right-radius: 0px !important;
+  position: absolute;
+  left: 4% !important;
+  bottom: 8% !important;
 }
-/* ? اینپوت فیلد */
+
+// *input field
 .input-error-5 {
-  width: 70% !important;
+  position: relative;
-  height: 47px !important ;
   border-top-left-radius: 0px !important;
   border-bottom-left-radius: 0px !important;
 }
-/* !error6 */
+
-/* ? دکمه ضربدر بالا سمت چپ */
+// ? error6
+// TODO دکمه ضربدر بالا سمت چپ
 .close-button-6 {
-  color: var(--error-color1) !important;
+  color: $lightBlue !important;
-}
-/* ?  هاور دکمه ضربدر بالا سمت چپ */
-.close-button-6:hover {
-  background-color: var(--error-color1) !important;
-  color: var(--white) !important;
-  border: solid 4px var(--error-color1) !important;
 }
-/* !error7 */
+
-/* ? تایتل */
+// ? error7
+// TODO تایتل
 .title-error-7 {
-  color: var(--error-color7) !important;
+  color: $darkRed !important;
+  background-color: $redTitleBgColor !important;
 }
-/* ? دکمه ضربدر بالا سمت چپ */
+
+// * دکمه ضربدر بالا سمت چپ
 .close-button-7 {
-  background-color: var(--error-color7-button) !important;
+  background-color: $red !important;
-  color: var(--white) !important;
+  color: $white !important;
 }
-/* ?  هاور دکمه ضربدر بالا سمت چپ */
+
+// * هاور دکمه ضربدر بالا سمت چپ
 .close-button-7:hover {
-  background-color: var(--white) !important;
+  background-color: $white !important;
-  color: var(--error-color7) !important;
+  color: $red !important;
-  border: solid 4px var(--error-color7-button) !important;
+  border: solid 2px $red !important;
 }
-/* ? کانفرم باتن */
+
+// * کانفرم باتن
 .confirm-button-7 {
-  background-color: var(--white) !important;
+  background-color: $redTitleBgColor !important;
-  border: solid 2px var(--error-color7-button) !important;
+  border: solid 1px $darkRed !important;
-  color: var(--error-color7) !important;
+  color: $darkRed !important;
+  //
+  position: absolute !important;
+  left: 20px !important;
+  margin-bottom: 33px !important;
 }
-/* ? هاور کانفرم باتن */
+
+// * هاور کانفرم باتن
 .confirm-button-7:hover {
-  background-color: var(--error-color7-button) !important;
+  background-color: $red !important;
-  color: var(--white) !important;
+  color: $white !important;
 }
-/* ? کنسل باتن */
+
+// * کنسل باتن
 .cancle-button7 {
-  background-color: var(--error-color7-button) !important;
+  background-color: $red !important;
-  color: var(--white) !important;
+  border: solid 1px $red !important;
-  border: solid 2px var(--error-color7-button) !important;
+  color: $white !important;
+  //
+  position: absolute !important;
+  left: 33% !important;
+  margin-bottom: 33px !important;
 }
-/* ? هاور کنسل باتن */
+
+// * هاور کنسل باتن
 .cancle-button7:hover {
-  background-color: var(--white) !important;
+  background: $white !important;
-  color: var(--error-color7-button) !important;
+  color: $red !important;
 }
-/* !error8 */
+
+// ? error8
 .title-error-8 {
-  color: var(--error-color7-button) !important;
+  color: $darkRed !important;
   text-align: center !important;
 }
+
+// * کانفرم باتن
+.confirm-button-8 {
+  background-color: $redTitleBgColor !important;
+  border: solid 1px $darkRed !important;
+  color: $darkRed !important;
+}
+
+// * هاور کانفرم باتن
+.confirm-button-8:hover {
+  background-color: $red !important;
+  color: $white !important;
+}
+
+// * کنسل باتن
+.cancle-button-8 {
+  background-color: $red !important;
+  border: solid 1px $red !important;
+  color: $white !important;
+}
+
+// * هاور کنسل باتن
+.cancle-button-8:hover {
+  background: $white !important;
+  color: $red !important;
+}
+
+// * alert box width
 .alert-popup8 {
   width: 440px !important;
 }
-/* !error9 */
+
+// ? error9
 .title-error-9 {
-  color: var(--white) !important;
+  color: $white !important;
 }
+
 .alert-popup9 {
-  background-color: var(--error-color2) !important;
+  background-color: $darkRed !important;
-  border-color: var(--error-color2) !important;
+  border-color: $darkRed !important;
 }
+
 .close-button-9 {
-  background-color: var(--toast-bg-success) !important;
+  background-color: $white !important;
-  color: var(--toast-success-color) !important;
+  color: $red !important;
 }
+
 .confirm-button-9 {
-  background-color: #35bb20 !important;
+  background-color: $red !important;
 }
+
 .cancle-button9 {
-  background-color: var(--white) !important;
+  background-color: $white !important;
-  color: var(--error-color2) !important;
+  color: $red !important;
 }
+
 .footer-error-9 a {
-  color: var(--white) !important;
+  color: $white !important;
-  border-bottom-color: var(--white) !important;
-  font-size: 18px !important;
 }
-/* !error10 */
+
+// ? error10
+
 .alert-popup10 {
-  background-color: var(--error-color7-button) !important;
+  background-color: $darkGreen !important;
-  border-color: var(--error-color7-button) !important;
+  border-color: $darkGreen !important;
 }
+
 .close-button-10 {
-  background-color: #fd6a6a !important;
+  background-color: $white !important;
-  color: var(--white) !important;
+  color: $darkGreen !important;
 }
+
 .confirm-button-10 {
-  background-color: #bb2020 !important;
+  background-color: $lightGreen !important;
 }
+
 .cancle-button10 {
-  background-color: var(--white) !important;
+  background-color: $white !important;
-  color: var(--error-color7-button) !important;
+  color: $lightGreen !important;
 }