Skip to content

Commit 356c517

Browse files
committed
feat(pay-page): conditionally style referral avatar images
Add a conditional check on avatarIsGitHubAvatar to apply a border and rounded styling to GitHub avatars for better visual consistency. Non- GitHub avatars retain the original styling. This improves the UI by differentiating avatar types and enhancing the referral discount notice's appearance.
1 parent 711425f commit 356c517

File tree

1 file changed

+9
-5
lines changed

1 file changed

+9
-5
lines changed

app/components/pay-page/referral-discount-notice.hbs

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,15 @@
88
</div>
99

1010
<div class="bg-repeating-gradient-to-b from-yellow-100 to-amber-500 text-transparent bg-clip-text leading-7 inline-block mt-0.5">
11-
<img
12-
alt="avatar"
13-
src={{@discount.affiliateReferral.affiliateLink.affiliateAvatarUrl}}
14-
class="inline-block mb-0 w-6 h-6 transform -translate-y-px"
15-
/>
11+
{{#if @discount.affiliateReferral.affiliateLink.avatarIsGitHubAvatar}}
12+
<img
13+
alt="avatar"
14+
src={{@discount.affiliateReferral.affiliateLink.affiliateAvatarUrl}}
15+
class="inline-block w-6 h-6 border border-gray-100 rounded-full transform -translate-y-px"
16+
/>
17+
{{else}}
18+
<img alt="avatar" src={{@discount.affiliateReferral.affiliateLink.affiliateAvatarUrl}} class="inline-block w-6 h-6" />
19+
{{/if}}
1620

1721
<b>{{@discount.affiliateReferral.affiliateLink.affiliateUsername}}</b>'s referral offer: Subscribe in
1822
<span class="font-bold percy-timestamp font-mono text-lg border-b border-yellow-500 border-dashed">{{this.timeLeftText}}</span>

0 commit comments

Comments
 (0)