docs(02): fix UI-SPEC blocking issues — copy, spacing, aria
- 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 <noreply@anthropic.com>
This commit is contained in:
adminandClaude Sonnet 4.6 committed
1 parent
0f7b00283f
commit
ce25ca088c
1 file changed
+15
-15
@@ -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
|
||||
|
||||
Reference in new issue
Block a user