ClubhouseAmit / ClubhouseAmit/LivingPositively

[BUG] Virtues list & gratitude list screens don't match Figma (and shouldn't be duplicated widgets)

Closed
#339 0 comments 0 reactions 1 assignee Claimed by @dlibis View on GitHub
bug design
Dominant language
Dart
Stars
7
Forks
0
Avg merge
21h 37m
Merged PRs (30d)
16

Description

**Describe the Bug**
Diffed the two full-screen list views — virtues list ("רשימת מעלות", Figma
frame Android Large - 35, node 1673:2050; source `lib/pages/positive.dart`)
and gratitude list ("תודו ליסט", frame Android Large - 36, node 1701:2481;
source `lib/pages/journal.dart`) — against the Figma manifests via
`designs/figma_lookup.py`.

## Structural differences (both screens, same root cause)

| Element | Design | Implementation |
|---|---|---|
| List item text | 16px, weight 400, color `#0F2851` (navy) | 20.sp, weight normal (size right), but color = `colorScheme.primary` (**purple** — wrong token) (`thankYou.dart:141-143`) |
| List item row | White card, radius 16, solid `#FF8780` (coral) border, standard shadow, **one edit icon only** | Gray pill (`colorScheme.surfaceContainerHighest`, no border), **edit + delete icons both** (`thankYou.dart:86-189`) |
| Number badge | Fixed 28×28 solid-purple circle inside a 32×32 white halo circle with its own shadow | `ClipRRect` + padding-based sizing (not a fixed circle — elongates for 2-digit numbers) (`thankYou.dart:92-109`) |
| Title | 28px, weight 500 | 30.sp, **bold** — same systemic bug as #334/#336/#337/#338, now a 6th/7th independent file (`positive.dart:220-228`, `journal.dart:341-349`) |
| Subtitle | 16px, weight 400 | 16.sp (size right), **bold** (color correct via `colorScheme.outline`) |
| Suggestion "add" badge | Dashed-outline circle with a `#585CE5`-filled inner circle + green plus icon | Uses `SuggestionAddButton` — likely a theme color, not `#585CE5`, which isn't in `AppColors`/`DESIGN.md` at all (joining `#FF8780`/`#01B99F` from #333 as a third undocumented color) |

Both screens share the row widget (`ThankYou` in `lib/pages/thankYou.dart`),
so the row-level bugs above are identical between them — at least that part
is consistent.

## Architectural recommendation: stop duplicating these two screens

`positive.dart` and `journal.dart` are two independently-coded screens for
what the design treats as one interchangeable template. They already share
`ThankYou` for rows, but the **suggestion chip** is duplicated as two
near-identical files — `lib/util/Traits/positiveTraitItemSug.dart` and
`lib/util/Thanks/thanksItemSug.dart` — and the **title/subtitle/add-button**
markup is copy-pasted independently in each screen file rather than shared.

This has already caused real drift, not just a hypothetical risk:
`journal.dart` has a "scroll to bottom" button
(`Icons.keyboard_double_arrow_down`, `journal.dart:368-377`) that
`positive.dart` has no equivalent of at all — a feature-parity gap between
two screens that are supposed to look and behave identically. Recommend
consolidating both into one shared list-screen widget (parameterized by
title/subtitle/suggestion source/content), so a style or behavior fix in one
can't be missed in the other — this issue's own list of mismatches is a
preview of how easily that drift compounds.

## To Reproduce
1. Open the virtues list and the gratitude list screens
2. Compare each against its Figma frame (35 and 36 respectively)

## Expected Behavior
- Fix the row/title/subtitle/badge styling per the table above, in the
shared `ThankYou` widget so both screens inherit the fix at once.
- Consolidate `positive.dart`/`journal.dart` and their duplicated suggestion
widgets into one shared screen component.

## Screenshots

| Screen | Design | Implementation |
|---|---|---|
| Virtues list (frame 35) | ![design](https://github.com/user-attachments/assets/1ff5d367-814e-45eb-bb04-c6fddc236d35) | ![impl](https://github.com/user-attachments/assets/489a1cce-8035-4d2a-aecb-5edff5624f2e) |
| Gratitude list (frame 36) | ![design](https://github.com/user-attachments/assets/f7a028b7-1b3c-45a8-830b-0511057b9699) | ![impl](https://github.com/user-attachments/assets/1c053bfe-405d-429a-a662-959fd40147f1) |

## Environment
- Platform: iOS Simulator (iPhone 17, iOS 26.5)

## Additional Context
- The extra delete/trash icon on each row (design shows edit only) is
arguably a reasonable, deliberate addition — flagging for confirmation
rather than assuming it should be removed, consistent with similar
findings in #336/#337/#338.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.