New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

MainLayout NEO: Header #2838

Closed

yomybaby opened this issue Nov 12, 2024 · 0 comments · Fixed by #2844

Assignees

Member

yomybaby commented Nov 12, 2024

No description provided.

yomybaby assigned yomybaby and lizable and unassigned lizable

yomybaby changed the title ~~WebUI NEO MainLayout: Header~~ MainLayout: NEO Header

yomybaby changed the title ~~MainLayout: NEO Header~~ MainLayout NEO: Header

yomybaby mentioned this issue

feat: Main layout NEO header #2844

Merged

yomybaby added a commit that referenced this issue


          feat: Main layout NEO header (#2844)

f3ac7fa

Resolves #2838

## Neo Header

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/XqC2uNFuj0wg8I60sMUh/f89f704f-9534-464f-a472-d6d5a277c190.png)

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/XqC2uNFuj0wg8I60sMUh/583b2b0a-3f47-416c-8fcd-7c8d9eb5d7c0.png)

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/XqC2uNFuj0wg8I60sMUh/bdc65869-af10-4aeb-818e-aa0993f08f81.png)

<img width="1291" alt="image" src="https://github.com/user-attachments/assets/d603357c-9691-4cd1-a399-f54e0fef7b9c">

**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

yomybaby closed this as completed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment