Skip to content

Commit c0d2290

Browse files
sanjay-kvsanjay-kv
authored
Merge pull request #1068 from steam-bell-92/main
Fix: Standardize UI/UX for GitHub Badges
2 parents ebf50b0 + dbfc03a commit c0d2290

File tree

2 files changed

+97
-91
lines changed

2 files changed

+97
-91
lines changed

‎src/pages/badges/github-badges.module.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1013,7 +1013,7 @@ table tr:last-child td:last-child {
10131013
}
10141014

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

@@ -1476,7 +1476,7 @@ table tr:last-child td:last-child {
14761476
}
14771477

14781478
.achievementsTable .levelImages img:hover {
1479-
transform: scale(1.2) rotate(8deg);
1479+
transform: scale(1.2);
14801480
box-shadow:
14811481
0 6px 16px rgba(0, 0, 0, 0.15),
14821482
0 3px 8px rgba(0, 0, 0, 0.1);

‎src/pages/badges/github-badges.tsx‎

Lines changed: 95 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -254,7 +254,7 @@ const GithubBadgesContent = (): React.ReactElement => {
254254
src="https://github.githubassets.com/images/modules/profile/achievements/starstruck-default.png"
255255
alt="Starstruck"
256256
className={styles.badgeImgSmall}
257-
whileHover={{ scale: 1.13, rotate: -6 }}
257+
whileHover={{ scale: 1.13}}
258258
transition={{ type: "spring", stiffness: 300 }}
259259
/>
260260
</td>
@@ -322,18 +322,16 @@ const GithubBadgesContent = (): React.ReactElement => {
322322
initial={{ opacity: 0, y: 20 }}
323323
whileInView={{ opacity: 1, y: 0 }}
324324
viewport={{ once: true }}
325-
transition={{ duration: 0.5, delay: 0.1 }}
326-
whileHover={{
327-
scale: 1.02,
328-
boxShadow: "0 4px 20px rgba(0,0,0,0.07)",
329-
}}
325+
transition={{ duration: 0.5, delay: 0.05 }}
326+
whileHover={{ scale: 1.02 }}
327+
style={{ boxShadow: "0 4px 20px rgba(0,0,0,0.07)" }}
330328
>
331329
<td>
332330
<motion.img
333331
src="https://github.githubassets.com/images/modules/profile/achievements/quickdraw-default.png"
334332
alt="Quickdraw"
335333
className={styles.badgeImgSmall}
336-
whileHover={{ scale: 1.13, rotate: 6 }}
334+
whileHover={{ scale: 1.13}}
337335
transition={{ type: "spring", stiffness: 300 }}
338336
/>
339337
</td>
@@ -345,13 +343,18 @@ const GithubBadgesContent = (): React.ReactElement => {
345343
opening you will unlock this badge
346344
</td>
347345
<td>
348-
<div className={styles.singleBadge}>
349-
<div className={styles.levelText}>Level: Default</div>
346+
<div className={styles.badgeLevels}>
347+
<div className={styles.levelText}>
348+
Level: Default
349+
</div>
350+
<div className={styles.levelImages}>
350351
<img
351352
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone1.png"
352353
alt="Quickdraw Default"
354+
title="Default (1)"
353355
className={styles.badgeImgSmall}
354356
/>
357+
</div>
355358
<div className={styles.neededAmount}>Needed: 1</div>
356359
</div>
357360
</td>
@@ -361,18 +364,16 @@ const GithubBadgesContent = (): React.ReactElement => {
361364
initial={{ opacity: 0, y: 20 }}
362365
whileInView={{ opacity: 1, y: 0 }}
363366
viewport={{ once: true }}
364-
transition={{ duration: 0.5, delay: 0.15 }}
365-
whileHover={{
366-
scale: 1.02,
367-
boxShadow: "0 4px 20px rgba(0,0,0,0.07)",
368-
}}
367+
transition={{ duration: 0.5, delay: 0.05 }}
368+
whileHover={{ scale: 1.02 }}
369+
style={{ boxShadow: "0 4px 20px rgba(0,0,0,0.07)" }}
369370
>
370371
<td>
371372
<motion.img
372373
src="https://github.githubassets.com/images/modules/profile/achievements/pair-extraordinaire-default.png"
373374
alt="Pair Extraordinaire"
374375
className={styles.badgeImgSmall}
375-
whileHover={{ scale: 1.13, rotate: -8 }}
376+
whileHover={{ scale: 1.13}}
376377
transition={{ type: "spring", stiffness: 300 }}
377378
/>
378379
</td>
@@ -402,54 +403,55 @@ const GithubBadgesContent = (): React.ReactElement => {
402403
</a>
403404
</td>
404405
<td>
405-
<b>Needed:</b> 1, 10, 24, 48
406-
<br />
407-
<div style={{ display: "flex", gap: 8, marginTop: 6 }}>
406+
<div className={styles.badgeLevels}>
407+
<div className={styles.levelText}>
408+
Levels: Default, Bronze, Silver, Gold
409+
</div>
410+
<div className={styles.levelImages}>
408411
<img
409412
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pair-Extraordinaire/PNG/PairExtraordinaire.png"
410-
alt="Starstruck Default"
411-
title="Default (16)"
413+
alt="Pair Extraordinarie Default"
414+
title="Default (1)"
412415
className={styles.badgeImgSmall}
413416
/>
414417
<img
415418
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pair-Extraordinaire/PNG/PairExtraordinaire_Bronze.png"
416-
alt="Starstruck Bronze"
417-
title="Bronze (128)"
419+
alt="Pair Extraordinarie Bronze"
420+
title="Bronze (10)"
418421
className={styles.badgeImgSmall}
419422
/>
420423
<img
421424
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pair-Extraordinaire/PNG/PairExtraordinaire_Silver.png"
422-
alt="Starstruck Silver"
423-
title="Silver (512)"
425+
alt="Pair Extraordinarie Silver"
426+
title="Silver (24)"
424427
className={styles.badgeImgSmall}
425428
/>
426429
<img
427430
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pair-Extraordinaire/PNG/PairExtraordinaire_Gold.png"
428-
alt="Starstruck Gold"
429-
title="Gold (4096)"
431+
alt="Pair Extraordinarie Gold"
432+
title="Gold (48)"
430433
className={styles.badgeImgSmall}
431434
/>
432435
</div>
433-
<b>Levels:</b> Default, Bronze, Silver, Gold
436+
<div className={styles.neededAmount}>Needed: 1, 10, 24, 48</div>
437+
</div>
434438
</td>
435439
</motion.tr>
436440
{/* Pull Shark */}
437441
<motion.tr
438442
initial={{ opacity: 0, y: 20 }}
439443
whileInView={{ opacity: 1, y: 0 }}
440444
viewport={{ once: true }}
441-
transition={{ duration: 0.5, delay: 0.2 }}
442-
whileHover={{
443-
scale: 1.02,
444-
boxShadow: "0 4px 20px rgba(0,0,0,0.07)",
445-
}}
445+
transition={{ duration: 0.5, delay: 0.05 }}
446+
whileHover={{ scale: 1.02 }}
447+
style={{ boxShadow: "0 4px 20px rgba(0,0,0,0.07)" }}
446448
>
447449
<td>
448450
<motion.img
449451
src="https://github.githubassets.com/images/modules/profile/achievements/pull-shark-default.png"
450452
alt="Pull Shark"
451453
className={styles.badgeImgSmall}
452-
whileHover={{ scale: 1.13, rotate: 6 }}
454+
whileHover={{ scale: 1.13}}
453455
transition={{ type: "spring", stiffness: 300 }}
454456
/>
455457
</td>
@@ -476,54 +478,55 @@ const GithubBadgesContent = (): React.ReactElement => {
476478
</a>
477479
</td>
478480
<td>
479-
<b>Needed:</b> 2, 16, 128, 1024
480-
<br />
481-
<div style={{ display: "flex", gap: 8, marginTop: 6 }}>
481+
<div className={styles.badgeLevels}>
482+
<div className={styles.levelText}>
483+
Levels: Default, Bronze, Silver, Gold
484+
</div>
485+
<div className={styles.levelImages}>
482486
<img
483487
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pull-Shark/PNG/PullShark.png"
484-
alt="Starstruck Default"
485-
title="Default (16)"
488+
alt="Pull Shark Default"
489+
title="Default (2)"
486490
className={styles.badgeImgSmall}
487491
/>
488492
<img
489493
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pull-Shark/PNG/PullShark_Bronze.png"
490-
alt="Starstruck Bronze"
491-
title="Bronze (128)"
494+
alt="Pull Shark Bronze"
495+
title="Bronze (16)"
492496
className={styles.badgeImgSmall}
493497
/>
494498
<img
495499
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pull-Shark/PNG/PullShark_Silver.png"
496-
alt="Starstruck Silver"
497-
title="Silver (512)"
500+
alt="Pull Shark Silver"
501+
title="Silver (128)"
498502
className={styles.badgeImgSmall}
499503
/>
500504
<img
501505
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Pull-Shark/PNG/PullShark_Gold.png"
502-
alt="Starstruck Gold"
503-
title="Gold (4096)"
506+
alt="Pull Shark Gold"
507+
title="Gold (1024)"
504508
className={styles.badgeImgSmall}
505509
/>
506510
</div>
507-
<b>Levels:</b> Default, Bronze, Silver, Gold
511+
<div className={styles.neededAmount}>Needed: 2, 16, 128, 1024</div>
512+
</div>
508513
</td>
509514
</motion.tr>
510515
{/* Galaxy Brain */}
511516
<motion.tr
512517
initial={{ opacity: 0, y: 20 }}
513518
whileInView={{ opacity: 1, y: 0 }}
514519
viewport={{ once: true }}
515-
transition={{ duration: 0.5, delay: 0.25 }}
516-
whileHover={{
517-
scale: 1.02,
518-
boxShadow: "0 4px 20px rgba(0,0,0,0.07)",
519-
}}
520+
transition={{ duration: 0.5, delay: 0.05 }}
521+
whileHover={{ scale: 1.02 }}
522+
style={{ boxShadow: "0 4px 20px rgba(0,0,0,0.07)" }}
520523
>
521524
<td>
522525
<motion.img
523526
src="https://github.githubassets.com/images/modules/profile/achievements/galaxy-brain-default.png"
524527
alt="Galaxy Brain"
525528
className={styles.badgeImgSmall}
526-
whileHover={{ scale: 1.13, rotate: -8 }}
529+
whileHover={{ scale: 1.13}}
527530
transition={{ type: "spring", stiffness: 300 }}
528531
/>
529532
</td>
@@ -550,54 +553,55 @@ const GithubBadgesContent = (): React.ReactElement => {
550553
</a>
551554
</td>
552555
<td>
553-
<b>Needed:</b> 2, 8, 16, 32
554-
<br />
555-
<div style={{ display: "flex", gap: 8, marginTop: 6 }}>
556+
<div className={styles.badgeLevels}>
557+
<div className={styles.levelText}>
558+
Levels: Default, Bronze, Silver, Gold
559+
</div>
560+
<div className={styles.levelImages}>
556561
<img
557562
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Galaxy-Brain/PNG/GalaxyBrain.png"
558-
alt="Starstruck Default"
559-
title="Default (16)"
563+
alt="Galaxy Brain Default"
564+
title="Default (2)"
560565
className={styles.badgeImgSmall}
561566
/>
562567
<img
563568
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Galaxy-Brain/PNG/GalaxyBrain_Bronze.png"
564-
alt="Starstruck Bronze"
565-
title="Bronze (128)"
569+
alt="Galaxy Brain Bronze"
570+
title="Bronze (8)"
566571
className={styles.badgeImgSmall}
567572
/>
568573
<img
569574
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Galaxy-Brain/PNG/GalaxyBrain_Silver.png"
570-
alt="Starstruck Silver"
571-
title="Silver (512)"
575+
alt="Galaxy Brain Silver"
576+
title="Silver (16)"
572577
className={styles.badgeImgSmall}
573578
/>
574579
<img
575580
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Galaxy-Brain/PNG/GalaxyBrain_Gold.png"
576-
alt="Starstruck Gold"
577-
title="Gold (4096)"
581+
alt="Galaxy Brain Gold"
582+
title="Gold (32)"
578583
className={styles.badgeImgSmall}
579584
/>
580585
</div>
581-
<b>Levels:</b> Default, Bronze, Silver, Gold
586+
<div className={styles.neededAmount}>Needed: 2, 8, 16, 32</div>
587+
</div>
582588
</td>
583589
</motion.tr>
584590
{/* YOLO */}
585591
<motion.tr
586592
initial={{ opacity: 0, y: 20 }}
587593
whileInView={{ opacity: 1, y: 0 }}
588594
viewport={{ once: true }}
589-
transition={{ duration: 0.5, delay: 0.3 }}
590-
whileHover={{
591-
scale: 1.02,
592-
boxShadow: "0 4px 20px rgba(0,0,0,0.07)",
593-
}}
595+
transition={{ duration: 0.5, delay: 0.05 }}
596+
whileHover={{ scale: 1.02 }}
597+
style={{ boxShadow: "0 4px 20px rgba(0,0,0,0.07)" }}
594598
>
595599
<td>
596600
<motion.img
597601
src="https://github.githubassets.com/images/modules/profile/achievements/yolo-default.png"
598602
alt="YOLO"
599603
className={styles.badgeImgSmall}
600-
whileHover={{ scale: 1.13, rotate: 8 }}
604+
whileHover={{ scale: 1.13 }}
601605
transition={{ type: "spring", stiffness: 300 }}
602606
/>
603607
</td>
@@ -623,14 +627,16 @@ const GithubBadgesContent = (): React.ReactElement => {
623627
</a>
624628
</td>
625629
<td>
626-
<div className={styles.singleBadge}>
630+
<div className={styles.badgeLevels}>
627631
<div className={styles.levelText}>Level: Default</div>
628-
<img
629-
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/YOLO/PNG/YOLO_Badge.png"
630-
alt="Starstruck Default"
631-
title="Default (16)"
632-
className={styles.badgeImgSmall}
633-
/>
632+
<div className={styles.levelImages}>
633+
<img
634+
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/YOLO/PNG/YOLO_Badge.png"
635+
alt="YOLO Default"
636+
title="Default (1)"
637+
className={styles.badgeImgSmall}
638+
/>
639+
</div>
634640
<div className={styles.neededAmount}>Needed: 1</div>
635641
</div>
636642
</td>
@@ -640,18 +646,16 @@ const GithubBadgesContent = (): React.ReactElement => {
640646
initial={{ opacity: 0, y: 20 }}
641647
whileInView={{ opacity: 1, y: 0 }}
642648
viewport={{ once: true }}
643-
transition={{ duration: 0.5, delay: 0.35 }}
644-
whileHover={{
645-
scale: 1.02,
646-
boxShadow: "0 4px 20px rgba(0,0,0,0.07)",
647-
}}
649+
transition={{ duration: 0.5, delay: 0.05 }}
650+
whileHover={{ scale: 1.02 }}
651+
style={{ boxShadow: "0 4px 20px rgba(0,0,0,0.07)" }}
648652
>
649653
<td>
650654
<motion.img
651655
src="https://github.githubassets.com/images/modules/profile/achievements/public-sponsor-default.png"
652656
alt="Public Sponsor"
653657
className={styles.badgeImgSmall}
654-
whileHover={{ scale: 1.13, rotate: -6 }}
658+
whileHover={{ scale: 1.13 }}
655659
transition={{ type: "spring", stiffness: 300 }}
656660
/>
657661
</td>
@@ -676,14 +680,16 @@ const GithubBadgesContent = (): React.ReactElement => {
676680
</a>
677681
</td>
678682
<td>
679-
<div className={styles.singleBadge}>
683+
<div className={styles.badgeLevels}>
680684
<div className={styles.levelText}>Level: Default</div>
681-
<img
682-
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/GitHub-Sponsor/PNG/GitHubSponsorBadge.png"
683-
alt="Starstruck Default"
684-
title="Default (16)"
685-
className={styles.badgeImgSmall}
686-
/>
685+
<div className={styles.levelImages}>
686+
<img
687+
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/GitHub-Sponsor/PNG/GitHubSponsorBadge.png"
688+
alt="Public Sponsor Default"
689+
title="Default (1)"
690+
className={styles.badgeImgSmall}
691+
/>
692+
</div>
687693
<div className={styles.neededAmount}>Needed: 1</div>
688694
</div>
689695
</td>

0 commit comments

Comments
 (0)