ClubhouseAmit / ClubhouseAmit/LivingPositively
[BUG] Add-contacts screen doesn't match Figma layout (card style, borders, shadow)
- Dominant language
- Dart
- Stars
- 7
- Forks
- 0
- Avg merge
- 21h 37m
- Merged PRs (30d)
- 16
Description
**Describe the Bug**
The "support people / add contacts" step (Figma frames Android Large - 21 /
32, nodes 1660:2342 / 1661:3270) deviates from the design in card shape,
borders, and shadow — not just copy. Diffed via designs/figma_lookup.py
manifests against the actual source (lib/form/phonePageform.dart,
lib/form/phonePageListItem.dart).
- **"Add from contacts" control is the wrong shape.** Design: a large
330x136 transparent card with a *dashed* purple border (#A688F8,
dash [8,8]), radius 16 — the same empty-state dashed-card pattern used
elsewhere in the app. Code (`phonePageform.dart:185-205`): a small solid
gray pill button (`colorScheme.surfaceContainerHighest`, radius 12,
padding 6) with bold primary-colored text. Different size and border
style, not a token tweak.
- **List item rows are missing the design's border and gained an unwanted
shadow.** Design (`Rectangle 3`): white box, radius 16, explicit solid
#FF8780 (coral) border, flat/no shadow. Code (`phonePageListItem.dart:
363-374`): a plain Material `Card` — no coral border at all, but does pick
up Flutter's default `Card` elevation/shadow, which the flat design does
not call for.
- **Title/button typography — same systemic bug as #334, but a separate code
path.** `phonePageform.dart:167-176` hardcodes the title at 20.sp/bold
(design: 24px/weight 500). This screen's title isn't routed through
`formpagetemplate.dart`, so fixing #334 there won't fix this one — it
needs its own fix (or a shared refactor). The continue button here is
20.sp bold (`:235-238`) vs. 22.sp bold on the onboarding screens (#333/
#334) — two different wrong sizes for the same button role.
- **Header bar/shadow** — same root cause already tracked in #333
(`lib/form/form.dart`'s AppBar); not re-filing here.
**To Reproduce**
1. Run the app on an emulator/simulator
2. Go to the "who supports me" / add-contacts step of the safety plan wizard
3. Compare against Figma frame 1660:2342 / 1661:3270
**Expected Behavior**
- "Add from contacts" should render as the large dashed-border card the
design specifies, not a small solid pill.
- Each contact row should have the solid #FF8780 border from the design and
no default Card shadow.
- Title and continue-button text should follow the same size/weight fix as
#334 (24px/weight 500 for the title, 18px/weight 500 for the continue
button) — applied here independently since this screen doesn't share
`formpagetemplate.dart`.
**Screenshots**
| Design | Implementation |
|---|---|
| | *(app was already populated with test contacts when captured — see row below)* |
| |
|
**Environment**
- Platform: iOS Simulator (iPhone 17, iOS 26.5)
**Additional Context**
- **Manual "add phone number" entry (`phonePageListItem.dart:576-596`,
"הוספה ידנית") is intentional and should stay** — the design has no
manual-entry affordance at all, but that's a deliberate product decision
to keep, not something to remove to match the design. If/when the
"add from contacts" card above gets restyled to match the dashed-card
design, this manual-add button should be restyled to match it too for
visual consistency, since there's no Figma reference for it directly.
- **An `Icons.edit` pencil button per contact row (`phonePageListItem.dart:
375-383`) has no design counterpart.** Unlike manual-add, this hasn't been
confirmed as intentional — flagging as an open question rather than
assuming it should be removed.
- **The bottom disclaimer** ("אנשי הקשר נשמרים לשימושכם האישי", an
`ExpansionTile`) has no Figma counterpart at all — reads like a deliberate
privacy/compliance addition, not a bug, but it does add vertical layout
the design didn't account for. Noting for awareness, not flagging as wrong.
Contributor guide
Assessment
This issue has not been assessed yet.