feat: Main layout NEO header

[yomybaby]

Resolves #2838

Neo Header

Changes:

• Redesigned the WebUI header with a new orange theme and improved layout
• Added ghost style select component for better visibility on colored backgrounds
• Added reverse theme provider component to handle light/dark theme switching
• Updated login session extension UI with a more compact design
• Added classnames dependency for better CSS class handling
• Updated translations for "Extend Login Session" across all languages

Key UI/UX Improvements:

• Header now uses a distinct orange background color for better visual hierarchy
• Project selector uses ghost style for better contrast on colored backgrounds
• Login session timer shows condensed format on smaller screens
• Notification and user menu buttons have consistent styling with the header theme

Technical Details:

• Removed inline styles in favor of styled components
• Added ReverseThemeProvider for proper light/dark theme handling in the header
• Updated theme configuration with new color tokens and layout settings
• Improved responsive behavior for mobile devices

[graphite-app]

Your org requires the Graphite merge queue for merging into main

Add the label “flow:merge-queue” to the PR and Graphite will automatically add it to the merge queue when it’s ready to merge. Or use the label “flow:hotfix” to add to the merge queue as a hot fix.

You must have a Graphite account and log in to Graphite in order to use the merge queue. Sign up using this link.

[yomybaby]

• feat: WebUILink and WebUINavigate component #2846 : 2 dependent PRs (#2847 , #2858 )
• feat: Main layout NEO header #2844 👈 (View in Graphite)
• main

---

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

• flow:merge-queue - adds this PR to the back of the merge queue
• flow:hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has required the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[github-actions]

Coverage report for ./react

St.❔	Category	Percentage	Covered / Total
🔴	Statements	5.37% (-0.01% 🔻)	395/7356
🔴	Branches	4.66% (-0.01% 🔻)	237/5087
🔴	Functions	3.21% (-0.01% 🔻)	78/2429
🔴	Lines	5.28% (-0.01% 🔻)	380/7193

Show new covered files 🐣

St.❔	File	Statements	Branches	Functions	Lines
🔴	... / ReverseThemeProvider.tsx	0%	0%	0%	0%

Show files with reduced coverage 🔻

St.❔	File	Statements	Branches	Functions	Lines
🔴	... / BAINotificationButton.tsx	0%	0% (-100% 🔻)	0%	0%

Test suite run success

124 tests passing in 14 suites.

Report generated by 🧪jest coverage report action from 9fc59ae

[ironAiken2]

Is there a reason you only added bottenRender to certain buttons?

[yomybaby]

@ironAiken2 In the NEO UI, the header uses a reversed theme: white text in light mode and black text in dark mode. Therefore, we need to apply the reversed theme to the button only, excluding the Dropdown and Notification drawer.
With the buttonRender, we can wrap the button depending on the situation.

[ironAiken2]

Is this different from wrapping it in a ReserveThemeProvider without a buttonRender?
<ReserveThemeProvider> <BAINotificationButton /> </ReserveThemeProvider

[ironAiken2]

LGTM

[graphite-app]

Merge activity

• Nov 20, 1:54 AM EST: A user added this pull request to the Graphite merge queue.
• Nov 20, 2:00 AM EST: A user merged this pull request with the Graphite merge queue.