Minor Team Tab Design Tweaks
neurowave opened this issue · 2 comments
These are lower priority, but it would be nice to have the characters fit in the buttons a bit bigger and overflow a tad. This is what they currently look like:
How they look in the designs:
I assume this is challenging based on different resolutions, but perhaps there's a way we can give them absolute positioning relative to their parent. In CSS we'd use absolute positioning inside a relative container with custom top/left/right/bottom values to make it look relatively the same on different resolutions. I'm sure there's something similar if not better in Flutter!
Even more minor: can we move the notification bubble over a tad, so it's positioned at 2/3rds of the width of the tab?
Also, the white lines around the stats on top could be brighter like the comp.
The reason it doesn't work like in the designs is due to how the artboards are setup in Flare. The artboards have different aspect ratios from the character grid cells. Even though the characters do bleed out of the artboards, the ratio needs to be adjusted to fit within the grid cell. We used to use BoxFit.cover but that risks having content completely cut out on certain devices, so now we use BoxFit.contain:
https://docs.flutter.io/flutter/painting/BoxFit-class.html
