TEST: Left nav chaos — hot-pink text, all-caps, bright green background, 😬 icons

[Copilot]

Makes the left navigation pane an intentionally absurd visual experience per the acceptance criteria.

Nav changes (dashboard-root)

• Background: mat-drawer gets background-color: #00ff00
• Text: .drawer-container inherits color: hotpink + text-transform: uppercase
• Icons: All <mat-icon> elements replaced with <span class="icon">😬</span> — covers 5 route links and the logout button

<!-- Before -->
<mat-icon class="icon">{{ link.iconType }}</mat-icon>

<!-- After -->
<span class="icon">😬</span>

Tests

• dashboard-root.component.spec.ts: Enabled (was xdescribe), added assertions for exact emoji icon count (6), absence of mat-icon elements, nav label rendering, and drawer structure
• experiment-root-page.component.spec.ts: New spec verifying ExperimentRootPageComponent renders its three child components correctly

The project's jest.config.js excludes src/app/features/dashboard/ from automated runs (existing pattern). Tests can be run manually with npx jest --testPathPatterns dashboard-root once deps are installed.

[bcb37]

@copilot The spec item "all text is hot-pink" is not met.

[danoswaltCL]

@copilot hey, did you see @bcb37 's comment? you have work to do

[Copilot]

@copilot The spec item "all text is hot-pink" is not met.

Fixed in the latest commit. The issue was that dashboard-root.theme.scss was setting color: mat.m2-get-color-from-palette($foreground, text) on .nav-item, overriding the inherited hotpink. Two changes were made:

1. Updated the theme mixin to set color: hotpink on .nav-item instead of the Material palette color.
2. Added a { color: hotpink } inside .drawer-container in the component SCSS to cover anchor elements (logo link, profile link, logout link) which browsers style independently of CSS inheritance.