Make button shape and positioning more consistent

Buttons are a bit wild in Anki 2.1.50+. I wish they were a bit more consistent.

  • The distance between adjacent buttons varies.

    image 3 vs 4px

    image 2, 2, 1, 1, 1, 2px

  • Button rounding varies. See the two screenshots above. Also for some reason night mode buttons are way too round round than their light mode counterparts. Compare with the first screenshot:

    image

    And of course there are buttons without rounding at all

    image

  • Edge buttons in the reviewer are too close to the the left and right edge.

    image

    And to the top edge in Add dialog.

    image

  • Night mode buttons have a slight gradient. Why?.. It feels like the era of gradients in UI is long gone.

  • Bold button is kind of on top of Italics button?!
    image

  • In night mode, Qt native buttons have a lighter border all around the button, while editor buttons don’t.

    image

1 Like
  • Night mode uses a different UI theme so that a dark interface can be displayed correctly across multiple platforms, and regardless of the system theme.
  • Buttons in webviews don’t match standard Qt buttons, and we end up having to try to emulate them so they don’t stand out too much. The emulation is not perfect.
  • Some webviews like the review screen and deck list are quite old, and could do with a refresh. When that happens, we’ll be able to use newer approaches, and take advantage of the styling that is used on newer screens like the editor and deck options.

If you feel you can improve on some of the issues you mentioned above in a way that doesn’t introduce regressions or require too much effort on screens that are due for an update, one or more PRs would be welcome.