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
+  <div
-  mat-dialog-content
+    mat-dialog-content
-  [formGroup]="form"
+    class="fd-content"
-  [ngClass]="[
+    [formGroup]="form"
-    layout.columns > 1 ? 'flex flex-wrap gap-' + layout.gap + 'percent' : 'layout-column',
+    [ngClass]="[
-    'responsive-column'
+      layout.columns > 1 ? 'fd-grid fd-grid--cols-' + layout.columns : 'fd-grid fd-grid--single',
-  ]"
+      '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"
   >
-    {{ 'labels.buttons.' + layout.addButtonText | translate }}
+    @for (formfield of formfields; track formfield) {
-  </button>
+      <div class="fd-field" [ngClass]="layout.columns > 1 ? 'fd-field--multi' : ''">
-</mat-dialog-actions>
+        <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>

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

@@ -5,3 +5,168 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
+
+$primary: #1a73e8;
+$gray-50: #f8f9fa;
+$gray-100: #f1f3f4;
+$gray-200: #e8eaed;
+$gray-500: #9aa0a6;
+$gray-700: #5f6368;
+$gray-900: #202124;
+$white: #fff;
+
+.fd-dialog {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+// Header
+.fd-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 24px 12px;
+  border-bottom: 1px solid $gray-200;
+}
+
+.fd-title {
+  margin: 0 !important;
+  padding: 0 !important;
+  font-size: 17px !important;
+  font-weight: 600 !important;
+  color: $gray-900;
+  letter-spacing: -0.2px;
+}
+
+.fd-close {
+  width: 32px !important;
+  height: 32px !important;
+  line-height: 32px !important;
+  color: $gray-500;
+  transition: color 0.15s ease, background 0.15s ease;
+
+  &:hover {
+    color: $gray-900;
+    background: $gray-100;
+    border-radius: 50%;
+  }
+
+  i {
+    font-size: 14px;
+  }
+}
+
+// Content area
+.fd-content {
+  padding: 20px 24px !important;
+  max-height: 65vh;
+  overflow-y: auto;
+}
+
+.fd-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  &--cols-2 {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 4px 16px;
+  }
+
+  &--cols-3 {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 4px 16px;
+  }
+}
+
+.fd-field {
+  min-width: 0;
+
+  ::ng-deep {
+    .mat-mdc-form-field {
+      width: 100%;
+    }
+
+    .mat-mdc-text-field-wrapper {
+      background: $gray-50;
+      border-radius: 8px;
+    }
+
+    .mdc-text-field--outlined .mdc-notched-outline__leading,
+    .mdc-text-field--outlined .mdc-notched-outline__trailing,
+    .mdc-text-field--outlined .mdc-notched-outline__notch {
+      border-color: $gray-200;
+    }
+
+    .mdc-text-field--outlined:not(.mdc-text-field--disabled):hover .mdc-notched-outline__leading,
+    .mdc-text-field--outlined:not(.mdc-text-field--disabled):hover .mdc-notched-outline__trailing,
+    .mdc-text-field--outlined:not(.mdc-text-field--disabled):hover .mdc-notched-outline__notch {
+      border-color: $primary;
+    }
+
+    .mat-mdc-floating-label {
+      font-size: 13px;
+      color: $gray-700;
+    }
+
+    input.mat-mdc-input-element {
+      font-size: 14px;
+      color: $gray-900;
+    }
+  }
+}
+
+// Actions
+.fd-actions {
+  padding: 12px 24px 16px !important;
+  border-top: 1px solid $gray-200;
+  gap: 10px;
+  margin: 0 !important;
+}
+
+.fd-btn {
+  min-width: 100px;
+  border-radius: 8px !important;
+  font-size: 13px !important;
+  font-weight: 600 !important;
+  letter-spacing: 0.2px;
+  padding: 0 20px !important;
+  height: 38px !important;
+
+  &--cancel {
+    color: $gray-700 !important;
+    border-color: $gray-200 !important;
+
+    &:hover {
+      background: $gray-50 !important;
+    }
+  }
+
+  &--submit {
+    box-shadow: 0 1px 3px rgba($primary, 0.3) !important;
+  }
+
+  &__icon {
+    margin-right: 6px;
+    font-size: 12px;
+  }
+}
+
+// Responsive
+@media (max-width: 600px) {
+  .fd-grid--cols-2,
+  .fd-grid--cols-3 {
+    grid-template-columns: 1fr;
+  }
+
+  .fd-content {
+    padding: 16px !important;
+  }
+
+  .fd-actions {
+    padding: 12px 16px !important;
+  }
+}

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

@@ -22,6 +22,7 @@ import { FormfieldBase } from './formfield/model/formfield-base';
 import { FormGroupService } from './form-group.service';
 import { CdkScrollable } from '@angular/cdk/scrolling';
 import { NgClass } from '@angular/common';
+import { MatIconButton } from '@angular/material/button';
 import { FormfieldComponent } from './formfield/formfield.component';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
@@ -39,7 +40,8 @@ const layoutGap = 2;
     NgClass,
     FormfieldComponent,
     MatDialogActions,
-    MatDialogClose
+    MatDialogClose,
+    MatIconButton
   ]
 })
 export class FormDialogComponent implements OnInit {