Rebrand the online store application (#34)

Update assets to include new images. Change DB migration file. Add CSS customizations. Add updated categories and item descriptions. Fix site footer links. Fix tests to reflect new product names. Remove old images.

Signed-off-by: Scott Lowe <slowe@pulumi.com>
Co-authored-by: Christian Nunciato <chris@nunciato.org>

src/catalog/db/migrations/000001_initial.up.sql

@@ -24,24 +24,24 @@ CREATE TABLE IF NOT EXISTS product_tag (
 		REFERENCES tag(tag_id)
 );
 
-INSERT INTO product VALUES ("6d62d909-f957-430e-8689-b5129c0bb75e", "Pocket Watch", "Properly dapper.", 385, 33, "/assets/pocket_watch.jpg");
-INSERT INTO product VALUES ("a0a4f044-b040-410d-8ead-4de0446aec7e", "Wood Watch", "Looks like a tree", 50, 115, "/assets/wood_watch.jpg");
-INSERT INTO product VALUES ("808a2de1-1aaa-4c25-a9b9-6612e8f29a38", "Chronograf Classic", "Spend that IPO money",  5100, 9, "/assets/chrono_classic.jpg");
-INSERT INTO product VALUES ("510a0d7e-8e83-4193-b483-e27e09ddc34d", "Gentleman", "Touch of class for a bargain.",  795, 51, "/assets/gentleman.jpg");
-INSERT INTO product VALUES ("ee3715be-b4ba-11ea-b3de-0242ac130004", "Smart 3.0", "Can tell you what you want for breakfast",  650, 9, "/assets/smart_1.jpg");
-INSERT INTO product VALUES ("f4ebd070-b4ba-11ea-b3de-0242ac130004", "FitnessX", "Touch of class for a bargain.",  180, 76, "/assets/smart_2.jpg");
+INSERT INTO product VALUES ("6d62d909-f957-430e-8689-b5129c0bb75e", "Arcane Staff", "A ray of the morning sun made manifest. Pale yet golden, writhing with the emancipated palette of a spring long forgotten.", 385, 33, "/assets/staff.png");
+INSERT INTO product VALUES ("a0a4f044-b040-410d-8ead-4de0446aec7e", "Globe", "An orrery of infinitesimal precision of all the knowns, half knowns and unknowns of terrestrial realities and waking dreams.", 50, 115, "/assets/globe.png");
+INSERT INTO product VALUES ("808a2de1-1aaa-4c25-a9b9-6612e8f29a38", "Anti-Gravity Saucer", "Forgoing terrestrial land for the hollows of the gods. A chariot to exist in the waldeinsamkeit of the reaches and chasms.",  5100, 9, "/assets/anti-grav-saucer.png");
+INSERT INTO product VALUES ("510a0d7e-8e83-4193-b483-e27e09ddc34d", "Portal Gun", "For travels beyond storied time, fanned by the lust of charting the uncharted and naming the nameless.",  795, 51, "/assets/portal-gun.png");
+INSERT INTO product VALUES ("ee3715be-b4ba-11ea-b3de-0242ac130004", "Power Glove", "August machine spirits brought low, forever entombed as a gauntlet of familiar sentience.",  650, 9, "/assets/glove.png");
+INSERT INTO product VALUES ("f4ebd070-b4ba-11ea-b3de-0242ac130004", "Flux Capacitor", "Power overwhelming.  An unfathomable well of arcane energies.",  1800, 76, "/assets/flux-capacitor.png");
 
-INSERT INTO tag (name, display_name) VALUES ("smart", "Smart");
-INSERT INTO tag (name, display_name) VALUES ("dress", "Dress");
-INSERT INTO tag (name, display_name) VALUES ("luxury", "Luxury");
-INSERT INTO tag (name, display_name) VALUES ("casual", "Casual");
+INSERT INTO tag (name, display_name) VALUES ("vehicle", "Vehicle");
+INSERT INTO tag (name, display_name) VALUES ("energy", "Energy");
+INSERT INTO tag (name, display_name) VALUES ("apparatus", "Apparatus");
+INSERT INTO tag (name, display_name) VALUES ("exotic", "Exotic");
 
 INSERT INTO product_tag VALUES ("6d62d909-f957-430e-8689-b5129c0bb75e", "2");
 INSERT INTO product_tag VALUES ("a0a4f044-b040-410d-8ead-4de0446aec7e", "4");
-INSERT INTO product_tag VALUES ("808a2de1-1aaa-4c25-a9b9-6612e8f29a38", "2");
+INSERT INTO product_tag VALUES ("808a2de1-1aaa-4c25-a9b9-6612e8f29a38", "1");
 INSERT INTO product_tag VALUES ("808a2de1-1aaa-4c25-a9b9-6612e8f29a38", "3");
-INSERT INTO product_tag VALUES ("510a0d7e-8e83-4193-b483-e27e09ddc34d", "2");
-INSERT INTO product_tag VALUES ("ee3715be-b4ba-11ea-b3de-0242ac130004", "1");
+INSERT INTO product_tag VALUES ("510a0d7e-8e83-4193-b483-e27e09ddc34d", "3");
 INSERT INTO product_tag VALUES ("ee3715be-b4ba-11ea-b3de-0242ac130004", "2");
-INSERT INTO product_tag VALUES ("f4ebd070-b4ba-11ea-b3de-0242ac130004", "1");
-INSERT INTO product_tag VALUES ("f4ebd070-b4ba-11ea-b3de-0242ac130004", "2");
+INSERT INTO product_tag VALUES ("ee3715be-b4ba-11ea-b3de-0242ac130004", "3");
+INSERT INTO product_tag VALUES ("f4ebd070-b4ba-11ea-b3de-0242ac130004", "2");
+INSERT INTO product_tag VALUES ("f4ebd070-b4ba-11ea-b3de-0242ac130004", "3");

src/e2e/cart.spec.js

@@ -63,7 +63,7 @@ describe('when on cart', function() {
 
       let item = new CartItem(cart.getItems().get(0));
 
-      expect(item.getName()).toEqual('Gentleman');
+      expect(item.getName()).toEqual('Portal Gun');
       expect(item.getPrice()).toEqual('$ 795');
     });
   });

src/e2e/product.spec.js

@@ -38,12 +38,12 @@ describe('when on product', function() {
 
   it('should have breadcrumb', function() {
     expect(product.getBreadcrumb().getText())
-      .toEqual('Gentleman');
+      .toEqual('Portal Gun');
   });
 
   it('should have name', function() {
     expect(product.getName().getText())
-      .toEqual('Gentleman');
+      .toEqual('Portal Gun');
   });
 
   it('should have price', function() {

src/ui/src/main/resources/static/assets/css/styles.css

@@ -16,6 +16,23 @@
  * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+:root {
+  --bs-primary-rgb: 114,142,126;
+  --bs-link-color: #FFAF36;
+  --bs-btn-bg: #FFAF36;
+  --bs-btn-border-color: #FFAF36;
+  --bs-btn-hover-bg: #FFAF36;
+  --bs-btn-hover-border-color: #FFAF36;
+  --bs-btn-active-bg: #FFAF36;
+  --bs-btn-active-border-color: #FFAF36;
+  --bs-btn-disabled-bg: #FFAF36;
+  --bs-btn-disabled-border-color: #FFAF36;
+}
+
+.btn-success {
+  --bs-btn-bg: rgba(var(--bs-primary-rgb), 0.8);
+}
+
 a {
   text-decoration: none;
 }
@@ -69,6 +86,7 @@ footer a {
   width: 75px;
   height: 75px;
   font-size: 30px;
+  background-color: rgba(var(--bs-primary-rgb), 0.1);
 }
 
 .couplet {
@@ -144,7 +162,7 @@ footer a {
   width: 25px;
   height: 25px;
   border-radius: 25px;
-  
+
 }
 .stepper .text {
   display: block;
@@ -162,7 +180,7 @@ footer a {
   position: absolute;
 }
 .stepper .step.current .icon {
-  background: #03a726;
+  background: rgba(var(--bs-primary-rgb), 0.6);
   color: #fff;
 }
 .stepper .step.current .text {
@@ -218,4 +236,4 @@ footer a {
 .item-selector input:checked~.item-candidate {
   background-color: rgba(231, 239, 255, 0.5);
   border-color: #0e6cf8;
-}
+}

src/ui/src/main/resources/templates/fragments/layout.html

@@ -7,7 +7,7 @@
         <meta name="author" content="" />
         <title>Zephyr Archaeotech Emporium</title>
 
-        <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon"> 
+        <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
 
         <link rel="stylesheet" th:href="@{/webjars/bootstrap-icons/font/bootstrap-icons.css}">
         <link rel="stylesheet" th:href="@{/webjars/bootstrap/dist/css/bootstrap.min.css}">
@@ -48,24 +48,24 @@ <h6 class="text-uppercase fw-bold mb-4">
                     Our store
                   </h6>
                   <p>
-                    Watches?
+                    Only the finest in rare arcane artifacts and replicas.
                   </p>
                 </div>
                 <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
                   <h6 class="text-uppercase fw-bold mb-4">
                     Categories
                   </h6>
                   <p>
-                    <a href="#!">Smart</a>
+                    <a href="/catalog?tag=vehicle">Vehicle</a>
                   </p>
                   <p>
-                    <a href="#!">Dress</a>
+                    <a href="/catalog?tag=energy">Energy</a>
                   </p>
                   <p>
-                    <a href="#!">Luxury</a>
+                    <a href="/catalog?tag=apparatus">Apparatus</a>
                   </p>
                   <p>
-                    <a href="#!">Casual</a>
+                    <a href="/catalog?tag=exotic">Exotic</a>
                   </p>
                 </div>
                 <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
@@ -107,4 +107,4 @@ <h6 class="text-uppercase fw-bold mb-4">Contact</h6>
 
         <script src="js/scripts.js"></script>
     </body>
-</html>
+</html>

src/ui/src/main/resources/templates/home.html

@@ -32,7 +32,7 @@ <h3>Why choose us</h3>
             <div class="col-lg-4 col-md-6">
                 <figure class="couplet align-items-center mb-4">
                     <div class="picture">
-                        <span class="rounded-circle shadow-sm text-primary home-icon" style="background-color: #dbe9ff !important">
+                        <span class="rounded-circle shadow-sm text-primary home-icon">
                             <i class="bi bi-heart-fill"></i>
                         </span>
                     </div>
@@ -45,7 +45,7 @@ <h6 class="title">We love our customers!</h6>
             <div class="col-lg-4 col-md-6">
                 <figure class="couplet align-items-center  mb-4">
                     <div class="picture">
-                        <span class="rounded-circle shadow-sm text-primary home-icon" style="background-color: #dbe9ff !important">
+                        <span class="rounded-circle shadow-sm text-primary home-icon">
                             <i class="bi bi-currency-dollar"></i>
                         </span>
                     </div>
@@ -58,7 +58,7 @@ <h6 class="title">Lowest prices</h6>
             <div class="col-lg-4 col-md-6">
                 <figure class="couplet align-items-center  mb-4">
                     <div class="picture">
-                        <span class="rounded-circle shadow-sm text-primary home-icon" style="background-color: #dbe9ff !important">
+                        <span class="rounded-circle shadow-sm text-primary home-icon">
                             <i class="bi bi-box2-fill"></i>
                         </span>
                     </div>
@@ -72,4 +72,4 @@ <h6 class="title">Reliable shipping</h6>
     </div>
 </section>
 </body>
-</html>
+</html>