Issue #3436310 by baldwinlouie, yas: Support modal delete dialog windows

assets/css/main.css

@@ -3655,3 +3655,87 @@ summary {
 nav.block-menu.navigation li:not(:last-child) {
   margin-right: 10px;
 }
+
+.ui-dialog {
+  /** Hide buttons with btn-trash. **/
+}
+
+.ui-dialog .ui-dialog-content {
+  color: #fff;
+}
+
+.ui-dialog .ui-dialog-content,
+.ui-dialog .ui-dialog-buttonpane {
+  background: #292929 !important;
+}
+
+.ui-dialog .ui-dialog-buttonpane {
+  border: none !important;
+}
+
+.ui-dialog .ui-dialog-titlebar {
+  color: #fff;
+  border: none !important;
+  background: #363636 !important;
+}
+
+.ui-dialog .form-actions {
+  margin-top: 10px !important;
+}
+
+.ui-dialog .btn-trash {
+  display: none;
+}
+
+.ui-dialog .button--primary {
+  height: 36px;
+  margin: 0 0.5rem;
+  padding: 0 13px;
+  transition: all 0.3s ease-out;
+  text-align: center;
+  text-decoration: underline;
+  color: #292929;
+  border: none;
+  border-radius: 4px;
+  background-color: #ff6565;
+  font-size: 14px !important;
+  font-weight: 400;
+  line-height: 36px;
+}
+
+.ui-dialog .button--primary:hover {
+  text-decoration: none;
+  color: #292929;
+  border: none;
+  border-color: var(--bs-btn-hover-border-color);
+  outline: none;
+  background-color: #ff6565;
+  box-shadow: 0 4px 11px 0 rgba(255, 101, 101, 0.375);
+}
+
+.ui-dialog .button--primary:focus {
+  border: none;
+  background-color: #ff6565;
+}
+
+.ui-dialog .ui-dialog-titlebar-close {
+  width: 15px;
+  height: 15px;
+  margin-top: -8px;
+  margin-left: -8px;
+  background: none;
+  background-image: url("../../images/ui_icons_ffffff_256x240.png");
+  background-position: 164px -126px;
+}
+
+.ui-widget {
+  font-family: Roboto, sans-serif !important;
+}
+
+.ui-widget.ui-widget-content {
+  border: none !important;
+}
+
+.ui-button .ui-icon {
+  background-image: url("../../images/ui_icons_ffffff_256x240.png") !important;
+}

assets/scss/_dialog.scss

+.ui-dialog {
+
+  .ui-dialog-content {
+    color: $white;
+  }
+
+  .ui-dialog-content,
+  .ui-dialog-buttonpane {
+    background: $d-primary-color !important;
+  }
+
+  .ui-dialog-buttonpane {
+    border: none !important;
+  }
+
+  .ui-dialog-titlebar {
+    background: $d-secondary-color !important;
+    color: $white;
+    border: none !important;
+  }
+
+  .form-actions {
+    margin-top: 10px !important;
+  }
+
+  /** Hide buttons with btn-trash. **/
+  .btn-trash {
+    display: none;
+  }
+
+  .button--primary {
+    color: $d-primary-color;
+    background-color: $danger-bg;
+    border: none;
+    height: 36px;
+    padding: 0 13px;
+    transition: all 0.3s ease-out;
+    text-align: center;
+    border: none;
+    border-radius: 4px;
+    font-size: 14px !important;
+    font-weight: 400;
+    line-height: 36px;
+    margin: 0 0.5rem;
+    text-decoration: underline;
+  }
+
+  .button--primary:hover {
+    text-decoration: none;
+    color: $d-primary-color;
+    outline: none;
+    border: none;
+    box-shadow: 0 4px 11px 0 rgba(255, 101, 101, 0.375);
+    border-color: var(--bs-btn-hover-border-color);
+    background-color: $danger-bg;
+  }
+
+  .button--primary:focus {
+    background-color: $danger-bg;
+    border: none;
+  }
+
+  .ui-dialog-titlebar-close {
+    background: none;
+    background-image: url("../../images/ui_icons_ffffff_256x240.png");
+    background-position: 164px -126px;
+    width: 15px;
+    height: 15px;
+    margin-top: -8px;
+    margin-left: -8px;
+  }
+
+}
+
+.ui-widget {
+  font-family: Roboto, sans-serif !important;
+
+  &.ui-widget-content {
+    border: none !important;
+  }
+}
+
+.ui-button {
+  .ui-icon {
+    background-image: url("../../images/ui_icons_ffffff_256x240.png") !important;
+  }
+}

assets/scss/main.scss

@@ -9,3 +9,4 @@
 @import "table";
 @import "alignment";
 @import "base";
+@import "dialog";

rigel.theme

@@ -204,8 +204,10 @@ function rigel_form_alter(&$form, FormStateInterface $form_state, $form_id) {
 
   if (!empty($form['actions']['submit'])) {
     $icon = Bootstrap::cssClassFromString($form['actions']['submit']['#value']);
-    if (($icon === "remove" && $form['actions']['submit']['#value'] !== 'Disassociate Address') || ($icon === 'trash')) {
-      $form['actions']['submit']['#prefix'] = '<div class="btn btn-danger btn-wrap ripple-effect"><span class="glyphicon glyphicon-' . $icon . '"></span>';
+    if (($icon === 'remove' && $form['actions']['submit']['#value'] !== 'Disassociate Address') || ($icon === 'trash')) {
+      // Add btn-trash so modal CSS can pick it up and completely hide the button.
+      $trash_identifier = str_contains($form['actions']['submit']['#value']->__toString(), 'Delete') === TRUE ? ' btn-trash' : '';
+      $form['actions']['submit']['#prefix'] = '<div class="btn btn-danger btn-wrap ripple-effect' . $trash_identifier . '"><span class="glyphicon glyphicon-' . $icon . '"></span>';
       $form['actions']['submit']['#suffix'] = '</div>';
     }
     elseif (empty($icon)) {