NoMongo: Fix Stylesheet in Anticipation of Dark Mode [PR-4] #3740
Conversation
WalkthroughThe changes update the CSS module import paths for multiple components. Nearly all component files now reference Changes
Possibly related PRs
Suggested labels
Poem
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: 1
🧹 Nitpick comments (6)
src/style/app-fixed.module.css (6)
331-337: New CSS Variables for Pledge and Popup Styling
The introduction of custom properties such as--pledgeContainer-bg,--popup-border,--popup-bg,--popup-color, and--popup-box-shadowis a solid step toward modularizing theme definitions. These variables will make it easier to adjust popup and pledge container appearances (including future dark mode adjustments).
338-341: Additional Background and Container Variables
Adding--colorlight-bgalongside--containerHeight-bgand an initial definition for--cardHeader-borderimproves clarity. However, note that--cardHeader-borderis defined again later (line 406) with a different value. Please verify the intended final value to avoid unintended overrides.
343-355: Consolidation of Sidebar Collapse and Opendrawer Variables
This block defines several variables related to sidebar behavior and opendrawer styling. The overall approach is clear and aligns with our goal of consistent theming. One minor issue: the variable--collapseSidebarButton-bgis defined twice (once at line 350 and again at line 355) with the same value. Consolidating this definition would help avoid redundancy.
369-389: Outline Button Variable Duplication and Consistency
There are two blocks of definitions for outline button variables (from lines 369–377 and then lines 378–389). This repetition may lead to confusion and maintenance challenges. Please review whether all duplicate definitions are intentional or if they can be consolidated to ensure consistency.
400-407: General Container and Border Variables
The new variables for container background (--mainContainer50-bg), box styling (--box-bgand--box-border), and datebox borders are useful additions. As mentioned earlier, the conflicting values for--cardHeader-border(initially set to#e9ecefthen later to#f6f6f6) should be verified to ensure consistency in component borders.
2104-4791: Overall CSS Refactor and Dark Mode Preparation
This very extensive refactor—spanning the definition of numerous CSS custom properties to a reorganization of global styles—is a positive step toward better maintenance and dark mode readiness. The new variables create a unified palette across components and simplify future theme adjustments. One suggestion for further improvement: consider adding inline documentation or grouping the dark mode–specific overrides (perhaps via a media query or separate class/toggle) so that future modifications for an actual dark theme can be applied in a centralized manner. Also, be sure to address duplicate and conflicting variable definitions to avoid potential unforeseen styling issues.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (32)
src/screens/BlockUser/BlockUser.tsx(1 hunks)src/screens/CommunityProfile/CommunityProfile.tsx(1 hunks)src/screens/EventManagement/EventManagement.tsx(1 hunks)src/screens/EventVolunteers/VolunteerContainer.tsx(1 hunks)src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupDeleteModal.tsx(1 hunks)src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupModal.tsx(1 hunks)src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupViewModal.tsx(1 hunks)src/screens/EventVolunteers/VolunteerGroups/VolunteerGroups.tsx(1 hunks)src/screens/EventVolunteers/Volunteers/VolunteerCreateModal.tsx(1 hunks)src/screens/EventVolunteers/Volunteers/VolunteerDeleteModal.tsx(1 hunks)src/screens/EventVolunteers/Volunteers/VolunteerViewModal.tsx(1 hunks)src/screens/ForgotPassword/ForgotPassword.tsx(1 hunks)src/screens/FundCampaignPledge/FundCampaignPledge.tsx(1 hunks)src/screens/FundCampaignPledge/PledgeDeleteModal.tsx(1 hunks)src/screens/FundCampaignPledge/PledgeModal.tsx(1 hunks)src/screens/Leaderboard/Leaderboard.tsx(1 hunks)src/screens/UserPortal/Chat/Chat.tsx(1 hunks)src/screens/UserPortal/Donate/Donate.tsx(1 hunks)src/screens/UserPortal/Events/Events.tsx(1 hunks)src/screens/UserPortal/Organizations/Organizations.tsx(1 hunks)src/screens/UserPortal/Pledges/Pledges.tsx(1 hunks)src/screens/UserPortal/Posts/Posts.tsx(1 hunks)src/screens/UserPortal/Settings/Settings.tsx(1 hunks)src/screens/UserPortal/UserScreen/UserScreen.tsx(1 hunks)src/screens/UserPortal/Volunteer/Actions/Actions.tsx(1 hunks)src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx(1 hunks)src/screens/UserPortal/Volunteer/Groups/Groups.tsx(1 hunks)src/screens/UserPortal/Volunteer/Invitations/Invitations.tsx(1 hunks)src/screens/UserPortal/Volunteer/UpcomingEvents/UpcomingEvents.tsx(1 hunks)src/screens/UserPortal/Volunteer/VolunteerManagement.tsx(1 hunks)src/screens/Users/Users.tsx(1 hunks)src/style/app-fixed.module.css(4 hunks)
✅ Files skipped from review due to trivial changes (31)
- src/screens/CommunityProfile/CommunityProfile.tsx
- src/screens/UserPortal/Settings/Settings.tsx
- src/screens/UserPortal/Organizations/Organizations.tsx
- src/screens/Leaderboard/Leaderboard.tsx
- src/screens/UserPortal/Volunteer/Invitations/Invitations.tsx
- src/screens/FundCampaignPledge/PledgeDeleteModal.tsx
- src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupDeleteModal.tsx
- src/screens/EventVolunteers/Volunteers/VolunteerViewModal.tsx
- src/screens/UserPortal/Volunteer/VolunteerManagement.tsx
- src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx
- src/screens/UserPortal/Volunteer/UpcomingEvents/UpcomingEvents.tsx
- src/screens/UserPortal/Volunteer/Groups/Groups.tsx
- src/screens/EventVolunteers/VolunteerContainer.tsx
- src/screens/ForgotPassword/ForgotPassword.tsx
- src/screens/UserPortal/Events/Events.tsx
- src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupModal.tsx
- src/screens/UserPortal/Volunteer/Actions/Actions.tsx
- src/screens/EventVolunteers/Volunteers/VolunteerCreateModal.tsx
- src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupViewModal.tsx
- src/screens/UserPortal/Posts/Posts.tsx
- src/screens/EventVolunteers/VolunteerGroups/VolunteerGroups.tsx
- src/screens/UserPortal/Donate/Donate.tsx
- src/screens/Users/Users.tsx
- src/screens/UserPortal/Pledges/Pledges.tsx
- src/screens/FundCampaignPledge/PledgeModal.tsx
- src/screens/FundCampaignPledge/FundCampaignPledge.tsx
- src/screens/EventVolunteers/Volunteers/VolunteerDeleteModal.tsx
- src/screens/UserPortal/Chat/Chat.tsx
- src/screens/UserPortal/UserScreen/UserScreen.tsx
- src/screens/BlockUser/BlockUser.tsx
- src/screens/EventManagement/EventManagement.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Test Application
🔇 Additional comments (4)
src/style/app-fixed.module.css (4)
356-363: Status and Active Color Customizations
Defining variables such as--active-color,--active-border-color,--pending-color, and--pending-border-coloradds clarity to status styling and lays a good foundation for dark mode adjustments later on.
364-368: Toggle Button Styling Setup
The new custom properties for the toggle button (--toggleBtn-bg,--toggleBtn-color,--toggleBtn-border,--toggleBtn-color-hover, and--toggleBtn-border-hover) are straightforward and should help ensure consistent button states across components.
2106-2116: New Card Component Styling
The newly introduced.cardand.cardHeaderclasses use the updated custom properties effectively. Usingwidth: fit-content;for.cardappears appropriate in contexts where the card should shrink to its content; just ensure this works well with responsive layouts.
2118-2127: Form Label Styling Consistency
The.formLabelclass now utilizes--formLabel-colorand appears streamlined to work with the new theme variables. This change supports a uniform look across form elements.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/style/app-fixed.module.css (2)
330-343: New CSS Variable Declarations for Component Styling and Dark Mode Adaptability
A fresh group of custom properties (e.g.--pledgeContainer-bg,--popup-border,--popup-bg,--popup-color,--popup-box-shadow,--colorlight-bg,--containerHeight-bg, and--cardHeader-border) has been added. These variables will be instrumental for tailoring styles in dark mode as well as standard themes. Please ensure that:
- The chosen color values (such as the semi-transparent
#31bb6b33for the pledge container) provide sufficient contrast under both light and dark mode scenarios.- The naming conventions remain consistent with existing variables across the codebase.
- Documentation is updated so that future developers know how to override these for dark mode.
2105-2116: Addition of Reusable Card Components
A new generic.cardclass (usingwidth: fit-content) along with a corresponding.cardHeaderclass (which applies padding, a border-bottom using the new--cardHeader-bordervariable, and flex layout properties) has been introduced. These styles should help promote consistency across component cards that may appear in dark mode. Consider:
- Verifying that the use of
fit-contentis supported in your target browsers.- Optionally setting a responsive font-size or additional spacing adjustments inside
.cardHeader .cardTitleif needed for better scalability.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/screens/Leaderboard/Leaderboard.tsx(1 hunks)src/style/app-fixed.module.css(4 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/screens/Leaderboard/Leaderboard.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Test Application
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## develop-postgres #3740 +/- ##
=================================================
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 Please take a look. |
palisadoes
merged commit 3facd9f
into
PalisadoesFoundation:develop-postgres
|
Good work. Only about 100 files left to go. |
What kind of change does this PR introduce?
CSS Refactor
Issue Number:
Fixes #3296
Does this PR introduce a breaking change?
No
Checklist
CodeRabbit AI Review
Test Coverage
Have you read the contributing guide?
Yes
Summary by CodeRabbit