matrix-react-sdk
matrix-react-sdk copied to clipboard
Update input field and dropdown styles to match the design system
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.