codelab: use semantic html

Author: twerske

src/app/about/about.component.html

@@ -15,13 +15,13 @@
 -->
 <div class="about">
   <!-- TODO: #6. Use Semantic HTML -->
-  <h3>Who are we?</h3>
-  <h2>Have you ever thought, “wow, I love dumplings”?</h2>
-  <h5 class="right">Who hasn't.</h5>
-  <h6 class="center">We took it one step further and created Dumpling Dumpling,</h6>
-  <h5 class="center">double the dumpling, double the fun.</h5>
+  <h2>Who are we?</h2>
+  <p class="mat-subheading-2">Have you ever thought, “wow, I love dumplings”?</p>
+  <p class="right mat-subheading-1">Who hasn't.</p>
+  <p class="center mat-subheading-1">We took it one step further and created Dumpling Dumpling,</p> 
+  <p class="center mat-subheading-1">double the dumpling, double the fun.</p>
   <div class="spacer"></div>
-  <h5>How are we different?</h5>
-  <h4>Handmade in San Francisco, California, we craft fully customizable dumplings. Glitter? Rainbows? Vegan? We do it all.</h4> 
-  <h3 class="right">This shop is concept only.</h3>
+  <h2>How are we different?</h2>
+  <p class="mat-subheading-2">Handmade in San Francisco, California, we craft fully customizable dumplings. Glitter? Rainbows? Vegan? We do it all.</p>
+  <p class="right mat-subheading-2">This shop is concept only.</p>
 </div>

src/app/shop/shop.component.html

@@ -95,7 +95,10 @@
     </mat-card>
   </div>
   <!-- TODO: #6. Use Semantic HTML (& Angular Material!) -->
-  <div (click)="fauxPurchase()" class="purchase-button">
-    <h3>Purchase</h3>
-  </div>
+  <button mat-flat-button 
+    color="primary" 
+    class="purchase-button"
+    (click)="fauxPurchase()">
+    Purchase
+  </button>
 </div>