impr: replace twitter bird icon with X logo (@rileygramlich) - #8367
Open
rileygramlich wants to merge 1 commit into
Open
impr: replace twitter bird icon with X logo (@rileygramlich)#8367rileygramlich wants to merge 1 commit into
rileygramlich wants to merge 1 commit into
Conversation
Font Awesome 5 does not ship the x-twitter icon, so the logo is inlined as an SVG component instead of bumping the dependency. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
github-actions
Bot
added
the
waiting for review
Contributor
There was a problem hiding this comment.
Pull request overview
Replace legacy Twitter bird icons with an inline X logo across footer/about/profile, without upgrading Font Awesome.
Changes:
- Add
XIcon(inline SVG) for the X brand mark. - Extend
Buttonwith optional leadingiconprop (same slot asfa). - Swap affected Twitter buttons/links to use
XIcon+ label “x”.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/ts/components/common/XIcon.tsx | New inline SVG X logo component. |
| frontend/src/ts/components/common/Button.tsx | Add icon?: JSXElement and render it in leading icon slot. |
| frontend/src/ts/components/layout/footer/Footer.tsx | Footer social link now uses XIcon + “x”. |
| frontend/src/ts/components/pages/AboutPage.tsx | About page contact link now uses XIcon + “x”. |
| frontend/src/ts/components/pages/profile/UserDetails.tsx | Profile socials Twitter link now shows XIcon. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
50
to
55
| <Show when={props.fa !== undefined}> | ||
| <Fa {...(props.fa as FaProps)} /> | ||
| </Show> | ||
| {props.icon} | ||
| <Show when={props.text !== undefined}>{props.text}</Show> | ||
| {props.children} |
Member
Author
|
I see that @Miodec said "Long live the bird." Though at this point in 2026, it simply looks outdated, unprofessional, and like the website lacks upkeep. Hope we can get this changed as it is actually quite annoying to still see. Cheers, |
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
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.
Description
The footer, about page, and profile social links still used the old Twitter bird icon (which is 3 years outdated now by the way), even though all three already link to x.com.
Font Awesome only added the
x-twittericon in 6.4, and this repo is pinned to@fortawesome/fontawesome-free@5.15.4, so there was no icon class to swap to. Rather than bump the dependency — which would mean icon renames and a much larger diff across the whole app — I inlined the logo as a smallXIconcomponent, following the existing pattern inDiscordAvatar.tsx, which already embeds raw Font Awesome SVG paths with the license comment.Buttonpreviously only accepted a Font Awesome icon via itsfaprop, so I added an optionaliconprop that renders in the same leading slot. That keeps the icon before the label, matching every other button.I updated all three usages rather than just the footer, so the branding stays consistent.
Changed files:
frontend/src/ts/components/common/XIcon.tsx(new)frontend/src/ts/components/common/Button.tsx— optionaliconpropfrontend/src/ts/components/layout/footer/Footer.tsxfrontend/src/ts/components/pages/AboutPage.tsxfrontend/src/ts/components/pages/profile/UserDetails.tsxThe button labels also changed from "twitter" to "x". Happy to revert that part if you'd rather keep the old wording.
Screenshots
Checks