compact header kick off, more buttons, styling overall

Author: Fabricius Seifert

src/checkout/components/Button.js

@@ -3,6 +3,9 @@ import { html } from "../utils.js";
 export default ({
   tag = "button",
   href,
+  type,
+  value,
+  onClick,
   disabled,
   rounded,
   className,
@@ -12,6 +15,9 @@ export default ({
   return html` <${href ? "a" : tag}
     ${disabled ? "disabled" : ""}
     ${href ? `href="${href}"` : ""}
+    ${type ? `type="${type}"` : ""}
+    ${value ? `value="${value}"` : ""}
+    ${onClick ? `onclick="${onClick}"` : ""}
     class="c_Button c_Button--${variant} ${className} ${rounded ? "c_Button--rounded" : ""}"
     ontouchstart
   >

src/checkout/components/CompactHeader.css

@@ -0,0 +1,21 @@
+.c_CompactHeader {
+  height: 135px;
+  display: flex;
+  margin: 0 0 2rem;
+  border-bottom: 1px solid #eeebe2;
+  box-shadow: 0 0 20px 10px #eb5b5920;
+  align-items: center;
+}
+
+.c_CompactHeader__inner {
+  display: flex;
+  max-width: 1000px;
+  margin: 0 auto;
+  align-items: center;
+  flex: 1;
+}
+
+.c_CompactHeader__logo {
+  display: block;
+  width: 270px;
+}

src/checkout/components/CompactHeader.js

@@ -1,7 +1,15 @@
 import { html } from "../utils.js";
 
 export default () => {
-  return html`<header>
-    <h1><a href="/">Tractor Store</a></h1>
+  return html`<header class="c_CompactHeader">
+    <div class="c_CompactHeader__inner">
+      <a class="c_CompactHeader__link" href="/">
+        <img
+          class="c_CompactHeader__logo"
+          src="/cdn/img/logo.svg"
+          alt="Micro Frontends - Tractor Store"
+        />
+      </a>
+    </div>
   </header>`;
 };

src/checkout/components/LineItem.js

@@ -1,4 +1,5 @@
 import { html } from "../utils.js";
+import Button from "./Button.js";
 
 export default ({ sku, id, name, quantity, price, image }) => {
   const url = `/product/${id}?sku=${sku}`;
@@ -13,7 +14,12 @@ export default ({ sku, id, name, quantity, price, image }) => {
     <div class="c_LineItem__price">${price * quantity} Ø</div>
     <form action="/checkout/cart/remove" method="post">
       <input type="hidden" name="sku" value="${sku}" />
-      <input type="submit" value="remove" />
+      ${Button({
+        variant: "secondary",
+        type: "submit",
+        value: "remove",
+        children: "Remove",
+      })}
     </form>
   </li>`;
 };

src/checkout/components/MiniCart.css

@@ -39,7 +39,7 @@
   }
 }
 
-.c_MiniCart--highlight .c_MiniCart__inner svg {
+.c_MiniCart--highlight svg {
   animation: bounce 0.2s ease-out;
 }
 

src/checkout/components/MiniCart.js

@@ -32,5 +32,6 @@ export default ({ req }) => {
         <div class="c_MiniCart__quantity">${quantity || ""}</div>
       `,
     })}
+    
   </div>`;
 };

src/checkout/pages/CartPage.css

@@ -13,3 +13,14 @@
   text-align: right;
   font-weight: bold;
 }
+
+.c_CartPage__buttons {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 4rem;
+  gap: 2rem;
+}
+
+.c_CartPage__buttons > * {
+  flex: 0;
+}

src/checkout/pages/CartPage.js

@@ -6,6 +6,7 @@ import { html } from "../utils.js";
 import Header from "../../explore/components/Header.js";
 import Footer from "../../explore/components/Footer.js";
 import Recommendations from "../../explore/components/Recommendations.js";
+import Button from "../components/Button.js";
 
 export default ({ req }) => {
   const lineItems = readFromCookie(req).map(({ sku, quantity }) => {
@@ -31,9 +32,20 @@ export default ({ req }) => {
         Ø
       </p>
 
-      <form action="/checkout/checkout" method="get">
-        <button>checkout</button>
-      </form>
+      <div class="c_CartPage__buttons">
+        ${Button({
+          onClick: "history.back()",
+          children: "Continue Shopping",
+          variant: "secondary",
+        })}
+        ${Button({
+          tag: "a",
+          href: "/checkout/checkout",
+          children: "Checkout",
+          variant: "primary",
+        })}
+      </div>
+
       ${Recommendations({ skus })} ${Footer()}
     </main>
   `;

src/checkout/styles.css

@@ -4,6 +4,7 @@
 @import url("./components/AddToCart.css");
 @import url("./components/LineItem.css");
 @import url("./components/Button.css");
+@import url("./components/CompactHeader.css");
 
 @font-face {
   font-family: "Raleway";

src/decide/pages/ProductPage.css

@@ -29,6 +29,7 @@
   display: flex;
   flex-wrap: wrap;
   list-style: none;
+  margin-top: 3rem;
   padding: 0;
 }
 

src/explore/components/Product.css

@@ -15,14 +15,14 @@
 }
 
 .e_Product_name {
-  margin: 1rem 0;
+  margin: 12px 0 8px;
   color: black;
   text-align: center;
   display: block;
 }
 
 .e_Product_price {
-  margin: 1rem 0;
+  margin: 8px 0;
   color: black;
   text-align: center;
   display: block;