NoMongo: Fix Stylesheet in Anticipation of Dark Mode [PR-5] #3750
Conversation
WalkthroughThis PR updates numerous component files to import CSS from a centralized global stylesheet ( Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
Our Pull Request Approval ProcessThanks for contributing! Testing Your CodeRemember, your PRs won't be reviewed until these criteria are met:
Our policies make our code better. ReviewersDo not assign reviewers. Our Queue Monitors will review your PR and assign them.
Reviewing Your CodeYour reviewer(s) will have the following roles:
CONTRIBUTING.mdRead our CONTRIBUTING.md file. Most importantly:
Other
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
src/style/app.module.css (1)
4480-4517: 🛠️ Refactor suggestionEnsure animation definitions are consistent.
There are duplicate
@keyframesdefinitions forzoomIn(one at line 4754 and another at line 4480). Consider consolidating these to avoid potential conflicts in animation behavior.- @-webkit-keyframes zoomIn { - 0% { - opacity: 0; - -webkit-transform: scale(0.5); - transform: scale(0.5); - } - 100% { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); - } - } - - @keyframes zoomIn { - 0% { - opacity: 0; - -webkit-transform: scale(0.5); - transform: scale(0.5); - } - 100% { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); - } - }Keep only one set of these keyframes definitions to maintain consistency and reduce file size.
🧹 Nitpick comments (3)
src/style/app.module.css (3)
4768-4770: Ensure specificity without!importantif possible.The
.buttonListclass now uses!importantto enforce the background color. While this ensures the style is applied consistently regardless of specificity conflicts, using!importantshould generally be avoided for maintainability.When preparing for dark mode, consider using CSS custom properties with proper selector specificity instead.
- .buttonList { - background-color: var(--buttonList-bg) !important; - } + .buttonList { + background-color: var(--buttonList-bg); + }Then use more specific selectors in your theme definitions if needed to override the styles.
6241-6315: Consider using CSS variables for color definitions in component-specific styles.In component-specific sections like the YearlyEventCalender styles, many colors are hardcoded. As part of the dark mode preparation, consider converting these hardcoded colors to use the CSS variables defined in the
:root..day__selected { - background-color: var(--blue-primary); + background-color: var(--calendar-selected-day-bg, var(--blue-primary)); color: var(--grey-dark); } .day__today { - background-color: var(--light-neon-green); + background-color: var(--calendar-today-bg, var(--light-neon-green)); font-weight: 700; text-decoration: underline; - color: var(--light-green); + color: var(--calendar-today-text, var(--light-green)); }
4767-4791: Ensure AddOnEntry component styling is properly scoped.The added styles for
.entrytoggleand.entryactionappear to be specifically for the AddOnEntry component (based on the comment on line 4771). To better organize styles and prevent potential conflicts, consider moving component-specific styles to a separate CSS module file or ensuring proper namespacing.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (63)
src/components/AddOn/core/AddOnRegister/AddOnRegister.tsx(1 hunks)src/components/AddOn/core/AddOnStore/AddOnStore.tsx(1 hunks)src/components/AddOn/support/components/MainContent/MainContent.tsx(1 hunks)src/components/AddOn/support/components/SidePanel/SidePanel.tsx(1 hunks)src/components/AddPeopleToTag/AddPeopleToTag.tsx(1 hunks)src/components/Advertisements/Advertisements.tsx(1 hunks)src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx(1 hunks)src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx(1 hunks)src/components/AgendaItems/AgendaItemsContainer.tsx(1 hunks)src/components/AgendaItems/Delete/AgendaItemsDeleteModal.tsx(1 hunks)src/components/AgendaItems/Preview/AgendaItemsPreviewModal.tsx(1 hunks)src/components/ContriStats/ContriStats.tsx(1 hunks)src/components/CurrentHourIndicator/CurrentHourIndicator.tsx(1 hunks)src/components/DynamicDropDown/DynamicDropDown.module.css(0 hunks)src/components/DynamicDropDown/DynamicDropDown.tsx(1 hunks)src/components/EventCalender/Header/EventHeader.tsx(1 hunks)src/components/EventCalender/Monthly/EventCalender.tsx(1 hunks)src/components/EventCalender/Yearly/YearlyEventCalender.tsx(1 hunks)src/components/EventDashboardScreen/EventDashboardScreen.tsx(1 hunks)src/components/EventListCard/EventListCard.tsx(1 hunks)src/components/EventListCard/Modal/Delete/EventListCardDeleteModal.tsx(1 hunks)src/components/EventListCard/Modal/Preview/EventListCardPreviewModal.tsx(1 hunks)src/components/EventListCard/Modal/Update/EventListCardUpdateModal.tsx(1 hunks)src/components/EventManagement/Dashboard/EventDashboard.tsx(1 hunks)src/components/EventManagement/EventAgendaItems/EventAgendaItems.tsx(1 hunks)src/components/EventManagement/EventAttendance/Attendance/EventAttendance.tsx(1 hunks)src/components/EventManagement/EventAttendance/Statistics/EventStatistics.tsx(1 hunks)src/components/EventManagement/EventRegistrant/EventRegistrants.tsx(1 hunks)src/components/EventRegistrantsModal/EventRegistrantsWrapper.tsx(1 hunks)src/components/EventRegistrantsModal/Modal/EventRegistrantsModal.tsx(1 hunks)src/components/EventStats/EventStatsWrapper.tsx(1 hunks)src/components/EventStats/Statistics/AverageRating/AverageRating.tsx(1 hunks)src/components/GroupChatDetails/GroupChatDetails.tsx(1 hunks)src/components/HolidayCards/HolidayCard.tsx(1 hunks)src/components/InfiniteScrollLoader/InfiniteScrollLoader.module.css(0 hunks)src/components/InfiniteScrollLoader/InfiniteScrollLoader.tsx(1 hunks)src/components/LeftDrawer/LeftDrawer.tsx(1 hunks)src/components/OrgListCard/OrgListCard.tsx(1 hunks)src/components/OrgPeopleListCard/OrgPeopleListCard.tsx(1 hunks)src/components/OrgPostCard/DeleteModal/DeletePostModal.tsx(1 hunks)src/components/OrgPostCard/OrgPostCard.tsx(1 hunks)src/components/OrgSettings/ActionItemCategories/Modal/CategoryModal.tsx(1 hunks)src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.tsx(1 hunks)src/components/OrgSettings/AgendaItemCategories/Create/AgendaCategoryCreateModal.tsx(1 hunks)src/components/OrgSettings/AgendaItemCategories/Delete/AgendaCategoryDeleteModal.tsx(1 hunks)src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.tsx(1 hunks)src/components/OrgSettings/AgendaItemCategories/Preview/AgendaCategoryPreviewModal.tsx(1 hunks)src/components/OrgSettings/AgendaItemCategories/Update/AgendaCategoryUpdateModal.tsx(1 hunks)src/components/OrgSettings/General/DeleteOrg/DeleteOrg.module.css(0 hunks)src/components/OrgSettings/General/DeleteOrg/DeleteOrg.tsx(1 hunks)src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.module.css(0 hunks)src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.tsx(1 hunks)src/components/OrgSettings/General/OrgUpdate/OrgUpdate.module.css(0 hunks)src/components/OrgSettings/General/OrgUpdate/OrgUpdate.tsx(1 hunks)src/components/OrganizationCard/OrganizationCard.tsx(1 hunks)src/components/OrganizationCardStart/OrganizationCardStart.tsx(1 hunks)src/components/OrganizationDashCards/CardItem/CardItem.tsx(1 hunks)src/components/OrganizationDashCards/CardItem/Loader/CardItemLoading.tsx(1 hunks)src/components/OrganizationDashCards/DashboardCard.tsx(1 hunks)src/components/OrganizationDashCards/Loader/DashboardCardLoading.tsx(1 hunks)src/components/OrganizationScreen/OrganizationScreen.tsx(1 hunks)src/components/UserPortal/OrganizationCard/OrganizationCard.tsx(1 hunks)src/style/app.module.css(1 hunks)
💤 Files with no reviewable changes (5)
- src/components/DynamicDropDown/DynamicDropDown.module.css
- src/components/InfiniteScrollLoader/InfiniteScrollLoader.module.css
- src/components/OrgSettings/General/DeleteOrg/DeleteOrg.module.css
- src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.module.css
- src/components/OrgSettings/General/OrgUpdate/OrgUpdate.module.css
✅ Files skipped from review due to trivial changes (57)
- src/components/OrgPeopleListCard/OrgPeopleListCard.tsx
- src/components/EventDashboardScreen/EventDashboardScreen.tsx
- src/components/LeftDrawer/LeftDrawer.tsx
- src/components/OrganizationDashCards/CardItem/CardItem.tsx
- src/components/GroupChatDetails/GroupChatDetails.tsx
- src/components/EventManagement/Dashboard/EventDashboard.tsx
- src/components/UserPortal/OrganizationCard/OrganizationCard.tsx
- src/components/AddOn/support/components/SidePanel/SidePanel.tsx
- src/components/HolidayCards/HolidayCard.tsx
- src/components/EventListCard/Modal/Update/EventListCardUpdateModal.tsx
- src/components/OrganizationDashCards/DashboardCard.tsx
- src/components/EventManagement/EventAttendance/Statistics/EventStatistics.tsx
- src/components/EventStats/EventStatsWrapper.tsx
- src/components/EventCalender/Monthly/EventCalender.tsx
- src/components/OrgSettings/General/DeleteOrg/DeleteOrg.tsx
- src/components/EventRegistrantsModal/Modal/EventRegistrantsModal.tsx
- src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.tsx
- src/components/EventManagement/EventRegistrant/EventRegistrants.tsx
- src/components/OrgSettings/AgendaItemCategories/Update/AgendaCategoryUpdateModal.tsx
- src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.tsx
- src/components/EventListCard/Modal/Delete/EventListCardDeleteModal.tsx
- src/components/CurrentHourIndicator/CurrentHourIndicator.tsx
- src/components/OrganizationDashCards/Loader/DashboardCardLoading.tsx
- src/components/AgendaItems/AgendaItemsContainer.tsx
- src/components/EventManagement/EventAgendaItems/EventAgendaItems.tsx
- src/components/OrganizationCard/OrganizationCard.tsx
- src/components/EventListCard/EventListCard.tsx
- src/components/OrgSettings/General/OrgUpdate/OrgUpdate.tsx
- src/components/InfiniteScrollLoader/InfiniteScrollLoader.tsx
- src/components/OrgPostCard/OrgPostCard.tsx
- src/components/OrgSettings/AgendaItemCategories/Delete/AgendaCategoryDeleteModal.tsx
- src/components/AddPeopleToTag/AddPeopleToTag.tsx
- src/components/ContriStats/ContriStats.tsx
- src/components/AgendaItems/Delete/AgendaItemsDeleteModal.tsx
- src/components/EventCalender/Yearly/YearlyEventCalender.tsx
- src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx
- src/components/AddOn/core/AddOnRegister/AddOnRegister.tsx
- src/components/OrgSettings/ActionItemCategories/Modal/CategoryModal.tsx
- src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.tsx
- src/components/AddOn/support/components/MainContent/MainContent.tsx
- src/components/OrgSettings/AgendaItemCategories/Preview/AgendaCategoryPreviewModal.tsx
- src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx
- src/components/EventManagement/EventAttendance/Attendance/EventAttendance.tsx
- src/components/EventRegistrantsModal/EventRegistrantsWrapper.tsx
- src/components/OrganizationScreen/OrganizationScreen.tsx
- src/components/OrganizationDashCards/CardItem/Loader/CardItemLoading.tsx
- src/components/OrgPostCard/DeleteModal/DeletePostModal.tsx
- src/components/EventListCard/Modal/Preview/EventListCardPreviewModal.tsx
- src/components/DynamicDropDown/DynamicDropDown.tsx
- src/components/OrgListCard/OrgListCard.tsx
- src/components/OrganizationCardStart/OrganizationCardStart.tsx
- src/components/AddOn/core/AddOnStore/AddOnStore.tsx
- src/components/Advertisements/Advertisements.tsx
- src/components/OrgSettings/AgendaItemCategories/Create/AgendaCategoryCreateModal.tsx
- src/components/EventCalender/Header/EventHeader.tsx
- src/components/AgendaItems/Preview/AgendaItemsPreviewModal.tsx
- src/components/EventStats/Statistics/AverageRating/AverageRating.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Test Application
🔇 Additional comments (7)
src/style/app.module.css (7)
4754-4765: Animation extracted for reusability across components.The
@keyframes zoomInanimation has been correctly extracted from being nested inside the.rightCardclass to become a global animation definition. This is a good practice as it allows the animation to be reused by multiple components.
4773-4776: LGTM!The new
.entrytoggleclass provides consistent margin and width styling for toggle elements, which will help standardize UI components.
4778-4784: Good encapsulation of display properties.The
.entryactionclass properly encapsulates display and alignment properties, which helps maintain consistency for action elements. The use of!importantfor thedisplayproperty ensures the element renders correctly regardless of other styles.
1-36: Well-documented CSS methodology.The comments at the beginning of the file excellently document the CSS methodology used in the project. This provides clear guidance for maintaining consistency across component styles and explains the rationale behind the global classes approach. This type of documentation is particularly valuable when preparing for theme changes like dark mode implementation.
38-378: Thorough CSS variables definition supporting theme switching.The extensive CSS variables defined in the
:rootselector provide a solid foundation for implementing dark mode. These variables cover colors, spacing, sizing, and other design elements, making it easier to create alternate themes by simply overriding these variables in a theme-specific selector.
4130-4131: Animation usage aligned with new keyframes definition.The
.talawa_logoclass references the newly extractedzoomInanimation, demonstrating the benefit of having the animation defined globally for reuse.
38-113:❓ Verification inconclusive
Verify color contrast ratios for dark mode accessibility.
When implementing dark mode, ensure that the color combinations maintain sufficient contrast ratios for accessibility. Particularly, check text/background combinations using the variables like
--grey-light,--grey-dark,--blue-primary, etc.
🌐 Web query:
What should be the minimum color contrast ratio for WCAG AA compliance?💡 Result:
The minimum color contrast ratio required for WCAG AA compliance is 4.5:1 for normal-sized text and 3:1 for large text (defined as 18pt/24px or larger, or 14pt/19px bold)[1][2][3][5][8]. These standards ensure readability for users with visual impairments like low vision or color blindness.
Key Requirements
Normal Text:
4.5:1 contrast ratio applies to most body text, subtext, and images containing text smaller than 18pt[4][6].Large Text:
3:1 ratio is sufficient for headers or text sized ≥18pt (24px) or ≥14pt bold (19px)[3][7][8].Exceptions
- Logos/brand names[9], purely decorative elements[5], and inactive UI components[9] are exempt.
- Text over images or complex backgrounds may require manual verification[3].
Enhanced Standards (WCAG AAA)
For stricter compliance:
- Normal text requires a 7:1 ratio
- Large text needs 4.5:1[6][7].
Tools like WebAIM’s Contrast Checker[7] or ADA Site Compliance’s tool[4] can validate ratios automatically. Designers should prioritize these guidelines to improve accessibility for over 300 million people globally with moderate-to-severe vision loss[2][6].
Citations:
- 1: https://www.accessibilitychecker.org/wcag-guides/ensure-the-contrast-between-foreground-and-background-colors-meets-wcag-2-aa-minimum-contrast-ratio-thresholds/
- 2: https://accessiblyapp.com/web-accessibility/color-contrast/
- 3: https://help.siteimprove.com/support/solutions/articles/80001050538-accessibility-rule-color-contrast-does-not-meet-requirement-explained
- 4: https://adasitecompliance.com/ada-color-contrast-checker/
- 5: https://webaim.org/articles/contrast/
- 6: https://www.boia.org/blog/designing-for-color-contrast-guidelines-for-accessibility
- 7: https://webaim.org/resources/contrastchecker/
- 8: https://webcomm.nmsu.edu/accessibility/color.html
- 9: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
- 10: https://accessibleweb.com/color-contrast-checker/
Dark Mode Accessibility: Verify Color Contrast Ratios
Please ensure that the dark mode color palette adheres to WCAG AA guidelines. In particular, verify that text and background combinations using variables such as
--grey-light,--grey-dark,--blue-primary, etc., achieve at least a 4.5:1 contrast ratio for normal text and 3:1 for large text (≥18pt/24px normal or ≥14pt/19px bold). Consider using tools like WebAIM’s Contrast Checker to validate these ratios across all affected UI elements.
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## develop-postgres #3750 +/- ##
=================================================
Coverage 86.05% 86.05%
=================================================
Files 371 371
Lines 9139 9139
Branches 1925 1925
=================================================
Hits 7865 7865
Misses 909 909
Partials 365 365 ☔ View full report in Codecov by Sentry. |
|
@palisadoes PTAL. |
palisadoes
merged commit 7ce2718
into
PalisadoesFoundation:develop-postgres
. |
|
|
Dark mode whenever you are ready |
What kind of change does this PR introduce?
CSS Refactor
Issue Number:
Fixes #3296
Does this PR introduce a breaking change?
Checklist
CodeRabbit AI Review
Test Coverage
Have you read the contributing guide?
Yes
Summary by CodeRabbit