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

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-20 23:46:44 +05:30
parent 1ff256d220
commit b7f612c2f6
3 changed files with 206 additions and 27 deletions
@@ -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;
+  }
+}