Merge pull request #135 from pauldotyu/main

feat: adding ai generated product images

src/product-service/src/data.rs

@@ -8,70 +8,70 @@ pub fn fetch_products(_settings: &Settings) -> Vec<Product> {
             name: "Contoso Catnip's Friend".to_string(),
             price: 9.99,
             description: "Watch your feline friend embark on a fishing adventure with Contoso Catnip's Friend toy. Packed with irresistible catnip and dangling fish lure.".to_string(),
-            image: "/placeholder.png".to_string()
+            image: "/catnip.jpg".to_string()
         },
         Product {
             id: 2,
             name: "Salty Sailor's Squeaky Squid".to_string(),
             price: 6.99,
             description: "Let your dog set sail with the Salty Sailor's Squeaky Squid. This interactive toy provides hours of fun, featuring multiple squeakers and crinkle tentacles.".to_string(),
-            image: "/placeholder.png".to_string()
+            image: "/squid.jpg".to_string()
         },
         Product {
             id: 3,
             name: "Mermaid's Mice Trio".to_string(),
             price: 12.99,
             description: "Entertain your kitty with the Mermaid's Mice Trio. These adorable plush mice are dressed as mermaids and filled with catnip to captivate their curiosity.".to_string(),
-            image: "/placeholder.png".to_string()
+            image: "/mermaid.jpg".to_string()
         },
         Product {
             id: 4,
             name: "Ocean Explorer's Puzzle Ball".to_string(),
             price: 11.99,
             description: "Challenge your pet's problem-solving skills with the Ocean Explorer's Puzzle Ball. This interactive toy features hidden compartments and treats, providing mental stimulation and entertainment.".to_string(),
-            image: "/placeholder.png".to_string()
+            image: "/ocean.jpg".to_string()
         },
         Product {
             id: 5,
             name: "Pirate Parrot Teaser Wand".to_string(),
             price: 8.99,
             description: "Engage your cat in a playful pursuit with the Pirate Parrot Teaser Wand. The colorful feathers and jingling bells mimic the mischievous charm of a pirate's parrot.".to_string(),
-            image: "/placeholder.png".to_string()
+            image: "/pirate.jpg".to_string()
         },
         Product {
             id: 6,
             name: "Seafarer's Tug Rope".to_string(),
             price: 14.99,
             description: "Tug-of-war meets nautical adventure with the Seafarer's Tug Rope. Made from marine-grade rope, it's perfect for interactive play and promoting dental health in dogs.".to_string(),
-            image: "/placeholder.png".to_string()
+            image: "/tug.jpg".to_string()
         },
         Product {
             id: 7,
             name: "Seashell Snuggle Bed".to_string(),
             price: 19.99,
             description: "Give your furry friend a cozy spot to curl up with the Seashell Snuggle Bed. Shaped like a seashell, this plush bed provides comfort and relaxation for cats and small dogs.".to_string(),
-            image: "/placeholder.png".to_string()
+            image: "/bed.jpg".to_string()
         },
         Product {
             id: 8,
             name: "Nautical Knot Ball".to_string(),
             price: 7.99,
             description: "Unleash your dog's inner sailor with the Nautical Knot Ball. Made from sturdy ropes, it's perfect for fetching, tugging, and satisfying their chewing needs.".to_string(),
-            image: "/placeholder.png".to_string()
+            image: "/knot.jpg".to_string()
         },
         Product {
             id: 9,
             name: "Contoso Claw's Crabby Cat Toy".to_string(),
             price: 3.99,
             description: "Watch your cat go crazy for Contoso Claw's Crabby Cat Toy. This crinkly and catnip-filled toy will awaken their hunting instincts and provide endless entertainment.".to_string(),
-            image: "/placeholder.png".to_string()
+            image: "/crabby.jpg".to_string()
         },
         Product {
             id: 10,
             name: "Ahoy Doggy Life Jacket".to_string(),
             price: 5.99,
             description: "Ensure your furry friend stays safe during water adventures with the Ahoy Doggy Life Jacket. Designed for dogs, this flotation device offers buoyancy and visibility in style.".to_string(),
-            image: "/placeholder.png".to_string()
+            image: "/lifejacket.jpg".to_string()
         }
     ]
 }

src/store-admin/src/App.vue

@@ -122,19 +122,8 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
-}
-</style>
-
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+  margin-top: 120px;
+  padding: 1rem;
 }
 
 footer {
@@ -187,18 +176,17 @@ td {
   text-align: left;
 }
 
-.button {
-  padding: 10px 10px;
-  border-radius: 5px;
-  border: none;
-  background-color: #007acc;
+button {
+  padding: 10px;
+  background-color: #005f8b;
   color: #fff;
   border: none;
   border-radius: 5px;
   cursor: pointer;
+  height: 42px;
 }
 
-.button:hover {
+button:hover {
   background-color: #005f8b;
 }
 
@@ -207,8 +195,12 @@ td {
 }
 
 .product-detail {
-  margin: 2rem auto;
   text-align: left;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 1rem;
+  margin: 2rem auto;
 }
 
 .product-form {

src/store-admin/src/components/OrderDetail.vue

@@ -116,12 +116,7 @@ a {
   text-decoration: underline;
 }
 
-.order-header {
-  margin: 0.5rem;
-}
-
 .order-detail {
-  margin: 2rem auto;
   text-align: left;
 }
 </style>

src/store-admin/src/components/OrderList.vue

@@ -57,7 +57,6 @@ a {
 }
 
 .order-list {
-  margin: 2rem auto;
   text-align: left;
 }
 </style>

src/store-admin/src/components/ProductDetail.vue

@@ -41,14 +41,6 @@ a {
   text-decoration: underline;
 }
 
-.product-detail {
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  gap: 1rem;
-  margin: 1rem;
-}
-
 .product-image {
   flex: 1;
   margin-right: 20px;
@@ -73,4 +65,10 @@ a {
   font-size: 16px;
   margin-bottom: 20px;
 }
+
+@media (max-width: 768px) {
+  .product-detail {
+    flex-direction: column;
+  }
+}
 </style>

src/store-admin/src/components/ProductList.vue

@@ -41,7 +41,6 @@ a {
 }
 
 .product-list {
-  margin: 2rem auto;
   text-align: left;
 }
 </style>

src/store-admin/src/components/TopNav.vue

@@ -1,15 +1,18 @@
 <template>
   <nav>
     <div class="logo">
-      <a href="/">Contoso Pet Supplies - Admin Portal</a>
+      <a href="/">
+        <img src="/contoso-pet-store-logo.png" alt="Contoso Pet Store Logo">
+      </a>
+      Admin Portal
     </div>
-    <button class="hamburger" @click="toggleNav">
-      <span class="hamburger-icon"></span>
-    </button>
     <ul class="nav-links" :class="{ 'nav-links--open': isNavOpen }">
       <li><router-link to="/orders" @click="closeNav">Orders</router-link></li>
       <li><router-link to="/products" @click="closeNav">Products</router-link></li>
     </ul>
+    <button class="hamburger" @click="toggleNav">
+      <span class="hamburger-icon"></span>
+    </button>
   </nav>
 </template>
 
@@ -39,11 +42,33 @@ nav {
   align-items: center;
   background-color: #333;
   color: #fff;
-  padding: 1rem;
+  padding-top: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-bottom: 0.25rem;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+nav img {
+  padding-right: 15px;
+  width: 100px;
+  height: auto;
+  align-self: center;
+}
+
+.nav-links {
+  display: flex;
+  list-style: none;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
 }
 
 .hamburger {
@@ -53,6 +78,7 @@ nav {
   cursor: pointer;
   padding: 0;
   margin: 0;
+  margin-top: -40px;
 }
 
 .hamburger-icon {

src/store-front/src/App.vue

@@ -114,7 +114,7 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+  margin-top: 120px;
 }
 
 footer {
@@ -150,10 +150,19 @@ a {
   text-decoration: none;
 }
 
+button {
+  padding: 10px;
+  background-color: #005f8b;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 42px;
+}
+
 .product-list {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  
 }
 
 .product-card {
@@ -186,53 +195,6 @@ a {
   margin-bottom: 1rem;
 }
 
-.product-price {
-  font-weight: bold;
-  font-size: 1.2rem;
-}
-
-.quantity-input {
-  width: 50px;
-  height: 30px;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  padding: 5px;
-  margin-right: 10px;
-}
-
-.product-detail {
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  gap: 1rem;
-  margin: 1rem;
-}
-
-.product-image {
-  flex: 1;
-  margin-right: 20px;
-}
-
-.product-image img {
-  width: 100%;
-  height: auto;
-}
-
-.product-info {
-  flex: 1;
-  text-align: left;
-}
-
-.product-info h2 {
-  font-size: 24px;
-  margin-bottom: 10px;
-}
-
-.product-info p {
-  font-size: 16px;
-  margin-bottom: 20px;
-}
-
 .product-controls {
   display: flex;
   align-items: center;
@@ -243,29 +205,28 @@ a {
   margin-right: 20px;
 }
 
-.product-controls button {
-  padding: 10px;
+.product-controls button:hover {
   background-color: #005f8b;
-  color: #fff;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
 }
 
-.product-controls button:hover {
-  background-color: #005f8b;
+.product-price {
+  font-weight: bold;
+  font-size: 1.2rem;
 }
 
-/* make image the width of the container */
-.product-detail img {
-  width: 100%;
+.quantity-input {
+  width: 50px;
+  height: 30px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding: 5px;
+  margin-right: 10px;
 }
 
 .shopping-cart {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: 50px;
 }
 
 .shopping-cart h2 {
@@ -276,7 +237,6 @@ a {
 .shopping-cart-table {
   width: 100%;
   border-collapse: collapse;
-  margin-top: 20px;
 }
 
 .shopping-cart-table th,