Add hover and color styles to “Apply to GSoC with AOSSIE” button#582
Open
Abhishekmaurya12367 wants to merge 3 commits intoAOSSIE-Org:mainfrom
Open
Add hover and color styles to “Apply to GSoC with AOSSIE” button#582Abhishekmaurya12367 wants to merge 3 commits intoAOSSIE-Org:mainfrom
Abhishekmaurya12367 wants to merge 3 commits intoAOSSIE-Org:mainfrom
Conversation
Make Apply to GSoC with AOSSIE CTA more interactive with a clear hover state and improved focus-visible styling. Co-authored-by: Cursor <cursoragent@cursor.com>
📝 WalkthroughWalkthroughReplaces FontAwesome Twitter icon with a new Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
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.
🧹 Nitpick comments (1)
src/components/Banner.jsx (1)
20-24: Remove unusedgroupclass and modernize Link usage.The
grouputility on the<a>tag is unused — no child elements referencegroup-hover:orgroup-focus:, making it safe to remove.Banner.jsx is the only file in the codebase using
legacyBehavior. All other Link components applyclassNamedirectly to the Link element (the modern Next.js 14 pattern). Modernize this to match the project convention by removinglegacyBehaviorand applying styles directly to<Link>:Proposed change
- <Link href="/apply" legacyBehavior> - <a className="group relative inline-flex items-center overflow-hidden rounded-lg bg-white px-8 py-3 font-mono font-semibold text-[`#00843D`] shadow-sm ring-1 ring-black/10 transition hover:bg-[`#006b31`] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-[`#00843D`] dark:bg-black dark:text-yellow-400 dark:ring-white/15 dark:hover:bg-white dark:hover:text-black dark:focus-visible:ring-black dark:focus-visible:ring-offset-2 dark:focus-visible:ring-offset-yellow-400"> + <Link href="/apply" className="relative inline-flex items-center overflow-hidden rounded-lg bg-white px-8 py-3 font-mono font-semibold text-[`#00843D`] shadow-sm ring-1 ring-black/10 transition hover:bg-[`#006b31`] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-[`#00843D`] dark:bg-black dark:text-yellow-400 dark:ring-white/15 dark:hover:bg-white dark:hover:text-black dark:focus-visible:ring-black dark:focus-visible:ring-offset-2 dark:focus-visible:ring-offset-yellow-400"> Apply to GSoC with AOSSIE - </a> </Link>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/Banner.jsx` around lines 20 - 24, Remove the unused "group" utility and modernize Next.js Link usage in the Banner component: delete legacyBehavior on the Link, move the className from the inner <a> to the Link itself, and remove the now-unnecessary inner <a> so Link renders the text node directly (keep the same class string and children "Apply to GSoC with AOSSIE"); update the JSX in the Banner component accordingly so there is a single Link element with the className and no legacy <a>.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/components/Banner.jsx`:
- Around line 20-24: Remove the unused "group" utility and modernize Next.js
Link usage in the Banner component: delete legacyBehavior on the Link, move the
className from the inner <a> to the Link itself, and remove the now-unnecessary
inner <a> so Link renders the text node directly (keep the same class string and
children "Apply to GSoC with AOSSIE"); update the JSX in the Banner component
accordingly so there is a single Link element with the className and no legacy
<a>.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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/pages/ideas/index.jsx`:
- Around line 122-129: The Link component rendering "View 2024 Idea List" uses
the wrong green (`#00843D`) and contains leftover classes; update its className to
use the page brand token (text-green-600 or hex `#3c982c`) so it matches the card
borders/title/"Know more" button, and remove the unnecessary utility classes
"group" and "order-2" from that Link since no group-hover or ordering is used;
ensure the hover/focus color utilities are adjusted to the chosen brand token as
well (locate the Link element in the JSX to apply these changes).
Comment on lines
122
to
129
| <Link | ||
| className="group order-2 mx-auto items-center overflow-hidden rounded-lg bg-zinc-800 px-8 py-3 text-white focus:outline-none dark:bg-white dark:text-black" | ||
| className="group order-2 mx-auto inline-flex items-center overflow-hidden rounded-lg bg-white px-8 py-3 font-mono font-semibold text-[#00843D] shadow-sm ring-1 ring-black/10 transition hover:bg-[#00843D] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#00843D] focus-visible:ring-offset-2 dark:bg-black dark:text-yellow-400 dark:ring-white/15 dark:hover:bg-yellow-400 dark:hover:text-black dark:focus-visible:ring-yellow-400 dark:focus-visible:ring-offset-2 dark:focus-visible:ring-offset-black" | ||
| href="/ideas/2024" | ||
| > | ||
| <span className="text-center font-mono font-semibold"> | ||
| <span className="text-center"> | ||
| View 2024 Idea List | ||
| </span> | ||
| </Link> |
There was a problem hiding this comment.
Inconsistent brand green: #00843D vs #3c982c used elsewhere on this page.
The card borders (Line 22), title text (Line 35), and "Know more" button (Line 62) all use #3c982c / text-green-600, but this button introduces #00843D. This creates a visible colour mismatch on the same page. Align to one brand token.
Also, group and order-2 appear to be copy-paste leftovers from Banner.jsx — group is unused (no child uses group-hover: etc.) and order-2 has no effect since this link is the only child in its wrapper.
Suggested cleanup
<Link
- className="group order-2 mx-auto inline-flex items-center overflow-hidden rounded-lg bg-white px-8 py-3 font-mono font-semibold text-[`#00843D`] shadow-sm ring-1 ring-black/10 transition hover:bg-[`#00843D`] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[`#00843D`] focus-visible:ring-offset-2 dark:bg-black dark:text-yellow-400 dark:ring-white/15 dark:hover:bg-yellow-400 dark:hover:text-black dark:focus-visible:ring-yellow-400 dark:focus-visible:ring-offset-2 dark:focus-visible:ring-offset-black"
+ className="mx-auto inline-flex items-center overflow-hidden rounded-lg bg-white px-8 py-3 font-mono font-semibold text-[`#3c982c`] shadow-sm ring-1 ring-black/10 transition hover:bg-[`#3c982c`] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[`#3c982c`] focus-visible:ring-offset-2 dark:bg-black dark:text-yellow-400 dark:ring-white/15 dark:hover:bg-yellow-400 dark:hover:text-black dark:focus-visible:ring-yellow-400 dark:focus-visible:ring-offset-2 dark:focus-visible:ring-offset-black"
href="/ideas/2024"
>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/pages/ideas/index.jsx` around lines 122 - 129, The Link component
rendering "View 2024 Idea List" uses the wrong green (`#00843D`) and contains
leftover classes; update its className to use the page brand token
(text-green-600 or hex `#3c982c`) so it matches the card borders/title/"Know more"
button, and remove the unnecessary utility classes "group" and "order-2" from
that Link since no group-hover or ordering is used; ensure the hover/focus color
utilities are adjusted to the chosen brand token as well (locate the Link
element in the JSX to apply these changes).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Updated the “Apply to GSoC with AOSSIE” button styling to add a clear brand color and a visible hover state (including dark mode).
Improved accessibility by adding a focus-visible ring so keyboard users can see the button focus clearly.
Summary by CodeRabbit