Harshavarma - Added alignment changes in "Resources Usage" chart#5311
Harshavarma - Added alignment changes in "Resources Usage" chart#5311harshavarma29 wants to merge 2 commits into
Conversation
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
harshavarma29
changed the title
one-community
added
the
High Priority - Please Review First
|
There was a problem hiding this comment.
- Tested the PR locally and the graph looks great.
- The Y-axis label "Amount" appears in multiple locations ie., one"Amount" appears on the left side and another near the legend/right side and differs from the design. Please verify whether duplicate axis labels are intended.
- Dark mode dropdown can be improved otherwise looks good.
HemanthNidamanuru
left a comment
HemanthNidamanuru
left a comment
There was a problem hiding this comment.
Hi,
I tested this locally following the steps provided and found 1 issue:
The dropdown needs styling improvement in dark mode.
Everything else is looking good!
Jaden300
left a comment
Jaden300
left a comment
There was a problem hiding this comment.
Tested locally following the provided steps. The graph alignment looks good overall. Requesting changes for the following:
-
Dark mode dropdown styling
The dropdown is difficult to read in dark mode - text and background colors have low contrast. This has also been flagged by previous reviewers. Please improve the dropdown styling for dark mode. -
Unintentional "|" character near "Insights"
There appears to be a stray "|" character next to "Insights" that looks unintentional. Please verify and remove if not needed.
Everything else looks good - the chart alignment matches the Figma design, the feature works as expected, and CSS Modules are used correctly with no generic class names.
Mahitha-pasupuleti
left a comment
Mahitha-pasupuleti
left a comment
There was a problem hiding this comment.
Tested locally and the feature works as expected. Requesting minor changes:
- Improve dropdown styling in dark mode for better readability.
- Verify the duplicate "Amount" label on the graph; it appears both on the Y-axis and near the legend.
Other than these minor issues, the graph alignment and overall implementation look good.
Abhi-R0211
left a comment
Abhi-R0211
left a comment
There was a problem hiding this comment.
Hi, I tested locally on branch harshavarma_icons_to_filters, logged in as admin, navigated to http://localhost:5173/communityportal/reports/resourceusage. Here is my analysis:
What's Working Well
- Chart bar alignment looks correct in both light and dark mode — bars are properly spaced and sized, matching the Figma layout
- Hover tooltip displays Returned/Loaned values correctly in both modes
- Mobile layout stacks chart and Insights panel correctly at 375px in light mode
Issues
- Stray
|character before "Insights" heading — still present
The pipe character (|Insights) is still visible in dark mode at mobile width.
- "Amount" label — alignment
"Amount" appears both as the Y-axis label on the top-left and again near the legend on the top-right. Would recommend moving the legend to the bottom of the graph for better clarity.
- Dark mode dropdown — low contrast text still unresolved
The filter dropdown in dark mode shows grey text on a dark background with insufficient contrast.
mahathiganimi
left a comment
mahathiganimi
left a comment
There was a problem hiding this comment.
"Pull Request Unit Test / test" is failing, please check the logs and fix before this can be merged. Merge conflict needs to be resolved too.
Mobile view tooltip overlap: on mobile (iPhone 14 Pro Max, ~430px), hovering over a bar in the chart shows a tooltip that overlaps and covers the bars beneath it, making the chart hard to read. Could suggest changes with filter palette in dark mode for readability.
Given the failing test, merge conflicts, and the minor tooltip issues, requesting changes before this can be approved.
beblicarl
left a comment
beblicarl
left a comment
There was a problem hiding this comment.
The "Pull Request Unit Test / test" check is currently failing. Please review the logs and address the issue before the PR can be merged. There are also merge conflicts that need to be resolved.
In the mobile view, the chart tooltip appears to cover underlying bars when a bar is selected, which affects readability. It may also be worth considering adjustments to the filter color palette in dark mode to improve visibility and contrast.
Due to the failing test, unresolved merge conflicts, and the tooltip-related usability concerns, I am requesting changes before approving this pull request.
pixelpix13
left a comment
pixelpix13
left a comment
There was a problem hiding this comment.
Hey @harshavarma29, just reviewed the pr and found following things that needs to be changed
Testing Summary
Tested the Resource Usage page locally.
Verified
- Resource Usage page loads correctly.
- Graph renders correctly.
- Graph alignment appears correct.
- Filters are functional.
- Light mode looks good.
- Chart labels, legend, and bars are readable.
- No major layout issues observed in light mode.
Resource Usage Page
Issue 1 – Dropdown Contrast in Dark Mode
In dark mode, the dropdown menu does not have proper contrast. The dropdown background and option text are too close in color, making the options harder to read.
Expected Behavior
Dropdown options should remain clearly readable in dark mode.
Screenshot
Issue 2 – Extra ? Appears on Hover Near Insights
When hovering around the Insights section, a ? symbol appears near/under the dropdown arrow. It is not clear why this appears or whether it is intentional.
Expected Behavior
No extra or unintended symbol should appear on hover unless it is part of a tooltip/help design.
Issue 3 – Vertical Separation Line Near Insights
There is a vertical separation line directly in front of the Insights heading. It does not look intentional and affects the visual alignment of the section.
Expected Behavior
The Insights heading should align cleanly without an unexpected vertical line in front of it.
Screenshot
Summary
The graph and main Resource Usage functionality appear to work correctly, especially in light mode. Requesting changes for the dark mode dropdown contrast, unexpected hover ? symbol near Insights, and the vertical separation line near the Insights heading.
10 participants
Description
Changed the alignment of the graph to match the graph in Figma design
Related PRS (if any):
This frontend PR is related to the development backend PR.
How to test:
npm install, andnpm run start:localto run this PR locallyScreenshots or videos of changes:
test_video.mp4