Improve layout in ValidateOnDevice #1975
Conversation
🦋 Changeset detectedLatest commit: 29fdc1e The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| > | ||
| export const TitleText = ({ children }: { children: React.ReactNode }) => ( | ||
| <Flex> | ||
| <Text textAlign="center" variant="h4" fontWeight="semiBold"> |
There was a problem hiding this comment.
validated with Aamir, we don't need the huge padding above and below and h4 is a better variant than the <Log /> component.
| <InnerContainer> | ||
| <AnimationContainer> | ||
| <Flex marginBottom={isBigLottie ? 0 : 8}> |
There was a problem hiding this comment.
validated with Aamir
Codecov ReportBase: 72.48% // Head: 42.85% // Decreases project coverage by
Additional details and impacted files@@ Coverage Diff @@
## develop #1975 +/- ##
============================================
- Coverage 72.48% 42.85% -29.63%
============================================
Files 41 624 +583
Lines 2726 25895 +23169
Branches 559 7155 +6596
============================================
+ Hits 1976 11098 +9122
- Misses 747 14745 +13998
- Partials 3 52 +49
Flags with carried forward coverage won't be shown. Click here to find out more. Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here. ☔ View full report at Codecov. |
📝 Description
Device actions have so much padding all over the place that some critical info is out of view and on some screens you need to (not obviously) scroll to see it. This is even worse with some of the bigger lottie animations where the title is not even visible depending on the screen size.
This particular screen has been validated with Aamir from design by the way, I'm not just improvising.
❓ Context
ledger-live-mobile✅ Checklist
📸 Demo
Before (this is on an Android device with the display settings set to "big" to emulate what it would be like on a smaller screen): the essential info is almost out of the visible part of the scroll view.
layout.mp4
After: much more space and room for more information without scrolling
🚀 Expectations to reach
Please make sure you follow these Important Steps.
Pull Requests must pass the CI and be internally validated in order to be merged.