Fix: "Star us" button now glows orange in light mode#171
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Co-authored-by: yamcodes <2014360+yamcodes@users.noreply.github.com>
|
This simply doesn't work @copilot. Maybe draw more inspiration from how we achieved this for dark mode. Right now your glow looks blue not orange. |
Co-authored-by: yamcodes <2014360+yamcodes@users.noreply.github.com>
Fixed! The issue was using CSS custom properties ( The orange glow should now display correctly in light mode. Commit: 69fb390 Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
- Introduced `class-variance-authority` for managing button styles based on device variants (mobile and desktop). - Simplified the button's class management by replacing hardcoded styles with variant functions. - Enhanced the shadow effect for the desktop variant to improve visual appeal.
|
Important Review skippedBot user detected. To trigger a single review, invoke the You can disable this status message by setting the Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughImplements variant-driven styling via class-variance-authority for StarUsButton, expands public props to include variant props, adds dynamic GitHub star count fetching and display, introduces environment-driven GitHub URL, and restructures mobile/desktop wrappers and shadows to use CVA variants. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant Page
participant StarUsButton
participant GitHubAPI as GitHub API
User->>Page: Load page
Page->>StarUsButton: Mount component
Note right of StarUsButton: Resolve GitHub URL\n(NEXT_PUBLIC_GITHUB_URL or fallback)
StarUsButton->>GitHubAPI: GET /repos/yamcodes/arkenv
alt Success
GitHubAPI-->>StarUsButton: { stargazers_count }
StarUsButton->>StarUsButton: setState(count)
StarUsButton-->>User: Render button with count
else Error
GitHubAPI--x StarUsButton: Error
StarUsButton->>StarUsButton: Swallow error, count=null
StarUsButton-->>User: Render button without count
end
rect rgba(255,165,0,0.08)
Note over StarUsButton: Apply CVA variants\nmobile/desktop + shadow layers
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings, 1 inconclusive)
✅ Passed checks (2 passed)
Comment |
- Updated mobile button styles to include a hover gradient effect and refined shadow properties. - Adjusted desktop shadow styles for better visual consistency. - Added a shadow element for mobile to enhance the button's appearance.
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
![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 (4)
apps/www/components/page/star-us-button.tsx (4)
133-136: Unify repo URL: link fallback should match star-count repo.The anchor falls back to
your-org/your-repowhile star count targetsyamcodes/arkenv. Use the same repo for both to avoid confusion.- "https://github.com/your-org/your-repo" + "https://github.com/yamcodes/arkenv"Apply the same change in the desktop anchor.
Also applies to: 171-175
70-87: Derive the GitHub API URL from NEXT_PUBLIC_GITHUB_URL and guard unmount.Keeps the UI flexible, avoids hardcoding, and prevents setState after unmount.
// Fetch star count from GitHub API useEffect(() => { - const fetchStarCount = async () => { + const fetchStarCount = async () => { try { - const response = await fetch( - "https://api.github.com/repos/yamcodes/arkenv", - ); + const repoUrl = + process.env.NEXT_PUBLIC_GITHUB_URL ?? "https://github.com/yamcodes/arkenv"; + const m = repoUrl.match(/github\.com\/([^/]+)\/([^/?#]+)/); + const owner = m?.[1] ?? "yamcodes"; + const repo = m?.[2] ?? "arkenv"; + const controller = new AbortController(); + const response = await fetch( + `https://api.github.com/repos/${owner}/${repo}`, + { signal: controller.signal, headers: { Accept: "application/vnd.github+json" } }, + ); if (response.ok) { const data = await response.json(); setStarCount(data.stargazers_count); } } catch { // Silently fail - we'll just not show the count } }; fetchStarCount(); }, []);
4-4: Remove unused VariantProps from public API (or wire it up).You don’t expose
variantto consumers; includingVariantPropsbloats the public type. Either remove it or plumb it through.-import { cva, type VariantProps } from "class-variance-authority"; +import { cva } from "class-variance-authority"; @@ type StarUsProps = { className?: string; -} & VariantProps<typeof starUsButtonVariants>; +};If you intend to expose variants later, keep the type but actually accept/destructure it in the component.
Also applies to: 63-66
92-119: Respect reduced motion.Disable continuous animations when users prefer reduced motion.
<style jsx global>{` @media (min-width: 640px) { + @media (prefers-reduced-motion: reduce) { + .star-sparkle, .star-bounce { animation: none !important; } + } + @keyframes sparkle {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/www/components/page/star-us-button.tsx(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Cursor Bugbot
🔇 Additional comments (1)
apps/www/components/page/star-us-button.tsx (1)
162-169: Border/ring precedence check.
variant="outline"likely sets a default border color; you also addborder-yellow-200 dark:border-yellow-700. Verify Tailwind class order doesn’t get overridden by the Button’s internal classes. If it does, consider moving border classes inside the Button’s variant styling or increase specificity.
- Updated shadow styles for both mobile and desktop variants to use direct RGBA values instead of CSS custom properties for improved consistency and performance.
The "Star us" button was only displaying an orange glow effect in dark mode, while in light mode it appeared with minimal shadow. This created visual inconsistency with the "Set sail" button, which has a prominent blue glow in both light and dark modes.
Changes Made
Updated the shadow implementation in
apps/www/components/page/star-us-button.tsx:shadow-[0_8px_16px] [--tw-shadow-color:rgba(255,150,0,0.6)]to direct RGB valuesshadow-[0_8px_16px_rgba(255,150,0,0.6)]shadow-[0_16px_20px] [--tw-shadow-color:rgba(255,150,0,0.6)]to direct RGB valuesshadow-[0_16px_20px_rgba(255,150,0,0.6)]The fix addresses the issue where CSS custom properties weren't rendering the orange color correctly, causing the glow to appear blue instead of orange. The new implementation follows the same pattern as the "Set sail" button, which uses direct RGB values in its shadow declarations.
The orange glow now matches the intensity of the blue glow on the "Set sail" button, providing consistent visual hierarchy and brand cohesion across both themes.
Before & After
Light Mode:
Dark Mode:
Fixes #170.
> [!WARNING]
>
>
fonts.googleapis.com💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.
Summary by CodeRabbit
New Features
Style