fixix colors in notes top bar buttons #304
Conversation
✅ Deploy Preview for graypaper-reader ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughUpdates the shared UI dependency version, adds modal styling in CSS, forces dark color scheme on specific header buttons, adjusts Settings modal class names, and wraps RemoteSources content in a div with a sidebar-foreground text class. Changes
Sequence Diagram(s)Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
Status, Documentation and Community
|
![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 (5)
src/components/Header/components/NotesButtonsGroup.tsx (3)
17-27: Add accessible name to the Undo button.Tooltips aren’t read by screen readers. Provide an aria-label.
<Button forcedColorScheme="dark" variant="outline" onClick={handleUndo} disabled={!canUndo} className="h-[32px]" + aria-label="Undo" data-tooltip-id="notes-button-tooltip" data-tooltip-content="Undo"
30-41: Add accessible name to the Redo button.Mirror the Undo change for consistency and a11y.
<Button forcedColorScheme="dark" variant="outline" onClick={handleRedo} disabled={!canRedo} className="h-[32px]" + aria-label="Redo" data-tooltip-id="notes-button-tooltip" data-tooltip-content="Redo"
44-54: Pin toggle: a11y label and visual consistency with other header buttons.
- Add an aria-label that tracks the current state. 2) Consider aligning
MoreButtonNotesActionsButtonwith the sameforcedColorScheme="dark"for a consistent top bar look.<Button forcedColorScheme="dark" variant="outline" onClick={() => setNotesPinned(!notesPinned)} className="h-[32px]" + aria-label={notesPinned ? "Unpin notes" : "Pin notes"} data-tooltip-id="notes-button-tooltip" data-tooltip-content={notesPinned ? "Unpin" : "Pin"}src/components/RemoteSources/RemoteSources.tsx (1)
22-44: Replace undefined Tailwind token with CSS variable
Replacetext-sidebar-foregroundwith the arbitrary value classtext-[var(--sidebar-foreground)], since notext-sidebar-foregroundtoken is defined in yourtailwind.config.js.- <div className="text-sidebar-foreground"> + <div className="text-[var(--sidebar-foreground)]">src/App.css (1)
67-71: Border color: add fallback and remove stale commented rule.Provide a non-
light-dark()fallback and delete the commented line to reduce confusion..ReactModal__Content { background: var(--sidebar) !important; - /* border-color: light-dark(rgba(204, 204, 204), #111) !important; */ - border-color: light-dark(rgba(204, 204, 204), #666) !important; + /* Fallback for browsers without light-dark() */ + border-color: #666; + border-color: light-dark(rgba(204, 204, 204), #666) !important; }
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (5)
package.json(1 hunks)src/App.css(1 hunks)src/components/Header/components/NotesButtonsGroup.tsx(3 hunks)src/components/Header/components/SettingsModal.tsx(1 hunks)src/components/RemoteSources/RemoteSources.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.css
⚙️ CodeRabbit configuration file
Review CSS code with focus on Tailwind CSS 4.x best practices and conventions. Ensure compatibility with Tailwind 4.x features and syntax.
Files:
src/App.css
**/*.{js,jsx,ts,tsx}
⚙️ CodeRabbit configuration file
When reviewing Tailwind CSS classes, ensure they follow Tailwind 4.x conventions and suggest modern 4.x alternatives for deprecated patterns.
Files:
src/components/RemoteSources/RemoteSources.tsxsrc/components/Header/components/SettingsModal.tsxsrc/components/Header/components/NotesButtonsGroup.tsx
🔇 Additional comments (2)
package.json (1)
22-22: Verify forcedColorScheme API support in @fluffylabs/shared-ui@^0.1.6 and update lockfile
- Ensure the
Buttoncomponent acceptsforcedColorScheme="dark"and that no peer dependencies have changed.- Regenerate and commit the updated
package-lock.json.src/components/Header/components/SettingsModal.tsx (1)
11-15: Refactor header to use flex layout and add aria-label
Replace the float-based header with a flex container to prevent title overlap and improve accessibility:- <button className="default-button float-right" onClick={onClose}> - ✖︎ - </button> - <div className="text-2xl font-bold mb-4">Settings</div> + <div className="mb-4 flex items-start justify-between gap-2"> + <div className="text-2xl font-bold">Settings</div> + <button + className="default-button shrink-0" + onClick={onClose} + aria-label="Close settings" + > + ✖︎ + </button> + </div>Verify the modal layout after this change to catch any regressions.
1 participant
Summary by CodeRabbit
New Features
Style
Chores