Cherry pick premium badge and reports page (#1525, #1536) (#1571)

src/app/settings/emergency-access-add-edit.component.html

@@ -9,7 +9,7 @@
     >
       <div class="modal-header">
         <h2 class="modal-title" id="userAddEditTitle">
-          <span class="badge badge-primary" *ngIf="readOnly">{{ "premium" | i18n }}</span>
+          <app-premium-badge *ngIf="readOnly"></app-premium-badge>
           {{ title }}
           <small class="text-muted" *ngIf="name">{{ name }}</small>
         </h2>

src/app/settings/emergency-access.component.html

@@ -15,15 +15,7 @@
 <div class="page-header d-flex">
   <h2>
     {{ "trustedEmergencyContacts" | i18n }}
-    <a
-      href="#"
-      appStopClick
-      class="badge badge-primary"
-      *ngIf="!canAccessPremium"
-      (click)="premiumRequired()"
-    >
-      {{ "premium" | i18n }}
-    </a>
+    <app-premium-badge></app-premium-badge>
   </h2>
   <div class="ml-auto d-flex">
     <button

src/app/settings/two-factor-setup.component.html

@@ -39,15 +39,7 @@
           ></i>
           <span class="sr-only">{{ "enabled" | i18n }}</span>
         </ng-container>
-        <a
-          href="#"
-          appStopClick
-          class="badge badge-primary"
-          *ngIf="!canAccessPremium && p.premium"
-          (click)="premiumRequired()"
-        >
-          {{ "premium" | i18n }}
-        </a>
+        <app-premium-badge *ngIf="p.premium"></app-premium-badge>
       </h3>
       {{ p.description }}
     </div>