chore: FE use mat dialog title instead of a class (#2300)

FE use mat dialog title instead of a class Solves PZ-4914
infonl · Dec 24, 2024 · 5830bde · 5830bde
1 parent 204fb38
commit 5830bde
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 3 deletions.
diff --git a/src/main/app/src/app/zaken/intake-afronden-dialog/intake-afronden-dialog.component.html b/src/main/app/src/app/zaken/intake-afronden-dialog/intake-afronden-dialog.component.html
@@ -2,8 +2,7 @@
   ~ SPDX-FileCopyrightText: 2022 Atos, 2024 Lifely
   ~ SPDX-License-Identifier: EUPL-1.2+
   -->
-
-<div class="sidenav-title">
+<div mat-dialog-title>
   <h3>
     <mat-icon>thumbs_up_down</mat-icon>
     {{ data.planItem.naam | translate }}

diff --git a/src/main/app/src/app/zaken/zaak-afhandelen-dialog/zaak-afhandelen-dialog.component.html b/src/main/app/src/app/zaken/zaak-afhandelen-dialog/zaak-afhandelen-dialog.component.html
@@ -3,7 +3,7 @@
   ~ SPDX-License-Identifier: EUPL-1.2+
   -->
 
-<div class="sidenav-title">
+<div mat-dialog-title>
   <h3>
     <mat-icon>thumb_up_alt</mat-icon>
     {{ data.planItem.naam | translate }}

diff --git a/src/main/app/src/styles.less b/src/main/app/src/styles.less
@@ -485,3 +485,32 @@ mat-icon[outlined] {
 mat-hint {
   color: var(--mdc-filled-text-field-label-text-color);
 }
+
+/* dialog title */
+.mat-mdc-dialog-container .mdc-dialog__container .mdc-dialog__title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+  line-height: 20px;
+  color: @primary-heading-color;
+  padding: 0 0 0 24px;
+  border-bottom: 1px solid @border-color;
+
+  & h3 {
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+
+    & .mat-icon {
+      padding-right: 12px;
+    }
+  }
+}
+.mat-mdc-dialog-container .mat-mdc-dialog-title + .mat-mdc-dialog-content {
+  padding-top: 20px !important;
+}
+
+.mdc-dialog__container .mdc-dialog__title::before {
+  content: none;
+}