From e86353f6cadb15ddd383bce0271a767028c3cab0 Mon Sep 17 00:00:00 2001
From: Ahmet Alp Balkan <ahmetb@google.com>
Date: Tue, 26 Jun 2018 20:55:11 -0700
Subject: [PATCH] frontend: ui tweaks

Signed-off-by: Ahmet Alp Balkan <ahmetb@google.com>
---
 src/frontend/handlers.go                    |  1 -
 src/frontend/templates/cart.html            | 12 +++++++-----
 src/frontend/templates/footer.html          |  2 +-
 src/frontend/templates/header.html          |  2 +-
 src/frontend/templates/product.html         |  5 +++--
 src/frontend/templates/recommendations.html |  4 ++--
 6 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/frontend/handlers.go b/src/frontend/handlers.go
index a9ad7b0..447bcbc 100644
--- a/src/frontend/handlers.go
+++ b/src/frontend/handlers.go
@@ -126,7 +126,6 @@ func (fe *frontendServer) productHandler(w http.ResponseWriter, r *http.Request)
 		http.Error(w, fmt.Sprintf("failed to get product recommendations: %+v", err), http.StatusInternalServerError)
 		return
 	}
-	log.Printf("cart size=%d", len(cart))
 
 	product := struct {
 		Item  *pb.Product
diff --git a/src/frontend/templates/cart.html b/src/frontend/templates/cart.html
index b73fba0..223e90a 100644
--- a/src/frontend/templates/cart.html
+++ b/src/frontend/templates/cart.html
@@ -4,11 +4,13 @@
     <main role="main">
         <div class="py-5">
             <div class="container bg-light py-3 px-lg-5 py-lg-5">
-                <h1>Shopping Cart</h1>
-
                 {{ if eq (len $.items) 0 }}
-                <p>Your shopping cart is empty.</p>
-                <a class="btn btn-primary" href="/" role="button">Browse Products</a>
+                <h3>Your shopping cart is empty!</h3>
+                <p>Items you add to your shopping cart will appear here.</p>
+                <a class="btn btn-primary" href="/" role="button">Browse Products &rarr; </a>
+                {{ else }}
+                <h3>{{ len $.items }} item {{- if gt (len $.items) 0}}s{{end}}
+                    in your Shopping Cart</h3>
                 {{ end }}
 
                 {{ range $.items }}
@@ -39,7 +41,7 @@
                                 <form method="POST" action="/cart/empty">
                                     <button class="btn btn-secondary" type="submit">Empty Cart</button>
                                 </form>     
-                                <a class="btn btn-primary" href="/checkout" role="button">Proceed to Checkout</a>
+                                <a class="btn btn-primary" href="/checkout" role="button">Proceed to Checkout &rarr;</a>
                         </div>
                     </div>
                 </div>
diff --git a/src/frontend/templates/footer.html b/src/frontend/templates/footer.html
index 7b8d3f1..acfdca7 100644
--- a/src/frontend/templates/footer.html
+++ b/src/frontend/templates/footer.html
@@ -1,6 +1,6 @@
 {{ define "footer" }}
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
-    <small class="text-muted mx-auto">This is a demo application.</small>
+    <small class="text-muted mx-auto">This is a demo application. ({{$.session_id}})</small>
 </body>
 </html>
 {{ end }}
diff --git a/src/frontend/templates/header.html b/src/frontend/templates/header.html
index 76bb700..81502f4 100644
--- a/src/frontend/templates/header.html
+++ b/src/frontend/templates/header.html
@@ -23,7 +23,7 @@
                         <option value="{{.}}" {{if eq . $.user_currency}}selected="selected"{{end}}>{{.}}</option>
                     {{end}}
                     </select>
-                    <a class="btn btn-primary ml-2" href="/cart" role="button">View Cart ({{$.cart_size}})</a>
+                    <a class="btn btn-primary btn-light ml-2" href="/cart" role="button">View Cart ({{$.cart_size}})</a>
                 </form>
             </div>
         </div>
diff --git a/src/frontend/templates/product.html b/src/frontend/templates/product.html
index 332c3b4..192816f 100644
--- a/src/frontend/templates/product.html
+++ b/src/frontend/templates/product.html
@@ -30,15 +30,16 @@
                                     <div class="input-group-prepend">
                                         <label class="input-group-text" for="quantity">Quantity</label>
                                     </div>
-                                    <select name="quantity" id="quantity" class="custom-select">
+                                    <select name="quantity" id="quantity" class="custom-select form-control form-control-lg">
                                         <option>1</option>
                                         <option>2</option>
                                         <option>3</option>
                                         <option>4</option>
                                         <option>5</option>
+                                        <option>10</option>
                                     </select>
                                 </div>
-                                <button type="submit" class="btn btn-secondary ml-3">Add to Cart</button>
+                                <button type="submit" class="btn btn-info btn-lg ml-3">Add to Cart</button>
                             </form>
                     </div>
                 </div>
diff --git a/src/frontend/templates/recommendations.html b/src/frontend/templates/recommendations.html
index e3c2728..66c5b6a 100644
--- a/src/frontend/templates/recommendations.html
+++ b/src/frontend/templates/recommendations.html
@@ -1,6 +1,6 @@
 {{ define "recommendations" }}
-<h5 class="text-muted">Similar products</h5>
-<div class="row">
+<h5 class="text-muted">Products you might like</h5>
+<div class="row mt-2">
     {{range . }}
         <div class="col-3">
             <div class="card mb-3 box-shadow">