Skip to content

feat: UI/UX: Standardize headers, improve KIT features layout and fix visual bugs#554

Open
jalvaro-lks wants to merge 2 commits intoeclipse-tractusx:mainfrom
jalvaro-lks:feat/frontend-improvements
Open

feat: UI/UX: Standardize headers, improve KIT features layout and fix visual bugs#554
jalvaro-lks wants to merge 2 commits intoeclipse-tractusx:mainfrom
jalvaro-lks:feat/frontend-improvements

Conversation

@jalvaro-lks
Copy link
Copy Markdown
Contributor

@jalvaro-lks jalvaro-lks commented Apr 15, 2026

WHAT

This PR introduces several UI/UX enhancements, layout standardizations, and bug fixes to the ICHub.

Key modifications include:

  • Header Standardization: Implemented a unified header design across all modules (Contact List, Catalog Parts, Serialized Parts, Passport Provisioning, etc.) to ensure visual consistency and consistent color coding.
  • KIT Features Refinement: - Fixed the sidebar selection state when navigating from the root path.
    • Adjusted the alignment and centering of KIT cards for better visual balance.
    • Removed redundant hover effects (shadows) on feature icons within detail pages.
  • Layout & Responsiveness: - Optimized KitDetailsPage by removing unnecessary scrollbars in both information and feature panels.
    • Improved responsiveness across different screen resolutions.
  • Form Validation & UI Fixes:
    • Catalog Part Creation: Implemented validation logic to disable the "CREATE" button until all mandatory fields are populated.
    • Material Name Field: Fixed a visual bug where the mandatory asterisk (*) caused a layout shift/overlap with the "color palette" icon.
  • Bug Fixes: - Resolved z-index issues where navigation buttons overlapped the "Available Features" deployable panel.
    • Fixed layout overflow where the "Available Features" panel would sit behind the header.
  • Navigation: Redesigned the "Back" button in the Catalog Part details page to a more integrated bar-style design attached to the sidebar.

WHY

The goal of these changes is to enhance the overall professional look and feel of the ICHub. By standardizing headers and fixing layout inconsistencies, we provide a more stable and visually cohesive foundation. The new form validation improves data integrity by preventing empty submissions, while the UI fixes address critical navigation and depth (z-index) issues.

FURTHER NOTES

Catalog Parts New Header

BEFORE AFTER
image image

Catalog Part Creation (Button Validation & Material Icon Fix)

BEFORE AFTER
image image

Catalog Part Details Back Button

BEFORE AFTER
image image

Serialized Parts New Header

BEFORE AFTER
image image

Contact List New Header

BEFORE AFTER
image image

Passport Provisioning Colors

BEFORE AFTER
image image

Passport Consumption Colors

BEFORE AFTER
image image

KIT Features Page (Centering & Sidebar Fix)

BEFORE AFTER
image image

Kit Features Detail Page (Scroll & Hover Fix)

BEFORE AFTER
image image

Available Features Panel (Z-index & Header Fix)

BEFORE AFTER
image image

Closes #553

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

UI/UX: Standardization of core module headers and general layout refinements

1 participant