* Add styles for modals with dangerZone

* Make confirmDialog Component customizable for that dangerZone styling
* Apply correct HTML structure for the WpDestroy Modal to use the new dangerZone styling

app/assets/stylesheets/content/_forms.sass

@@ -181,12 +181,6 @@ hr
 .form--space
   padding-top: 1rem
 
-  &.-left-spacing
-    padding-left: 1rem
-
-  &.-big
-    padding-top: 20px
-
 .form--row
   @include grid-block
   @include grid-visible-overflow

app/assets/stylesheets/content/_modal.lsg

@@ -55,7 +55,7 @@
     </ul>
 ```
 
-## Modals: With footer
+## Modals: Highlighted and with footer
 
 ```
 <div class="op-modal--modal-container -highlight">
@@ -87,3 +87,24 @@
   </div>
 </div>
 ```
+
+## Modals: Danger zone highlighting
+
+```
+<div class="op-modal--modal-container -highlight -danger-zone">
+  <div class="op-modal--modal-header">
+    <h3 class="icon-context icon-warning">Confirm deletion of Work Package</h3>
+    <a class="op-modal--modal-close-button" title="Close popup">
+      <i class="icon-close"></i>
+    </a>
+  </div>
+  <div class="op-modal--modal-body">
+    <p>Are you sure you want to delete the following work package?<p>
+    <p> ... </p>
+  </div>
+  <div class="op-modal--modal-footer">
+    <button name="button" type="submit" class="button -danger">Continue</button>
+    <button name="button" type="submit" class="button">Cancel</button>
+  </div>
+</div>
+```

app/assets/stylesheets/content/_modal.sass

@@ -88,7 +88,6 @@ $modal-footer-height: $modal-header-height
       margin-bottom: 0px
 
 .op-modal--modal-footer
-  margin: 1em 0
   padding: 0 1.5rem
 
   button:last-of-type
@@ -127,6 +126,10 @@ $modal-footer-height: $modal-header-height
     h2, h3
       @include text-shortener
       margin: 0
+      border: none
+
+  .op-modal--modal-footer
+    margin: 1em 0
 
   .op-modal--modal-close-button
     right: 10px
@@ -134,10 +137,18 @@ $modal-footer-height: $modal-header-height
     @include varprop(line-height, modal-header-height)
     @include varprop(color, header-item-font-color)
 
-  .avatar,
+  .avatar
-  .icon-context
     margin-right: 0.5rem
 
+  &.-danger-zone
+    .op-modal--modal-header
+      @include varprop(background-color, content-form-danger-zone-bg-color)
+      @include varprop(border-bottom-color, content-form-danger-zone-bg-color)
+
+    .op-modal--modal-close-button
+      @include varprop(color, content-form-danger-zone-font-color)
+
+
 // Specific styles for columns-modal
 .columns-modal--content
   margin-bottom: 15px

frontend/src/app/components/modals/confirm-dialog/confirm-dialog.modal.html

@@ -1,8 +1,8 @@
 <div class="op-modal--portal confirm-form-submit--modal ngdialog-theme-openproject">
   <div class="op-modal--modal-container confirm-dialog--modal loading-indicator--location"
+       [ngClass]="{'-highlight -danger-zone' : dangerHighlighting }"
        data-indicator-name="modal"
        tabindex="0">
-
     <div class="op-modal--modal-header">
       <a class="op-modal--modal-close-button" *ngIf="showClose">
         <i
@@ -11,29 +11,25 @@
           [attr.title]="text.close_popup">
         </i>
       </a>
+      <h3 class="icon-context icon-attention" [textContent]="text.title"></h3>
     </div>
 
-    <form class="form"
+    <div class="ngdialog-body op-modal--modal-body">
-        [ngClass]="classes?.form">
-        <section class="form--section -inner-scrolling">
-          <h3 class="icon-context icon-attention form--section-title" [textContent]="text.title"></h3>
-          <div class="modal-inner-scrolling-container">
-            <ng-container>
       <p>
         <span [textContent]="text.text"></span>
+        <br/>
         <span *ngFor="let data of passedData">
           <br/>
           <strong>{{data}}</strong>
         </span>
       </p>
-            </ng-container>
     </div>
-        </section>
 
-        <div class="form--space -left-spacing">
+    <div class="op-modal--modal-footer">
       <button class="confirm-form-submit--continue button"
-                  [ngClass]="classes.button" 
+              [ngClass]="dangerHighlighting ? '-danger': '-highlight'"
-                  (click)="confirmAndClose($event)" [textContent]="text.button_continue"
+              (click)="confirmAndClose($event)"
+              [textContent]="text.button_continue"
               [attr.title]="text.button_continue">
       </button>
       <button class="confirm-form-submit--cancel button"
@@ -41,8 +37,7 @@
               [textContent]="text.button_cancel"
               [attr.title]="text.button_cancel">
       </button>
-        </div>
 
-    </form>
+    </div>
   </div>
 </div>

frontend/src/app/components/modals/confirm-dialog/confirm-dialog.modal.sass

@@ -1,5 +0,0 @@
-
-
-.confirm-dialog--modal
-  p
-    margin-right: 15px

frontend/src/app/components/modals/confirm-dialog/confirm-dialog.modal.ts

@@ -43,12 +43,11 @@ export interface ConfirmDialogOptions {
   showClose?:boolean;
   closeByDocument?:boolean;
   passedData?:string[];
-  classes?:{form?:string; button?:string};
+  dangerHighlighting?:boolean;
 }
 
 @Component({
-  templateUrl: './confirm-dialog.modal.html',
+  templateUrl: './confirm-dialog.modal.html'
-  styleUrls:['./confirm-dialog.modal.sass']
 })
 export class ConfirmDialogModal extends OpModalComponent {
 
@@ -66,9 +65,9 @@ export class ConfirmDialogModal extends OpModalComponent {
     close_popup: this.I18n.t('js.close_popup_title')
   };
 
-  public passedData?:string[];
+  public passedData:string[];
 
-  public classes:{form?:string; button?:string} = {};
+  public dangerHighlighting:boolean;
 
   constructor(readonly elementRef:ElementRef,
               @Inject(OpModalLocalsToken) public locals:OpModalLocalsMap,
@@ -77,10 +76,9 @@ export class ConfirmDialogModal extends OpModalComponent {
 
     super(locals, cdRef, elementRef);
     this.options = locals.options || {};
-    this.classes = this.options.classes || {};
+
-    this.classes.button = this.options.classes?.button || '-highlight';
+    this.dangerHighlighting = _.defaultTo(this.options.dangerHighlighting, false);
-    //this.classes = this.options.classes;
+    this.passedData = _.defaultTo(this.options.passedData, []);
-    this.passedData = this.options?.passedData || [];
     this.closeOnEscape = _.defaultTo(this.options.closeByEscape, true);
     this.closeOnOutsideClick = _.defaultTo(this.options.closeByDocument, true);
     this.showClose = _.defaultTo(this.options.showClose, true);

frontend/src/app/components/modals/wp-destroy-modal/wp-destroy.modal.html

@@ -1,23 +1,19 @@
-<div class="op-modal--portal ">
+<div class="op-modal--portal">
   <div id="wp_destroy_modal"
-       class="op-modal--modal-container wp-table--configuration-modal loading-indicator--location"
+       class="op-modal--modal-container wp-table--configuration-modal loading-indicator--location -highlight -danger-zone"
        data-indicator-name="modal"
        tabindex="0">
     <div class="op-modal--modal-header">
       <a class="op-modal--modal-close-button">
-        <i
+        <i class="icon-close"
-            class="icon-close"
            (click)="closeMe($event)"
            [attr.title]="text.close">
         </i>
       </a>
+      <h3 class="icon-context icon-attention" [textContent]="text.title"></h3>
     </div>
 
-    <form name="modalWpDestroyForm" class="form danger-zone">
+    <div class="op-modal--modal-body">
-      <section class="form--section -inner-scrolling">
-        <h3 class="form--section-title" [textContent]="text.title"></h3>
-
-      <div class="modal-inner-scrolling-container">
       <ng-container *ngIf="singleWorkPackage">
         <p>
           <span [textContent]="text.text"></span>
@@ -30,7 +26,7 @@
         </p>
         <div *ngIf="singleWorkPackageChildren && singleWorkPackageChildren.length > 0">
           <p class="danger-zone--warning">
-              <span class="icon icon-error"></span>
+            <span class="icon-context icon-error"></span>
             <strong [textContent]="text.warning"></strong>:
             <span [textContent]="text.hasChildren(singleWorkPackage)"></span>
           </p>
@@ -47,7 +43,7 @@
       </ng-container>
       <ng-container *ngIf="workPackages.length > 1">
         <p class="danger-zone--warning">
-            <span class="icon icon-error"></span>
+          <span class="icon-context icon-error"></span>
           <strong [textContent]="text.text"></strong>
         </p>
         <ul>
@@ -74,9 +70,8 @@
         </label>
       </div>
     </div>
-      </section>
 
-      <div class="form--space -left-spacing">
+    <div class="op-modal--modal-footer">
       <button class="button -danger"
               [textContent]="text.confirm"
               [attr.disabled]="busy || blockedDueToUnconfirmedChildren || undefined"
@@ -87,6 +82,5 @@
               (click)="closeMe($event)">
       </button>
     </div>
-    </form>
   </div>
 </div>

frontend/src/app/modules/grids/widgets/time-entries/list/time-entries-list.component.ts

@@ -122,9 +122,11 @@ export abstract class WidgetTimeEntriesListComponent extends AbstractWidgetCompo
       closeByDocument: true,
       passedData:[
         '#' + entry.workPackage?.idFromLink + ' ' + entry.workPackage?.name,
-        this.timezone.toHours(entry.hours) + ' ' + this.text.hour + ' (' + entry.activity?.name + ')'
+        this.i18n.t(
+          'js.units.hour',
+          { count: this.timezone.toHours(entry.hours) }) + ' (' + entry.activity?.name + ')'
       ],
-      classes: {form:'danger-zone' , button:'-danger'}
+      dangerHighlighting: true
     }).then(() => {
       entry.delete().then(() => {
         let newEntries = this.entries.filter((anEntry) => {