Enhancing Social Media Icons with Hover Effects and Tooltips for Better UX

[srinjoy933]

Resolves #1168

Add the PR description here.

solves the issue:
When hovering over an icon, it should slightly enlarge (scale effect).

The icon's color should change to match the original brand color of the respective app.

A tooltip should appear, showing the platform name (e.g., "Discord", "Instagram", "LinkedIn", "YouTube").

[coderabbitai]

Summary by CodeRabbit

• Style
  • Enhanced hover animations and smooth transitions on interactive elements, including project titles, contributor images, and social media icons.
  • Updated social icons with platform-specific colors for improved visual consistency.
  • Upgraded tooltip interactions on social links for a more intuitive experience.

Walkthrough

The pull request refactors several frontend components to enhance code clarity and interactivity. In Card.tsx, the mobile detection logic is simplified, and styling for icons and tooltips is improved. The ContributorAvatar.tsx component now features smoother hover transitions and scaling effects. Additionally, the DisplayIcon.tsx component introduces a mapping for social media brand colors, allowing for conditional styling and hover scaling for icons. No changes are made to exported or public entities.

Changes

File(s)	Change Summary
frontend/.../Card.tsx	Removed mobile screen check, streamlined mobile status logic, updated class names, simplified icon rendering, and switched tooltip usage for social links.
frontend/.../ContributorAvatar.tsx	Modified <img> class to include transition-all, duration-300, and hover:scale-110 for smooth hover scaling and transition effects.
frontend/.../DisplayIcon.tsx	Added a brandColors mapping for social media platforms, applied conditional CSS classes for brand colors, and introduced hover scale and transform effects.

Assessment against linked issues

Objective (Issue #)	Addressed	Explanation
Enhance Social Media Icons with Hover Effects and Tooltips (#1168)	✅

Possibly related PRs

• Fixed and added new social media icons on chapters #964: Changes in Card.tsx involve rendering modifications for social icons, indicating a direct relationship to this PR.
• Fix tooltip conflicts for duplicate contributors #1059: Adjustments in the ContributorAvatar component are related to the changes in this PR, particularly in rendering logic.
• Fixed contribute page responsiveness #1127: Modifications to class attributes in Card.tsx are directly related to the changes made in this PR.

Suggested reviewers

• kasya
• arkid15r

---

📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f7dc308 and 0abf626.

📒 Files selected for processing (1)

• frontend/src/components/Card.tsx (2 hunks)

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

• frontend/src/components/Card.tsx

---

🪧 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>, please review it.
  • Generate unit testing code 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 testing code 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 gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

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 using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai plan to trigger planning for file edits and PR creation.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[arkid15r]

The feedback is still the same -- please run the code quality checks and PRs locally before requesting your PR review.

[srinjoy933]

@arkid15r i am having one problem in the locals thats why the test is failing , when the code goes through the code quality test , this problem also previously arrived , firstly it shows
Format YAML files........................................................Failed

• hook id: yamlfmt
• exit code: 1

Executable C:Userssrinj.cachepre-commitrepo4cys3jyapy_env-python3.12Scriptspython.EXE not found,
but this executable is in my systems and after so i still added it manually in the path. but still the problem is happening due to this executable only , can you remove this test part for this PR specifically as it is only a local issue .

the result

[srinjoy933]

@arkid15r any suggestions please ?

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[arkid15r]

@arkid15r any suggestions please ?

You need to troubleshoot your "executable not found" error message. I have no idea why that happens and I don't use Windows. You can also try our Slack channel for help.

Please reopen when it's ready for review -- https://github.com/OWASP/Nest/actions/runs/14118841344/job/39555115134?pr=1186