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;