Page MenuHomePhabricator

[Cashtab] Improve vertical centering of QRCode on Receive screen
AbandonedPublic

Authored by kieran709 on Nov 30 2022, 22:04.

Details

Reviewers
bytesofman
Group Reviewers
Restricted Project
Summary

Related to T2814. QRCode has been given a margin-top of 15%. If you think it would look better, I would stack this diff with one which moves the new InfoCtn above the QRCode so that all content is visible above the fold.

Test Plan

cd web/cashtab && npm start
navigate to Receive screen
observe that the QRCode component is pushed further towards the center of the screen

suggest whether or not the QRCode should be moved further
suggest whether a stacked diff that moves the info container above the QRCode would be beneficial

Diff Detail

Repository
rABC Bitcoin ABC
Branch
improve-vertical-centering-receivejs
Lint
Lint Passed
Unit
No Test Coverage
Build Status
Buildable 21288
Build 42226: Build Diffcashtab-tests
Build 42225: arc lint + arc unit

Event Timeline

bytesofman requested changes to this revision.Dec 4 2022, 22:52

Looks great at full screen and smallest mobile resolutions. Also like the simple implementation.

image.png (706×779 px, 34 KB)

image.png (802×779 px, 98 KB)

Looks a bit weird at widths less than 976 px and greater than 320px; too much space at the top, sometimes pushes the msg notice below the fold.

This revision now requires changes to proceed.Dec 4 2022, 22:52

Responding to review feedback, media queries have been added to lessen the amount of margin on top of the QRCode component when the screen is between 1000px - 320px width.

At width > 1000px and < 1264, QR code looks very low, the help msg is pushed off screen

image.png (880×564 px, 79 KB)

This revision now requires changes to proceed.Dec 10 2022, 13:43

Responding to review feedback

Looks good, but still seems a little low on the page on mobile.

Let's tighten up the padding in the light blue shaded header so that it doesn't dominate so much of the top half of the screen.

image.png (752×507 px, 37 KB)

Action: reduce the empty space above wallet name and below the XEC exchange rate.

This revision now requires changes to proceed.Dec 12 2022, 22:48

Reduced top and bottom padding of WalletInfoCtn by 10px.

bytesofman added inline comments.
web/cashtab/src/components/Common/Atoms.js
42 ↗(On Diff #37297)

12px 20px

This revision now requires changes to proceed.Dec 15 2022, 00:35

Responding to review feedback.

This revision is now accepted and ready to land.Dec 17 2022, 00:38