As I was working on new Connect layouts I entered global css hell due to the presence of an arbitrary collection of global css located in src/theme/layouts.ts.
In order to not batch these changes with logical Connect changes I am splitting off this PR to get in as soon as possible. A few things to call out.
How the PR was implemented
Paddings belong inside of scroll containers. There is no one size fits all solution to mobile layouts or mobile scroll containers. That's why typically it's a bad idea to try to create DRY abstractions for scroll containers. Resulted in strange behavior, which has now been fixed. Toward that end I eliminated "ParentPageLayout" which was causing more harm than good.
SafeAreaView is unnecessary in a TabNavigator because neither the top nor bottom of the content area reaches the SafeAreas
Switched margin (oldschool style) for gap (flexbox best practices)
move away from global css, which is a website thing and unnecessarily paralyzes UI development
Misc:
Abstracted Avatar because it's not always used with ListItem
Reason for PR
As I was working on new Connect layouts I entered global css hell due to the presence of an arbitrary collection of global css located in
src/theme/layouts.ts.In order to not batch these changes with logical Connect changes I am splitting off this PR to get in as soon as possible. A few things to call out.
How the PR was implemented
margin(oldschool style) forgap(flexbox best practices)Misc:
Fixed screens:
https://github.com/TBD54566975/web5-wallet/assets/3495974/33e39112-c3a7-4ff3-96f8-2c390108fd3f
https://github.com/TBD54566975/web5-wallet/assets/3495974/bcd6d8ac-b526-4496-b5ad-d57596daba5b
https://github.com/TBD54566975/web5-wallet/assets/3495974/db41ecde-e935-425d-8a4b-473e48bf3939
https://github.com/TBD54566975/web5-wallet/assets/3495974/ae25195e-48cf-48fa-ad32-3395a2678387
https://github.com/TBD54566975/web5-wallet/assets/3495974/01c62f3c-c20c-4030-8ef1-cd74352c3491