src/app/admin/projects/project-detail-popup/project-detail-popup.html

@@ -88,7 +88,7 @@
     </div>
     }
 
-    @if (project.categories?.length) {
+    @if (project.categories.length) {
     <div class="detail-section">
         <h4>Categories</h4>
         <div class="tag-list">

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;
 }
 

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 {
-.array-item-fields mat-form-field { flex: 1 1 auto; margin-bottom: 0; min-width: 120px; }
+    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;
+    display: flex;
-  justify-content: center;
+    justify-content: center;
-  margin-top: 4px;
+    margin-top: 4px;
 }
 
 .remove-link {
-  background: none;
+    background: none;
-  border: none;
+    border: none;
-  color: rgba(255, 255, 255, 0.35);
+    color: rgba(255, 255, 255, 0.35);
-  font-size: 0.8rem;
+    font-size: 0.8rem;
-  cursor: pointer;
+    cursor: pointer;
-  display: inline-flex;
+    display: inline-flex;
-  align-items: center;
+    align-items: center;
-  gap: 5px;
+    gap: 5px;
-  padding: 4px 8px;
+    padding: 4px 8px;
-  border-radius: 4px;
+    border-radius: 4px;
-  transition: color 0.2s ease, background 0.2s ease;
+    transition: color 0.2s ease, background 0.2s ease;
 
-  &:hover {
+    &:hover {
-    color: hsl(0deg 75% 60%);
+        color: hsl(0deg 75% 60%);
-    background: rgba(255, 70, 70, 0.1);
+        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;

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;