Skip to content

Environment banner text hardcoded to white, unreadable on light banner colours #7604

@adamvialpando

Description

@adamvialpando

Describe the bug

The environment banner (the "butter bar" shown when banner_text is configured on an environment) renders its text in hardcoded white. When the chosen banner_colour is light, the text becomes effectively invisible against the background.

To reproduce

  1. Open an environment's settings
  2. Enable the banner and set banner_text (e.g. Production [Be Careful!])
  3. Navigate to any page in that environment (Features, Segments, etc.)

The banner renders white-on-light and is unreadable.

Expected behaviour

The banner text should remain legible regardless of the chosen banner_colour. Text color should be derived from the background.

Affected code

frontend/web/components/ButterBar.tsx lines 73-85 hardcode color: 'white':

Screenshots

Will attach after issue creation (a banner with a pale cream banner_colour showing white text that is barely visible)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions