Fix dark mode, kanban overflow, and add theme toggle#30
Conversation
- Add sun/moon theme toggle button in sidebar footer - Fix "Load more issues" banner spacing (flex + gap) - Fix kanban columns overflowing page: fixed container height, column body scrolls, card titles truncate with ellipsis - Overhaul dark mode colors: deep blue-gray backgrounds instead of pure black, brighter text, visible borders (Linear-style) - Hardcode status/priority icon colors for both themes: In Progress=amber, Done=green, Canceled=red, Urgent=red, High=orange, Medium=yellow, Low=blue Co-authored-by: Cursor <cursoragent@cursor.com>
📝 WalkthroughWalkthroughThis PR introduces a theme toggle feature in the user sidebar, adds sun/moon icon components, replaces CSS variable color references with hard-coded hex values across the component and style system, and refines Kanban layout and board styling for improved visual presentation. ChangesTheme and UI Updates
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add 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 |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a theme toggle feature with new sun and moon icons, updates the global color palette in app.css, and refines layout styles for the Kanban board and notice components. Feedback focuses on the use of hardcoded hex colors in several components (Primitives, StatusIcon, CyclesPage, and MyIssuesPage) which should be replaced with CSS variables to maintain theme consistency and reduce duplication. Additionally, the reviewer recommends moving inline styles from the BoardLoadMoreNotice component into the central stylesheet.
| style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }} | ||
| > | ||
| <p> | ||
| <p style={{ margin: 0 }}> |
There was a problem hiding this comment.
Avoid using inline styles for layout and margins. These should be moved to a CSS class in app.css to maintain a clean separation of concerns and ensure consistency with the rest of the application's styling and theme management.
| 0: '#6b7280', 1: '#ef4444', 2: '#f97316', | ||
| 3: '#eab308', 4: '#3b82f6', |
There was a problem hiding this comment.
Hardcoding hex colors here bypasses the CSS variable system. Since you have updated the --prio-* variables in app.css to these exact values (or theme-specific variations), you should continue using var(--prio-...). This ensures that the icons respect the theme's specific color palette (e.g., the slightly different red used in light mode) and allows for centralized color management.
| 0: '#6b7280', 1: '#ef4444', 2: '#f97316', | |
| 3: '#eab308', 4: '#3b82f6', | |
| 0: 'var(--prio-none)', 1: 'var(--prio-urgent)', 2: 'var(--prio-high)', | |
| 3: 'var(--prio-med)', 4: 'var(--prio-low)', |
| function getStatusColorVar(kind: StatusKind): string { | ||
| switch (kind) { | ||
| case 'completed': | ||
| return 'var(--success)'; | ||
| case 'canceled': | ||
| return 'var(--fg-dim)'; | ||
| case 'backlog': | ||
| return '#6b7280'; | ||
| case 'unstarted': | ||
| return '#64748b'; | ||
| case 'started': | ||
| return 'var(--warn)'; | ||
| return '#f59e0b'; | ||
| case 'review': | ||
| return 'var(--info)'; | ||
| return '#7c88ff'; | ||
| case 'completed': | ||
| return '#10b981'; | ||
| case 'canceled': | ||
| return '#ef4444'; | ||
| default: | ||
| return 'var(--fg-dim)'; | ||
| return '#6b7280'; | ||
| } |
There was a problem hiding this comment.
The function getStatusColorVar now returns hardcoded hex strings instead of CSS variables, which makes the function name misleading and breaks theme consistency. For example, the hardcoded #10b981 for 'completed' differs from the --success variable defined in app.css. This will cause status icons to look inconsistent with other success-themed elements (like notices or badges). Consider using semantic CSS variables or defining fixed status variables in your CSS.
| case 'COMPLETED': return '#10b981'; | ||
| case 'CANCELED': return '#ef4444'; | ||
| case 'STARTED': return '#f59e0b'; | ||
| case 'BACKLOG': return '#6b7280'; | ||
| default: return '#64748b'; |
There was a problem hiding this comment.
Avoid hardcoding hex colors in component logic. This mapping is duplicated in MyIssuesPage.tsx and StatusIcon.tsx. Using CSS variables ensures that status colors remain consistent across different views and can be updated globally from the stylesheet.
| case 'completed': return '#10b981'; | ||
| case 'canceled': return '#ef4444'; | ||
| case 'started': return '#f59e0b'; | ||
| case 'backlog': return '#6b7280'; | ||
| default: return '#64748b'; |
There was a problem hiding this comment.
This color mapping is duplicated across several files. Please use CSS variables instead of hardcoded hex values to maintain theme consistency and centralize color management.
![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
🤖 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.
Inline comments:
In `@packages/web/src/styles/app.css`:
- Around line 2823-2827: Remove the deprecated and redundant -webkit-box-orient
and -webkit-line-clamp from the .kanban-column-body .issue-card__title rule and
replace the clamping behavior with a single-line truncation approach: ensure the
selector uses white-space: nowrap; overflow: hidden; and keep text-overflow:
ellipsis so titles truncate correctly on one line; update .kanban-column-body
.issue-card__title accordingly.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 21335ca0-ef5f-42c6-944f-d1e9bb77b6d8
📒 Files selected for processing (8)
packages/web/src/App.tsxpackages/web/src/components/BoardLoadMoreNotice.tsxpackages/web/src/components/Icons.tsxpackages/web/src/components/Primitives.tsxpackages/web/src/components/StatusIcon.tsxpackages/web/src/routes/CyclesPage.tsxpackages/web/src/routes/MyIssuesPage.tsxpackages/web/src/styles/app.css
| .kanban-column-body .issue-card__title { | ||
| display: block; | ||
| -webkit-line-clamp: unset; | ||
| -webkit-box-orient: unset; | ||
| text-overflow: ellipsis; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify deprecated property usage (expect no matches after fix).
rg -n --fixed-strings "-webkit-box-orient" packages/web/src/styles/app.cssRepository: fakechris/Involute
Length of output: 44
🏁 Script executed:
cat -n packages/web/src/styles/app.css | sed -n '2820,2835p'Repository: fakechris/Involute
Length of output: 588
🏁 Script executed:
# Find stylelint configuration
fd -name '.stylelintrc*' -o -name 'stylelint.config.*' packages/webRepository: fakechris/Involute
Length of output: 293
🏁 Script executed:
# Check package.json for stylelint config
cd packages/web && head -100 package.json | grep -A 20 stylelintRepository: fakechris/Involute
Length of output: 44
🏁 Script executed:
# Find stylelint config files with correct syntax
find . -maxdepth 3 -type f \( -name '.stylelintrc*' -o -name 'stylelint.config.*' \)Repository: fakechris/Involute
Length of output: 82
🏁 Script executed:
# Search root directory for stylelint config
find . -maxdepth 2 -type f -name '*stylelint*'Repository: fakechris/Involute
Length of output: 82
🏁 Script executed:
cat .stylelintrc.jsonRepository: fakechris/Involute
Length of output: 1422
🌐 Web query:
-webkit-box-orient deprecated CSS property status
💡 Result:
-webkit-box-orient is a non-standard, deprecated CSS property from the original flexbox draft, replaced by the standard flex-direction property.[1][2][3] MDN explicitly labels it as deprecated and non-standard, advising against its use in production due to limited support and potential removal.[1][2] It is part of the legacy -webkit-box flexbox model, supported with prefixes in older browsers (Chrome, Safari, Firefox via -moz and -webkit aliases), but browsers have converged on standard flexbox.[2][4] As of 2026, no sources indicate full removal from browsers; it remains for web compatibility, though discouraged.[1][3][5] CanIUse lists it but detailed tables were not directly surfaced; usage persists on some sites.[5] Migrate to display: flex; flex-direction: row/column; for modern, standard support.[6]
Citations:
- 1: https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/box-orient
- 2: https://devdoc.net/web/developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-orient.html
- 3: https://github.com/mdn/content/blob/main/files/en-us/web/css/reference/properties/box-orient/index.md
- 4: https://bugzilla.mozilla.org/show_bug.cgi?id=1262049
- 5: Remove css/css-flexbox/webkit-box-vertical-writing-mode.html web-platform-tests/interop#355
- 6: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts
Remove deprecated -webkit-box-orient property from kanban title.
-webkit-box-orient is deprecated and non-standard. These properties are also redundant—with white-space: nowrap, line-clamp behavior is unnecessary.
Proposed fix
.kanban-column-body .issue-card__title {
display: block;
- -webkit-line-clamp: unset;
- -webkit-box-orient: unset;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}🧰 Tools
🪛 Stylelint (17.11.0)
[error] 2826-2826: Deprecated property "-webkit-box-orient" (property-no-deprecated)
(property-no-deprecated)
🤖 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 `@packages/web/src/styles/app.css` around lines 2823 - 2827, Remove the
deprecated and redundant -webkit-box-orient and -webkit-line-clamp from the
.kanban-column-body .issue-card__title rule and replace the clamping behavior
with a single-line truncation approach: ensure the selector uses white-space:
nowrap; overflow: hidden; and keep text-overflow: ellipsis so titles truncate
correctly on one line; update .kanban-column-body .issue-card__title
accordingly.
1 participant
Summary
Test plan
Made with Cursor
Summary by CodeRabbit
Release Notes
New Features
Style