feat: FE case close dialog styling and buttons aligment with forms (#…

…2299) FE case close dialog styling and buttons aligment with forms Solves: PZ-4911
infonl · Dec 24, 2024 · c275b8d · c275b8d
1 parent 80f7199
commit c275b8d
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 21 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
@@ -132,9 +132,9 @@ <h3>
   <button
     mat-raised-button
     color="primary"
+    id="intakeAfronden_button"
     [disabled]="loading || formGroup.invalid"
     (click)="afronden()"
-    id="intakeAfronden_button"
   >
     <mat-icon *ngIf="loading">
       <mat-spinner diameter="18"></mat-spinner>

diff --git a/src/main/app/src/app/zaken/intake-afronden-dialog/intake-afronden-dialog.component.less b/src/main/app/src/app/zaken/intake-afronden-dialog/intake-afronden-dialog.component.less
@@ -16,8 +16,7 @@
 }
 
 .mat-mdc-checkbox {
-  margin-bottom: 10px;
-  margin-left: -7px;
+  margin: 20px 0 10px -7px;
 }
 
 mat-expansion-panel {

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,6 +3,16 @@
   ~ SPDX-License-Identifier: EUPL-1.2+
   -->
 
+<div class="sidenav-title">
+  <h3>
+    <mat-icon>thumb_up_alt</mat-icon>
+    {{ data.planItem.naam | translate }}
+  </h3>
+  <button mat-icon-button (click)="close()">
+    <mat-icon>close</mat-icon>
+  </button>
+</div>
+
 <div mat-dialog-content [formGroup]="formGroup">
   <p
     *ngIf="data.planItem.toelichting"
@@ -123,11 +133,11 @@
 <div mat-dialog-actions>
   <button
     *ngIf="!besluitVastleggen"
-    [disabled]="loading || formGroup.invalid"
-    mat-button
+    mat-raised-button
     color="primary"
-    (click)="afhandelen()"
     id="zaakAfhandelen_button"
+    [disabled]="loading || formGroup.invalid"
+    (click)="afhandelen()"
   >
     <mat-icon *ngIf="loading">
       <mat-spinner diameter="18"></mat-spinner>
@@ -137,15 +147,15 @@
 
   <button
     *ngIf="besluitVastleggen"
-    mat-button
+    mat-raised-button
     color="primary"
-    (click)="openBesluitVastleggen()"
     id="besluitVastleggen_button"
+    (click)="openBesluitVastleggen()"
   >
     {{'actie.besluit.vastleggen' | translate}}
   </button>
 
-  <button [disabled]="loading" mat-button (click)="close()">
+  <button mat-raised-button [disabled]="loading" (click)="close()">
     {{'actie.annuleren' | translate}}
   </button>
 </div>
diff --git a/src/main/app/src/app/zaken/zaak-afhandelen-dialog/zaak-afhandelen-dialog.component.less b/src/main/app/src/app/zaken/zaak-afhandelen-dialog/zaak-afhandelen-dialog.component.less
@@ -7,27 +7,32 @@
 }
 
 .mat-mdc-checkbox {
-  margin-bottom: 10px;
+  margin: 20px 0 10px -7px;
 }
 
 mat-expansion-panel {
   background-color: rgba(0, 0, 0, 0.04);
 }
 
-button {
-  &.mat-mdc-button-base + button.mat-mdc-button-base {
-    margin: 0;
-  }
-
-  mat-icon {
-    color: #0000008a;
+.mat-expansion-panel-header,
+.mat-expansion-panel-content {
+  padding-left: 16px;
+  padding-right: 16px;
+}
 
-    &:hover {
-      color: inherit;
-    }
-  }
+.mat-expansion-panel,
+.mat-expansion-panel-header {
+  color: var(--mdc-filled-text-field-label-text-color);
+  font-family: var(--mdc-filled-text-field-label-text-font);
+  font-size: var(--mdc-filled-text-field-label-text-size);
+  font-weight: var(--mdc-filled-text-field-label-text-weight);
+  letter-spacing: var(--mdc-filled-text-field-label-text-tracking);
 }
 
 .suffix {
   float: right;
 }
+
+.mat-mdc-dialog-actions {
+  padding: var(--mat-dialog-with-actions-content-padding, 20px 24px);
+}