fix currency in UI, remove extra USD

src/frontend/static/icons/Hipster_CurrencyIcon.svg

@@ -2,7 +2,7 @@
   <defs>
     <style>
       .cls-1 {
-        fill: #b4b2bb;
+        fill: #605f64;
       }
     </style>
   </defs>

src/frontend/static/styles/styles.css

@@ -1,12 +1,19 @@
 /* general */
 
+html, body {
+  height: 100%;
+}
 
 body {
   color: #111111;
   font-family: 'Roboto', sans-serif;
+  display: flex;
+  flex-direction: column;
 }
 
-
+hr {
+  border-top: 1px solid #b4b2bb;
+}
 
 .text-muted {
   color: #707070;
@@ -14,20 +21,20 @@ body {
 
 .badge {
   display: inline-block !important;
-  width: 15px;
+  width: 18px;
-  height: 15px;
+  height: 18px;
   color: #111111;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 11px;
+  font-size: 10px;
-  margin-left: 7px;
   border-radius: 50%;
+  padding-left: 3px;
 }
 
 .badge.badge-blue {
   background-color: #4bc7c7;
-  padding-bottom: 2px;
+  padding-top: 5px;
 }
 
 /*header*/
@@ -62,23 +69,20 @@ header .h-controls {
 header .h-control {
   display: flex;
   align-items: center;
-  font-size: 14px;
+  font-size: 12px;
   position: relative;
   margin-left: 40px;
-  color: #b4b2bb;
+  color: #605f64;
-  outline:none !important;
 }
 
 header .h-control:first-child {
   margin-left: 0;
-  outline:none !important;
 }
 
 header .h-control img {
   width: 20px;
   height: 20px;
   margin-right: 8px;
-  outline:none !important;
 }
 
 header .h-control input {
@@ -87,16 +91,15 @@ header .h-control input {
   width: 250px;
   height: 24px;
   flex-shrink: 0;
-  background-color: #b4b2bb;
+  background-color: #f2f2f2;
   display: flex;
   align-items: center;
-  outline:none !important;
 }
 
 header .h-control input:focus {
+  outline: 0;
   border: 0;
   box-shadow: 0;
-  outline:none !important;
 }
 
 header .icon {
@@ -121,43 +124,40 @@ header .icon.search-icon {
 header .h-control select {
   background: transparent;
   border-radius: 0;
-  border: none;
+  border: 1px solid #acacac;
   width: 100px;
   height: 20px;
   flex-shrink: 0;
   padding: 0 7px;
   display: flex;
   align-items: center;
-  outline:none !important;
 }
 
 
 header .h-control::-webkit-input-placeholder {
   /* Chrome/Opera/Safari */
-  font-size: 14px;
+  font-size: 12px;
-  color: #b4b2bb;
+  color: #605f64;
 }
 
 header .h-control::-moz-placeholder {
   /* Firefox 19+ */
-  font-size: 14px;
+  font-size: 12px;
-  color: #b4b2bb;
+  color: #605f64;
 }
 
 header .h-control :-ms-input-placeholder {
   /* IE 10+ */
-  font-size: 14px;
+  font-size: 12px;
-  color: #b4b2bb;
+  color: #605f64;
 }
 
 header .h-control :-moz-placeholder {
   /* Firefox 18- */
-  font-size: 14px;
+  font-size: 12px;
-  color: #b4b2bb;
+  color: #605f64;
 }
 
-
-
 header .navbar.sub-navbar {
   height: 60px;
   background-color: #111111;
@@ -185,8 +185,7 @@ header .navbar.sub-navbar nav a {
 }
 
 header .navbar.sub-navbar .controls {
-  display: inline-block;
+  display: flex;
-  text-align: center;
   height: 60px;
 }
 
@@ -200,30 +199,6 @@ header .navbar.sub-navbar .controls a {
   justify-content: center;
 }
 
-header .navbar.sub-navbar .controls-div {
-  display: block;
-  width: 120px;
-  border-left: 1px solid #b4b2bb;
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  justify-content: center;
-}
-
-
-header .navbar.sub-navbar form .controls-form {
-  background-color: #111111;
-  display: block;
-  width: 120px;
-  border-left: 1px solid #b4b2bb;
-  display: inline-block;
-  flex-flow: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-}
-
-
 header .navbar.sub-navbar .controls a img {
   width: 20px;
   height: 20px;
@@ -234,52 +209,10 @@ header .navbar.sub-navbar .controls a:last-child {
   border-right: 1px solid #b4b2bb;
 }
 
-form .currency {
-  height: auto;
-  background-color: #111111;
-  font-size: 15px;
-  color: #b4b2bb;
-  padding-top: 5px;
-  padding-bottom: 0;
-  padding-right: 30px;
-  align-items: center;
-  display: flex;
-  border: none;
-}
-
-span .currency-icon {
-  padding-bottom: 2px;
-  padding-top: 20px;
-  display: inline-block;
-
-}
-
-span.buffer {
-  padding-top: 3px;
-  display: inline-block;
-
-}
-
-select .currency {
-  padding-left: 10px;
-  padding-top: 2px;
-  align-items: center;
-  background-color: #111111;
-  padding-right: 30px;
-  border: none;
-}
-
-option .currency {
-  padding-left: 10px;
-  align-items: center;
-  background-color: #111111;
-  padding-right: 30px;
-  border: none;
-}
-
 /*footer*/
 
 footer.py-5 {
+  flex-shrink: 0;
   padding: 0 !important;
 }
 
@@ -308,6 +241,9 @@ footer .footer-top .footer-social div {
   width: 50%;
 }
 
+.footer-top .social {
+  border-right: 1px solid #b4b2bb;
+}
 
 .footer-top .social h4 {
   font-size: 24px;
@@ -326,7 +262,6 @@ footer .footer-top .footer-social div {
 
 .footer-top .app {
   justify-content: flex-end;
-  padding-left: 100px;
 }
 
 .footer-top .app h4 {
@@ -401,6 +336,10 @@ footer .footer-bottom p:first-child {
 
 /*Home*/
 
+main {
+  flex: 1 0 auto;
+}
+
 main.home {
   background-color: white;
 }
@@ -594,7 +533,6 @@ main.home {
 
 .aws-platform,
 .onprem-platform,
-.azure-platform,
 .gcp-platform {
   position: fixed;
   top: 0;
@@ -609,6 +547,7 @@ main.home {
 .aws-platform,
 .aws-platform .platform-flag {
   background-color: #ff9900;
+  color: #000000;
 }
 
 .onprem-platform,
@@ -621,11 +560,6 @@ main.home {
   background-color: #4285f4;
 }
 
-.azure-platform,
-.azure-platform .platform-flag {
-  background-color: #f35426;
-}
-
 .platform-flag {
   position: absolute;
   top: 98px;
@@ -670,4 +604,4 @@ main.home {
 select {
   -webkit-appearance: none;
   -webkit-border-radius: 0px;
-}
+}

src/frontend/templates/cart.html

@@ -18,7 +18,7 @@
                         <div class="col">
                             <h3>{{ len $.items }} item
                                 {{- if gt (len $.items) 1}}s{{end}}
-                                in your Shopping Cart</h3>
+                                in your cart</h3>
                         </div>
                         <div class="col text-right">
                             <form method="POST" action="/cart/empty">
@@ -43,7 +43,7 @@
                                 <div class="details">
                                     Quantity: {{.Quantity}}<br/>
                                     <strong>
-                                        USD {{ renderMoney .Price}}
+                                        {{ renderMoney .Price}}
                                     </strong>
                                 </div>
                             </div>
@@ -52,8 +52,8 @@
                     {{ end }} <!-- range $.items-->
                     <div class="row pt-2 my-3">
                         <div class="col text-center order-summary">
-                            <p class="text-muted my-0">Shipping Cost: <strong>USD {{ renderMoney .shipping_cost }}</strong></p>
+                            <p class="text-muted my-0">Shipping Cost: <strong>{{ renderMoney .shipping_cost }}</strong></p>
-                            Total Cost: <strong>USD {{ renderMoney .total_cost }}</strong>
+                            Total Cost: <strong>{{ renderMoney .total_cost }}</strong>
                         </div>
                     </div>
 
@@ -156,6 +156,5 @@
             {{ end }}
         </div>
     </main>
-
     {{ template "footer" . }}
-{{ end }}
+    {{ end }}

src/frontend/templates/error.html

@@ -21,4 +21,4 @@
     </main>
 
     {{ template "footer" . }}
-{{ end }}
+    {{ end }}

src/frontend/templates/footer.html

@@ -3,8 +3,8 @@
 <footer class="py-5">
     <div class="footer-top">
         <div class="container footer-social">
-                <p>© 2020 Google Inc (<a href="https://github.com/GoogleCloudPlatform/microservices-demo">Source Code</a>) — </p>
+                <p class="footer-text">© 2020 Google Inc (<a href="https://github.com/GoogleCloudPlatform/microservices-demo">Source Code</a>) — </p>
-                <p class="footer-disclaimer">  This website is hosted for demo purposes only. It is not an actual shop. This is not a Google product.</p>
+                <p class="footer-text">  This website is hosted for demo purposes only. It is not an actual shop. This is not a Google product.</p>
         </div>
 
     </div>

src/frontend/templates/header.html

@@ -17,46 +17,34 @@
 </head>
 
 <body>
-
     <header>
+        <div class="navbar">
+            <div class="container d-flex justify-content-between">
+                <div class="h-free-shipping">Free shipping with $75 purchase! &nbsp;&nbsp;</div>
+                <div class="h-controls">
+                    <div class="h-control">
+                        <img src="/static/icons/Hipster_CurrencyIcon.svg" alt="icon" class="icon" />
+                        <form method="POST" class="controls-form" action="/setCurrency" id="currency_form" >
+                            <select name="currency_code" onchange="document.getElementById('currency_form').submit();">
+                                    {{range $.currencies}}
+                                <option value="{{.}}" {{if eq . $.user_currency}}selected="selected"{{end}}>{{.}}</option>
+                                {{end}}
+                            </select>
+                        </form>
+                        <img src="/static/icons/Hipster_DownArrow.svg" alt="icon" class="icon arrow" />
+                    </div>
+                </div>
+            </div>
+        </div>
         <div class="navbar sub-navbar">
             <div class="container d-flex justify-content-between">
                 <a href="/" class="navbar-brand d-flex align-items-center">
                     <img src="/static/icons/Hipster_NavLogo.svg" alt="logo" class="logo" />
                 </a>
-                <nav>
-                </nav>
-
-
-
                 <div class="controls">
-
-                    {{ if $.currencies }}
-
-                        <span>              <form method="POST" class="controls-form" action="/setCurrency" id="currency_form" >
-                        <span class="buffer"></span>
-                        <span class="currency-icon"><img src="/static/icons/Hipster_CurrencyIcon.svg" alt="currency-icon" class="icon" /></span>
-
-                        <select class="currency" name="currency_code"
-                        onchange="document.getElementById('currency_form').submit();">
-
-                        {{range $.currencies}}
-                            <option class="currency" value="{{.}}" {{if eq . $.user_currency}}selected="selected"{{end}}>{{.}}</option>
-                        {{end}}
-                        </select>
-
-                    </form>
-                        </span>
-
-
-
-
-                    {{ end }}
-
-
                     <a href="/cart">
-                        <img src="/static/icons/Hipster_CheckOutIcon.svg" alt="cart-icon" class="logo" />
+                        <img src="/static/icons/Hipster_CartIcon.svg" alt="cart-icon" class="logo" />
-                        <span>View Cart
+                        <span>Cart
                             {{ if $.cart_size }}
                             <span class="badge badge-blue">{{$.cart_size}}</span>
                             {{ end }}
@@ -66,6 +54,4 @@
             </div>
         </div>
     </header>
-
-
     {{end}}

src/frontend/templates/order.html

@@ -19,9 +19,9 @@
                         <p>Shipping Tracking ID</p>
                         <p class="mg-bt"><strong>{{.order.ShippingTrackingId}}</strong></p>
                         <p>Shipping Cost</p>
-                        <p class="mg-bt"><strong>USD {{renderMoney .order.ShippingCost}}</strong></p>
+                        <p class="mg-bt"><strong>{{renderMoney .order.ShippingCost}}</strong></p>
                         <p>Total Paid</p>
-                        <p class="mg-bt"><strong>USD {{renderMoney .total_paid}}</strong></p>
+                        <p class="mg-bt"><strong>{{renderMoney .total_paid}}</strong></p>
                     </div>
                 </div>
 
@@ -38,4 +38,4 @@
     </main>
 
     {{ template "footer" . }}
-{{ end }}
+    {{ end }}