Merge pull request #3287 from codecrafters-io/refactor-billing-status-badge-buttons

refactor(billing-status-badge): update badges to use buttons with icons

Author: rohitpaulk

app/components/billing-status-badge/indirect-member-badge.hbs

@@ -1,8 +1,8 @@
 <a href="https://docs.codecrafters.io/membership/content" target="_blank" rel="noopener noreferrer" data-test-indirect-member-badge ...attributes>
   <PrimaryButton @size={{this.linkButtonSize}}>
-    <span class="flex items-center">
-      Member
-      {{svg-jar "shield-check" class="w-4 ml-1 fill-current"}}
+    <span class="flex items-center gap-1 flex-nowrap">
+      <span>Member</span>
+      {{svg-jar "shield-check" class="w-4 fill-current"}}
     </span>
 
     <EmberTooltip @text="You have access to all CodeCrafters membership benefits. Click here to learn more." />

app/components/billing-status-badge/member-badge.hbs

@@ -1,9 +1,8 @@
 <PrimaryLinkButton @size={{this.linkButtonSize}} @route="settings.billing" data-test-member-badge ...attributes>
-
-  <span class="flex items-center">
-    Member
-    {{svg-jar "shield-check" class="w-4 ml-1 fill-current"}}
-  </span>
+  <div class="flex items-center gap-1 flex-nowrap">
+    <span>Member</span>
+    {{svg-jar "shield-check" class="w-4 fill-current"}}
+  </div>
 
   <EmberTooltip @text="You're a CodeCrafters member. Click here to view your membership details." />
 </PrimaryLinkButton>

app/components/billing-status-badge/vip-badge.hbs

@@ -1,13 +1,8 @@
-<div
-  class="text-white font-semibold bg-teal-500 rounded-sm flex items-center justify-center
-    {{if (eq this.size 'small') 'text-xs px-2 py-1'}}
-    {{if (eq this.size 'large') 'text-sm px-3 py-1.5'}}"
-  data-test-vip-badge
-  ...attributes
->
-  VIP
-
-  {{svg-jar "shield-check" class="w-4 ml-1 fill-current"}}
+<PrimaryButton @size={{this.buttonSize}} data-test-vip-badge ...attributes>
+  <div class="flex items-center gap-1 flex-nowrap">
+    <span>VIP</span>
+    {{svg-jar "shield-check" class="w-4 fill-current"}}
+  </div>
 
   {{#if this.currentUser.vipStatusExpiresAt}}
     <EmberTooltip
@@ -19,4 +14,4 @@
   {{else}}
     <EmberTooltip @text="You have access to all CodeCrafters content & membership features." />
   {{/if}}
-</div>
+</PrimaryButton>

app/components/billing-status-badge/vip-badge.ts

@@ -4,7 +4,7 @@ import type UserModel from 'codecrafters-frontend/models/user';
 import type AuthenticatorService from 'codecrafters-frontend/services/authenticator';
 
 interface Signature {
-  Element: HTMLDivElement;
+  Element: HTMLButtonElement;
 
   Args: {
     size: 'small' | 'large';
@@ -14,6 +14,12 @@ interface Signature {
 export default class VipBadge extends Component<Signature> {
   @service declare authenticator: AuthenticatorService;
 
+  get buttonSize() {
+    // arg:small -> PrimaryButton size:extra-small
+    // arg:large -> small
+    return this.args.size === 'large' ? 'small' : 'extra-small';
+  }
+
   get currentUser() {
     return this.authenticator.currentUser as UserModel;
   }