Some UI tweaks and allow for input value of the account's current setting.

projects/shared/src/lib/membership-options/membership-options.component.html

@@ -1,6 +1,17 @@
-<mat-button-toggle-group class="options-button-group" [vertical]="alignVertical">
-    <mat-button-toggle *ngFor="let membership of membershipTypes" (click)="onMembershipSelect(membership)">
-        <div class="mat-h3">{{membership.name}}</div>
-        <div class="mat-body" *ngIf="membership.name != 'MAYBE LATER'">{{membership.price}} USD</div>
+<mat-button-toggle-group
+        class="options-button-group"
+        [vertical]="alignVertical"
+        value="{{accountMembership}}"
+>
+    <mat-button-toggle
+            *ngFor="let membership of membershipTypes"
+            (click)="onMembershipSelect(membership)"
+            value="{{membership.type}}"
+    >
+        <h3 class="mat-h3">{{membership.type}}</h3>
+        <p class="mat-body" *ngIf="membership.type != 'Maybe Later'">{{membership.price}} USD</p>
+    </mat-button-toggle>
+    <mat-button-toggle>
+        <h3 id="non-supporter" class="mat-h3">Maybe Later</h3>
     </mat-button-toggle>
 </mat-button-toggle-group>

projects/shared/src/lib/membership-options/membership-options.component.scss

@@ -7,19 +7,22 @@
         border: none;
         border-radius: 4px;
         margin: 8px;
-        padding: 8px
+        padding: 8px;
+        width: 200px;
+
+        .mat-h3 {
+            font-weight: bold;
+            margin-top: 8px;
+            margin-bottom: 8px;
+        }
+
+        #non-supporter {
+            margin-top: 24px;
+        }
     }
 
     .mat-button-toggle-checked {
         background-color: #22a7f0;
-
-        .mat-button-toggle-label-content {
-            color: white;
-        }
+        color: white;
     }
 }
-
-.mat-h3 {
-    font-weight: bold;
-    margin-bottom: 10px;
-}

projects/shared/src/lib/membership-options/membership-options.component.ts

@@ -1,25 +1,25 @@
-import { Component, EventEmitter, OnDestroy, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnDestroy, Output } from '@angular/core';
 import { MediaChange, MediaObserver } from '@angular/flex-layout';
 import { Subscription } from 'rxjs';
 
 export interface MembershipType {
-    name: string;
+    type: string;
     price: string;
     period: string;
 }
 
 const nonSupporter: MembershipType = {
-    name: 'MAYBE LATER',
+    type: 'Maybe Later',
     price: '$0',
     period: null
 };
 const monthlySupporter: MembershipType = {
-    name: 'MONTHLY SUPPORTER',
+    type: 'Monthly Supporter',
     price: '$1.99',
     period: 'month'
 };
 const yearlySupporter: MembershipType = {
-    name: 'YEARLY SUPPORTER',
+    type: 'Yearly Supporter',
     price: '$19.99',
     period: 'year'
 };
@@ -30,6 +30,7 @@ const yearlySupporter: MembershipType = {
     styleUrls: ['./membership-options.component.scss']
 })
 export class MembershipOptionsComponent implements OnDestroy {
+    @Input() accountMembership: string;
     public alignVertical: boolean;
     public membershipTypes: MembershipType[];
     public mediaWatcher: Subscription;
@@ -41,12 +42,13 @@ export class MembershipOptionsComponent implements OnDestroy {
                 this.alignVertical = ['xs', 'sm'].includes(change.mqAlias);
             }
         );
-        this.membershipTypes = [yearlySupporter, monthlySupporter, nonSupporter];
+        this.membershipTypes = [yearlySupporter, monthlySupporter];
     }
 
     onMembershipSelect(membership: MembershipType) {
-        this.selectedMembership.emit(membership.name);
+        this.selectedMembership.emit(membership.type);
     }
+
     ngOnDestroy(): void {
       this.mediaWatcher.unsubscribe();
     }