Page MenuHomePhabricator

[Cashtab] Button labeling & positioning in Contact List patch
ClosedPublic

Authored by kieran709 on May 27 2022, 18:01.

Details

Summary

Related to T2411. Add Contact and Export Contacts buttons have been modified, icons added and positioning has been changed.

Test Plan

cd web/cashtab && npm start
navigate to the settings tab
expand the Contact List collapse
observe that:
Export Contacts and New Contact buttons have been changed to readDownload CSV & Add Contact
Icons have been added
Buttons are positioned next to each other

Diff Detail

Repository
rABC Bitcoin ABC
Branch
contact-list-button-labeling
Lint
Lint Passed
Unit
No Test Coverage
Build Status
Buildable 19166
Build 38080: Build Diffcashtab-tests
Build 38079: arc lint + arc unit

Event Timeline

Looks good!

In other buttons, we use a standard of icon first, then label (left to right). Please match that here.

This revision now requires changes to proceed.May 27 2022, 18:13

Responding to review feedback

image.png (156×321 px, 6 KB)

Hide the word "Download" at the device width where stacking begins, so that both buttons maintain the same height.

This revision now requires changes to proceed.May 27 2022, 18:33

Trying out hiding the word "add" and "download" to avoid stacking/wrapping.

bytesofman added inline comments.
web/cashtab/src/components/Configure/Configure.js
358 ↗(On Diff #33748)

We don't want this applied to every span on the Configure.js screen. Maybe now there happens to be no other ones, so it's okay. But it should be more specific.

Create a specific styled component span to use this rule and only apply it to these buttons.

This revision now requires changes to proceed.May 31 2022, 17:41

Responded to review feedback + updated snapshots

Applied device width rule directly to styled span instead of through the button component, changed Button to Btn for consistency.

This revision is now accepted and ready to land.May 31 2022, 22:02