From e13a06e18af5c82308be563957659008cea1fc6d Mon Sep 17 00:00:00 2001
From: Ionwyn Sean <ionwynsean@gmail.com>
Date: Tue, 7 Apr 2026 07:20:51 -0700
Subject: [PATCH] [SMT-66] [SMT-67] [SMT-68] Change header colours

---
 client/src/js/views/TopNav.jsx |  3 ++-
 client/src/sass/header.scss    | 15 +++++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/client/src/js/views/TopNav.jsx b/client/src/js/views/TopNav.jsx
index cc8ce8a57..cd7ace2f5 100644
--- a/client/src/js/views/TopNav.jsx
+++ b/client/src/js/views/TopNav.jsx
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 import { withRouter, NavLink } from 'react-router-dom';
+import classNames from 'classnames';
 import _ from 'lodash';
 import {
   Navbar,
@@ -79,7 +80,7 @@ class TopNav extends React.Component {
     }
 
     return (
-      <div id="header" className="sticky-top">
+      <div id="header" className={classNames('sticky-top', environmentClass)}>
         <Navbar id="header-main">
           <Container className={'justify-content-start'}>
             <Navbar.Brand href="http://www2.gov.bc.ca/gov/content/home">
diff --git a/client/src/sass/header.scss b/client/src/sass/header.scss
index da8e81e26..8e3af52c3 100644
--- a/client/src/sass/header.scss
+++ b/client/src/sass/header.scss
@@ -38,6 +38,21 @@ $nav-active-background-color-uat: lighten($nav-background-color-uat, 10%);
   }
 }
 
+#header {
+  &.env-dev #header-main {
+    background-color: $nav-background-color-dev;
+  }
+
+  &.env-test #header-main {
+    background-color: $nav-background-color-test;
+  }
+
+  &.env-trn #header-main,
+  &.env-uat #header-main {
+    background-color: $nav-background-color-uat;
+  }
+}
+
 #top-nav {
   margin-bottom: 0;
   background-color: $nav-background-color;