fix: remove thick black border from checkbox for cleaner UI #471
Conversation
👷 Deploy request for appcut pending review.Visit the deploys page to approve it
|
|
@Antonio-jb is attempting to deploy a commit to the OpenCut OSS Team on Vercel. A member of the Team first needs to authorize it. |
|
""" WalkthroughThis change introduces several IDE configuration files for IntelliJ IDEA, updates the Changes
Sequence Diagram(s)No sequence diagram generated as the changes are limited to configuration, dependency updates, and minor styling adjustments without affecting control flow. Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Possibly related issues
Possibly related PRs
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ 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. 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: 0
🔭 Outside diff range comments (1)
apps/web/src/app/projects/page.tsx (1)
402-410: Tailwind classw-4.9/h-4.9is invalid – sizing will be lost
4.9isn’t part of Tailwind’s default spacing scale, and without the arbitrary-value syntax (w-[1.225rem]) no CSS will be generated. The element will therefore collapse towidth:auto; height:auto, re-introducing the browser-default checkbox border on some screens.- <div className="w-4.9 h-4.9 rounded-full bg-background/80 backdrop-blur-sm border flex items-center justify-center"> + <div className="w-5 h-5 rounded-full bg-background/80 backdrop-blur-sm border flex items-center justify-center">(or use
w-[1.25rem] h-[1.25rem]if you need a custom size).
🧹 Nitpick comments (4)
apps/web/package.json (1)
72-76: Avoid duplicating workspace-wide devDependenciesThe root
package.jsonalready contains@types/node; adding it again here can cause version drift if one entry is bumped and the other is forgotten.- "@types/node": "^24.1.0",Rely on the hoisted version from the monorepo root, or reference it via
"workspace:*"if you really need it locally..idea/vcs.xml (1)
1-6: Re-evaluate committing IDE project files
.ideaXML files (vcs.xml, modules.xml, *.iml) are typically user-specific and tend to create noisy diffs & merge conflicts. Unless the team has a documented policy for checking them in, consider:
- Adding
.idea/to the repo-root.gitignore.- Keeping only share-worthy settings (e.g. code-style) under
.idea/and ignoring the rest.This keeps the VCS clean and editor-agnostic.
.idea/OpenCut.iml (1)
1-12: IDE-specific module file may be better kept out of Git
.imlfiles encode absolute paths ($MODULE_DIR$/.tmp, etc.) that vary per machine and can produce hard-to-resolve merge conflicts. If the team chooses to keep them, ensure they are:
- Generated deterministically (no absolute user paths).
- Updated through a single IDE version across contributors.
Otherwise, ignore them alongside other
.ideaartefacts..idea/modules.xml (1)
1-8: Avoid committing IDE-specific metadata to the repo
.idea/*files are local-environment artefacts. Keeping them in version control can cause noisy diffs, merge conflicts, and lock the team into a single IDE. Prefer adding.idea/to the root.gitignore, or move the shared settings to an IDE-agnostic location (e.g. editorconfig).
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
bun.lockis excluded by!**/*.lock
📒 Files selected for processing (8)
.idea/.gitignore(1 hunks).idea/OpenCut.iml(1 hunks).idea/modules.xml(1 hunks).idea/vcs.xml(1 hunks)apps/web/package.json(1 hunks)apps/web/src/app/projects/page.tsx(1 hunks)apps/web/src/hooks/use-editor-actions.ts(1 hunks)package.json(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: simonorzel26
PR: OpenCut-app/OpenCut#324
File: apps/web/src/components/editor/timeline/timeline-content.tsx:9-34
Timestamp: 2025-07-17T08:22:10.492Z
Learning: User simonorzel26 prefers incremental refactoring approach: moving code first to reduce PR complexity, then cleaning up in separate single-responsibility PRs. This strategy prioritizes safety and manageable PR sizes over immediate perfect code structure.
Learnt from: simonorzel26
PR: OpenCut-app/OpenCut#324
File: apps/web/src/components/editor/snap-indicator.tsx:43-43
Timestamp: 2025-07-17T08:26:10.961Z
Learning: In the timeline refactor PR #324, the snap indicator component in apps/web/src/components/editor/snap-indicator.tsx requires the hard-coded `ml-48` class in addition to the calculated `leftPosition` for proper alignment. This is intentional and needed for the new timeline layout.
apps/web/src/app/projects/page.tsx (1)
Learnt from: simonorzel26
PR: #324
File: apps/web/src/components/editor/snap-indicator.tsx:43-43
Timestamp: 2025-07-17T08:26:10.961Z
Learning: In the timeline refactor PR #324, the snap indicator component in apps/web/src/components/editor/snap-indicator.tsx requires the hard-coded ml-48 class in addition to the calculated leftPosition for proper alignment. This is intentional and needed for the new timeline layout.
🔇 Additional comments (3)
package.json (1)
5-7: Align@types/nodeversion with the Node runtime used in CI/production
@types/node@^24.1.0targets the (yet-to-be-released) Node v24 API surface, while the project README & PR description mention local testing on Node 22 .x. Mismatched type definitions can silently surface as inaccurate IntelliSense or TS errors once newer globals/APIs creep in.- "@types/node": "^24.1.0", + "@types/node": "^22.2.0",Please verify which Node version your deployment and CI runners actually use and pin the type definitions accordingly (or bump the runtime everywhere).
.idea/.gitignore (1)
1-8: 👍 Good call ignoring volatile IDEA artefactsExplicitly black-listing
shelf/,workspace.xml,httpRequests/, and datasource files prevents accidental commits of local state.apps/web/src/hooks/use-editor-actions.ts (1)
29-36: Ignore deps-array suggestion for useActionHandler
The third argument of useActionHandler is an activation flag/ref (MutableRefObject<boolean> | boolean | undefined), not a React-deps array. Passingundefinedsimply means “always active.” The hook’s internal effect already manages its own subscriptions and dependencies. You can disregard the suggestion to supply[]or drop the explicitundefined.Likely an incorrect or invalid review comment.
|
thanks :) |
2 participants
Description
This PR removes the default thick black border that appears around checkboxes in the project list UI. The updated style makes the interface cleaner and more modern.
There was no existing issue open that I could find, but this is a small visual improvement that aligns with the current design system.
Type of change
How Has This Been Tested?
bun run lint— no lint errors from my changesbunx biome format --write .— formatted projectbunx biome check page.tsx— verified no warnings in modified fileTest Configuration:
Screenshots
Before:
Checkbox had thick black border (default browser style).
After:
Checkbox now has cleaner, consistent styling matching the app.
Checklist:
Additional context
This is a small front-end contribution focused on improving visual clarity. Let me know if you'd like the checkbox style further refined or adjusted for accessibility. I'm happy to iterate.
Summary by CodeRabbit
Style
Chores
@types/nodepackage as a development dependency.