feat(affiliate-link): enhance avatar display with GitHub styling

Add conditional styling for affiliate avatars sourced from GitHub by
checking the URL pattern. Apply rounded corners, border, and subtle
shadow effects with hover transitions to improve visual consistency.
Update affiliate-link model to include a computed property that
detects GitHub avatars based on URL. Modify test data to use a realistic
GitHub avatar URL and include relevant affiliate properties.
These changes improve UI polish and provide clearer differentiation
for GitHub-based avatars on the accept referral container.

Author: rohitpaulk

app/components/affiliate-link-page/accept-referral-container.hbs

@@ -1,11 +1,19 @@
 <div
   class="flex flex-col items-center gap-y-6 bg-teal-50/25 dark:bg-teal-800/40 border-teal-500 dark:border-teal-600 px-4
     {{if (eq @verticalSize 'tall') 'py-12' 'py-8'}}
-    border rounded-md shadow-xl"
+    border rounded-md shadow-xl group"
   ...attributes
 >
   <div class="flex items-center justify-center">
-    <img alt="avatar" src={{@affiliateLink.affiliateAvatarUrl}} class="w-16 h-16 mr-2" />
+    {{#if @affiliateLink.avatarIsGitHubAvatar}}
+      <img
+        alt="avatar"
+        src={{@affiliateLink.affiliateAvatarUrl}}
+        class="w-16 h-16 mr-2 rounded-md border border-gray-300 shadow-xs group-hover:shadow-sm transition-shadow"
+      />
+    {{else}}
+      <img alt="avatar" src={{@affiliateLink.affiliateAvatarUrl}} class="w-16 h-16 mr-2" />
+    {{/if}}
 
     {{svg-jar "plus" class="w-10 h-10 text-gray-600 dark:text-gray-400 mr-2 opacity-90 group-hover:opacity-100 transition-all"}}
 

app/models/affiliate-link.ts

@@ -14,6 +14,10 @@ export default class AffiliateLinkModel extends Model {
   @attr('string') declare slug: string;
   @attr('string') declare url: string;
 
+  get avatarIsGitHubAvatar(): boolean {
+    return this.affiliateAvatarUrl.includes('avatars.githubusercontent.com');
+  }
+
   get totalEarningsAmountInCents() {
     return this.referrals.reduce((sum, referral) => sum + referral.totalEarningsAmountInCents, 0);
   }

tests/acceptance/affiliate-link-page/accept-referral-offer-test.js

@@ -34,13 +34,17 @@ module('Acceptance | affiliate-link-page | accept-referral-offer', function (hoo
     signIn(this.owner, this.server);
 
     const referrer = this.server.create('user', {
-      avatarUrl: 'https://github.com/sarupbanskota.png',
+      avatarUrl: 'https://avatars.githubusercontent.com/u/1234567890?v=4',
       createdAt: new Date(),
       githubUsername: 'sarupbanskota',
       username: 'sarupbanskota',
     });
 
-    this.server.create('affiliate-link', { user: referrer });
+    this.server.create('affiliate-link', {
+      user: referrer,
+      affiliateUsername: 'sarupbanskota',
+      affiliateAvatarUrl: 'https://avatars.githubusercontent.com/u/1234567890?v=4',
+    });
 
     await affiliateLinkPage.visit({ via: 'referral1' });
     await affiliateLinkPage.acceptReferralButtons[0].click();