Skip to content

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

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

Closed
srinjoy933 wants to merge 27 commits into from
Closed

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

Changes from all commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
3f05be8
changes for the social media icons
srinjoy933 Mar 27, 2025
f7dc308
Merge branch 'main' into srinjoy933/issue-1168
srinjoy933 Mar 27, 2025
0abf626
Update Card.tsx
srinjoy933 Mar 27, 2025
d08cec0
Merge branch 'main' into srinjoy933/issue-1168
srinjoy933 Mar 27, 2025
789d49a
Merge branch 'main' into srinjoy933/issue-1168
arkid15r Mar 27, 2025
abd92d6
Update .pre-commit-config.yaml
srinjoy933 Mar 28, 2025
ac838b9
Merge remote-tracking branch 'upstream/main' into srinjoy933/issue-1168
srinjoy933 Mar 28, 2025
a6fc158
updated for the issue -1168
srinjoy933 Mar 28, 2025
cd40a70
Merge branch 'main' into srinjoy933/issue-1168
srinjoy933 Mar 28, 2025
7d4d2c9
upadated
srinjoy933 Mar 29, 2025
492b733
Merge branch 'main' into srinjoy933/issue-1168
srinjoy933 Mar 30, 2025
fd1b5c3
Merge branch 'main' into srinjoy933/issue-1168
srinjoy933 Mar 30, 2025
8e22a08
Update DisplayIcon.tsx
srinjoy933 Mar 30, 2025
4326543
Merge branch 'main' into srinjoy933/issue-1168
kasya Mar 31, 2025
07b1613
updated
srinjoy933 Mar 31, 2025
b287aa4
Merge branch 'main' into srinjoy933/issue-1168
srinjoy933 Mar 31, 2025
939d6d1
Merge remote-tracking branch 'upstream/main' into srinjoy933/issue-1168
srinjoy933 Mar 31, 2025
731cd67
Merge branch 'main' into srinjoy933/issue-1168
kasya Apr 3, 2025
68f3204
Update DisplayIcon.tsx
srinjoy933 Apr 3, 2025
1e8dc6a
Update DisplayIcon.tsx
srinjoy933 Apr 3, 2025
a3b9183
Merge branch 'main' into srinjoy933/issue-1168
kasya Apr 6, 2025
cca71a2
your commit message
srinjoy933 Apr 9, 2025
6f76ff9
updated
srinjoy933 Apr 9, 2025
ea6bb54
Update DisplayIcon.tsx
srinjoy933 Apr 9, 2025
70af050
Merge remote-tracking branch 'upstream/main' into srinjoy933/issue-1168
srinjoy933 Apr 9, 2025
a867408
Merge branch 'main' into srinjoy933/issue-1168
srinjoy933 Apr 9, 2025
9bbb25d
Update DisplayIcon.tsx
srinjoy933 Apr 21, 2025
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
50 changes: 30 additions & 20 deletions frontend/src/components/DisplayIcon.tsx
View file
Open in desktop
Copy link
Collaborator

@kasya kasya Mar 29, 2025

Choose a reason for hiding this comment

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

I'm not sure I like these new colorful icons 🤔 Can we keep them in the same color? Possibly, showing brand colors on hover.
This is how they looked like before. We can keep blue, or the grey that you have by default.
Screenshot 2025-03-29 at 12 12 19 PM
Screenshot 2025-03-29 at 1 56 43 PM

Copy link
Contributor Author

@srinjoy933 srinjoy933 Mar 29, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

@kasya can you clarify a little bit more on this issue, exactly would you like me to change the colours to their brand colurs, or let it be blue or grey?thank you!

Copy link
Collaborator

@kasya kasya Mar 29, 2025

Choose a reason for hiding this comment

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

@srinjoy933 yes, I meant that we should show a single color - blue or grey, I'm fine with the grey one 👍🏼

Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { IconKeys, Icons } from 'utils/data'
import FontAwesomeIconWrapper from 'wrappers/FontAwesomeIconWrapper'

export default function DisplayIcon({ item, icons }: { item: string; icons: IconType }) {
// className for the container
const containerClassName = [
'flex flex-row-reverse items-center justify-center gap-1 px-4 pb-1 -ml-2',
item === 'stars_count' || item === 'starsCount' ? 'rotate-container' : '',
Expand All @@ -19,9 +18,10 @@ export default function DisplayIcon({ item, icons }: { item: string; icons: Icon
.filter(Boolean)
.join(' ')

// className for the FontAwesome icon
const iconClassName = [
'text-gray-600 dark:text-gray-300',
'transition-transform duration-200',
'hover:scale-110',
getBrandColorClass(item),
Comment on lines +22 to +24
Copy link
Contributor

@coderabbitai coderabbitai bot Apr 9, 2025

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Ensure hover effects don't interfere with existing animations

Your implementation adds nice hover effects but might be interfering with existing animations for GitHub metrics icons.

Consider a more contextual approach that preserves original animations:

const iconClassName = [
  'transition-transform duration-200',
  'hover:scale-110',
-  getBrandColorClass(item),
+  // Only apply brand colors to social media icons
+  isSocialMediaIcon(item) ? getBrandColorClass(item) : 'text-gray-600 dark:text-gray-300',
  item === 'stars_count' || item === 'starsCount' ? 'icon-rotate' : '',
  item === 'forks_count' ||
  item === 'contributors_count' ||
  item === 'forksCount' ||
  item === 'contributionCount'
    ? 'icon-flip'
    : '',
]

Add a helper function to determine if an icon is a social media icon:

function isSocialMediaIcon(item: string): boolean {
  return ['discord', 'instagram', 'linkedin', 'youtube'].includes(item.toLowerCase())
}

item === 'stars_count' || item === 'starsCount' ? 'icon-rotate' : '',
item === 'forks_count' ||
Copy link
Collaborator

@kasya kasya Apr 6, 2025

Choose a reason for hiding this comment

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

These don't have animation they had before. I'd prefer we keep it.

item === 'contributors_count' ||
Expand All @@ -34,27 +34,37 @@ export default function DisplayIcon({ item, icons }: { item: string; icons: Icon
.join(' ')

return icons[item] ? (
<Tooltip
content={`${Icons[item as keyof typeof Icons]?.label}`}
delay={150}
closeDelay={100}
showArrow
placement="top"
>
<div className={containerClassName}>
{/* Display formatted number if the value is a number */}
<span className="text-gray-600 dark:text-gray-300">
{typeof icons[item] === 'number'
? millify(icons[item], { precision: 1 }) // Format large numbers using 'millify' library
: icons[item]}
</span>
<div className={containerClassName}>
<span className="text-gray-600 dark:text-gray-300">
{typeof icons[item] === 'number'
? millify(icons[item], { precision: 1 })
: icons[item]}
</span>
<Tooltip
content={`${Icons[item as keyof typeof Icons]?.label}`}
delay={150}
closeDelay={100}
showArrow
placement="bottom"
>
<span>
<FontAwesomeIconWrapper
className={iconClassName}
icon={Icons[item as IconKeys]?.icon} // Display corresponding icon
icon={Icons[item as IconKeys]?.icon}
/>
</span>
</div>
</Tooltip>
</Tooltip>
</div>
) : null
}

function getBrandColorClass(item: string): string {
const brandColors: Record<string, string> = {
discord: 'hover:text-[#5865F2]',
instagram: 'hover:text-[#E4405F]',
linkedin: 'hover:text-[#0077B5]',
youtube: 'hover:text-[#FF0000]',
}

return brandColors[item.toLowerCase()] || 'text-gray-600 dark:text-gray-300'
}
Loading