Add active animation to header settings button

[daudix]

Currently toggling the settings button in header only changes the color which feels a bit boring, subtle animation makes it more fun.

Screencast.from.2024-05-08.21-53-58.webm

Similar animation is already present in the search box so it's not a new concept.

Screencast.from.2024-05-08.21-55-07.webm

Missed something

[ClearlyClaire]

Looks good to me, but shouldn't it only be enabled when no-reduce-motion is used?

[daudix]

Fair, although it seems like other such animations (e.g post interactions) don't respect this preference

[daudix]

Perhaps we could simply add the following to make sure all transitions are disabled:

@media (prefers-reduced-motion) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

[renchap]

Can you fix the formatting so the checks pass? yarn fix should do it.

[daudix]

Unfortunately I couldn't setup local dev env to fix this since docker setup fails at the second step (#27398), GitHub Codespaces method doesn't work as well

Edit: After applying #26921 mentioned in the issue above as a git patch there's a different issue: #30213

[daudix]

yarn fix doesn't make any changes compared to the current state

[nschonni]

Try yarn format instead, as that will run Prettier

[BrunoFenzl]

@daudix Did you manage to fix the issue described in #30213?

[daudix]

@BrunoFenzl Sadly no :/