Linlin fix promote buttons under reviewer name - #5491
Open
linlin-husky wants to merge 10 commits into
Open
Conversation
The donut center is an absolutely positioned HTML overlay whose spacing was tuned with offsets that reserve no layout space. On the mentor chart a translateY(6px) on the heading plus margin-top: -10px on the count left -2px between their boxes; on the volunteer chart margin: 0 auto wiped the h2 bottom margin, leaving 0px. Both collapse further because the font-size scales with container width (cqw) while the offsets stayed fixed in px. Delete the offsets and let a flex column gap do the spacing on both charts. Measured heading-to-count gap goes from 0.0px / -2.0px to a uniform 6.0px, including when the comparison line is shown.
Value and percentage are already shown permanently via the externalLabelGuides canvas plugin. The default Chart.js tooltip duplicated that info and rendered its dark box directly on top of the external label on hover, reading as overlapping/garbled text. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
…ure and add dynamic consistency
|
one-community
added
the
High Priority - Please Review First
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Fixes # (PRIORITY URGENT) — PR Review Team Analytics Dashboard: Finishing Followup fixes for the PR 5152. Fix Promote buttons are not under each reviewer name issue.
This PR fixes the layout defect where the Promote button was not rendering under each reviewer's name on the PR Grading screen. It refactors the component structure into a modular MVC pattern, anchors the button directly beneath each reviewer's name, improves confirmation modal styling and hover transitions, and resolves dark mode table contrast issues.
Related PRS (if any):
Main changes explained:
ReviewerCell.jsxto bundle each reviewer's name and corresponding🏆 Promote/✅ Promotedbutton in a dedicated vertical flex column container directly under the reviewer name column.PRGradingView.jsxto separate presentational UI (search filters, reviewer table, modals) from screen logic following MVC architecture.usePRPromotion.jscustom hook to isolate promotion state management and dynamically evaluateweeklyPRsfor accurate consistency indicators (✅ Consistentvs⚠️ Inconsistent).PRGradingScreen.jsxto act strictly as a controller coordinating data fetching, filtering, and passing callbacks into the view layer.PromotionConfirmationBox.jsxandPRGradingScreen.module.cssto migrate inline button styling into modular CSS classes, add smooth:hovertransitions, increase footer spacing, and maintain legible background contrasts in dark mode.How to test:
Linlin-fix-promote-buttons-under-reviewer-namenpm installand start the frontend locally withnpm run start:localdevadmin@hgn.net/DeveloperPassword100%!)Other Links→PR Team Analytics(or openhttp://localhost:5173/pr-grading-screen)🏆 Promotebutton appears centered directly under each reviewer's name in the first column.🏆 Promotebutton under any reviewer:✅ Consistent, while reviewers below requirements show⚠️ Inconsistent.CancelandConfirm Promotionbuttons to verify smooth hover effects and proper spacing.Confirm Promotionand verify the modal closes and the reviewer button updates to✅ Promoted(disabled).Screenshots or videos of changes:
Note:
GET /api/promotion-details/:reviewerIdandPOST /promote-members) were already implemented — no backend changes were required for this task.✅ Consistent/⚠️ Inconsistent) is a visual indicator only and does not block the admin from confirming a promotion, which is intentional per task requirements.✅ Promotedstate is session-only (resets on page refresh); database persistence is out of scope for this task.PRGradingScreen.module.css) to avoid generic global CSS class pollution.