From ce25ca088ca92c5f6ce088c27f48ff2073e69239 Mon Sep 17 00:00:00 2001 From: neodk2004 Date: Sat, 6 Jun 2026 11:59:43 +0200 Subject: [PATCH] =?UTF-8?q?docs(02):=20fix=20UI-SPEC=20blocking=20issues?= =?UTF-8?q?=20=E2=80=94=20copy,=20spacing,=20aria?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Report cancel: "Cancel" -> "Don't report" - Block cancel: "Cancel" -> "Don't block" - Story ring gap: 3px (non-multiple of 4) -> ring-1 ring-offset-1 (4px, standard Tailwind scale) - Carousel dot gap: 6px (non-multiple of 4) -> gap-2 (8px) - Removed both non-conformant values from spacing exceptions table - Added aria-label="Close story" to story viewer close button spec Co-Authored-By: Claude Sonnet 4.6 --- .../phases/02-content-core/02-UI-SPEC.md | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/.planning/phases/02-content-core/02-UI-SPEC.md b/.planning/phases/02-content-core/02-UI-SPEC.md index a94c9bf..8d2331c 100644 --- a/.planning/phases/02-content-core/02-UI-SPEC.md +++ b/.planning/phases/02-content-core/02-UI-SPEC.md @@ -67,8 +67,6 @@ Unchanged from Phase 1. All values are multiples of 4px. | Exception | Value | Reason | |-----------|-------|--------| | Minimum touch target (follow, unfollow, block, report buttons) | 44px height | WCAG 2.5.5 minimum touch target | -| Story ring gap between ring and avatar edge | 3px | Visual design — thin white offset for ring visibility | -| Carousel dot indicator spacing | 6px gaps | Not a multiple of 4 — approved exception for dot alignment only | --- @@ -109,7 +107,7 @@ Unchanged from Phase 1. Light mode only. | Border | `#E4E4E7` | `border` | Post card border, carousel slide border | | Destructive | `#EF4444` | `text-destructive` / `red-500` | Block confirmation, report submission, delete post action | | Ring / Focus | `#F97316` | `ring-orange-500` | Focus ring on all interactive elements | -| Story ring (active) | `#F97316` | `ring-orange-500` | 3px ring with 2px white offset on avatar with active stories | +| Story ring (active) | `#F97316` | `ring-orange-500` | 4px ring with 4px white offset on avatar with active stories | | Milestone surface | `#FFF7ED` | `bg-orange-50` | Milestone post card background — warm tint to distinguish from photo posts | ### Accent Reservation — `#F97316` (orange-500) — Phase 2 additions @@ -125,7 +123,7 @@ Inherited from Phase 1 (locked): Phase 2 additions to the reservation list: 7. Follow button — primary CTA style (`bg-orange-500`) — until followed; switches to outline on follow 8. Milestone type label text (`text-orange-500 font-semibold`) — the milestone type label only ("Birthday"), not the surrounding card -9. Story progress bar at top of story viewer (thin 3px bar fill while story is visible) +9. Story progress bar at top of story viewer (thin 4px bar fill while story is visible) Accent is NOT used for: carousel dots (use `bg-muted` inactive / `bg-foreground` active), post metadata, like counts, follower counts, or any decorative surface. @@ -158,7 +156,7 @@ Not a route — a reusable component rendered in the feed and on the pet profile | State | Visual Treatment | |-------|-----------------| | Single image | Image fills card width at natural aspect ratio (capped at 4:3 portrait, 16:9 landscape) | -| Carousel (2–10) | First image shown; left/right chevron buttons (Lucide `ChevronLeft` / `ChevronRight`); dot indicators below; index caption "1 / 5" at top-right in Caption style | +| Carousel (2–10) | First image shown; left/right chevron buttons (Lucide `ChevronLeft` / `ChevronRight`); dot indicators below (gap-2 / 8px); index caption "1 / 5" at top-right in Caption style | | Caption collapsed | 3 lines max, "more" expand link in muted foreground | | Caption expanded | Full caption, "less" collapse link | | Loading | `Skeleton` — 80px header row (avatar + name) + image aspect placeholder + 2 skeleton text lines | @@ -167,9 +165,9 @@ Not a route — a reusable component rendered in the feed and on the pet profile | Screen | Route | Key Components | Focal Point | |--------|-------|----------------|-------------| -| Story ring display | Inline on avatar (feed, pet profile) | Modified `Avatar` with orange ring | 3px `ring-orange-500` with 2px white offset; ring present only when `hasActiveStory === true` | +| Story ring display | Inline on avatar (feed, pet profile) | Modified `Avatar` with orange ring | `ring-1 ring-orange-500 ring-offset-1` (4px ring, 4px white offset via `ring-offset-1`); ring present only when `hasActiveStory === true` | | Story tray (home feed top) | Top of `/` feed | Horizontally scrollable row of `Avatar` with pet name below | First item is "Add story" (`+` icon in orange circle); remaining are followed pets with active stories | -| Story viewer | `/stories/[storyId]` or modal overlay | `Sheet` (full-screen on mobile), image fill, pet name overlay, progress bar, viewer list icon | Full-screen image; progress bar top (orange, 3px); pet name + avatar overlay bottom-left; close `X` top-right | +| Story viewer | `/stories/[storyId]` or modal overlay | `Sheet` (full-screen on mobile), image fill, pet name overlay, progress bar, viewer list icon | Full-screen image; progress bar top (orange, 4px / `h-1`); pet name + avatar overlay bottom-left; close `X` top-right | | Story upload | `/stories/new` | Single image upload zone (same as `AvatarUpload` pattern), CTA "Post Story" | Upload zone full-width; orange "Post Story" CTA | | Story viewers list | Sheet panel from story viewer | Scrollable list of `Avatar` + pet name items | "Seen by {N}" heading; list of viewer pet avatars + names | @@ -211,7 +209,7 @@ Not a route — a reusable component rendered in the feed and on the pet profile | Screen | Route | Key Components | Focal Point | |--------|-------|----------------|-------------| -| Block pet confirmation | `AlertDialog` (modal, no separate route) | Heading, body, "Block" (destructive), "Cancel" | `AlertDialog` triggered from pet profile options menu | +| Block pet confirmation | `AlertDialog` (modal, no separate route) | Heading, body, "Block" (destructive), "Don't block" | `AlertDialog` triggered from pet profile options menu | | Report post / pet | `Sheet` (slide-up panel) | Radio group of report reasons, optional text, "Submit Report" CTA | Reason selector is the primary interaction; "Submit Report" is destructive-styled | | Block success feedback | `Toast` | — | "You've blocked {pet name}" | | Report success feedback | `Toast` | — | "Report submitted. We'll review it shortly." | @@ -240,7 +238,7 @@ Header row (16px padding horizontal, 12px vertical): Image area: - Width: 100% of card - Aspect ratio: image natural, capped at max-height 560px; object-fit: cover - - Carousel: Embla-backed shadcn Carousel; dot indicators below image + - Carousel: Embla-backed shadcn Carousel; dot indicators below image; dot gap: gap-2 (8px) Footer (16px padding): - Caption: text-sm (14px/400), 3-line clamp with expand link @@ -253,7 +251,8 @@ Applied to the `Avatar` component by wrapping with an orange ring: ```css /* Applied conditionally when hasActiveStory === true */ -ring-[3px] ring-orange-500 ring-offset-[2px] ring-offset-background +ring-1 ring-orange-500 ring-offset-1 ring-offset-background +/* ring-1 = 1px solid ring, ring-offset-1 = 4px white offset — both standard Tailwind scale values */ ``` Unseen stories: `ring-orange-500` @@ -296,11 +295,11 @@ Follow button: right-aligned, 44px min-height, primary or outline state per foll ``` Backdrop: fixed inset-0 bg-black/80 Image: object-fit contain, centered, max-height 100dvh -Progress bar: absolute top-0 left-0 right-0 h-[3px] bg-muted +Progress bar: absolute top-0 left-0 right-0 h-1 (4px) bg-muted Fill: bg-orange-500 transitioning from 0% to 100% over 5s (CSS transition) Pet info overlay: absolute bottom-md (16px) left-md (16px) Avatar sm (32px) + pet name text-sm font-semibold text-white -Close button: absolute top-md (16px) right-md (16px), X icon, text-white, 44px touch target +Close button: absolute top-md (16px) right-md (16px), X icon, text-white, 44px touch target, aria-label="Close story" Viewer list button: absolute top-md (16px) left-md (16px), eye icon + count, text-white ``` @@ -313,7 +312,7 @@ RadioGroup: 5 options stacked, gap-sm (8px) between each Options: "Spam", "Harassment", "Inappropriate content", "Misinformation", "Other" Optional notes Textarea: placeholder "Add details (optional)", max 500 chars Primary CTA: "Submit Report" — destructive styling (bg-destructive text-white) -Cancel: text link "Cancel" in muted foreground +Cancel: text link "Don't report" in muted foreground ``` --- @@ -390,6 +389,7 @@ All copy for Phase 2 screens. Locked. | Primary CTA | **"Post Story"** | | Story posted toast | "Story posted" | | Story tray add item label | "Add story" | +| Story viewer close button aria-label | "Close story" | | Story viewer viewers button aria-label | "Seen by {N} pets" | | Story viewers list heading | "Seen by {N}" | | Story viewers empty state | "No views yet" | @@ -449,12 +449,12 @@ All copy for Phase 2 screens. Locked. | Report reason: other | "Something else" | | Report notes placeholder | "Add details (optional)" | | Submit report CTA | **"Submit Report"** | -| Report cancel link | "Cancel" | +| Report cancel link | "Don't report" | | Report submitted toast | "Report submitted. We'll review it shortly." | | Block confirmation dialog heading | "Block {pet name}?" | | Block confirmation dialog body | "{pet name}'s posts and profile will be hidden from you. They won't know you blocked them." | | Block confirm button | "Block" | -| Block cancel button | "Cancel" | +| Block cancel button | "Don't block" | | Block success toast | "You've blocked {pet name}" | ### Error States