Feat/hud overlay ux overhaul#450
Conversation
…ces spinner ui Added corner-shape: squircle; to SourceSelector.module.css for more visually appealing rounded corners. Customized windows source selector scrollbar to be more subtle but carry the product colour. Removed box-shadow on SourceSelector because electron doesn't round corners of the shadow, thereby leaving a square border shadow conflicting with the rounded corners of the SourceSelector.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
📝 WalkthroughWalkthroughRefines SourceSelector styling (corner shape, radii, borders, scrollbar, spinner, button feedback), adds a Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/launch/SourceSelector.module.css`:
- Around line 11-13: The commented multi-line box-shadow block in
SourceSelector.module.css is missing required whitespace around the comment
delimiters; update the comment that contains "box-shadow" so it uses
stylelint-safe formatting by adding a space after /* and before */, e.g. change
/*...*/ to /* ... */ for that commented block to satisfy Stylelint rules.
In `@src/components/launch/SourceSelector.tsx`:
- Line 68: The spinner uses Tailwind's duration-500 which only affects
transitions, not the animation speed; update the spinner in SourceSelector (the
div with className containing "animate-spin duration-500") to set the spin
animation duration directly—either replace duration-500 with a Tailwind
arbitrary animation class like animate-[spin_0.5s_linear_infinite] or add an
inline style setting animationDuration: '0.5s' so the spinner actually spins
faster.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: ceb8e191-ef22-4bf1-ba83-eacd0c28cb87
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (4)
.gitignoresrc/components/launch/SourceSelector.module.csssrc/components/launch/SourceSelector.tsxsrc/index.css
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Lines 5010 to 5012 in 1cdb8ed
Regenerate lockfile to include Vitest’s nested vite deps
This lockfile edit removed the node_modules/@vitest/browser*/node_modules/vite subtree while @vitest/mocker in that subtree still expects a vite peer, which leaves package-lock.json inconsistent for clean installs. On this commit, npm ci --dry-run --ignore-scripts fails with Missing: vite@ from lock file, so CI and fresh developer environments cannot install dependencies. Please regenerate and commit the lockfile with standard npm settings so npm ci succeeds reproducibly.
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
|
@michTheBrandofficial fix ci issues 🙏 |
|
@siddharthvaddem I found the problem was I used node v25 to install deps. All should be fine now. |
2 participants
Description
Source selector User Interface Polish
Motivation
I personally believe the OpenScreen's functionality is great, the UI/UX, not so there.
So as part of fixing UI/UX related issues, I choose to polish the UI and fix User Experience issues.
Hence, the branch name hud overlay ux polish.
Type of Change
Related Issue(s)
Most closely linked to #435 as that is the base for fixing hud overlay UX.
Screenshots / Video
Screenshot
Source Selector Scrollbar, border rounded corner polish
Video
None
Testing
You can test by running your dev server, clicking the source selector, a button that says
screenand seeing the visual changes on the source selector.Checklist
Summary by CodeRabbit
Style
Chores