Earlier, the tab bar at the bottom of the main screen was wrapped in a
SafeArea widget so that it does not overlap the bottom hard to tap
regions on iPhones. Looks like that during the code changes for the
redesign, this SafeArea was lost.
Introduce the SafeArea back. Additionally, from a very quick glance it
seems that the stack and additional padding that had replaced the safe
area were not necessarily needed, so I've simplified the widget
structure. But this is a very quick and dirty example, I've only
tested that it looks visually okay on iPhone 13. Maybe there were
functional reasons for the old widgets, or maybe those were needed on
Android, so please consider this PR only as a starting point.
By default, the web view uses a white background. This was causing an
ugly flash during the initial navigation to a page containing a web
view.
This was fixed by setting the web view's background to transparent in
https://github.com/ente-io/frame/pull/233/files.
That fixed the white flash. But when we use a transparent background,
it causesanother different sort of weirdness -- during the navigation,
the navigation bar remains visible, but the rest of the new screen
below remains transparent. So visually it looks as if only the
navigation bar is sliding in from the right.
The issue with fixing a color is that at some point, our web pages
will start having separate light/dark modes, and the background color
won't be fixed always. Currently though, we only have dark mode
pages. And also the app is only in dark mode, with a black
background. So using black as the background solves the navigation
weirdness, and also doesn't stray too much from the eventual color of
the rendered page.
