Add pink prices toggle feature to WebApp

[Copilot]

Overview

This PR implements a toggle switch in the WebApp header that allows users to make all prices pink throughout the application. When enabled, prices on all pages instantly turn pink; when disabled, they return to their original color.

Implementation

The feature uses a minimal, CSS-based approach with reactive state management:

Architecture

1. State Management - Created PinkPricesState service (scoped to user session) that manages the toggle state and fires events when changed
2. UI Toggle - Added a checkbox in HeaderBar.razor with two-way binding to the state
3. Reactive Updates - MainLayout.razor subscribes to state changes and applies a conditional CSS class to the page wrapper
4. CSS Styling - Single CSS rule in app.css targets all elements with the price class when pink mode is active

Flow

User clicks checkbox → State updates → Layout re-renders → CSS class applied → All prices turn pink

Code Example

State Service:

public class PinkPricesState
{
    public bool IsPinkPricesEnabled { get; set; }
    public event Action? OnChange;
}

CSS Rule:

.pink-prices-mode .price {
    color: pink !important;
}

Changes Made

• Created PinkPricesState.cs - State management service
• Updated Extensions.cs - Registered service in DI container
• Updated HeaderBar.razor - Added toggle checkbox
• Updated HeaderBar.razor.css - Styled the toggle
• Updated MainLayout.razor - Added reactive wrapper with conditional CSS class
• Updated CartPage.razor - Added price class to totals
• Updated Orders.razor - Added price class to order totals
• Updated app.css - Added pink prices CSS rule

Total: 8 files, ~85 lines of code

Affected Pages

All price displays across the application:

• Catalog page (product grid)
• Item detail page (product price)
• Shopping cart (line items, subtotals, grand total)
• Order history (order totals)

Benefits

• ✅ Minimal Changes - Only 8 files modified, surgical approach
• ✅ High Performance - CSS-based, zero JavaScript overhead
• ✅ No Breaking Changes - All existing functionality intact
• ✅ Maintainable - Consistent price class naming throughout
• ✅ Scalable - Automatically applies to any future price elements
• ✅ Session-Scoped - Toggle state persists during user session

Testing

1. Run the application: dotnet run --project src/eShop.AppHost/eShop.AppHost.csproj
2. Navigate to the WebApp
3. Locate the "Pink Prices" checkbox in the header
4. Toggle it on - all prices turn pink immediately
5. Navigate between catalog, item details, cart, and orders - prices remain pink
6. Toggle it off - prices return to normal

Build status: ✅ Compiles successfully with 0 warnings, 0 errors

Fixes #[issue-number]

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Make all prices pink</issue_title>
<issue_description>On the web version of this shop I want to have a switch and whenever I switch this switch on all prices should be pink.</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes #85

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.