From e529f101b79d93fcb099370c5de9f9ae0cc99bcc Mon Sep 17 00:00:00 2001 From: Bangara Raju Kottedi Date: Mon, 16 Feb 2026 09:24:45 +0530 Subject: [PATCH] fix: update project categories check and adjust border style in project detail popup --- .../project-detail-popup.html | 2 +- .../project-detail-popup.scss | 2 +- src/app/shared/dynamic-form/dynamic-form.scss | 84 ++++++++++++------- src/styles.scss | 9 +- 4 files changed, 61 insertions(+), 36 deletions(-) diff --git a/src/app/admin/projects/project-detail-popup/project-detail-popup.html b/src/app/admin/projects/project-detail-popup/project-detail-popup.html index 590af70..6af5748 100644 --- a/src/app/admin/projects/project-detail-popup/project-detail-popup.html +++ b/src/app/admin/projects/project-detail-popup/project-detail-popup.html @@ -88,7 +88,7 @@ } - @if (project.categories?.length) { + @if (project.categories.length) {

Categories

diff --git a/src/app/admin/projects/project-detail-popup/project-detail-popup.scss b/src/app/admin/projects/project-detail-popup/project-detail-popup.scss index 7bb14b1..43f650d 100644 --- a/src/app/admin/projects/project-detail-popup/project-detail-popup.scss +++ b/src/app/admin/projects/project-detail-popup/project-detail-popup.scss @@ -4,7 +4,7 @@ max-height: 80vh; overflow-y: auto; background: var(--eerie-black-2, #1e1e1e); - border: 1px solid var(--jet, #383838); + border: 1.2px solid hsla(45, 100%, 72%, 0.45); border-radius: 14px; } diff --git a/src/app/shared/dynamic-form/dynamic-form.scss b/src/app/shared/dynamic-form/dynamic-form.scss index 12fbdc6..3483599 100644 --- a/src/app/shared/dynamic-form/dynamic-form.scss +++ b/src/app/shared/dynamic-form/dynamic-form.scss @@ -1,41 +1,65 @@ /* Dynamic form spacing and material tweaks to match popup theme */ -.full-width { width: 100%; display: block; } +.full-width { + width: 100%; + display: block; +} -mat-form-field.full-width { margin-bottom: 12px; } +mat-form-field.full-width { + margin-bottom: 12px; +} /* Reduce label size slightly to fit popup */ -mat-form-field .mat-form-field-label { font-size: 0.95rem; color: var(--light-gray-70); } +mat-form-field .mat-form-field-label { + font-size: 0.95rem; + color: var(--light-gray-70); +} /* Make input text contrast better */ .mat-input-element, input.mat-mdc-input-element, textarea.mat-mdc-input-element, .mat-mdc-input-element { - color: var(--white-1) !important; + color: var(--white-1) !important; } /* Smaller helper/hint text */ -.mat-hint { color: var(--light-gray-70); font-size: 0.85rem; } +.mat-hint { + color: var(--light-gray-70); + font-size: 0.85rem; +} /* Error styling consistent with theme */ -mat-error { color: #ff8a80; font-size: 0.9rem; } +mat-error { + color: #ff8a80; + font-size: 0.9rem; +} /* Outline border always visible, highlight on focus */ ::ng-deep .mdc-notched-outline__leading, ::ng-deep .mdc-notched-outline__notch, ::ng-deep .mdc-notched-outline__trailing { - border-color: var(--light-gray-70) !important; + border-color: var(--light-gray-70) !important; } ::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading, ::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch, ::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing { - border-color: var(--orange-yellow-crayola) !important; + border-color: var(--orange-yellow-crayola) !important; } /* Make array item fields inline on larger screens */ -.array-item-fields { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; } -.array-item-fields mat-form-field { flex: 1 1 auto; margin-bottom: 0; min-width: 120px; } +.array-item-fields { + display: flex; + gap: 12px; + align-items: baseline; + flex-wrap: wrap; +} + +.array-item-fields mat-form-field { + flex: 1 1 auto; + margin-bottom: 0; + min-width: 120px; +} /* Stack array item fields vertically on small screens */ @media (max-width: 580px) { @@ -52,37 +76,38 @@ mat-error { color: #ff8a80; font-size: 0.9rem; } /* Hide subscript wrapper inside array items so fields align */ .array-item ::ng-deep .mat-mdc-form-field-subscript-wrapper { - display: none; + display: none; } /* Remove link at bottom-right of each array card */ .array-item-actions { - display: flex; - justify-content: center; - margin-top: 4px; + display: flex; + justify-content: center; + margin-top: 4px; } .remove-link { - background: none; - border: none; - color: rgba(255, 255, 255, 0.35); - font-size: 0.8rem; - cursor: pointer; - display: inline-flex; - align-items: center; - gap: 5px; - padding: 4px 8px; - border-radius: 4px; - transition: color 0.2s ease, background 0.2s ease; + background: none; + border: none; + color: rgba(255, 255, 255, 0.35); + font-size: 0.8rem; + cursor: pointer; + display: inline-flex; + align-items: center; + gap: 5px; + padding: 4px 8px; + border-radius: 4px; + transition: color 0.2s ease, background 0.2s ease; - &:hover { - color: hsl(0deg 75% 60%); - background: rgba(255, 70, 70, 0.1); - } + &:hover { + color: hsl(0deg 75% 60%); + background: rgba(255, 70, 70, 0.1); + } } /* Force material label/input colors to match dark popup theme (covers MDC + legacy classes) */ .themed-popup { + ::ng-deep .mat-form-field-label, ::ng-deep .mat-mdc-floating-label, ::ng-deep .mat-form-field .mat-form-field-label { @@ -107,6 +132,7 @@ mat-error { color: #ff8a80; font-size: 0.9rem; } opacity: 1 !important; } } + .form-array { margin-bottom: 20px; padding: 10px 0; diff --git a/src/styles.scss b/src/styles.scss index bfc1d0a..0070d13 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -507,9 +507,9 @@ .mat-mdc-text-field.mat-mdc-focused .mat-mdc-notched-outline .mat-mdc-notched-outline-path { stroke: var(--orange-yellow-crayola) !important; border-color: var(--orange-yellow-crayola) !important; - + } /* Additional overrides: set MDC theme variables and force a gold focus ring */ -.themed-popup { +// .themed-popup { /* Override MDC primary color used by many Material components */ --mdc-theme-primary: var(--orange-yellow-crayola); --mdc-theme-on-primary: var(--smoky-black); @@ -529,10 +529,9 @@ .mat-mdc-text-field.mat-mdc-focused .mat-mdc-notched-outline-path { stroke: var(--orange-yellow-crayola) !important; } -} - box-shadow: 0 6px 18px rgba(36,26,18,0.12) !important; +// } + // box-shadow: 0 6px 18px rgba(36,26,18,0.12) !important; } -} .contacts-list { display: grid; -- 2.47.3