Skip to content

Commit 74bb622

Browse files
sanjay-kvsanjay-kv
authored
Merge pull request #1109 from steam-bell-92/main
feat(UI): Add hover state effects for badges in Achievement Skin Tone table
2 parents b3319be + 7d620b1 commit 74bb622

File tree

2 files changed

+174
-59
lines changed

2 files changed

+174
-59
lines changed

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

Lines changed: 76 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1485,6 +1485,53 @@ table tr:last-child td:last-child {
14851485
position: relative;
14861486
}
14871487

1488+
/* Mirror levelImages styling for skin tone table so skin-tone badges match Public Sponsor theme */
1489+
.skinToneTable .levelImages {
1490+
display: flex;
1491+
justify-content: center;
1492+
align-items: center;
1493+
padding: 8px;
1494+
border-radius: 12px;
1495+
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
1496+
border: 2px solid #e2e8f0;
1497+
box-shadow:
1498+
0 2px 8px rgba(0, 0, 0, 0.04),
1499+
inset 0 1px 0 rgba(255, 255, 255, 0.5);
1500+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
1501+
}
1502+
1503+
.skinToneTable .levelImages:hover {
1504+
transform: translateY(-1px);
1505+
box-shadow:
1506+
0 4px 12px rgba(0, 0, 0, 0.08),
1507+
inset 0 1px 0 rgba(255, 255, 255, 0.7);
1508+
border-color: #c7d2fe;
1509+
}
1510+
1511+
.skinToneTable .levelImages img {
1512+
width: clamp(28px, 4vw, 44px);
1513+
height: clamp(28px, 4vw, 44px);
1514+
border-radius: 12px;
1515+
border: 2px solid #e5e7eb;
1516+
background: white;
1517+
box-shadow:
1518+
0 2px 6px rgba(0, 0, 0, 0.08),
1519+
0 1px 2px rgba(0, 0, 0, 0.04);
1520+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
1521+
cursor: pointer;
1522+
1523+
}
1524+
1525+
.skinToneTable .levelImages img:hover {
1526+
transform: scale(1.12);
1527+
box-shadow:
1528+
0 6px 16px rgba(0, 0, 0, 0.15),
1529+
0 3px 8px rgba(0, 0, 0, 0.1);
1530+
border-color: #3b82f6;
1531+
z-index: 10;
1532+
position: relative;
1533+
}
1534+
14881535
/* Enhanced Needed Amount Section */
14891536
.achievementsTable .neededAmount {
14901537
font-weight: 600;
@@ -1559,6 +1606,34 @@ table tr:last-child td:last-child {
15591606
0 3px 6px rgba(59, 130, 246, 0.3);
15601607
}
15611608

1609+
/* Dark theme overrides for neededAmount */
1610+
[data-theme="dark"] .achievementsTable .neededAmount {
1611+
color: var(--ifm-color-white) !important;
1612+
background: linear-gradient(
1613+
135deg,
1614+
var(--dark-bg-tertiary) 0%,
1615+
var(--dark-bg-secondary) 100%
1616+
) !important;
1617+
border-color: var(--dark-border) !important;
1618+
box-shadow:
1619+
0 4px 12px rgba(0, 0, 0, 0.4),
1620+
0 2px 4px rgba(0, 0, 0, 0.3) !important;
1621+
}
1622+
1623+
[data-theme="dark"] .achievementsTable .neededAmount::before {
1624+
/* Adjusts the hover shine effect for dark mode */
1625+
background: linear-gradient(
1626+
90deg,
1627+
transparent,
1628+
rgba(255, 255, 255, 0.15),
1629+
transparent
1630+
) !important;
1631+
}
1632+
1633+
[data-theme="dark"] .achievementsTable .neededAmount:hover {
1634+
border-color: var(--ifm-color-primary) !important;
1635+
}
1636+
15621637
/* Enhanced Badge Levels Container */
15631638
.achievementsTable .badgeLevels {
15641639
display: flex;
@@ -1868,4 +1943,4 @@ table tr:last-child td:last-child {
18681943

18691944
[data-theme="dark"] .achievementsTable td b:hover {
18701945
box-shadow: 0 4px 10px rgba(37, 194, 160, 0.4) !important;
1871-
}
1946+
}

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

Lines changed: 98 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -751,45 +751,63 @@ const GithubBadgesContent = (): React.ReactElement => {
751751
</td>
752752
<td>Starstruck</td>
753753
<td>
754-
<img
755-
src="https://github.githubassets.com/images/modules/profile/achievements/starstruck-default.png"
756-
className={styles.badgeImgSmall}
757-
/>{" "}
754+
<div className={styles.levelImages}>
755+
<img
756+
src="https://github.githubassets.com/images/modules/profile/achievements/starstruck-default.png"
757+
className={styles.badgeImgSmall}
758+
alt="Starstruck Default"
759+
/>
760+
</div>
758761
👋
759762
</td>
760763
<td>
761-
<img
762-
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone2.png"
763-
className={styles.badgeImgSmall}
764-
/>{" "}
764+
<div className={styles.levelImages}>
765+
<img
766+
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone2.png"
767+
className={styles.badgeImgSmall}
768+
alt="Starstruck Skin Tone 2"
769+
/>
770+
</div>
765771
👋🏻
766772
</td>
767773
<td>
768-
<img
769-
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone3.png"
770-
className={styles.badgeImgSmall}
771-
/>{" "}
774+
<div className={styles.levelImages}>
775+
<img
776+
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone3.png"
777+
className={styles.badgeImgSmall}
778+
alt="Starstruck Skin Tone 3"
779+
/>
780+
</div>
772781
👋🏼
773782
</td>
774783
<td>
775-
<img
776-
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone4.png"
777-
className={styles.badgeImgSmall}
778-
/>{" "}
784+
<div className={styles.levelImages}>
785+
<img
786+
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone4.png"
787+
className={styles.badgeImgSmall}
788+
alt="Starstruck Skin Tone 4"
789+
/>
790+
</div>
779791
👋🏽
780792
</td>
781793
<td>
782-
<img
783-
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone5.png"
784-
className={styles.badgeImgSmall}
785-
/>{" "}
794+
<div className={styles.levelImages}>
795+
<img
796+
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone5.png"
797+
className={styles.badgeImgSmall}
798+
alt="Starstruck Skin Tone 5"
799+
/>
800+
</div>
786801
👋🏾
787802
</td>
788803
<td>
789-
<img
790-
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone6.png"
791-
className={styles.badgeImgSmall}
792-
/>{" "}
804+
<div className={styles.levelImages}>
805+
<img
806+
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone6.png"
807+
className={styles.badgeImgSmall}
808+
alt="Starstruck Skin Tone 6"
809+
/>
810+
</div>
793811
👋🏿
794812
</td>
795813
</tr>
@@ -803,45 +821,63 @@ const GithubBadgesContent = (): React.ReactElement => {
803821
</td>
804822
<td>Quickdraw</td>
805823
<td>
806-
<img
807-
src="https://github.githubassets.com/images/modules/profile/achievements/quickdraw-default.png"
808-
className={styles.badgeImgSmall}
809-
/>{" "}
824+
<div className={styles.levelImages}>
825+
<img
826+
src="https://github.githubassets.com/images/modules/profile/achievements/quickdraw-default.png"
827+
className={styles.badgeImgSmall}
828+
alt="Quickdraw Default"
829+
/>
830+
</div>
810831
👋
811832
</td>
812833
<td>
813-
<img
814-
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone2.png"
815-
className={styles.badgeImgSmall}
816-
/>{" "}
834+
<div className={styles.levelImages}>
835+
<img
836+
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone2.png"
837+
className={styles.badgeImgSmall}
838+
alt="Quickdraw Skin Tone 2"
839+
/>
840+
</div>
817841
👋🏻
818842
</td>
819843
<td>
820-
<img
821-
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone3.png"
822-
className={styles.badgeImgSmall}
823-
/>{" "}
844+
<div className={styles.levelImages}>
845+
<img
846+
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone3.png"
847+
className={styles.badgeImgSmall}
848+
alt="Quickdraw Skin Tone 3"
849+
/>
850+
</div>
824851
👋🏼
825852
</td>
826853
<td>
827-
<img
828-
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone4.png"
829-
className={styles.badgeImgSmall}
830-
/>{" "}
854+
<div className={styles.levelImages}>
855+
<img
856+
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone4.png"
857+
className={styles.badgeImgSmall}
858+
alt="Quickdraw Skin Tone 4"
859+
/>
860+
</div>
831861
👋🏽
832862
</td>
833863
<td>
834-
<img
835-
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone5.png"
836-
className={styles.badgeImgSmall}
837-
/>{" "}
864+
<div className={styles.levelImages}>
865+
<img
866+
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone5.png"
867+
className={styles.badgeImgSmall}
868+
alt="Quickdraw Skin Tone 5"
869+
/>
870+
</div>
838871
👋🏾
839872
</td>
840873
<td>
841-
<img
842-
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone6.png"
843-
className={styles.badgeImgSmall}
844-
/>{" "}
874+
<div className={styles.levelImages}>
875+
<img
876+
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone6.png"
877+
className={styles.badgeImgSmall}
878+
alt="Quickdraw Skin Tone 6"
879+
/>
880+
</div>
845881
👋🏿
846882
</td>
847883
</tr>
@@ -991,11 +1027,13 @@ const GithubBadgesContent = (): React.ReactElement => {
9911027
<td>
9921028
<div className={styles.neededBox}>
9931029
<div className={styles.neededLabel}>DEFAULT</div>
994-
<img
995-
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Mars-2020-Contributor/PNG/Mars2020ContributorBadge.png"
996-
alt="Mars 2020 Contributor"
997-
className={styles.badgeImgSmall}
998-
/>
1030+
<div className={styles.levelImages}>
1031+
<img
1032+
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Mars-2020-Contributor/PNG/Mars2020ContributorBadge.png"
1033+
alt="Mars 2020 Contributor"
1034+
className={styles.badgeImgSmall}
1035+
/>
1036+
</div>
9991037
<div>1</div>
10001038
</div>
10011039
</td>
@@ -1022,11 +1060,13 @@ const GithubBadgesContent = (): React.ReactElement => {
10221060
<td>
10231061
<div className={styles.neededBox}>
10241062
<div className={styles.neededLabel}>DEFAULT</div>
1025-
<img
1026-
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/2020-Arctic-Code-Vault-Contributor/PNG/2020ArcticCodeVaultBadge.png"
1027-
alt="Arctic Code Vault Contributor"
1028-
className={styles.badgeImgSmall}
1029-
/>
1063+
<div className={styles.levelImages}>
1064+
<img
1065+
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/2020-Arctic-Code-Vault-Contributor/PNG/2020ArcticCodeVaultBadge.png"
1066+
alt="Arctic Code Vault Contributor"
1067+
className={styles.badgeImgSmall}
1068+
/>
1069+
</div>
10301070
<div>1</div>
10311071
</div>
10321072
</td>

0 commit comments

Comments
 (0)