Skip to content

Fix: Standardize UI/UX for GitHub Badges #1068

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
merged 3 commits into from
Oct 26, 2025
Merged

Fix: Standardize UI/UX for GitHub Badges #1068

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1d459a9
Updated theme of badges
steam-bell-92 Oct 25, 2025
f6628fd
The Quickdraw badge displays "Levels: Default" (plural) but should di…
steam-bell-92 Oct 25, 2025
dbfc03a
Update alt text for GitHub badges images
steam-bell-92 Oct 25, 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
4 changes: 2 additions & 2 deletions src/pages/badges/github-badges.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1013,7 +1013,7 @@ table tr:last-child td:last-child {
}

.certCard:hover .certBadge img {
transform: rotate(8deg) scale(1.08);
transform: scale(1.08);
filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.2));
}

Expand Down Expand Up @@ -1476,7 +1476,7 @@ table tr:last-child td:last-child {
}

.achievementsTable .levelImages img:hover {
transform: scale(1.2) rotate(8deg);
transform: scale(1.2);
box-shadow:
0 6px 16px rgba(0, 0, 0, 0.15),
0 3px 8px rgba(0, 0, 0, 0.1);
Expand Down
160 changes: 83 additions & 77 deletions src/pages/badges/github-badges.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -254,7 +254,7 @@ const GithubBadgesContent = (): React.ReactElement => {
src="https://github.githubassets.com/images/modules/profile/achievements/starstruck-default.png"
alt="Starstruck"
className={styles.badgeImgSmall}
whileHover={{ scale: 1.13, rotate: -6 }}
whileHover={{ scale: 1.13}}
transition={{ type: "spring", stiffness: 300 }}
/>
</td>
Expand Down Expand Up @@ -322,18 +322,16 @@ const GithubBadgesContent = (): React.ReactElement => {
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: 0.1 }}
whileHover={{
scale: 1.02,
boxShadow: "0 4px 20px rgba(0,0,0,0.07)",
}}
transition={{ duration: 0.5, delay: 0.05 }}
whileHover={{ scale: 1.02 }}
style={{ boxShadow: "0 4px 20px rgba(0,0,0,0.07)" }}
>
<td>
<motion.img
src="https://github.githubassets.com/images/modules/profile/achievements/quickdraw-default.png"
alt="Quickdraw"
className={styles.badgeImgSmall}
whileHover={{ scale: 1.13, rotate: 6 }}
whileHover={{ scale: 1.13}}
transition={{ type: "spring", stiffness: 300 }}
/>
</td>
Expand All @@ -345,13 +343,18 @@ const GithubBadgesContent = (): React.ReactElement => {
opening you will unlock this badge
</td>
<td>
<div className={styles.singleBadge}>
<div className={styles.levelText}>Level: Default</div>
<div className={styles.badgeLevels}>
<div className={styles.levelText}>
Levels: Default
</div>
<div className={styles.levelImages}>
<img
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone1.png"
alt="Quickdraw Default"
title="Default (1)"
className={styles.badgeImgSmall}
/>
</div>
<div className={styles.neededAmount}>Needed: 1</div>
</div>
</td>
Expand All @@ -361,18 +364,16 @@ const GithubBadgesContent = (): React.ReactElement => {
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: 0.15 }}
whileHover={{
scale: 1.02,
boxShadow: "0 4px 20px rgba(0,0,0,0.07)",
}}
transition={{ duration: 0.5, delay: 0.05 }}
whileHover={{ scale: 1.02 }}
style={{ boxShadow: "0 4px 20px rgba(0,0,0,0.07)" }}
Comment on lines +368 to +369
Copy link
Contributor

Choose a reason for hiding this comment

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

The boxShadow animation has been moved from the whileHover prop to a static style prop, changing the hover animation behavior. The shadow should only appear and animate on hover, but is now always visible.

View Details
📝 Patch Details 
diff --git a/src/pages/badges/github-badges.tsx b/src/pages/badges/github-badges.tsx
index 1c9f98e..a012f7e 100644
--- a/src/pages/badges/github-badges.tsx
+++ b/src/pages/badges/github-badges.tsx
@@ -246,8 +246,7 @@ const GithubBadgesContent = (): React.ReactElement => {
                   whileInView={{ opacity: 1, y: 0 }}
                   viewport={{ once: true }}
                   transition={{ duration: 0.5, delay: 0.05 }}
-                  whileHover={{ scale: 1.02 }}
-                  style={{ boxShadow: "0 4px 20px rgba(0,0,0,0.07)" }}
+                  whileHover={{ scale: 1.02, boxShadow: "0 4px 20px rgba(0,0,0,0.07)" }}
                 >
                   <td>
                     <motion.img
@@ -323,8 +322,7 @@ const GithubBadgesContent = (): React.ReactElement => {
                   whileInView={{ opacity: 1, y: 0 }}
                   viewport={{ once: true }}
                   transition={{ duration: 0.5, delay: 0.05 }}
-                  whileHover={{ scale: 1.02 }}
-                  style={{ boxShadow: "0 4px 20px rgba(0,0,0,0.07)" }}
+                  whileHover={{ scale: 1.02, boxShadow: "0 4px 20px rgba(0,0,0,0.07)" }}
                 >
                   <td>
                     <motion.img
@@ -365,8 +363,7 @@ const GithubBadgesContent = (): React.ReactElement => {
                   whileInView={{ opacity: 1, y: 0 }}
                   viewport={{ once: true }}
                   transition={{ duration: 0.5, delay: 0.05 }}
-                  whileHover={{ scale: 1.02 }}
-                  style={{ boxShadow: "0 4px 20px rgba(0,0,0,0.07)" }}
+                  whileHover={{ scale: 1.02, boxShadow: "0 4px 20px rgba(0,0,0,0.07)" }}
                 >
                   <td>
                     <motion.img
@@ -443,8 +440,7 @@ const GithubBadgesContent = (): React.ReactElement => {
                   whileInView={{ opacity: 1, y: 0 }}
                   viewport={{ once: true }}
                   transition={{ duration: 0.5, delay: 0.05 }}
-                  whileHover={{ scale: 1.02 }}
-                  style={{ boxShadow: "0 4px 20px rgba(0,0,0,0.07)" }}
+                  whileHover={{ scale: 1.02, boxShadow: "0 4px 20px rgba(0,0,0,0.07)" }}
                 >
                   <td>
                     <motion.img
@@ -518,8 +514,7 @@ const GithubBadgesContent = (): React.ReactElement => {
                   whileInView={{ opacity: 1, y: 0 }}
                   viewport={{ once: true }}
                   transition={{ duration: 0.5, delay: 0.05 }}
-                  whileHover={{ scale: 1.02 }}
-                  style={{ boxShadow: "0 4px 20px rgba(0,0,0,0.07)" }}
+                  whileHover={{ scale: 1.02, boxShadow: "0 4px 20px rgba(0,0,0,0.07)" }}
                 >
                   <td>
                     <motion.img
@@ -593,8 +588,7 @@ const GithubBadgesContent = (): React.ReactElement => {
                   whileInView={{ opacity: 1, y: 0 }}
                   viewport={{ once: true }}
                   transition={{ duration: 0.5, delay: 0.05 }}
-                  whileHover={{ scale: 1.02 }}
-                  style={{ boxShadow: "0 4px 20px rgba(0,0,0,0.07)" }}
+                  whileHover={{ scale: 1.02, boxShadow: "0 4px 20px rgba(0,0,0,0.07)" }}
                 >
                   <td>
                     <motion.img
@@ -647,8 +641,7 @@ const GithubBadgesContent = (): React.ReactElement => {
                   whileInView={{ opacity: 1, y: 0 }}
                   viewport={{ once: true }}
                   transition={{ duration: 0.5, delay: 0.05 }}
-                  whileHover={{ scale: 1.02 }}
-                  style={{ boxShadow: "0 4px 20px rgba(0,0,0,0.07)" }}
+                  whileHover={{ scale: 1.02, boxShadow: "0 4px 20px rgba(0,0,0,0.07)" }}
                 >
                   <td>
                     <motion.img

Analysis

BoxShadow moved from whileHover to style prop breaks hover animations

What fails: Seven motion.tr elements have boxShadow in style prop instead of whileHover, making shadows always visible instead of animating on hover

How to reproduce:

# View the GitHub badges page
npm start
# Navigate to /badges/github-badges
# Observe table rows have permanent shadows instead of hover-triggered animations

Result: Box shadows are permanently visible on all badge table rows (Starstruck, Quickdraw, Pair Extraordinaire, Pull Shark, Galaxy Brain, YOLO, Public Sponsor)

Expected: Shadows should only appear with smooth animation when hovering over table rows, as per Framer Motion whileHover documentation - whileHover creates gesture-based animations while style props are always visible

Evidence: Git history shows boxShadow was moved from whileHover: { scale: 1.02, boxShadow: "..." } to separate style: { boxShadow: "..." } prop

>
<td>
<motion.img
src="https://github.githubassets.com/images/modules/profile/achievements/pair-extraordinaire-default.png"
alt="Pair Extraordinaire"
className={styles.badgeImgSmall}
whileHover={{ scale: 1.13, rotate: -8 }}
whileHover={{ scale: 1.13}}
transition={{ type: "spring", stiffness: 300 }}
/>
</td>
Expand Down Expand Up @@ -402,54 +403,55 @@ const GithubBadgesContent = (): React.ReactElement => {
</a>
</td>
<td>
<b>Needed:</b> 1, 10, 24, 48
<br />
<div style={{ display: "flex", gap: 8, marginTop: 6 }}>
<div className={styles.badgeLevels}>
<div className={styles.levelText}>
Levels: Default, Bronze, Silver, Gold
</div>
<div className={styles.levelImages}>
<img
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pair-Extraordinaire/PNG/PairExtraordinaire.png"
alt="Starstruck Default"
title="Default (16)"
title="Default (1)"
className={styles.badgeImgSmall}
/>
<img
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pair-Extraordinaire/PNG/PairExtraordinaire_Bronze.png"
alt="Starstruck Bronze"
title="Bronze (128)"
title="Bronze (10)"
className={styles.badgeImgSmall}
/>
<img
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pair-Extraordinaire/PNG/PairExtraordinaire_Silver.png"
alt="Starstruck Silver"
title="Silver (512)"
title="Silver (24)"
className={styles.badgeImgSmall}
/>
<img
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pair-Extraordinaire/PNG/PairExtraordinaire_Gold.png"
alt="Starstruck Gold"
title="Gold (4096)"
title="Gold (48)"
className={styles.badgeImgSmall}
/>
</div>
<b>Levels:</b> Default, Bronze, Silver, Gold
<div className={styles.neededAmount}>Needed: 1, 10, 24, 48</div>
</div>
</td>
</motion.tr>
{/* Pull Shark */}
<motion.tr
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: 0.2 }}
whileHover={{
scale: 1.02,
boxShadow: "0 4px 20px rgba(0,0,0,0.07)",
}}
transition={{ duration: 0.5, delay: 0.05 }}
whileHover={{ scale: 1.02 }}
style={{ boxShadow: "0 4px 20px rgba(0,0,0,0.07)" }}
>
<td>
<motion.img
src="https://github.githubassets.com/images/modules/profile/achievements/pull-shark-default.png"
alt="Pull Shark"
className={styles.badgeImgSmall}
whileHover={{ scale: 1.13, rotate: 6 }}
whileHover={{ scale: 1.13}}
transition={{ type: "spring", stiffness: 300 }}
/>
</td>
Expand All @@ -476,54 +478,55 @@ const GithubBadgesContent = (): React.ReactElement => {
</a>
</td>
<td>
<b>Needed:</b> 2, 16, 128, 1024
<br />
<div style={{ display: "flex", gap: 8, marginTop: 6 }}>
<div className={styles.badgeLevels}>
<div className={styles.levelText}>
Levels: Default, Bronze, Silver, Gold
</div>
<div className={styles.levelImages}>
<img
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pull-Shark/PNG/PullShark.png"
alt="Starstruck Default"
title="Default (16)"
title="Default (2)"
className={styles.badgeImgSmall}
/>
<img
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pull-Shark/PNG/PullShark_Bronze.png"
alt="Starstruck Bronze"
title="Bronze (128)"
title="Bronze (16)"
className={styles.badgeImgSmall}
/>
<img
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pull-Shark/PNG/PullShark_Silver.png"
alt="Starstruck Silver"
title="Silver (512)"
title="Silver (128)"
className={styles.badgeImgSmall}
/>
<img
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pull-Shark/PNG/PullShark_Gold.png"
alt="Starstruck Gold"
title="Gold (4096)"
title="Gold (1024)"
className={styles.badgeImgSmall}
/>
</div>
<b>Levels:</b> Default, Bronze, Silver, Gold
<div className={styles.neededAmount}>Needed: 2, 16, 128, 1024</div>
</div>
</td>
</motion.tr>
{/* Galaxy Brain */}
<motion.tr
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: 0.25 }}
whileHover={{
scale: 1.02,
boxShadow: "0 4px 20px rgba(0,0,0,0.07)",
}}
transition={{ duration: 0.5, delay: 0.05 }}
whileHover={{ scale: 1.02 }}
style={{ boxShadow: "0 4px 20px rgba(0,0,0,0.07)" }}
>
<td>
<motion.img
src="https://github.githubassets.com/images/modules/profile/achievements/galaxy-brain-default.png"
alt="Galaxy Brain"
className={styles.badgeImgSmall}
whileHover={{ scale: 1.13, rotate: -8 }}
whileHover={{ scale: 1.13}}
transition={{ type: "spring", stiffness: 300 }}
/>
</td>
Expand All @@ -550,54 +553,55 @@ const GithubBadgesContent = (): React.ReactElement => {
</a>
</td>
<td>
<b>Needed:</b> 2, 8, 16, 32
<br />
<div style={{ display: "flex", gap: 8, marginTop: 6 }}>
<div className={styles.badgeLevels}>
<div className={styles.levelText}>
Levels: Default, Bronze, Silver, Gold
</div>
<div className={styles.levelImages}>
<img
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Galaxy-Brain/PNG/GalaxyBrain.png"
alt="Starstruck Default"
title="Default (16)"
title="Default (2)"
className={styles.badgeImgSmall}
/>
<img
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Galaxy-Brain/PNG/GalaxyBrain_Bronze.png"
alt="Starstruck Bronze"
title="Bronze (128)"
title="Bronze (8)"
className={styles.badgeImgSmall}
/>
<img
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Galaxy-Brain/PNG/GalaxyBrain_Silver.png"
alt="Starstruck Silver"
title="Silver (512)"
title="Silver (16)"
className={styles.badgeImgSmall}
/>
<img
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Galaxy-Brain/PNG/GalaxyBrain_Gold.png"
alt="Starstruck Gold"
title="Gold (4096)"
title="Gold (32)"
className={styles.badgeImgSmall}
/>
</div>
<b>Levels:</b> Default, Bronze, Silver, Gold
<div className={styles.neededAmount}>Needed: 2, 8, 16, 32</div>
</div>
</td>
</motion.tr>
{/* YOLO */}
<motion.tr
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: 0.3 }}
whileHover={{
scale: 1.02,
boxShadow: "0 4px 20px rgba(0,0,0,0.07)",
}}
transition={{ duration: 0.5, delay: 0.05 }}
whileHover={{ scale: 1.02 }}
style={{ boxShadow: "0 4px 20px rgba(0,0,0,0.07)" }}
>
<td>
<motion.img
src="https://github.githubassets.com/images/modules/profile/achievements/yolo-default.png"
alt="YOLO"
className={styles.badgeImgSmall}
whileHover={{ scale: 1.13, rotate: 8 }}
whileHover={{ scale: 1.13 }}
transition={{ type: "spring", stiffness: 300 }}
/>
</td>
Expand All @@ -623,14 +627,16 @@ const GithubBadgesContent = (): React.ReactElement => {
</a>
</td>
<td>
<div className={styles.singleBadge}>
<div className={styles.badgeLevels}>
<div className={styles.levelText}>Level: Default</div>
<img
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/YOLO/PNG/YOLO_Badge.png"
alt="Starstruck Default"
title="Default (16)"
className={styles.badgeImgSmall}
/>
<div className={styles.levelImages}>
<img
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/YOLO/PNG/YOLO_Badge.png"
alt="YOLO Default"
title="Default (1)"
className={styles.badgeImgSmall}
/>
</div>
<div className={styles.neededAmount}>Needed: 1</div>
</div>
</td>
Expand All @@ -640,18 +646,16 @@ const GithubBadgesContent = (): React.ReactElement => {
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: 0.35 }}
whileHover={{
scale: 1.02,
boxShadow: "0 4px 20px rgba(0,0,0,0.07)",
}}
transition={{ duration: 0.5, delay: 0.05 }}
whileHover={{ scale: 1.02 }}
style={{ boxShadow: "0 4px 20px rgba(0,0,0,0.07)" }}
>
<td>
<motion.img
src="https://github.githubassets.com/images/modules/profile/achievements/public-sponsor-default.png"
alt="Public Sponsor"
className={styles.badgeImgSmall}
whileHover={{ scale: 1.13, rotate: -6 }}
whileHover={{ scale: 1.13 }}
transition={{ type: "spring", stiffness: 300 }}
/>
</td>
Expand All @@ -676,14 +680,16 @@ const GithubBadgesContent = (): React.ReactElement => {
</a>
</td>
<td>
<div className={styles.singleBadge}>
<div className={styles.badgeLevels}>
<div className={styles.levelText}>Level: Default</div>
<img
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/GitHub-Sponsor/PNG/GitHubSponsorBadge.png"
alt="Starstruck Default"
title="Default (16)"
className={styles.badgeImgSmall}
/>
<div className={styles.levelImages}>
<img
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/GitHub-Sponsor/PNG/GitHubSponsorBadge.png"
alt="GitHub Sponsor Default"
title="Default (1)"
className={styles.badgeImgSmall}
/>
</div>
<div className={styles.neededAmount}>Needed: 1</div>
</div>
</td>
Expand Down
Loading