modal boxes addes and styled

src/components/alert/alert.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;
@@ -142,6 +135,9 @@
   text-align: center !important;
   color: var(--error-color2) !important;
 }
+.alert-popup4 {
+  width: 440px;
+}
 /* !error5 */
 /* ? کانفرم باتن */
 .confirm-button-5 {
@@ -170,3 +166,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;
+}