diff --git a/scss/westgate/_posts.scss b/scss/westgate/_posts.scss index 75d6f1a..d8e15e1 100644 --- a/scss/westgate/_posts.scss +++ b/scss/westgate/_posts.scss @@ -148,15 +148,9 @@ li[component="post"] [component="post/upvote"] { position: relative; i.fa-chevron-up { - display: none !important; - } - - &::before { - content: "\f004"; - font-family: "Font Awesome 6 Free"; + // Font Awesome 7: fa-heart + --fa: "\f004"; font-size: 0.95rem; - font-weight: 900; - line-height: 1; color: var(--bs-primary); } @@ -174,7 +168,7 @@ li[component="post"] [component="post/upvote"] { } } - &.upvoted::before { + &.upvoted i.fa-chevron-up { color: #d47a87; } } @@ -183,15 +177,9 @@ li[component="post"] [component="post/downvote"] { position: relative; i.fa-chevron-down { - display: none !important; - } - - &::before { - content: "\f7a9"; - font-family: "Font Awesome 6 Free"; + // Font Awesome 7: fa-heart-crack (fa-heart-broken alias) + --fa: "\f7a9"; font-size: 0.92rem; - font-weight: 900; - line-height: 1; color: rgba(194, 163, 90, 0.82); } @@ -209,7 +197,7 @@ li[component="post"] [component="post/downvote"] { } } - &.downvoted::before { + &.downvoted i.fa-chevron-down { color: #b86a78; } } diff --git a/tests/post-vote-icons.test.js b/tests/post-vote-icons.test.js new file mode 100644 index 0000000..49e79f7 --- /dev/null +++ b/tests/post-vote-icons.test.js @@ -0,0 +1,31 @@ +const assert = require("assert"); +const fs = require("fs"); +const path = require("path"); + +const stylesheet = fs.readFileSync( + path.join(__dirname, "..", "scss", "westgate", "_posts.scss"), + "utf8" +); + +assert( + !stylesheet.includes("Font Awesome 6 Free"), + "Post vote icons must not hard-code the retired Font Awesome 6 family" +); + +assert.match( + stylesheet, + /i\.fa-chevron-up\s*\{[^}]*--fa:\s*"\\f004"/s, + "The upvote button should reuse Harmony's Font Awesome element with the fa-heart glyph" +); + +assert.match( + stylesheet, + /i\.fa-chevron-down\s*\{[^}]*--fa:\s*"\\f7a9"/s, + "The downvote button should reuse Harmony's Font Awesome element with the fa-heart-crack glyph" +); + +assert.doesNotMatch( + stylesheet, + /\[component="post\/(?:upvote|downvote)"\][\s\S]*?&::before\s*\{/, + "Vote icons should not bypass Font Awesome's element and family handling with custom pseudo-elements" +);