feat: redesign shared form dialog — header, styled fields, actions

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/app/shared/form-dialog/form-dialog.component.html

@@ -6,31 +6,43 @@
   file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->
 
-<h1 mat-dialog-title>{{ data.title }}</h1>
+<div class="fd-dialog">
+  <div class="fd-header">
+    <h1 mat-dialog-title class="fd-title">{{ data.title }}</h1>
+    <button mat-icon-button mat-dialog-close class="fd-close" aria-label="Close">
+      <i class="fa fa-times"></i>
+    </button>
+  </div>
 
-<div
-  mat-dialog-content
-  [formGroup]="form"
-  [ngClass]="[
-    layout.columns > 1 ? 'flex flex-wrap gap-' + layout.gap + 'percent' : 'layout-column',
-    'responsive-column'
-  ]"
->
-  @for (formfield of formfields; track formfield) {
-    <div [ngClass]="'flex-' + layout.flex + ' responsive-flex-full'">
-      <mifosx-formfield [formfield]="formfield" [form]="form" class="flex-fill"></mifosx-formfield>
-    </div>
-  }
-</div>
-
-<mat-dialog-actions class="layout-row layout-xs-column layout-align-center gap-2percent" align="end">
-  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.' + layout.cancelButtonText | translate }}</button>
-  <button
-    mat-raised-button
-    color="primary"
-    [mat-dialog-close]="{ data: form }"
-    [disabled]="!form.valid || form.pristine"
+  <div
+    mat-dialog-content
+    class="fd-content"
+    [formGroup]="form"
+    [ngClass]="[
+      layout.columns > 1 ? 'fd-grid fd-grid--cols-' + layout.columns : 'fd-grid fd-grid--single',
+      'responsive-column'
+    ]"
   >
-    {{ 'labels.buttons.' + layout.addButtonText | translate }}
-  </button>
-</mat-dialog-actions>
+    @for (formfield of formfields; track formfield) {
+      <div class="fd-field" [ngClass]="layout.columns > 1 ? 'fd-field--multi' : ''">
+        <mifosx-formfield [formfield]="formfield" [form]="form" class="flex-fill"></mifosx-formfield>
+      </div>
+    }
+  </div>
+
+  <mat-dialog-actions class="fd-actions" align="end">
+    <button mat-stroked-button mat-dialog-close class="fd-btn fd-btn--cancel">
+      {{ 'labels.buttons.' + layout.cancelButtonText | translate }}
+    </button>
+    <button
+      mat-flat-button
+      color="primary"
+      [mat-dialog-close]="{ data: form }"
+      [disabled]="!form.valid || form.pristine"
+      class="fd-btn fd-btn--submit"
+    >
+      <i class="fa fa-check fd-btn__icon"></i>
+      {{ 'labels.buttons.' + layout.addButtonText | translate }}
+    </button>
+  </mat-dialog-actions>
+</div>