contact panel/nav panel shadows #428
Conversation
There was a problem hiding this comment.
Pull request overview
This PR implements theme-specific shadow styling for contact panels and navigation drawer panels, ensuring proper visual appearance in both light and dark themes across Vue, React, and Angular implementations.
Key changes:
- Added light and dark theme-specific box-shadow values for navigation drawer panels
- Added theme-specific shadows for contact panels with border-radius styling
- Extended app components to include current theme as a CSS class for proper style scoping
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
packages/vue/src/styles.scss |
Theme-specific drawer panel shadows with light (0.08 opacity) and dark (0.96 opacity) variants |
packages/vue/src/components/library/contact-panel.vue |
Added border-radius and CSS variable-based shadow system with theme-specific values |
packages/vue/src/App.vue |
Added theme class from themeService to enable theme-based styling |
packages/react/src/styles.scss |
Theme-specific drawer panel shadows matching Vue implementation |
packages/react/src/components/library/contact-panel/ContactPanel.scss |
Direct theme-specific shadow rules and border-radius for contact panel |
packages/react/src/App.tsx |
Added theme context value to app className for theme scoping |
packages/angular/src/styles.scss |
Theme-specific drawer panel shadows matching other frameworks |
packages/angular/src/app/components/library/contact-panel/contact-panel.component.scss |
Angular-specific theme shadow rules with :host-context and border-radius |
packages/angular/src/app/app.component.ts |
Added currentTheme to host binding classes for theme-based styling |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| --panel-shadow: 0px 4px 4px rgba(0, 0, 0, 0.08); | ||
| } | ||
| .dx-theme-fluent .dark { | ||
| --panel-shadow: 0px 4px 16px rgba(0, 0, 0, 0.48); |
There was a problem hiding this comment.
The box-shadow value is missing the fourth length parameter (spread radius). This should be 0px 4px 4px 0px rgba(0, 0, 0, 0.08) to match the format used in the drawer panel styles and maintain consistency with React and Angular implementations.
| --panel-shadow: 0px 4px 4px rgba(0, 0, 0, 0.08); | |
| } | |
| .dx-theme-fluent .dark { | |
| --panel-shadow: 0px 4px 16px rgba(0, 0, 0, 0.48); | |
| --panel-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.08); | |
| } | |
| .dx-theme-fluent .dark { | |
| --panel-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.48); |
| } | ||
| .dx-theme-fluent .dark { | ||
| --panel-shadow: 0px 4px 16px rgba(0, 0, 0, 0.48); |
There was a problem hiding this comment.
The dark theme shadow for the contact panel uses a different blur radius (16px) compared to the drawer panel dark theme shadow (4px) defined in styles.scss. This creates inconsistent visual styling between the contact panel and navigation drawer. Consider aligning these values for a more cohesive design, or document why they should differ.
| --panel-shadow: 0px 4px 16px rgba(0, 0, 0, 0.48); | |
| --panel-shadow: 0px 4px 4px rgba(0, 0, 0, 0.48); |
| } | ||
|
|
||
| .dx-theme-fluent .dark .panel.open { | ||
| box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.48); |
There was a problem hiding this comment.
The dark theme shadow for the contact panel uses a different blur radius (16px) compared to the drawer panel dark theme shadow (4px) defined in styles.scss. This creates inconsistent visual styling between the contact panel and navigation drawer. Consider aligning these values for a more cohesive design, or document why they should differ.
| box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.48); | |
| box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.48); |
| } | ||
|
|
||
| :host-context(.dx-theme-fluent .dark) .panel.open { | ||
| box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.48); |
There was a problem hiding this comment.
The dark theme shadow for the contact panel uses a different blur radius (16px) compared to the drawer panel dark theme shadow (4px) defined in styles.scss. This creates inconsistent visual styling between the contact panel and navigation drawer. Consider aligning these values for a more cohesive design, or document why they should differ.
| box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.48); | |
| box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.48); |
packages/vue/src/styles.scss
Outdated
| } | ||
|
|
||
| .dark .dx-drawer-panel-content { | ||
| box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.96); |
There was a problem hiding this comment.
The dark theme drawer panel shadow uses an opacity of 0.96, which appears unusually high and creates an almost completely opaque shadow. This differs significantly from the light theme opacity of 0.08. Consider using a more typical dark theme shadow opacity (e.g., 0.48 to match the contact panel, or a value between 0.16-0.32) for better visual consistency.
| box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.96); | |
| box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.48); |
packages/react/src/styles.scss
Outdated
| } | ||
|
|
||
| .dark .dx-drawer-panel-content { | ||
| box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.96); |
There was a problem hiding this comment.
The dark theme drawer panel shadow uses an opacity of 0.96, which appears unusually high and creates an almost completely opaque shadow. This differs significantly from the light theme opacity of 0.08. Consider using a more typical dark theme shadow opacity (e.g., 0.48 to match the contact panel, or a value between 0.16-0.32) for better visual consistency.
| box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.96); | |
| box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.48); |
2 participants
No description provided.