Skip to content

Replaced outdated twitter icon with X branding #396

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mehul-m-prajapati merged 2 commits into from
May 23, 2026
+7 −5
Merged

Replaced outdated twitter icon with X branding #396

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f8a31c9
Replaced outdated twitter icon with X branding
Shweta2117409 May 22, 2026
804e86d
Merge branch 'main' into update-twitter-icon-to-x-branding
mehul-m-prajapati May 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,17 @@ import React, { useState } from 'react';
import { FaGithub, FaDiscord, FaArrowRight } from 'react-icons/fa';
import { FaXTwitter } from 'react-icons/fa6';
import { Link } from 'react-router-dom';

import {
FaGithub,
FaTwitter,
FaDiscord,
FaArrowRight,
FaEnvelope,
FaInfoCircle,
} from 'react-icons/fa';

import { FaXTwitter } from 'react-icons/fa6';
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot May 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Description: Verify FaXTwitter is exported from react-icons/fa6

# Check if FaXTwitter is available in the installed react-icons package
node -e "
try {
  const { FaXTwitter } = require('react-icons/fa6');
  if (FaXTwitter) {
    console.log('✓ FaXTwitter is available in react-icons/fa6');
    process.exit(0);
  } else {
    console.log('✗ FaXTwitter is not exported from react-icons/fa6');
    process.exit(1);
  }
} catch (e) {
  console.log('✗ Error loading FaXTwitter:', e.message);
  process.exit(1);
}
"

Repository: GitMetricsLab/github_tracker

Length of output: 180

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Show Footer implementation around the X/Twitter + Discord portions
echo "---- src/components/Footer.tsx (relevant excerpt) ----"
if [ -f src/components/Footer.tsx ]; then
  # Print with line numbers, but keep output bounded
  nl -ba src/components/Footer.tsx | sed -n '1,220p'
else
  echo "Missing file: src/components/Footer.tsx"
fi

# Check declared react-icons version
echo "---- react-icons version (package.json / lockfiles) ----"
if [ -f package.json ]; then
  cat package.json
fi

if ls package-lock.json yarn.lock pnpm-lock.yaml >/dev/null 2>&1; then
  for f in package-lock.json yarn.lock pnpm-lock.yaml; do
    if [ -f "$f" ]; then
      echo "---- $f (react-icons references) ----"
      rg -n "react-icons" "$f" || true
    fi
  done
fi

# Quick check for dependency install presence (to interpret the earlier require failure)
echo "---- node_modules/react-icons presence ----"
ls -la node_modules/react-icons 2>/dev/null || echo "node_modules/react-icons not present"
ls -la node_modules 2>/dev/null | head -n 50 || true

Repository: GitMetricsLab/github_tracker

Length of output: 188

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "---- src/components/Footer.tsx (lines 1-220) ----"
if [ -f src/components/Footer.tsx ]; then
  # Prefer cat -n (available) over nl
  cat -n src/components/Footer.tsx | sed -n '1,220p'
else
  echo "Missing file: src/components/Footer.tsx"
fi

echo "---- package.json ----"
if [ -f package.json ]; then
  cat package.json
else
  echo "Missing package.json"
fi

echo "---- lockfiles with react-icons references (if any) ----"
for f in package-lock.json yarn.lock pnpm-lock.yaml; do
  if [ -f "$f" ]; then
    echo "---- $f ----"
    rg -n "react-icons" "$f" || true
  fi
done

echo "---- node_modules presence (sandbox) ----"
if [ -d node_modules ]; then
  ls -la node_modules | head -n 50
  if [ -d node_modules/react-icons ]; then
    echo "react-icons dir exists"
    ls -la node_modules/react-icons | head -n 50
  else
    echo "node_modules/react-icons not present"
  fi
else
  echo "node_modules directory missing"
fi

echo "---- Try resolve react-icons/fa6 path (no require) ----"
node -e "
try {
  const path = require.resolve('react-icons/package.json');
  console.log('react-icons package.json resolved to:', path);
} catch (e) {
  console.log('Cannot resolve react-icons package.json:', e.message);
  process.exit(0);
}
"

Repository: GitMetricsLab/github_tracker

Length of output: 10567

🌐 Web query:

react-icons fa6 FaXTwitter exported

💡 Result:

react-icons (Font Awesome 6 set) does not export a component named FaXTwitter. In react-icons, Font Awesome 6 icons are exported from the react-icons/fa6 entrypoint, and the available icon components follow the Font Awesome icon names as Fa[IconName] for Font Awesome 6 [1][2]. For the Twitter/X “X” brand icon specifically, Font Awesome added the x-twitter icon in version 6.4.2 [3]. Therefore, in react-icons you should use the Fa* component that corresponds to Font Awesome’s x-twitter icon name (i.e., the Font Awesome-derived React component name), not FaXTwitter [3][2]. If you’re trying to find the exact exported identifier, the reliable approach is to search the react-icons site’s icon directory for “x-twitter” or “twitter x” and check which component name it lists for the fa6 set [4][5].

Citations:

Fix FaXTwitter import and disabled social-link semantics/UX in Footer.tsx.

  • FaXTwitter is not exported from react-icons/fa6; update the import to the fa6 component that corresponds to Font Awesome’s x-twitter icon (line 12).
  • X/Twitter and Discord are “disabled” <a href="#"> elements that still run hover animations (hover:-translate-y-1 hover:scale-110) and use preventDefault, which is confusing and non-semantic—remove hover transforms when disabled and switch to proper disabled semantics (e.g., non-link element with aria-disabled/tabIndex, or a disabled <button>) (lines 164-181).
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/Footer.tsx` at line 12, The Footer.tsx import for the
X/Twitter icon is incorrect and the disabled social links are using link
semantics with active hover transforms; replace the incorrect import on the Fa
import line by importing the correct named export from react-icons/fa6 that
matches Font Awesome’s “x-twitter” icon (e.g., the proper FaX or FaTwitter
export — confirm the exact export name from react-icons and update the import in
the Footer component), and change the X/Twitter and Discord disabled <a>
elements (the social link markup inside the Footer component) to non-link
accessible controls: remove the hover transform classes (hover:-translate-y-1
hover:scale-110) from the disabled items, convert them to either a <span> or a
<button> with aria-disabled="true" and tabIndex={-1} (or a disabled button) so
they are non-focusable and convey disabled semantics, and ensure any onClick
handlers no longer call preventDefault for those disabled items.


function Footer() {
const [email, setEmail] = useState('');

Expand Down Expand Up @@ -160,14 +162,14 @@ function Footer() {
<FaGithub className="h-6 w-6" />
</a>

{/* Twitter */}
{/* X / Twitter */}
<a
href="#"
onClick={(e) => e.preventDefault()}
className="text-zinc-600 dark:text-zinc-400 hover:text-sky-500 dark:hover:text-zinc-100 transition-all duration-300 hover:-translate-y-1 hover:scale-110 opacity-70 cursor-not-allowed"
aria-label="Twitter"
className="text-zinc-600 dark:text-zinc-400 hover:text-zinc-100 transition-all duration-300 hover:-translate-y-1 hover:scale-110 opacity-70 cursor-not-allowed"
aria-label="X"
>
<FaXTwitter className="h-7 w-7" />
<FaXTwitter className="h-6 w-6" />
</a>
Comment on lines +165 to 173
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot May 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | 🏗️ Heavy lift

Critical: Undocumented functional change - X/Twitter link is now disabled.

The PR description states this change "maintains existing hover effects and footer styling" and only updates the icon branding. However, the implementation disables the link entirely by:

  • Changing href to "#"
  • Adding onClick={(e) => e.preventDefault()}
  • Applying opacity-70 cursor-not-allowed

This is a breaking functional change that prevents users from navigating to the X/Twitter profile. This was not mentioned in the PR objectives, testing notes, or description.

Additional concerns:

  1. Confusing UX: The link retains hover animations (hover:-translate-y-1 hover:scale-110) while being disabled, suggesting it's interactive when it's not.

  2. Accessibility: Using href="#" with preventDefault is not semantic for disabled states. Better patterns include:

    • Remove the link entirely and use a <span> with appropriate ARIA attributes
    • Use a <button disabled> if you want to keep it as an interactive element
    • Or simply remove the icon until the social profile is ready

Recommendation: Either restore the link functionality (if this was unintentional) or remove the hover effects and clarify this functional change in the PR description.

♻️ Option 1: Remove hover effects from disabled link 
             <a
               href="#"
               onClick={(e) => e.preventDefault()}
-              className="text-zinc-600 dark:text-zinc-400 hover:text-zinc-100 transition-all duration-300 hover:-translate-y-1 hover:scale-110 opacity-70 cursor-not-allowed"
+              className="text-zinc-600 dark:text-zinc-400 opacity-70 cursor-not-allowed"
               aria-label="X"
             >
               <FaXTwitter className="h-6 w-6" />
             </a>
♻️ Option 2: Use semantic disabled pattern with span 
-            <a
-              href="#"
-              onClick={(e) => e.preventDefault()}
-              className="text-zinc-600 dark:text-zinc-400 hover:text-zinc-100 transition-all duration-300 hover:-translate-y-1 hover:scale-110 opacity-70 cursor-not-allowed"
-              aria-label="X"
-            >
+            <span
+              className="text-zinc-600 dark:text-zinc-400 opacity-70 cursor-not-allowed"
+              aria-label="X (coming soon)"
+              role="img"
+            >
               <FaXTwitter className="h-6 w-6" />
-            </a>
+            </span>
📝 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.

Suggested change
{/* X / Twitter */}
<a
href="https://x.com/your_handle"
target="_blank"
rel="noopener noreferrer"
className="text-zinc-400 dark:text-zinc-500 hover:text-sky-500 dark:hover:text-zinc-100 transition-all duration-300 hover:-translate-y-1 hover:scale-110"
aria-label="Twitter"
href="#"
onClick={(e) => e.preventDefault()}
className="text-zinc-600 dark:text-zinc-400 hover:text-zinc-100 transition-all duration-300 hover:-translate-y-1 hover:scale-110 opacity-70 cursor-not-allowed"
aria-label="X"
>
<FaTwitter className="h-6 w-6" />
<FaXTwitter className="h-6 w-6" />
</a>
{/* X / Twitter */}
<a
href="#"
onClick={(e) => e.preventDefault()}
className="text-zinc-600 dark:text-zinc-400 opacity-70 cursor-not-allowed"
aria-label="X"
>
<FaXTwitter className="h-6 w-6" />
</a>
Suggested change
{/* X / Twitter */}
<a
href="https://x.com/your_handle"
target="_blank"
rel="noopener noreferrer"
className="text-zinc-400 dark:text-zinc-500 hover:text-sky-500 dark:hover:text-zinc-100 transition-all duration-300 hover:-translate-y-1 hover:scale-110"
aria-label="Twitter"
href="#"
onClick={(e) => e.preventDefault()}
className="text-zinc-600 dark:text-zinc-400 hover:text-zinc-100 transition-all duration-300 hover:-translate-y-1 hover:scale-110 opacity-70 cursor-not-allowed"
aria-label="X"
>
<FaTwitter className="h-6 w-6" />
<FaXTwitter className="h-6 w-6" />
</a>
{/* X / Twitter */}
<span
className="text-zinc-600 dark:text-zinc-400 opacity-70 cursor-not-allowed"
aria-label="X (coming soon)"
role="img"
>
<FaXTwitter className="h-6 w-6" />
</span>
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/Footer.tsx` around lines 163 - 171, The X/Twitter anchor was
unintentionally disabled: remove the href="#" and onClick preventDefault and
restore the real profile URL (or a prop/constant used for social links) and
remove the opacity-70 cursor-not-allowed class if you intend the link to be
active (target the <a> that renders <FaXTwitter/>). If the disable was
intentional, replace the <a> with a non-interactive element (e.g., a <span> or a
<button disabled>) instead of using href="#" + preventDefault, remove
hover:-translate-y-1 and hover:scale-110 from its class list, add
aria-disabled="true" and update the PR description to explain the behavioral
change.


{/* Discord */}
Expand Down
Loading