fix: upgrate new twitter logo #12379

[iusx]

Description

https://react-icons.github.io/react-icons/search/#q=FaXTwitter

ethereum-org-website/src/components/Footer.tsx

Lines 33 to 36 in 2c8b2ac

	icon: FaXTwitter,
	to: "https://twitter.com/ethdotorg",
	ariaLabel: "Twitter",
	color: "#333",

Twitter

+ import { FaXTwitter } from "react-icons/fa6";
- icon: FaTwitter,
+ icon: FaXTwitter,

Related Issue

#12379

Summary by CodeRabbit

Summary by CodeRabbit

• Style
  • Updated the Twitter icon in the footer and changed its color for better visual integration.
  • Added a new social link for YouTube with the respective icon.

[netlify]

❌ Deploy Preview for ethereumorg failed.

Name	Link
🔨 Latest commit	2c8b2ac
🔍 Latest deploy log	https://app.netlify.com/sites/ethereumorg/deploys/65e99fd2d610930008d71c71

[Sels13]

it is very nice, thank you so much

[coderabbitai]

Walkthrough

The update involves modernizing the social icon used for Twitter in the application's footer. The change replaces the existing Twitter icon with a newer version, termed FaXTwitter, and adjusts its color to a darker shade. This modification is aimed at refreshing the icon's appearance to align with current design trends and ensure visual consistency across the platform.

Changes

File Path	Change Summary
src/components/Footer.tsx	Replaced FaTwitter with FaXTwitter from react-icons/fa6; changed icon color from #1DA1F2 to #333.

Related issues

• Refactor Social Icons  #12379: The issue calls for updating social icons to their latest versions for consistency and a modern look, specifically mentioning the switch to react-icons/fa6 versions like the FaXTwitter icon. This PR directly addresses the objective by implementing such an update for the Twitter icon, making it a candidate for linking to the issue.

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

• X
• Mastodon
• Reddit
• LinkedIn

---

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>.
  • Generate unit-tests for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit tests for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai generate interesting stats about this repository and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit tests.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• The JSON schema for the configuration file is available here.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json

CodeRabbit Discord Community

Join our Discord Community to get help, request features, and share feedback.

[coderabbitai]

Review Status

Actionable comments generated: 1

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 1b075bc and 7b6c50d.

Files selected for processing (1)

• src/components/Footer.tsx (2 hunks)

Additional comments: 1

src/components/Footer.tsx (1)

• 33-36: The update to use FaXTwitter and the color change to #333 for the Twitter icon in the socialLinks array is consistent with the PR's objectives. However, consider the visual impact of changing the icon color to #333, especially in terms of accessibility and brand consistency. It might be worth verifying if this color change aligns with Twitter's branding guidelines.

[coderabbitai]

Review Status

Actionable comments generated: 0

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 7b6c50d and c74b9b9.

Files selected for processing (1)

• src/components/Footer.tsx (2 hunks)

Files skipped from review as they are similar to previous changes (1)

• src/components/Footer.tsx

[coderabbitai]

Review Status

Actionable comments generated: 0

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between c74b9b9 and 2c8b2ac.

Files selected for processing (1)

• src/components/Footer.tsx (2 hunks)

Files skipped from review as they are similar to previous changes (1)

• src/components/Footer.tsx

[wackerow]

Would personally prefer to not convert this, and/or migrate entirely to Farcaster

[iusx]

Would personally prefer to not convert this, and/or migrate entirely to Farcaster

Okay, thank you.

[wackerow]

Hey @iepn, circling back, I didn't mean to unilaterally decide this 😆, sorry to give that impression... was just dropping an opinion on it.

@nloureiro I know you've talked about migrating forward with this branding change. What're your latest thoughts here? Personally just in the camp that I'd prefer to start primarily supporting a more values-aligned platform altogether, but not a hill I'm dying on right now.

[iusx]

Hey @iepn, circling back, I didn't mean to unilaterally decide this 😆, sorry to give that impression... was just dropping an opinion on it.

@nloureiro I know you've talked about migrating forward with this branding change. What're your latest thoughts here? Personally just in the camp that I'd prefer to start primarily supporting a more values-aligned platform altogether, but not a hill I'm dying on right now.

@wackerow In fact, I also really like Twitter's previous little blue bird logo. If the team decides to replace all logos with the 'X' logo, please let me know, and at that time, I will submit a PR for a complete switch to the X platform, rather than this one which only involves the bottom navigation.

After hearing your thoughts, I attempted to submit the Farcaster logo for inclusion in react-icons, so that the team could directly use the Farcaster logo through react-icons. However, their icon library is complex and convoluted, making it difficult to know where to start when submitting a PR. Most of their support seems to come from addressing issues raised by users, rather than direct community contributions.

Of course, as an alternative, Farcaster's logo could be saved and referenced as image files (such as SVG or PNG), but I am concerned that this might conflict with the team's coding standards.

Therefore, I chose to close the PR. If in the future, the team comes up with a new solution or approach, I will definitely take the opportunity to learn ^_^ !

---

You can take a look:

#12467
#12485