Update Twitter logo to X across the website#551
Update Twitter logo to X across the website#551prashantkumarniraj wants to merge 2 commits intoAOSSIE-Org:mainfrom
Conversation
|
@prashantkumarniraj is attempting to deploy a commit to the AOSSIE Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughThe pull request updates Twitter branding to X across two site components by replacing the Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 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.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/pages/index.jsx (1)
90-95:⚠️ Potential issue | 🟡 MinorUpdate the aria-label to match X branding.
This keeps accessibility text consistent with the visual icon.
🔧 Suggested fix
- <Link - aria-label="Follow on Twitter" + <Link + aria-label="Follow on X" className="text-zinc-500 transition hover:text-[`#00843D`] dark:text-zinc-400 dark:hover:text-yellow-400" href="https://twitter.com/aossie_org" >
🤖 Fix all issues with AI agents
In `@src/components/Footer.jsx`:
- Around line 48-49: The aria-label for the social link currently reads "Follow
on Twitter" and should be updated to reflect X branding; in the Footer component
update the Link with aria-label (used in the JSX around FontAwesomeIcon and
className) to "Follow on X" or "Follow on X (Twitter)" so screen readers
announce the correct service name.
- Line 6: The import of faXTwitter in Footer.jsx fails because the project pins
`@fortawesome/free-brands-svg-icons` < v6.4.2; update the dependency to v6.4.2 or
later in your package manifest (e.g., package.json) and run install so the
module exports faXTwitter, then verify the import line "import { faDiscord,
faGithub, faGitlab, faXTwitter } from '@fortawesome/free-brands-svg-icons'"
resolves and the build succeeds.
| import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' | ||
| import { faEnvelope } from '@fortawesome/free-solid-svg-icons' | ||
| import { faDiscord, faGithub, faGitlab, faTwitter } from '@fortawesome/free-brands-svg-icons' | ||
| import { faDiscord, faGithub, faGitlab, faXTwitter } from '@fortawesome/free-brands-svg-icons' |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
@fortawesome/free-brands-svg-icons faXTwitter version history when added
💡 Result:
faXTwitter (the “X / Twitter” brand icon) was added to Font Awesome / @fortawesome/free-brands-svg-icons in v6.4.2. Evidence: the Font Awesome repo tracked the “X (New Twitter branding)” request under milestone 6.4.2 [1], and the @fortawesome/free-brands-svg-icons@6.4.2 package contains faXTwitter typings (faXTwitter.d.ts) [2]. Stack Overflow users also note it works starting in 6.4.2 (and not in 6.4.0) [3].
So, you need: @fortawesome/free-brands-svg-icons >= 6.4.2.
Sources: [1] FortAwesome/Font-Awesome#19827, [2] https://app.unpkg.com/%40fortawesome/free-brands-svg-icons%406.4.2/files/faXTwitter.d.ts, [3] https://stackoverflow.com/questions/77140202/twitter-x-using-font-awesome-6-not-working
Upgrade @fortawesome/free-brands-svg-icons to v6.4.2 or later.
The faXTwitter icon was added in v6.4.2. The current pinned version 6.2.1 does not export this icon, causing the build to fail. Upgrade the package dependency to resolve.
🤖 Prompt for AI Agents
In `@src/components/Footer.jsx` at line 6, The import of faXTwitter in Footer.jsx
fails because the project pins `@fortawesome/free-brands-svg-icons` < v6.4.2;
update the dependency to v6.4.2 or later in your package manifest (e.g.,
package.json) and run install so the module exports faXTwitter, then verify the
import line "import { faDiscord, faGithub, faGitlab, faXTwitter } from
'@fortawesome/free-brands-svg-icons'" resolves and the build succeeds.
| <Link aria-label="Follow on Twitter" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://twitter.com/aossie_org'> | ||
| <FontAwesomeIcon icon={faTwitter} size='xl' /> | ||
| <FontAwesomeIcon icon={faXTwitter} size="xl" /> |
There was a problem hiding this comment.
Update the aria-label to match X branding.
Screen readers will still announce “Twitter”. Consider “Follow on X” (or “Follow on X (Twitter)”).
🔧 Suggested fix
- <Link aria-label="Follow on Twitter" className=' text-zinc-400 hover:text-[`#00843D`] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://twitter.com/aossie_org'>
+ <Link aria-label="Follow on X" className=' text-zinc-400 hover:text-[`#00843D`] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://twitter.com/aossie_org'>
<FontAwesomeIcon icon={faXTwitter} size="xl" />
</Link>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Link aria-label="Follow on Twitter" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://twitter.com/aossie_org'> | |
| <FontAwesomeIcon icon={faTwitter} size='xl' /> | |
| <FontAwesomeIcon icon={faXTwitter} size="xl" /> | |
| <Link aria-label="Follow on X" className=' text-zinc-400 hover:text-[`#00843D`] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://twitter.com/aossie_org'> | |
| <FontAwesomeIcon icon={faXTwitter} size="xl" /> |
🤖 Prompt for AI Agents
In `@src/components/Footer.jsx` around lines 48 - 49, The aria-label for the
social link currently reads "Follow on Twitter" and should be updated to reflect
X branding; in the Footer component update the Link with aria-label (used in the
JSX around FontAwesomeIcon and className) to "Follow on X" or "Follow on X
(Twitter)" so screen readers announce the correct service name.
1 participant
This PR updates the Twitter social media icon to the official X logo
while keeping the existing links unchanged.
Fixes #519
Summary by CodeRabbit