fix: report issue button UI implementation #573
Conversation
Signed-off-by: Efren Lim <[email protected]>
There was a problem hiding this comment.
Pull Request Overview
This PR updates the UI implementation of the report issue button in the project header to follow the latest design specifications. The change replaces a dropdown-based report issue option with a standalone button for better accessibility and visual prominence.
- Converts the report issue functionality from a dropdown menu item to a dedicated button
- Removes the ellipsis dropdown menu and associated dropdown components
- Updates button styling with tertiary type and rounded-full class
| @@ -71,6 +71,17 @@ SPDX-License-Identifier: MIT | |||
| </div> | |||
| </div> | |||
| <div class="hidden sm:flex items-center gap-4"> | |||
| <lfx-button | |||
| type="tertiary" | |||
| class="!rounded-full text-nowrap" | |||
There was a problem hiding this comment.
Using !important modifier (!rounded-full) suggests potential CSS specificity issues. Consider resolving the underlying specificity conflict instead of forcing the style with !important.
| class="!rounded-full text-nowrap" | |
| class="rounded-full text-nowrap" |
Copilot uses AI. Check for mistakes.
| > | ||
| <lfx-icon | ||
| name="comment-exclamation" | ||
| class="text-warning-600" |
There was a problem hiding this comment.
[nitpick] The icon color is hardcoded to text-warning-600. Consider using a CSS custom property or design token to maintain consistency with the design system and make theme changes easier.
| class="text-warning-600" | |
| :style="{ color: 'var(--color-warning)' }" |
Copilot uses AI. Check for mistakes.
Signed-off-by: Efren Lim <[email protected]>
Signed-off-by: Efren Lim <[email protected]>
In this PR
Change the UI implementation of report issue button on the project header.
Tickets
INS-843
INS-842