feat / define layering system

[vladjerca]

Z-Index Standardization and Component Refactoring

This pull request standardizes the use of z-index values across various components by introducing new CSS custom properties and refactoring existing styles.

Introduction of CSS Custom Properties for z-index

• Added a new CSS file, projects/client/src/style/layers/index.css, to define custom properties for z-index values. These properties are categorized into base layers, interactive layers, and system layers, providing a clear and organized system for managing visual hierarchy.

Refactoring Components to Use New z-index Variables

• Updated several components to use the new z-index custom properties, ensuring consistency and maintainability in managing the visual stacking order of elements.
• Components updated include CoverImage, Button, PopupMenu, CardActionBar, CardCover, DropdownList, MobileNavbar, Navbar, and SearchInput.

Other Component Updates

• Refactored the DropdownList component to use the new z-index custom properties and fixed the dropdown rendering logic, improving both visual presentation and functionality.

Miscellaneous

• Added an import for the new layers/index.css file in projects/client/src/style/index.ts to ensure the custom properties are available globally, promoting consistency and ease of use.

(These changes, like a meticulous stage manager orchestrating the visual hierarchy of a theatrical production, ensure that elements are displayed in the correct order and that the user interface remains visually harmonious and accessible. The standardized z-index values and refactored components contribute to a more organized and maintainable codebase.)

[deepsource-io]

Here's the code health analysis summary for commits 9d59b42..99b3aaf. View details on DeepSource ↗.

Analysis Summary

Analyzer	Status	Summary	Link
JavaScript	✅ Success		View Check ↗
Test coverage	✅ Success		View Check ↗

Code Coverage Report

Metric	Aggregate	Javascript
Branch Coverage	26.7%	26.7%
Composite Coverage	61.3%	61.3%
Line Coverage	73.1%	73.1%

---

💡 If you’re a repository administrator, you can configure the quality gates from the settings.

[seferturan]

Applied a small fixup for the popup underlay 👌