diff --git a/frontend/src/components/modals/ConfirmBuyModal.jsx b/frontend/src/components/modals/ConfirmBuyModal.jsx
index 57d093a..86723af 100644
--- a/frontend/src/components/modals/ConfirmBuyModal.jsx
+++ b/frontend/src/components/modals/ConfirmBuyModal.jsx
@@ -93,7 +93,9 @@ export default function ConfirmBuyModal({
{imageUrl ? (
) : (
-
[ ]
+
+ {"\uD83D\uDCE6"}
+
)}
diff --git a/frontend/src/styles/ConfirmBuyModal.css b/frontend/src/styles/ConfirmBuyModal.css
index 6a64977..77bd67c 100644
--- a/frontend/src/styles/ConfirmBuyModal.css
+++ b/frontend/src/styles/ConfirmBuyModal.css
@@ -100,8 +100,21 @@
}
.confirm-buy-image-placeholder {
- font-size: 4em;
+ width: min(58%, 150px);
+ aspect-ratio: 1;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ border: var(--border-width-medium) solid var(--color-border-light);
+ border-radius: var(--border-radius-lg);
+ background: var(--color-gray-100);
color: var(--color-border-medium);
+ font-size: 4.75em;
+ line-height: 1;
+}
+
+.confirm-buy-image-placeholder span {
+ transform: translateY(0.02em);
}
.confirm-buy-quantity-section {
diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts
index dbe1929..b1f9914 100644
--- a/frontend/tests/location-map-manager.spec.ts
+++ b/frontend/tests/location-map-manager.spec.ts
@@ -2325,6 +2325,7 @@ test("viewer can buy selected zone items from the map", async ({ page }) => {
await page.getByRole("button", { name: "Mark french bread bought" }).click();
await expect(page.locator(".confirm-buy-modal")).toBeVisible();
await expect(page.locator(".confirm-buy-item-name")).toHaveText("french bread");
+ await expect(page.getByRole("img", { name: "No item photo" })).toHaveText("\uD83D\uDCE6");
await page.getByRole("button", { name: "Mark as Bought" }).click();
await expect.poll(() => boughtPayloads.length).toBe(1);