Goal
Extend the existing banner component with new colour variants and standardize its placement across the site.
Banner variants
Banner placement
Scope
Frontend only: component updates and placement implementation.
Background
The banner component currently exists in one colour variant (orange). Two additional system colour variants are needed to communicate different message types. The banner also needs a standardized position site-wide, rendered below the navigation bar.
Acceptance Criteria
New colour variants
Two new variants are added to the existing banner component:
- Green — used for success or informational messages.
- Red — used for error or warning messages.
Each variant retains the same structure as the existing banner: an icon, message text, and a dismiss ("×") button.
Both full-width and compact (smaller footprint) versions are supported per variant, as shown in the designs.
Universal placement
- Banners are rendered directly below the navigation bar, site-wide.
- Only one banner is displayed at a time.
- The banner is dismissible via the "×" button.
- When JS is turned off, dismissing the banner will reload the page.
Description:
We can currently see legacy-system toast messages on some V3 views after certain actions complete – for example, successfully logging in, logging out, editing the user profile, and so on.
Green and Red Banners
Orange Banner
Goal:
We want to suppress these messages on V3 views – the legacy experience should remain intact. Before removing anything, audit what's currently being shown and flag anything worth keeping.
Suggested steps:
- Identify and list all toast/legacy messages currently rendered on V3 views (login, logout, profile edit, etc.).
- Flag any messages that seem critical or user-facing enough to preserve, and raise them with @henryajisegiri for a decision.
- For banners we intend to keep, update the UI to match the banner style and colour (green, red and orange) in the Figma file
- For banners to be removed, remove the message banner from the V3 base template, scoping the change to the V3 flag so legacy views are unaffected.
Out of Scope
- Banner trigger logic (handled per feature ticket)
- Orange banner variant (already implemented)
Goal
Extend the existing banner component with new colour variants and standardize its placement across the site.
Banner variants
Banner placement
Scope
Frontend only: component updates and placement implementation.
Background
The banner component currently exists in one colour variant (orange). Two additional system colour variants are needed to communicate different message types. The banner also needs a standardized position site-wide, rendered below the navigation bar.
Acceptance Criteria
New colour variants
Two new variants are added to the existing banner component:
Each variant retains the same structure as the existing banner: an icon, message text, and a dismiss ("×") button.
Both full-width and compact (smaller footprint) versions are supported per variant, as shown in the designs.
Universal placement
Description:
We can currently see legacy-system toast messages on some V3 views after certain actions complete – for example, successfully logging in, logging out, editing the user profile, and so on.
Green and Red Banners
Orange Banner
Goal:
We want to suppress these messages on V3 views – the legacy experience should remain intact. Before removing anything, audit what's currently being shown and flag anything worth keeping.
Suggested steps:
Out of Scope