Visually deconflict sync status from notifications button #3547
Conversation
✅ Deploy Preview for actualbudget ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Bundle Stats — desktop-clientHey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle. As this PR is updated, I'll keep you updated on how the bundle size is impacted. Total
Changeset No files were changed View detailed bundle breakdownAdded No assets were added Removed No assets were removed Bigger No assets were bigger Smaller No assets were smaller Unchanged
|
Bundle Stats — loot-coreHey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle. As this PR is updated, I'll keep you updated on how the bundle size is impacted. Total
Changeset No files were changed View detailed bundle breakdownAdded No assets were added Removed No assets were removed Bigger No assets were bigger Smaller No assets were smaller Unchanged
|
afv22
changed the title
afv22
changed the title
afv22
changed the title
WalkthroughThe pull request modifies the Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
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
CodeRabbit Configuration File (
|
![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
🧹 Outside diff range and nitpick comments (1)
packages/desktop-client/src/components/BankSyncStatus.tsx (1)
Line range hint
1-72: Consider improvements for accessibility, customization, and testing.While the current implementation addresses the immediate issue, here are some suggestions to enhance the component:
Accessibility: Add appropriate ARIA attributes to improve screen reader support. For example:
<View role="status" aria-live="polite" aria-atomic="true" > {/* ... */} </View>Customization: Consider extracting the styles into a separate constant or using a theming system for easier customization. This could make future adjustments simpler.
Testing: Add test IDs to key elements to facilitate easier testing. For example:
<View data-testid="bank-sync-status"> {/* ... */} </View>Would you like me to provide more detailed code examples for these improvements?
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
upcoming-release-notes/3547.mdis excluded by!**/*.md
📒 Files selected for processing (1)
- packages/desktop-client/src/components/BankSyncStatus.tsx (1 hunks)
| @@ -35,7 +35,7 @@ export function BankSyncStatus() { | |||
| right: 0, | |||
| marginTop: 5, | |||
| alignItems: 'center', | |||
| zIndex: 501, | |||
| zIndex: 1000, | |||
There was a problem hiding this comment.
💡 Codebase verification
Potential z-index conflicts detected.
Several other components already use zIndex values of 1000 or higher. Setting zIndex: 1000 in BankSyncStatus.tsx may still lead to visual overlaps with these elements. Consider reviewing and adjusting the z-index hierarchy to ensure clear layering and avoid conflicts.
🔗 Analysis chain
Increased z-index addresses the visual overlap issue.
The change from zIndex: 501 to zIndex: 1000 should effectively resolve the visual conflict between the "Syncing..." alert and the notifications button. This aligns with the PR objective of deconflicting the sync status from the notifications button.
To ensure this change doesn't introduce any new conflicts, let's verify the z-index values of other components:
If this script returns any results, we may need to re-evaluate the chosen z-index value to ensure it doesn't conflict with other important UI elements.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for any z-index values greater than or equal to 1000
# Expected result: No other components should have a z-index >= 1000
rg --type typescript --type javascript 'zIndex:?\s*(\d{4,}|[1-9]\d{3,})' -g '!**/BankSyncStatus.tsx'
Length of output: 137
Script:
#!/bin/bash
# Description: Check for any z-index values greater than or equal to 1000
# Expected result: No other components should have a z-index >= 1000
rg --type ts --type tsx --type js 'zIndex\s*:\s*(1000|[1-9]\d{3,})' -g '!**/BankSyncStatus.tsx'
Length of output: 125
Script:
#!/bin/bash
# Description: Check for any z-index values greater than or equal to 1000
# Expected result: No other components should have a z-index >= 1000
rg 'zIndex\s*:\s*(1000|[1-9]\d{3,})' -g '*.ts' -g '*.tsx' -g '*.js' -g '!packages/desktop-client/src/components/BankSyncStatus.tsx'
Length of output: 1719
There was a problem hiding this comment.
Realized the increased zIndex conflicts with the left-hand menu button, making it impossible to open the menu when the 'syncing' message is present. Will update.
Fixes #3536
Increasing stack placement of the "Syncing..." alert so it does not visually conflict with the notifications button.
Before
After