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.
7 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