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.
Details
Details
- Reviewers
bytesofman - Group Reviewers
Restricted Project
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
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 Diff cashtab-tests Build 42225: arc lint + arc unit
Event Timeline
Comment Actions
Looks great at full screen and smallest mobile resolutions. Also like the simple implementation.
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.
Comment Actions
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.
Comment Actions
At width > 1000px and < 1264, QR code looks very low, the help msg is pushed off screen
Comment Actions
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.
Action: reduce the empty space above wallet name and below the XEC exchange rate.
| web/cashtab/src/components/Common/Atoms.js | ||
|---|---|---|
| 42 ↗ | (On Diff #37297) | 12px 20px |