Review photo strip: refine the 'cannot be removed' lock glyph on required photos #100

New Issue

2026-09-24T16:16:20Z

Ty commented

2026-09-24 16:16:20 +00:00

Nit — visual polish.

The "lock" shown on the two photos that cannot be deleted (clean calibration + dimension-overlay) looks like a made-up image. It is a crude hand-drawn CSS padlock and reads as low-effort. Refine it into a clean, professional lock indicator.

Where

frontend/src/create/review/Review.svelte

Required photos = p.required (role calibration | overlay), set ~line 225.
Keep-box span: <span class="ph-keep" class:required={p.required}> (~line 677); box is 16x16 (.ph-keep ~line 977).
The lock is pure CSS, ~lines 984-995:
- .pcard.required .ph-keep::after = "shackle" (8x8 half-arc, border-radius 4px 4px 0 0)
- .pcard.required .ph-keep::before = "body" (8x6 filled #002 rounded rect)
- drawn over the cyan #00e5ff keep-box fill.
  This arc+rect combo is the "made up image" — it does not read as a real padlock.

Spec

Signal "required — cannot be removed" clearly and accessibly.
Read as a clean, intentional lock, not a hand-drawn box+arc.
Match app style: muted, squared corners (~2-4px radius), not heavy rounded pills; unobtrusive (current comment: "muted dark green, not jarring neon"), not neon.
Legible at the 16px box size, including any dimmed/opacity state.

Preferred fix

Replace the two pseudo-element shapes with a single inline <svg> padlock — crisp and scalable at 16px. CSS-only rework of the arc/body proportions is the fallback (fragile).

Acceptance

npm run build passes (tsc --noEmit + vite build).
Both required photos show a clean lock; optional/batch photos unchanged.
Lock legible at 16px; no overlap/overflow of the keep-box.
Review screen renders at 1440 / 768 / 375 with no page overflow introduced.
Coordinator redeploy + screenshot-verify before sign-off (worker cannot run docker).

Scope

frontend/src/create/review/Review.svelte only (CSS + the single span markup if switching to inline SVG). Do NOT touch the delete/keep logic (p.required / p.kept handlers) — visual only.

Reported by Ty (nit). UAT host 192.168.1.202, main @ 0c00d25.

Nit — visual polish. The "lock" shown on the two photos that cannot be deleted (clean calibration + dimension-overlay) looks like a made-up image. It is a crude hand-drawn CSS padlock and reads as low-effort. Refine it into a clean, professional lock indicator. ## Where `frontend/src/create/review/Review.svelte` - Required photos = `p.required` (role `calibration` | `overlay`), set ~line 225. - Keep-box span: `<span class="ph-keep" class:required={p.required}>` (~line 677); box is 16x16 (`.ph-keep` ~line 977). - The lock is pure CSS, ~lines 984-995: - `.pcard.required .ph-keep::after` = "shackle" (8x8 half-arc, border-radius 4px 4px 0 0) - `.pcard.required .ph-keep::before` = "body" (8x6 filled `#002` rounded rect) - drawn over the cyan `#00e5ff` keep-box fill. This arc+rect combo is the "made up image" — it does not read as a real padlock. ## Spec - Signal "required — cannot be removed" clearly and accessibly. - Read as a clean, intentional lock, not a hand-drawn box+arc. - Match app style: muted, squared corners (~2-4px radius), not heavy rounded pills; unobtrusive (current comment: "muted dark green, not jarring neon"), not neon. - Legible at the 16px box size, including any dimmed/opacity state. ## Preferred fix Replace the two pseudo-element shapes with a single inline `<svg>` padlock — crisp and scalable at 16px. CSS-only rework of the arc/body proportions is the fallback (fragile). ## Acceptance - [ ] `npm run build` passes (tsc --noEmit + vite build). - [ ] Both required photos show a clean lock; optional/batch photos unchanged. - [ ] Lock legible at 16px; no overlap/overflow of the keep-box. - [ ] Review screen renders at 1440 / 768 / 375 with no page overflow introduced. - [ ] Coordinator redeploy + screenshot-verify before sign-off (worker cannot run docker). ## Scope `frontend/src/create/review/Review.svelte` only (CSS + the single span markup if switching to inline SVG). Do NOT touch the delete/keep logic (`p.required` / `p.kept` handlers) — visual only. Reported by Ty (nit). UAT host 192.168.1.202, main @ 0c00d25.

grokbot_ty added the post-launch label 2026-09-24 18:58:06 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Ty_Tech/SlabUploader#100