แก้ icon sweetalert

src/app/components/competency-assessment/evaluation-cycle-manager/define-document-form/define-document-form.component.ts

@@ -128,7 +128,22 @@ export class DefineDocumentFormComponent {
   }
   basicAlert3() {
     Swal.fire({
-      iconHtml: '<i class="ri-file-upload-line text-center rounded-full !h-80px !w-80px !bg-success"></i>',
+      iconHtml: `
+      <div class="flex items-center justify-center rounded-full !h-80px !w-80px" style="background-color: #E8F8EE;">
+          <svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <rect width="39" height="39" fill="#D2D2D2"/>
+              <g id="Component">
+                  <g id="alert cart">
+                      <g id="mdi:file-export">
+                          <circle cx="22.5" cy="19.5" r="33.5" fill="#E8F8EE"/>
+                          <path d="M9.75 3.25C8.88805 3.25 8.0614 3.59241 7.4519 4.2019C6.84241 4.8114 6.5 5.63805 6.5 6.5V32.5C6.5 33.362 6.84241 34.1886 7.4519 34.7981C8.0614 35.4076 8.88805 35.75 9.75 35.75H29.25C30.112 35.75 30.9386 35.4076 31.5481 34.7981C32.1576 34.1886 32.5 33.362 32.5 32.5V13L22.75 3.25M21.125 5.6875L30.0625 14.625H21.125M14.5113 19.8575H26V31.3463L22.555 27.9013L17.9563 32.5L13.3575 27.9013L17.9563 23.3188" 
+                          fill="#1DBE5A"/>
+                      </g>
+                  </g>
+              </g>
+          </svg>
+      </div>
+      `,
       title: 'ส่งออกเอกสาร',
       text: 'คุณต้องการส่งออกเอกสารฉบับนี้ใช่หรือไม่',
       showCancelButton: true,
@@ -136,9 +151,11 @@ export class DefineDocumentFormComponent {
       confirmButtonText: 'ส่งออกเอกสาร',
       cancelButtonText: 'ย้อนกลับ',
       customClass: {
-        actions:"!swal2-actions-mt-20px",
+        title: '!swal2-title-mt-20px',
+        actions: '!swal2-actions-mt-20px',
         icon: '!swal2-icon-no-border',
         confirmButton: '!swal2-button-bg-green',
+        cancelButton: '!swal2-button-bg-gray',
       },
     }).then((result) => {
       if (result.isConfirmed) {

src/assets/css/style.css

@@ -24771,16 +24771,26 @@ div:where(.swal2-container) div:where(.swal2-validation-message) {
 .\!swal2-icon-no-border {
   border: 0 !important;
 }
+.swal2-title.\!swal2-title-mt-20px {
+  margin-top: 20px !important;
+}
 .swal2-actions.\!swal2-actions-mt-20px {
   margin-top: 20px !important;
 }
 .swal2-styled.swal2-confirm.\!swal2-button-bg-green {
-  background-color: #1dbe5a !important;
+  background-color: #1DBE5A !important;
+  border-radius: 20px !important;
 }
 .swal2-styled.swal2-confirm.\!swal2-button-bg-green:focus {
+  box-shadow: 0 0 0 0px rgba(110, 120, 129, 0.5) !important;
+}
+.swal2-styled.swal2-cancel.\!swal2-button-bg-gray {
+  background-color: #B3B3B3 !important;
+  border-radius: 20px !important;
+}
+.swal2-styled.swal2-cancel.\!swal2-button-bg-gray:focus {
   box-shadow: 0 0 0 3px rgba(110, 120, 129, 0.5) !important;
 }
-
 .\!w-80px{
   width: 80px !important;
 }