coloring change

ui/winstudentgoaltracker/src/app/desktop/components/edit-event-modal/edit-event-modal.ts

@@ -4,7 +4,7 @@ import { ModalShell } from '../modal-shell/modal-shell';
 import { StudentService } from '../../../shared/services/student.service';
 import { BenchmarkDto } from '../../../shared/classes/benchmark.dto';
 import { ProgressEventDto } from '../../../shared/classes/progress-event.dto';
-import { getCategoryColor } from '../../../shared/classes/category-colors';
+import { GOAL_COLOR } from '../../../shared/classes/category-colors';
 
 @Component({
     selector: 'app-edit-event-modal',
@@ -17,7 +17,7 @@ export class EditEventModal {
 
     readonly studentId = input.required<string>();
     readonly goalId = input.required<string>();
-    readonly goalCategory = input<string>('');
+
     readonly benchmarks = input<BenchmarkDto[]>([]);
     /** null for new event, populated for edit */
     readonly event = input<ProgressEventDto | null>(null);
@@ -47,7 +47,7 @@ export class EditEventModal {
     }
 
     get colors() {
-        return getCategoryColor(this.goalCategory());
+        return GOAL_COLOR;
     }
 
     isBenchmarkSelected(id: string): boolean {

ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.html

@@ -18,7 +18,7 @@
 }
 @if (showEditEventModal()) {
 <app-edit-event-modal [studentId]="studentId()!" [goalId]="selectedGoal()!.goalId"
-    [goalCategory]="selectedGoal()!.category" [benchmarks]="goalBenchmarks()"
+    [benchmarks]="goalBenchmarks()"
     [event]="showEditEventModal() === 'new' ? null : $any(showEditEventModal())" (saved)="onEventSaved()"
     (closed)="showEditEventModal.set(null)" />
 }
@@ -32,9 +32,6 @@
     <div class="goal-tabs">
         @for (g of goals(); track g.goalId) {
         <button class="goal-tab" [class.active]="selectedGoalId() === g.goalId || (selectedGoal()?.goalId === g.goalId)"
-            [style.border-color]="(selectedGoalId() === g.goalId || selectedGoal()?.goalId === g.goalId) ? getCatColor(g.category).border : '#E5E5E0'"
-            [style.background]="(selectedGoalId() === g.goalId || selectedGoal()?.goalId === g.goalId) ? getCatColor(g.category).bg : '#FFF'"
-            [style.color]="(selectedGoalId() === g.goalId || selectedGoal()?.goalId === g.goalId) ? getCatColor(g.category).text : '#666'"
             (click)="onSelectGoal(g.goalId)">
             {{ g.category }}
         </button>
@@ -49,8 +46,7 @@
     <!-- Goal Card -->
     <div class="goal-card">
         <div class="goal-card-header">
-            <span class="goal-badge" [style.color]="goalColors().text"
-                [style.background]="goalColors().bg">{{ selectedGoal()!.category }} Goal</span>
+            <span class="goal-badge">{{ selectedGoal()!.category }} Goal</span>
             @if (selectedGoal()!.targetCompletionDate) {
             <span class="goal-due">Due {{ formatDate(selectedGoal()!.targetCompletionDate) }}</span>
             }
@@ -67,14 +63,10 @@
     <!-- Sub Tabs -->
     <div class="sub-tabs">
         <button class="sub-tab" [class.active]="activeTab() === 'benchmarks'"
-            [style.color]="activeTab() === 'benchmarks' ? goalColors().text : '#888'"
-            [style.border-bottom-color]="activeTab() === 'benchmarks' ? goalColors().accent : 'transparent'"
             (click)="onTabChange('benchmarks')">
             Benchmarks ({{ goalBenchmarks().length }})
         </button>
         <button class="sub-tab" [class.active]="activeTab() === 'progress'"
-            [style.color]="activeTab() === 'progress' ? goalColors().text : '#888'"
-            [style.border-bottom-color]="activeTab() === 'progress' ? goalColors().accent : 'transparent'"
             (click)="onTabChange('progress')">
             Progress Events ({{ sortedProgressEvents().length }})
         </button>
@@ -83,10 +75,11 @@
     <!-- Benchmarks Tab -->
     @if (activeTab() === 'benchmarks') {
     <div class="tab-content">
+        <button class="add-btn" (click)="onAddBenchmark()">+ Add Benchmark</button>
         @for (b of goalBenchmarks(); track b.benchmarkId) {
         <div class="benchmark-card">
             <div class="benchmark-header">
-                <span class="benchmark-name" [style.color]="goalColors().text">{{ b.shortName || b.benchmark }}</span>
+                <span class="benchmark-name">{{ b.shortName || b.benchmark }}</span>
                 <button class="edit-icon" (click)="onEditBenchmark(b)" aria-label="Edit benchmark">
                     <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="#999" stroke-width="1.5"
                         stroke-linecap="round" stroke-linejoin="round">
@@ -97,18 +90,17 @@
             <p class="benchmark-desc">{{ b.benchmark }}</p>
         </div>
         }
-        <button class="add-btn" (click)="onAddBenchmark()">+ Add Benchmark</button>
     </div>
     }
 
     <!-- Progress Tab -->
     @if (activeTab() === 'progress') {
     <div class="tab-content timeline">
+        <button class="add-btn" (click)="onNewEvent()">+ Log Progress Event</button>
         <div class="timeline-line"></div>
         @for (ev of sortedProgressEvents(); track ev.progressEventId) {
         <div class="timeline-item">
-            <div class="timeline-dot" [style.background]="goalColors().bg"
-                [style.border-color]="goalColors().border"></div>
+            <div class="timeline-dot"></div>
             <div class="event-card">
                 <div class="event-header">
                     <span class="event-date">{{ formatDate(ev.createdAt) }}</span>
@@ -123,7 +115,6 @@
             </div>
         </div>
         }
-        <button class="add-btn" (click)="onNewEvent()">+ Log Progress Event</button>
     </div>
     }
 </div>

ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.scss

@@ -65,6 +65,9 @@
 
     &.active {
         font-weight: 600;
+        border-color: #818CF8;
+        background: #EEF2FF;
+        color: #4338CA;
     }
 
     &.add-goal {
@@ -104,6 +107,8 @@
     letter-spacing: 0.05em;
     padding: 3px 8px;
     border-radius: var(--radius-sm);
+    color: #4338CA;
+    background: #EEF2FF;
 }
 
 .goal-due {
@@ -156,6 +161,8 @@
 
     &.active {
         font-weight: 600;
+        color: #4338CA;
+        border-bottom-color: #6366F1;
     }
 }
 
@@ -184,6 +191,7 @@
 .benchmark-name {
     font-weight: 600;
     font-size: 14px;
+    color: #4338CA;
 }
 
 .benchmark-events {
@@ -227,7 +235,8 @@
     width: 12px;
     height: 12px;
     border-radius: 50%;
-    border: 2px solid;
+    border: 2px solid #818CF8;
+    background: #EEF2FF;
 }
 
 .event-card {

ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.ts

@@ -5,7 +5,6 @@ import { StudentCardDto } from '../../../shared/classes/student-card.dto';
 import { StudentGoalItem } from '../../../shared/classes/student-goal';
 import { BenchmarkDto } from '../../../shared/classes/benchmark.dto';
 import { ProgressEventDto } from '../../../shared/classes/progress-event.dto';
-import { getCategoryColor, CategoryColor } from '../../../shared/classes/category-colors';
 import { EditGoalModal } from '../edit-goal-modal/edit-goal-modal';
 import { EditBenchmarkModal } from '../edit-benchmark-modal/edit-benchmark-modal';
 import { EditEventModal } from '../edit-event-modal/edit-event-modal';
@@ -81,9 +80,6 @@ export class Workspace {
         return this.goals().find(g => g.goalId === id) ?? null;
     });
 
-    protected readonly goalColors = computed<CategoryColor>(() => {
-        return getCategoryColor(this.selectedGoal()?.category ?? '');
-    });
 
     protected readonly goalBenchmarks = computed<BenchmarkDto[]>(() => {
         const goalId = this.selectedGoal()?.goalId;
@@ -169,26 +165,12 @@ export class Workspace {
 
     // ************************ Formatting Helpers **********************
 
-    getCatColor(category: string): CategoryColor {
-        return getCategoryColor(category);
-    }
-
     formatDate(d: string | Date | null): string {
         if (!d) return '';
         const date = new Date(d);
         return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
     }
 
-    truncate(text: string, max: number): string {
-        return text.length > max ? text.slice(0, max) + '…' : text;
-    }
-
-    getRelatedEventCount(benchmarkId: string): number {
-        // We don't have benchmark associations in the event DTO from the list endpoint,
-        // so we return 0. The mockup shows this but we can't derive it without extra API calls.
-        return 0;
-    }
-
     // ********************** Support Procedures ***********************
 
     private async loadStudentData(studentId: string) {