Environment Warning Banner Implementation Plan

[render93]

As a developer working on the DevEats application
I want a visible warning banner when running in non-production environments
So that I am always aware of which environment I'm working in and avoid making changes to production data by mistake.

Acceptance Criteria:

• Banner displays at the top of all pages when ASPNETCORE_ENVIRONMENT is NOT "Production"
• Banner is fixed at the top of the viewport and remains visible during scrolling
• Banner shows the current environment name (e.g., "DEVELOPMENT", "STAGING")
• Banner uses red color scheme to indicate warning/danger
• Banner is completely hidden in production environment (not rendered in DOM)
• Banner appears on application load with a smooth slide-down animation

Objective

Add a visible warning banner to all pages that displays when the application is NOT running in production environment, based on the ASPNETCORE_ENVIRONMENT variable.

Recommended Approach

Implementation Location

Modify /Users/gerardogreco/Documents/Lavoro/deveats/src/DevEats.Web/Shared/MainLayout.razor to add the environment warning banner.

Rationale: MainLayout.razor is the master layout for all pages, ensuring the banner appears application-wide.

Banner Placement

Position the banner as a fixed element at the top of the viewport using position: fixed; top: 0.

Rationale (based on user preference):

• Always visible even during page scroll
• Maximum persistence of warning message
• Cannot be dismissed - ensures users are always aware of the environment
• Navbar will need to account for banner height with top: 56px positioning

Design Specifications

Visual Style:

• Background: Red gradient (#e53e3e to #c53030) for danger/warning indication
• Icon: Bootstrap Icon bi-exclamation-triangle-fill (white, 1.2rem)
• Text: White, displays "This is a [ENVIRONMENT_NAME] environment - NOT production"
• No close button (per user preference - always visible)
• Height: 56px fixed
• Padding: 1rem horizontal, 0.75rem vertical
• Position: Fixed at top of viewport (position: fixed; top: 0; left: 0; right: 0)
• Z-index: 1050 (higher than navbar's 1000)

Behavior:

• Only renders when !Environment.IsProduction() is true
• Always visible - cannot be dismissed (per user preference)
• Fixed position at top of viewport
• Slides down smoothly on page load (300ms animation)
• Navbar positioned 56px from top to accommodate banner
• Responsive layout for mobile devices

Technical Implementation

1. Environment Detection

@inject IWebHostEnvironment Environment

Use the Environment.IsProduction() method to conditionally render the banner.

2. Conditional Rendering

@if (!Environment.IsProduction())
{
    <!-- Banner markup -->
}

Note: No state management needed since banner is always visible (not dismissible).

3. Helper Method

Add @code block with:

• GetEnvironmentDisplayName() helper to format environment name

4. Styling

Add CSS to the existing <style> block in MainLayout.razor:

• .environment-banner - main container with red gradient, fixed positioning, z-index 1050
• .banner-content - flex layout for centered content
• .banner-icon-label - icon and text layout
• Slide-down animation on page load using @keyframes
• Adjust .modern-navbar to use top: 56px when banner is present
• Responsive media queries for mobile devices

Files to Modify

File	Changes
/Users/gerardogreco/Documents/Lavoro/deveats/src/DevEats.Web/Shared/MainLayout.razor	- Add @inject IWebHostEnvironment Environment directive - Add banner HTML markup as first element with fixed positioning - Add @code block with helper method - Add CSS styles for fixed banner with slide-down animation - Update navbar CSS to position below banner (top: 56px)

Implementation Steps

1. Add the @inject directive at the top of MainLayout.razor
2. Insert banner HTML markup as the first element in the layout (fixed position)
3. Add @code block after the closing </style> tag with:
   • GetEnvironmentDisplayName() helper method
4. Add CSS styles to the existing <style> block:
   • Banner container with fixed positioning (top: 0, z-index: 1050)
   • Banner content with centered flex layout
   • Slide-down animation on page load
   • Update navbar positioning to top: 56px when banner is present
   • Responsive media queries
5. Test in Development environment (banner should appear fixed at top)
6. Test in Production environment (banner should NOT appear)
7. Test scrolling behavior (banner should remain fixed at top)
8. Verify navbar positioning doesn't overlap with banner

Testing Checklist

• Banner appears in Development environment
• Banner does NOT appear in Production environment
• Environment name displays correctly (e.g., "DEVELOPMENT", "STAGING")
• Banner remains fixed at top during page scroll
• Banner animates smoothly on page load (slide-down)
• Navbar is positioned correctly below banner (no overlap)
• Responsive layout works on mobile devices
• Banner appears on all pages (Home, Restaurant Details)
• No console errors or warnings

Environment Configuration Reference

The application uses ASPNETCORE_ENVIRONMENT variable which is:

• Set in Program.cs via builder.Environment.EnvironmentName
• Loaded from environment variables and appsettings files
• Accessible in Blazor components via IWebHostEnvironment injection

Standard values:

• "Development" - Local development
• "Staging" - Pre-production testing
• "Production" - Live production environment

Accessibility Considerations

• High contrast ratio (white text on red background) meets WCAG AA standards
• Icon + text combination (not relying on color alone)
• Close button is keyboard accessible
• Semantic HTML structure

Performance Impact

Minimal performance impact:

• Simple conditional rendering (no banner in production)
• No network calls or state management overhead
• CSS animations use GPU-accelerated properties
• No JavaScript interop requiredAs a developer working on the DevEats application
  I want a visible warning banner when running in non-production environments
  So that I am always aware of which environment I'm working in and avoid making changes to production data by mistake.

Acceptance Criteria:

• Banner displays at the top of all pages when ASPNETCORE_ENVIRONMENT is NOT "Production"
• Banner is fixed at the top of the viewport and remains visible during scrolling
• Banner shows the current environment name (e.g., "DEVELOPMENT", "STAGING")
• Banner uses red color scheme to indicate warning/danger
• Banner is completely hidden in production environment (not rendered in DOM)
• Banner appears on application load with a smooth slide-down animation

Objective

Add a visible warning banner to all pages that displays when the application is NOT running in production environment, based on the ASPNETCORE_ENVIRONMENT variable.

Recommended Approach

Implementation Location

Modify /Users/gerardogreco/Documents/Lavoro/deveats/src/DevEats.Web/Shared/MainLayout.razor to add the environment warning banner.

Rationale: MainLayout.razor is the master layout for all pages, ensuring the banner appears application-wide.

Banner Placement

Position the banner as a fixed element at the top of the viewport using position: fixed; top: 0.

Rationale (based on user preference):

• Always visible even during page scroll
• Maximum persistence of warning message
• Cannot be dismissed - ensures users are always aware of the environment
• Navbar will need to account for banner height with top: 56px positioning

Design Specifications

Visual Style:

• Background: Red gradient (#e53e3e to #c53030) for danger/warning indication
• Icon: Bootstrap Icon bi-exclamation-triangle-fill (white, 1.2rem)
• Text: White, displays "This is a [ENVIRONMENT_NAME] environment - NOT production"
• No close button (per user preference - always visible)
• Height: 56px fixed
• Padding: 1rem horizontal, 0.75rem vertical
• Position: Fixed at top of viewport (position: fixed; top: 0; left: 0; right: 0)
• Z-index: 1050 (higher than navbar's 1000)

Behavior:

• Only renders when !Environment.IsProduction() is true
• Always visible - cannot be dismissed (per user preference)
• Fixed position at top of viewport
• Slides down smoothly on page load (300ms animation)
• Navbar positioned 56px from top to accommodate banner
• Responsive layout for mobile devices

Technical Implementation

1. Environment Detection

@inject IWebHostEnvironment Environment

Use the Environment.IsProduction() method to conditionally render the banner.

2. Conditional Rendering

@if (!Environment.IsProduction())
{
    <!-- Banner markup -->
}

Note: No state management needed since banner is always visible (not dismissible).

3. Helper Method

Add @code block with:

• GetEnvironmentDisplayName() helper to format environment name

4. Styling

Add CSS to the existing <style> block in MainLayout.razor:

• .environment-banner - main container with red gradient, fixed positioning, z-index 1050
• .banner-content - flex layout for centered content
• .banner-icon-label - icon and text layout
• Slide-down animation on page load using @keyframes
• Adjust .modern-navbar to use top: 56px when banner is present
• Responsive media queries for mobile devices

Files to Modify

File	Changes
/Users/gerardogreco/Documents/Lavoro/deveats/src/DevEats.Web/Shared/MainLayout.razor	- Add @inject IWebHostEnvironment Environment directive - Add banner HTML markup as first element with fixed positioning - Add @code block with helper method - Add CSS styles for fixed banner with slide-down animation - Update navbar CSS to position below banner (top: 56px)

Implementation Steps

1. Add the @inject directive at the top of MainLayout.razor
2. Insert banner HTML markup as the first element in the layout (fixed position)
3. Add @code block after the closing </style> tag with:
   • GetEnvironmentDisplayName() helper method
4. Add CSS styles to the existing <style> block:
   • Banner container with fixed positioning (top: 0, z-index: 1050)
   • Banner content with centered flex layout
   • Slide-down animation on page load
   • Update navbar positioning to top: 56px when banner is present
   • Responsive media queries
5. Test in Development environment (banner should appear fixed at top)
6. Test in Production environment (banner should NOT appear)
7. Test scrolling behavior (banner should remain fixed at top)
8. Verify navbar positioning doesn't overlap with banner

Testing Checklist

• Banner appears in Development environment
• Banner does NOT appear in Production environment
• Environment name displays correctly (e.g., "DEVELOPMENT", "STAGING")
• Banner remains fixed at top during page scroll
• Banner animates smoothly on page load (slide-down)
• Navbar is positioned correctly below banner (no overlap)
• Responsive layout works on mobile devices
• Banner appears on all pages (Home, Restaurant Details)
• No console errors or warnings

Environment Configuration Reference

The application uses ASPNETCORE_ENVIRONMENT variable which is:

• Set in Program.cs via builder.Environment.EnvironmentName
• Loaded from environment variables and appsettings files
• Accessible in Blazor components via IWebHostEnvironment injection

Standard values:

• "Development" - Local development
• "Staging" - Pre-production testing
• "Production" - Live production environment

Accessibility Considerations

• High contrast ratio (white text on red background) meets WCAG AA standards
• Icon + text combination (not relying on color alone)
• Close button is keyboard accessible
• Semantic HTML structure

Performance Impact

Minimal performance impact:

• Simple conditional rendering (no banner in production)
• No network calls or state management overhead
• CSS animations use GPU-accelerated properties
• No JavaScript interop required