nalalangan/grocery-app
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

fix: align buy modal image placeholder

Browse Source
This commit is contained in:
Nico 2026-06-04 12:09:57 -07:00
parent abda001208
commit d5b38b6711
3 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/modals/ConfirmBuyModal.jsx
View File

@ -93,7 +93,9 @@ export default function ConfirmBuyModal({
{imageUrl ? (
<img src={imageUrl} alt={item.item_name} className="confirm-buy-image" />
) : (
<div className="confirm-buy-image-placeholder">[ ]</div>
<div className="confirm-buy-image-placeholder" role="img" aria-label="No item photo">
<span aria-hidden="true">{"\uD83D\uDCE6"}</span>
</div>
)}
</div>

15
frontend/src/styles/ConfirmBuyModal.css
View File

@ -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 {

1
frontend/tests/location-map-manager.spec.ts
View File

@ -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);