[SMT-66] [SMT-67] [SMT-68] Change header colours#2245
Conversation
There was a problem hiding this comment.
Pull request overview
Updates environment-specific colouring for the application header so non-production environments can be visually distinguished consistently.
Changes:
- Add environment-specific background colours for
#header-maininheader.scss. - Apply the computed
environmentClassto the outer#headercontainer (usingclassnames) so the new CSS selectors take effect.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
client/src/sass/header.scss |
Adds env-specific styling rules for #header-main background colour. |
client/src/js/views/TopNav.jsx |
Adds classnames and applies environmentClass to the #header wrapper element. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| let environmentClass = ''; | ||
| if (this.props.currentUser.environment === 'Development') { | ||
| environmentClass = 'env-dev'; | ||
| } else if (this.props.currentUser.environment === 'Test') { | ||
| environmentClass = 'env-test'; | ||
| } else if (this.props.currentUser.environment === 'Training') { | ||
| environmentClass = 'env-trn'; | ||
| } else if (this.props.currentUser.environment === 'UAT') { | ||
| environmentClass = 'env-uat'; | ||
| } | ||
|
|
||
| return ( | ||
| <div id="header" className="sticky-top"> | ||
| <div id="header" className={classNames('sticky-top', environmentClass)}> | ||
| <Navbar id="header-main"> |
There was a problem hiding this comment.
Adding environmentClass to the outer #header means the Training environment (env-trn) will now style #header-main (via header.scss) but won’t style #top-nav (no .env-trn rules exist). This will produce mismatched colours between the main header and the nav in Training. Consider either mapping Training to env-uat (so existing #top-nav.env-uat styles apply) or adding corresponding .env-trn styles for #top-nav.
| } | ||
|
|
||
| &.env-trn #header-main, | ||
| &.env-uat #header-main { | ||
| background-color: $nav-background-color-uat; | ||
| } |
There was a problem hiding this comment.
env-trn is grouped with env-uat for #header-main, but there are no corresponding #top-nav.env-trn styles (only env-test/dev/uat). As a result, Training will get UAT colouring for #header-main while #top-nav stays at the default colour. Either add &.env-trn rules under #top-nav (likely matching UAT), or remove env-trn from here and map Training to an existing environment class.
| } | ||
|
|
||
| #header { |
There was a problem hiding this comment.
There are now two separate #header { ... } blocks in this file (one for banner/working-indicator and one for env-specific #header-main background). Consider merging them into a single #header block to keep related header styling together and reduce the chance of future conflicting edits.
| } | |
| #header { |
No description provided.