Pokémon Type Calculator UI Update

I overhauled the Pokémon Type Calculator UI: fixing a 12 month old bug, and improving contrast and readability in the design to help focus attention where it’s important.

The Pokémon Type Calculator is juicier than ever before. See for yourself in these before & after screenshots!

Offense (old)
Offense (new)

  • Shiny buttons and header

  • Darker background helps content stand out better

  • Types are now more colorful and easier to recognize

Pokédex (old)
Pokédex (new)

  • The more subtle card design helps avoid information overload

    • The screen is already very dense with information, so a full border and shadow around each element wasn’t necessary and made the page harder to scan

    • I also fixed an ancient bug here where the Pokémon would only bounce when becoming shiny, not on every button press

      • The solution? You just need two animations with different names but the same content, that way the animation will restart when you apply the “other” animation
Dark mode (old)
Dark mode (new)

  • Dark mode is even darker than before

  • Night mode still exists, but this was in service of making the buttons pop

  • A fun gradient on the empty progress bars which helps indicate what that area will do

See the changes for yourself in the pull request.