Ck 7vn/css#1136
Merged
Merged
Conversation
📝 WalkthroughSummary by CodeRabbit
WalkthroughAdds exported brand color constants and many global CSS utilities, then replaces hard-coded color and layout classes across shared components, charts, pages, and feature flows to use the new brand tokens and utilities. ChangesFrontend theme token rollout
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/src/pages/admin/AdminManagement.tsx`:
- Around line 860-863: The username is currently rendered as a plain div but
must be a disabled Input to match backend behavior and tests: in
AdminManagement, replace the <div
className="field-readonly">{formData.username}</div> with an <Input
id="edit-username" value={formData.username} disabled className="mt-2 bg-muted"
/> (or the project's Input component equivalent) so the field remains
non-editable and has the exact className 'mt-2 bg-muted' for test assertions;
keep the existing <Label htmlFor="edit-username">Username</Label> and ensure the
Input uses formData.username as its value.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: baa04f7a-1d90-43e5-8a53-415129edb963
📒 Files selected for processing (99)
frontend/src/components/Pagination.tsxfrontend/src/components/UnlockEdTour.tsxfrontend/src/components/charts/EngagementRateGraph.tsxfrontend/src/components/charts/OperationalInsightsCharts.tsxfrontend/src/components/dashboard/TopContentList.tsxfrontend/src/components/forms/ChangePasswordForm.tsxfrontend/src/components/forms/ConsentForm.tsxfrontend/src/components/forms/LoginForm.tsxfrontend/src/components/knowledge-center/FavoriteCard.tsxfrontend/src/components/knowledge-center/HelpfulLinkCard.tsxfrontend/src/components/knowledge-center/LibraryCard.tsxfrontend/src/components/knowledge-center/VideoCard.tsxfrontend/src/components/navigation/Breadcrumbs.tsxfrontend/src/components/navigation/Sidebar.tsxfrontend/src/components/navigation/TopNav.tsxfrontend/src/components/programs/ProgramDialogs.tsxfrontend/src/components/residents/BulkImportDialog.tsxfrontend/src/components/residents/ResidentDialogs.tsxfrontend/src/components/schedule/BulkCancelClassesModal.tsxfrontend/src/components/schedule/ChangeInstructorModal.tsxfrontend/src/components/schedule/ChangeRoomModal.tsxfrontend/src/components/schedule/RRuleControl.tsxfrontend/src/components/schedule/RescheduleEventModal.tsxfrontend/src/components/schedule/RescheduleSeriesModal.tsxfrontend/src/components/schedule/RescheduleSessionModal.tsxfrontend/src/components/schedule/SessionDetailActions.tsxfrontend/src/components/schedule/SessionDetailClassDetails.tsxfrontend/src/components/schedule/SessionDetailHeader.tsxfrontend/src/components/schedule/SessionDetailStatusSection.tsxfrontend/src/components/shared/ConfirmDialog.tsxfrontend/src/components/shared/FormModal.tsxfrontend/src/components/shared/PageHeader.tsxfrontend/src/components/student/ActivityHistoryCard.tsxfrontend/src/components/ui/breadcrumb.tsxfrontend/src/components/ui/button.tsxfrontend/src/components/ui/card.tsxfrontend/src/components/ui/context-menu.tsxfrontend/src/components/ui/dropdown-menu.tsxfrontend/src/components/ui/menubar.tsxfrontend/src/layouts/AuthenticatedLayout.tsxfrontend/src/lib/brand.tsfrontend/src/lib/formatters.tsfrontend/src/pages/ClassesPage.tsxfrontend/src/pages/Dashboard.tsxfrontend/src/pages/FAQs.tsxfrontend/src/pages/ProgramsPage.tsxfrontend/src/pages/Schedule.tsxfrontend/src/pages/admin/AdminManagement.tsxfrontend/src/pages/admin/FacilityManagement.tsxfrontend/src/pages/admin/ResidentProfile.tsxfrontend/src/pages/admin/StudentManagement.tsxfrontend/src/pages/admin/resident-profile/ActiveEnrollmentsTable.tsxfrontend/src/pages/admin/resident-profile/AttendanceTrendChart.tsxfrontend/src/pages/admin/resident-profile/CompletedPrograms.tsxfrontend/src/pages/admin/resident-profile/HistoricalNotes.tsxfrontend/src/pages/admin/resident-profile/IncompleteEnrollments.tsxfrontend/src/pages/admin/resident-profile/ResetPasswordDialog.tsxfrontend/src/pages/admin/resident-profile/ResidentHeader.tsxfrontend/src/pages/admin/resident-profile/ResidentMetrics.tsxfrontend/src/pages/auth/Login.tsxfrontend/src/pages/auth/ResetPassword.tsxfrontend/src/pages/class-detail/AuditTab.tsxfrontend/src/pages/class-detail/BulkCancelSessionsModal.tsxfrontend/src/pages/class-detail/BulkGraduateModal.tsxfrontend/src/pages/class-detail/ChangeInstructorModal.tsxfrontend/src/pages/class-detail/ChangeRoomModal.tsxfrontend/src/pages/class-detail/ClassHeader.tsxfrontend/src/pages/class-detail/ClassNotFoundCard.tsxfrontend/src/pages/class-detail/EditClassModal.tsxfrontend/src/pages/class-detail/EnrollResidentsModal.tsxfrontend/src/pages/class-detail/EnrollmentHistoryTab.tsxfrontend/src/pages/class-detail/LoadingSkeleton.tsxfrontend/src/pages/class-detail/RosterTab.tsxfrontend/src/pages/class-detail/ScheduleTab.tsxfrontend/src/pages/class-detail/SessionRow.tsxfrontend/src/pages/class-detail/SessionsTab.tsxfrontend/src/pages/class-detail/SessionsTabBulkActions.tsxfrontend/src/pages/class-detail/SessionsTabFilterBar.tsxfrontend/src/pages/class-detail/SupportTab.tsxfrontend/src/pages/class-detail/TakeAttendanceModal.tsxfrontend/src/pages/class-detail/UnenrollResidentModal.tsxfrontend/src/pages/class-detail/index.tsxfrontend/src/pages/event-attendance/constants.tsfrontend/src/pages/event-attendance/index.tsxfrontend/src/pages/knowledge-center/KnowledgeCenterManagement.tsxfrontend/src/pages/knowledge-center/LibraryViewer.tsxfrontend/src/pages/knowledge-center/ResidentKnowledgeCenter.tsxfrontend/src/pages/knowledge-center/VideoViewer.tsxfrontend/src/pages/learning/ResidentOverview.tsxfrontend/src/pages/program-detail/ClassesTab.tsxfrontend/src/pages/programs/AddClassEnrollments.tsxfrontend/src/pages/programs/ClassEnrollmentDetails.tsxfrontend/src/pages/programs/ClassEvents.tsxfrontend/src/pages/programs/ClassManagementForm.tsxfrontend/src/pages/programs/ProgramManagementForm.tsxfrontend/src/pages/programs/ProgramOverviewFacilityAdmin.tsxfrontend/src/pages/programs/ProgramOverviewStatewide.tsxfrontend/src/pages/student/ResidentHome.tsxfrontend/src/styles/globals.css
Comment on lines
860
to
863
| <Label htmlFor="edit-username">Username</Label> | ||
| <div className="border border-gray-300 rounded-md px-3 py-2 bg-gray-50"> | ||
| <div className="field-readonly"> | ||
| {formData.username} | ||
| </div> |
There was a problem hiding this comment.
Restore username as disabled Input in edit dialog.
This now renders username as a <div>, but this field must remain a disabled Input with className mt-2 bg-muted to preserve the backend-aligned non-editable pattern and associated test guardrails.
Suggested fix
- <div className="field-readonly">
- {formData.username}
- </div>
+ <Input
+ id="edit-username"
+ value={formData.username}
+ disabled
+ className="mt-2 bg-muted"
+ />Based on learnings: "Render the username field in all edit dialogs as a disabled Input with className 'mt-2 bg-muted' ... to align with backend behavior ... Add tests to assert the field is disabled and contains the exact className."
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <Label htmlFor="edit-username">Username</Label> | |
| <div className="border border-gray-300 rounded-md px-3 py-2 bg-gray-50"> | |
| <div className="field-readonly"> | |
| {formData.username} | |
| </div> | |
| <Label htmlFor="edit-username">Username</Label> | |
| <Input | |
| id="edit-username" | |
| value={formData.username} | |
| disabled | |
| className="mt-2 bg-muted" | |
| /> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/pages/admin/AdminManagement.tsx` around lines 860 - 863, The
username is currently rendered as a plain div but must be a disabled Input to
match backend behavior and tests: in AdminManagement, replace the <div
className="field-readonly">{formData.username}</div> with an <Input
id="edit-username" value={formData.username} disabled className="mt-2 bg-muted"
/> (or the project's Input component equivalent) so the field remains
non-editable and has the exact className 'mt-2 bg-muted' for test assertions;
keep the existing <Label htmlFor="edit-username">Username</Label> and ensure the
Input uses formData.username as its value.
carddev81
approved these changes
May 25, 2026
Contributor
There was a problem hiding this comment.
@CK-7vn Great Job man!
There was only one styling issue I found that either you can create an asana ticket for or fix it here. The schedule navigation buttons active/inactive states are different than the target figma. I remember working on these and they were a pain.
Current
Figma (notice the next button)
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/src/styles/globals.css`:
- Around line 461-465: The :focus rule for .unlocked-calendar .rbc-toolbar
button.rbc-active overrides the active styling causing the selected (rbc-active)
button to look like an inactive focused button; update the CSS so that
.rbc-active:focus preserves the brand background and white text (keep
background-color: your green and color: `#fff`) and add an additional visible
focus indicator such as outline/box-shadow or a border-color accent so keyboard
users can distinguish focus while retaining the active appearance; modify the
selector .unlocked-calendar .rbc-toolbar button.rbc-active:focus to apply these
changes rather than switching to the gray styles.
- Around line 454-459: Change the focus selector for the calendar toolbar
buttons to use :focus-visible instead of :focus so keyboard-only focus styles
match the rest of the calendar; update the rule targeting ".unlocked-calendar
.rbc-toolbar button:focus" to ".unlocked-calendar .rbc-toolbar
button:focus-visible" and keep the same declarations (background-color, color,
border-color, outline) so mouse clicks won't trigger the focus ring and styling
remains consistent with the other :focus-visible rules.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 248d2bf0-f57c-4ec4-b009-88074a95c4e8
📒 Files selected for processing (1)
frontend/src/styles/globals.css
Comment on lines
+454
to
+459
| .unlocked-calendar .rbc-toolbar button:focus { | ||
| background-color: #d1d5db; | ||
| color: #374151; | ||
| border-color: #e5e7eb; | ||
| outline: none; | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial | ⚡ Quick win
Prefer :focus-visible over :focus for keyboard-only focus indication.
Lines 374–378 and 384–388 correctly use :focus-visible to show focus rings only during keyboard navigation. Using :focus here triggers on mouse clicks as well, which is inconsistent with modern accessibility patterns and the rest of the calendar styling.
♻️ Refactor to use :focus-visible
-.unlocked-calendar .rbc-toolbar button:focus {
+.unlocked-calendar .rbc-toolbar button:focus-visible {
background-color: `#d1d5db`;
color: `#374151`;
border-color: `#e5e7eb`;
outline: none;
}
-.unlocked-calendar .rbc-toolbar button.rbc-active:focus {
+.unlocked-calendar .rbc-toolbar button.rbc-active:focus-visible {
background-color: `#d1d5db`;
color: `#374151`;
border-color: `#e5e7eb`;
}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/styles/globals.css` around lines 454 - 459, Change the focus
selector for the calendar toolbar buttons to use :focus-visible instead of
:focus so keyboard-only focus styles match the rest of the calendar; update the
rule targeting ".unlocked-calendar .rbc-toolbar button:focus" to
".unlocked-calendar .rbc-toolbar button:focus-visible" and keep the same
declarations (background-color, color, border-color, outline) so mouse clicks
won't trigger the focus ring and styling remains consistent with the other
:focus-visible rules.
Comment on lines
+461
to
+465
| .unlocked-calendar .rbc-toolbar button.rbc-active:focus { | ||
| background-color: #d1d5db; | ||
| color: #374151; | ||
| border-color: #e5e7eb; | ||
| } |
There was a problem hiding this comment.
Active button loses visual state on focus, breaking keyboard navigation.
When an active toolbar button (.rbc-active) receives focus, it changes from brand green background with white text to gray background with gray text—identical to a focused inactive button. Keyboard users cannot distinguish which calendar view is currently selected, violating WCAG 2.1 SC 2.4.7 (Focus Visible).
Active buttons must remain visually distinct when focused. Consider applying a focus ring or border overlay while preserving the brand background and white text.
♿ Proposed fix preserving active state on focus
.unlocked-calendar .rbc-toolbar button.rbc-active:focus {
- background-color: `#d1d5db`;
- color: `#374151`;
- border-color: `#e5e7eb`;
+ background-color: `#556830`;
+ color: white;
+ border-color: `#556830`;
+ outline: 2px solid `#9ca3af`;
+ outline-offset: 2px;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| .unlocked-calendar .rbc-toolbar button.rbc-active:focus { | |
| background-color: #d1d5db; | |
| color: #374151; | |
| border-color: #e5e7eb; | |
| } | |
| .unlocked-calendar .rbc-toolbar button.rbc-active:focus { | |
| background-color: `#556830`; | |
| color: white; | |
| border-color: `#556830`; | |
| outline: 2px solid `#9ca3af`; | |
| outline-offset: 2px; | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/styles/globals.css` around lines 461 - 465, The :focus rule for
.unlocked-calendar .rbc-toolbar button.rbc-active overrides the active styling
causing the selected (rbc-active) button to look like an inactive focused
button; update the CSS so that .rbc-active:focus preserves the brand background
and white text (keep background-color: your green and color: `#fff`) and add an
additional visible focus indicator such as outline/box-shadow or a border-color
accent so keyboard users can distinguish focus while retaining the active
appearance; modify the selector .unlocked-calendar .rbc-toolbar
button.rbc-active:focus to apply these changes rather than switching to the gray
styles.
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
2 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.
Pre-Submission PR Checklist
Description of the change
Screenshot(s)
No changes, everything was byte for byte identical transformation of CSS
Additional context
Couple things I left out of this, that i'll be creating asana tickets for