Any chance for comparison images? :D

Here are all the changed screens right now.
Some of them, like the settings list look very similar, but I've made them use all the space all the way to the edges.

I like this, mainly because it takes me at me at least 3 tries to hit the validate firmware button each time. Would it be possible to standardise the theme/button colours between quick settings and main menu in this PR too?

Would it be possible to standardise the theme/button colours between quick settings and main menu in this PR too?

I'm not totally sure what you meant, but because of the vibration button, I don't think the base color can be turqoise in quick settings. However, when vibration is enabled, the button could be turqoise, and now we would have a standard accent color. I'll test this and post a pic soon.

Maybe the selected (vibration) button could have an outline/border instead of being a different colour, but what I meant was to have the quick settings menu look the same as the main menu in terms of the button background colour being turquoise/teal/whatever it is. It's not very important, and would maybe be better as a separate PR, since it doesn't align well with the goals of this PR. In any case, nice work.

I personally think the buttons should still be kept gray so that the enabled state really contrasts with the disabled state. And gray buttons are still used in the settings menus with the checkboxes, so it's not totally inconsistent. So maybe we shouldn't change that now. Here is the pic anyway. Maybe in the future the accent color will be selectable and this is how it would look then.

Also should the firmware validation buttons be made wider like in the UI guidelines I wrote, or would there be worry that the user might accidentally press the wrong one?

These changes aren't committed.

I would recommend making a little space between the Validate and Reset buttons I have clicked on "Find My Device" on my mi band accidentally a few times due to there being very little space.

A little bit of space is good so that even if you click a bit off-center you don't click the other button.

Similar to the one in commit already.

I personally think the buttons should still be kept gray so that the enabled state really contrasts with the disabled state. And gray buttons are still used in the settings menus with the checkboxes, so it's not totally inconsistent. So maybe we shouldn't change that now. Here is the pic anyway. Maybe in the future the accent color will be selectable and this is how it would look then.

Also should the firmware validation buttons be made wider like in the UI guidelines I wrote, or would there be worry that the user might accidentally press the wrong one?

These changes aren't committed.

I like the wider buttons on the firmware validator, but I think the quick settings changes should be in a separate PR.

Works and looks fine on my P8. Exactly what I did a week ago in Music Player screen. I hated small buttons that don't go to the edge of the display. Thanks

I just tested this branch with the update_settings branch #442, they work well together and make it much easier to interact with. Nice work.

These changes look good!
@joaquimorg, what's your opinion about this PR (and maybe #442, also) ?

These changes look good!
@joaquimorg, what's your opinion about this PR (and maybe #442, also) ?

I like what @Riksu9000 does to improve the overall look.
The only fix i do is the quick settings buttons i think they got a little big, i guess it's to optimize the display, but i think they get too big.

As for #442, I think replacing checkboxes with buttons doesn't make much sense, we've lost track of whether it's a selection or if it's a button.

The only fix i do is the quick settings buttons i think they got a little big, i guess it's to optimize the display, but i think they get too big.

Would this be better? I simply made them square so they're just a bit smaller but might look better. They appear a bit tall to me for some reason. I personally prefer what I originally proposed.

As for #442, I think replacing checkboxes with buttons doesn't make much sense, we've lost track of whether it's a selection or if it's a button.

I get your point. The reason I wanted to change it is mainly to expose the border, so it's easier to press. Also the display timeout screen would be hard to make work like in #442 with checkboxes. If we don't want to use buttons there, I could still adjust the checkbox style and make them look like radio buttons where applicable. But let's discuss this further at #442 if necessary.

@Riksu9000 I would prefer buttons that goes to the edge. On my P8 I sometimes miss touch events on the bottom part of the screen. I noticed that in the paint application when I touch near the bottom edge, then the touch event has the coordinates with maximal value. This way it ignores the button press even it was few pixels away from the bottom edge of the button.
On smart phones I suspect there is some guess/logic which decides if I pressed near some hyperlink or button on webpage, but in the LVGL you have to press inside of the button area, which is sometimes hard on small display.
Also, thanks for all your contributions to InfiniTime, you did a lot of work there.

I decided to adjust the inner padding in applist to make it feel less cramped. Now the page indicator seems a bit close, but maybe it should be improved separately and turned into a page indicator component instead of having the code duplicated in many different screens.