From f9ebb73eb95b9dabfcfadcbb66ff7ed48bb074d5 Mon Sep 17 00:00:00 2001
From: twerske <pokepsi@gmail.com>
Date: Mon, 19 Apr 2021 12:10:43 -0700
Subject: [PATCH] codelab: use semantic html

---
 src/app/about/about.component.html | 16 ++++++++--------
 src/app/shop/shop.component.html   |  9 ++++++---
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/app/about/about.component.html b/src/app/about/about.component.html
index 6831523..53ecc26 100644
--- a/src/app/about/about.component.html
+++ b/src/app/about/about.component.html
@@ -15,13 +15,13 @@ limitations under the License.
 -->
 <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>
diff --git a/src/app/shop/shop.component.html b/src/app/shop/shop.component.html
index f3a4a7c..61ddad4 100644
--- a/src/app/shop/shop.component.html
+++ b/src/app/shop/shop.component.html
@@ -95,7 +95,10 @@ limitations under the License.
     </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>
\ No newline at end of file