[Mobile + Desktop] improve UX (user feedback) when they click or tap on a button the app

[sunleos]

1. Could you please show how it would look on Mobile?

@sunleos, Here's mobile - https://www.figma.com/proto/pJgiysu3rw8XvL4wS2Us7W/DS?node-id=11003-79799&viewport=221%2C-8466%2C0.88&t=ntrAgDzHRvDHTvsJ-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=11003%3A79799&show-proto-sidebar=1&page-id=4777%3A30499

@Rsttskyy,

Checked

1. the mobile prototype itself is quite slow to change color on a click/tap, but it looks it is just an issue with the prototype since in production this change of colors should be quicker.

checked several other apps, and I'm not sure now, about this current solution. What I've seen in these other apps:

It looks that most of them show a click/tap on a button with:

1. a dimmed overlay (it seems that the light color buttons get a dimmed overlay, and dark color ones get a lighter overlay - not sure entirely about this particular rule, but it looks so).
   1.1. plus animation: sometimes, this overlay is filled out on a click (slack, discord). It looks great, but we need to check dev effort on this.
2. button animation: when buttons (text and frame) contact a bit on a click/tap , it looks to be a great UX in this case to imitate a click/tap, but we need to check dev effort for this.

In a nutshell,
implementing # 1 is the core to resolve this request.
implementing #2 is good to have if it is trivial and a single solution can be applied across the board.
implementing #1.1. - don't know about it. We can skip it if it doesn't make much sense or too much.

Checked Discord and Slack on Android

Originally posted by @sunleos in #20772