matrix-react-sdk icon indicating copy to clipboard operation
matrix-react-sdk copied to clipboard

Update input field and dropdown styles to match the design system

Open robintown opened this issue 3 years ago • 0 comments

My original goal was just to solve https://github.com/vector-im/element-web/issues/9582 by updating the label color to whatever our design system says it should be, but I then noticed that the design specifications in Compound (screenshot for those without access) don't match our current input fields at all. So, I've overhauled the styles accordingly to bring them out of the Riot era. The label animation has also become considerably smoother now that I've changed it to animate scale instead of font-size.

This definitely needs thorough design review, since this change spans the entire app.

Before

https://user-images.githubusercontent.com/48614497/167968861-6452abd7-3104-4589-8e89-ee5f44757ff2.mp4

https://user-images.githubusercontent.com/48614497/167968134-20d91d72-22ee-4e14-8f45-e77c90601238.mp4

After

https://user-images.githubusercontent.com/48614497/167968870-cc8b44ed-52fd-476c-8104-0e99e58a58b5.mp4

https://user-images.githubusercontent.com/48614497/167968136-2c0d1f83-4e7e-4f03-ab01-6ea63793d324.mp4

Closes https://github.com/vector-im/element-web/issues/9582.


Here's what your changelog entry will look like:

✨ Features

  • Update input field and dropdown styles to match the design system (#8566). Fixes vector-im/element-web#9582.

robintown avatar May 12 '22 00:05 robintown