update-material-mdc-migration-typography

Author: cryptalith

src/app/account-settings/pages/account-settings/account-settings.component.scss

@@ -4,7 +4,7 @@
   width: 100%;
 }
 
-.mat-headline {
+.mat-headline-5 {
   margin-bottom: $spacing-large;
 }
 main#main {

src/app/account-trusted-parties/pages/account-trusted-parties/account-trusted-parties.component.scss

@@ -4,7 +4,7 @@
   width: 100%;
 }
 
-.mat-headline {
+.mat-headline-5 {
   margin-bottom: $spacing-large;
 }
 main#main {

src/app/authorize/components/form-authorize/form-authorize.component.html

@@ -36,7 +36,7 @@ <h1 class="orc-font-heading-small" i18n="@@authorize.authorize">
       <div class="col l9 user-wrapper">
         <div class="row">
           <div class="m-b-8">
-            <div class="mat-body-2">
+            <div class="mat-subtitle-2">
               <strong id="user-name">{{ userName }}</strong>
             </div>
             <span>{{ orcidUrl }}</span>
@@ -68,13 +68,13 @@ <h1 class="orc-font-heading-small" i18n="@@authorize.authorize">
     ></app-info-drop-down>
 
     <p
-      class="mat-body-1 m-t-16 m-b-16"
+      class="mat-body-2 m-t-16 m-b-16"
       i18n="@@authorize.organizationAskedFollowingAccess"
     >
       This organization has asked for the following access to your ORCID record:
     </p>
 
-    <ul class="mat-body-1 m-t-base">
+    <ul class="mat-body-2 m-t-base">
       <ng-container
         *ngFor="let scope of this.oauthRequest.scopes; let last = last"
       >

src/app/authorize/components/oauth-error/oauth-error.component.html

@@ -130,7 +130,7 @@
     </div>
   </mat-card-content>
 
-  <p class="mat-body-1 mat-caption">
+  <p class="mat-body-2 mat-caption">
     {{ error }} /
     {{ errorDescription }}
   </p>

src/app/cdk/banner/banner.component.html

@@ -1,4 +1,4 @@
-<section class="alert alert-banner mat-body-1" [attr.aria-label]="ariaLabel">
+<section class="alert alert-banner mat-body-2" [attr.aria-label]="ariaLabel">
   <p><ng-content></ng-content></p>
   <button
     *ngIf="canDismiss"

src/app/cdk/banner/banner.component.scss

@@ -16,7 +16,7 @@ button {
   flex-shrink: 0;
 }
 
-.mat-body-1 p {
+.mat-body-2 p {
   margin: 0;
 }
 .columns-12 :host {

src/app/cdk/is-this-you/is-this-you.component.html

@@ -1,7 +1,7 @@
 <div class="container" *ngIf="data && data.duplicateRecords">
-  <h1 class="mat-display-1 modal-title">{{ data.titleLabel || titleLabel }}</h1>
+  <h1 class="mat-headline-4 modal-title">{{ data.titleLabel || titleLabel }}</h1>
   <div class="non-fixed">
-    <p class="mat-body-1">
+    <p class="mat-body-2">
       {{ data.bodyLabel || bodyLabel }}
       <a
         rel="noopener noreferrer"
@@ -12,7 +12,7 @@ <h1 class="mat-display-1 modal-title">{{ data.titleLabel || titleLabel }}</h1>
       </a>
     </p>
 
-    <table class="mat-subheading-2">
+    <table class="mat-subtitle-1">
       <tr>
         <th>{{ data.firstNameLabel || firstNameLabel }}</th>
         <th>{{ data.lastNameLabel || lastNameLabel }}</th>

src/app/cdk/panel/panel-data-line/panel-data-line.component.html

@@ -19,18 +19,18 @@
   <span>{{ title }}</span>
   <ng-container *ngIf="detail">&#x200E;({{ detail }})&#x200E;</ng-container>
   <p
-    class="mat-body-1"
+    class="mat-body-2"
     *ngIf="!url && copyOnClick"
     appCopyOnClick
     matTooltip="Click to Copy"
     [matTooltipPosition]="'above'"
   >
     {{ content }}
   </p>
-  <p class="mat-body-1" *ngIf="!url && !copyOnClick">{{ content }}</p>
+  <p class="mat-body-2" *ngIf="!url && !copyOnClick">{{ content }}</p>
 
   <a
-    class="underline mat-body-1"
+    class="underline mat-body-2"
     href="{{ url }}"
     target="_blank"
     rel="noopener noreferrer"

src/app/cdk/side-bar/modals/modal-country/modal-country.component.html

@@ -168,7 +168,7 @@
     <div class="row">
       <a class="col add-more no-gutters" (click)="addCountry()" id="add-link">
         <mat-icon class="large-material-icon">add_circle_outline</mat-icon>
-        <span class="mat-body-1">
+        <span class="mat-body-2">
           <ng-container
             *ngIf="countries?.length === 0"
             i18n="@@side-bar.addCountryOrLocation"

src/app/cdk/side-bar/modals/modal-keyword/modal-keyword.component.html

@@ -159,7 +159,7 @@ <h2 class="col no-gutters orc-font-body" i18n="@@topBar.myKeywords">
           (click)="addKeyword()"
         >
           <mat-icon class="large-material-icon">add_circle_outline</mat-icon>
-          <span class="mat-body-1">
+          <span class="mat-body-2">
             <ng-container
               *ngIf="keywords?.length === 0"
               i18n="@@topBar.addKeyword"