fix: polish Clerk sign-in and particle build#1585
Conversation
|
@Abhash-Chakraborty is attempting to deploy a commit to the recode Team on Vercel. A member of the Team first needs to authorize it. |
|
Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. The estimated time for response is 5–8 hrs. In the meantime, please provide all necessary screenshots and make sure you run - npm build run , command and provide a screenshot, a video recording, or an image of the update you made below, which helps speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊 Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your PR goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv. We are here to help you on this journey of open source. Consistent 20 contributions are eligible for sponsorship 💰 🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨ 📚Your perks for contribution to this community 👇🏻
If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊 |
github-actions
Bot
added
in-review
|
✅ Synchronized metadata from Issue #1574:
|
There was a problem hiding this comment.
Pull request overview
This PR updates authentication UI styling to better match the site’s black/white theme, aligns Clerk modal social button styling with shared theme tokens, and resolves the tsParticles build/type issues by upgrading to the v4 provider API and aligning package versions. It also includes a small TypeScript type-only import fix and a Docusaurus sidebar refactor for local theme component imports.
Changes:
- Introduce shared CSS variables for “auth button” theming and apply them to Clerk navbar + leaderboard sign-in buttons and Clerk social buttons appearance.
- Upgrade tsParticles React integration to v4 (engine/react/slim) and migrate the particle component to
ParticlesProvider. - Fix TypeScript typing/import issues in touched areas (e.g., projects data type import).
Reviewed changes
Copilot reviewed 10 out of 11 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| src/theme/Root.tsx | Updates Clerk appearance tokens for social buttons to use shared CSS variables. |
| src/theme/DocSidebarItem/index.tsx | Switches DocSidebarItem subcomponent imports to local relative paths. |
| src/theme/DocSidebarItem/Category/index.tsx | Cleans up imports and improves active-item checks with a typed href guard. |
| src/pages/dashboard/index.tsx | Improves sign-in button accessibility (type, aria-label). |
| src/pages/dashboard/dashboard.css | Restyles leaderboard sign-in button to match new auth theme tokens. |
| src/database/projects/projects.tsx | Converts projects data import to a type-only alias for correctness. |
| src/css/custom.css | Adds global auth button CSS variables and restyles Clerk navbar sign-in button. |
| src/components/ui/NavbarClerkAuth.tsx | Improves navbar sign-in button accessibility (type, aria-label). |
| src/components/particle.tsx | Migrates tsParticles usage to v4 ParticlesProvider init API. |
| package.json | Aligns tsParticles dependencies to v4 and adds engine package. |
| package-lock.json | Updates lockfile to reflect dependency graph changes from tsParticles upgrade. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| "@tsparticles/react": "^3.0.0", | ||
| "@tsparticles/engine": "^4.0.4", | ||
| "@tsparticles/react": "^4.0.4", | ||
| "@tsparticles/slim": "^4.0.4", |
|
@Abhash-Chakraborty fix the lint ci error and we are good to go. |
|
✅ Synchronized metadata from Issue #1574:
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
| "@tsparticles/engine": "^3.9.1", | ||
| "@tsparticles/react": "^3.0.0", | ||
| "@tsparticles/slim": "^4.0.4", | ||
| "@tsparticles/slim": "^3.9.1", |
| @@ -1,23 +1,22 @@ | |||
| import * as React from "react"; | |||
| import Particles, { initParticlesEngine } from "@tsparticles/react"; | |||
| import { Engine } from "@tsparticles/engine"; | |||
| ): item is Extract< | ||
| DocSidebarItemCategoryProps["item"]["items"][number], | ||
| { href: string } | ||
| > { |
…gnin-ui-1574 # Conflicts: # package-lock.json
|
✅ Synchronized metadata from Issue #1574:
|
|
@Abhash-Chakraborty try to resolve the merge conflicts . |
|
✅ Synchronized metadata from Issue #1574:
|
|
✅ Synchronized metadata from Issue #1574:
|
…nto Abhash/fix-clerk-signin-ui-1574
|
✅ Synchronized metadata from Issue #1574:
|
Summary
Testing
Closes #1574
Note
The GitHub OAuth 404 seen in production is caused by Clerk/GitHub OAuth configuration, not scopes or frontend code. The generated GitHub OAuth URL includes a leading
+before the client ID, which indicates a leading space in the Client ID saved in Clerk. Remove leading/trailing whitespace from the GitHub Client ID in Clerk and rotate the exposed client secret before re-testing production sign-in.