ClubhouseAmit / ClubhouseAmit/LivingPositively

[BUG] Add-contacts screen doesn't match Figma layout (card style, borders, shadow)

Closed
#336 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**
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 |
|---|---|
|Image | *(app was already populated with test contacts when captured — see row below)* |
| Image | Image|

**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

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.