fix: improve dark mode container harmony#320
Open
Harshwardhan-1 wants to merge 1 commit into
Open
Conversation
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
📝 WalkthroughWalkthrough
ChangesDark-mode container elevation
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~5 minutes Suggested labels
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
🎉 Thank you @Harshwardhan-1 for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/pages/Tracker/Tracker.tsx (1)
171-183: ⚡ Quick winExtract shared elevated-container
sxto avoid style drift.The same dark-mode elevation styles are repeated in three places. Centralizing this style keeps the UI consistent and makes future tuning safer.
♻️ Proposed refactor
+ const elevatedContainerSx = { + backgroundColor: + theme.palette.mode === "dark" + ? "rgba(30, 41, 59, 0.65)" + : theme.palette.background.paper, + backdropFilter: "blur(8px)", + border: + theme.palette.mode === "dark" + ? "1px solid rgba(148, 163, 184, 0.15)" + : "none", + }; <Paper elevation={1} sx={{ p: 2, mb: 4, - backgroundColor: - theme.palette.mode === "dark" - ? "rgba(30, 41, 59, 0.65)" - : theme.palette.background.paper, - backdropFilter: "blur(8px)", - border: - theme.palette.mode === "dark" - ? "1px solid rgba(148, 163, 184, 0.15)" - : "none", + ...elevatedContainerSx, }} > <Paper elevation={1} sx={{ p: 4, textAlign: "center", - backgroundColor: - theme.palette.mode === "dark" - ? "rgba(30, 41, 59, 0.65)" - : theme.palette.background.paper, - backdropFilter: "blur(8px)", - border: - theme.palette.mode === "dark" - ? "1px solid rgba(148, 163, 184, 0.15)" - : "none", + ...elevatedContainerSx, }} > <TableContainer component={Paper} sx={{ - backgroundColor: - theme.palette.mode === "dark" - ? "rgba(30, 41, 59, 0.65)" - : theme.palette.background.paper, - backdropFilter: "blur(8px)", - border: - theme.palette.mode === "dark" - ? "1px solid rgba(148, 163, 184, 0.15)" - : "none", + ...elevatedContainerSx, }} >Also applies to: 355-367, 383-393
🤖 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 `@src/pages/Tracker/Tracker.tsx` around lines 171 - 183, Extract the repeated dark-mode elevation style block used in the sx props into a single shared constant (e.g., elevatedContainerSx) and replace the inline sx objects in Tracker.tsx with a reference to that constant; locate the inline sx blocks that use theme.palette.mode checks (the sx prop that sets p, mb, backgroundColor using theme.palette.mode === "dark", backdropFilter, and border) and move those style rules into the shared elevatedContainerSx so all three occurrences (the one shown plus the blocks at the other two usages) reference the same object, keeping any component-specific overrides (like p or mb) by merging or extending the shared sx where needed.
🤖 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.
Nitpick comments:
In `@src/pages/Tracker/Tracker.tsx`:
- Around line 171-183: Extract the repeated dark-mode elevation style block used
in the sx props into a single shared constant (e.g., elevatedContainerSx) and
replace the inline sx objects in Tracker.tsx with a reference to that constant;
locate the inline sx blocks that use theme.palette.mode checks (the sx prop that
sets p, mb, backgroundColor using theme.palette.mode === "dark", backdropFilter,
and border) and move those style rules into the shared elevatedContainerSx so
all three occurrences (the one shown plus the blocks at the other two usages)
reference the same object, keeping any component-specific overrides (like p or
mb) by merging or extending the shared sx where needed.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 735aba5c-0ea2-4b8c-81a9-d728f866c5c0
📒 Files selected for processing (1)
src/pages/Tracker/Tracker.tsx
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
1 participant
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.
Related Issue
Description
Improved dark mode container background harmony by updating elevated container styles to better match the application's dark theme.
Changes made:
• Updated Tracker input section background styling
• Updated "No Data Found" container styling
• Updated table container backgrounds in dark mode
• Added subtle border and blur effect for better elevation consistency
How Has This Been Tested?
• Tested locally on Chrome
• Verified dark mode appearance on localhost
• Checked visual consistency between background and elevated containers
Screenshots (if applicable)
Before:
After:
Type of Change
Summary by CodeRabbit