Fix feedback widget and convert to CSS module
Created by: pdubroy
- Fixes #22039 (closed). For some reason Firefox inserts some space between two adjacent elements. The first item was in the flow (but had zero width), while the 2nd had
position: absolute
. The fix is to give the first itemposition: absolute
as well, which ensures that they have the same position. - Migrate the styles to a CSS module
- Remove the separate
.theme-redesign
styles and fold them into the main styles. - Update the styles to match the Figma designs.
NOTE FOR REVIEWERS: Each of the three things listed above ^^^ were done in separate commits, so it's easiest to review this commit by commit.
Current behavior (Chrome)
https://user-images.githubusercontent.com/17293/121904036-2602c100-cd29-11eb-98d9-ba48931d4bb2.mp4
Current behavior (Firefox)
See #22039 (closed)
New behavior (Chrome, Light)
https://user-images.githubusercontent.com/17293/123081455-4237e980-d41e-11eb-909d-def49356d9d3.mp4
New behavior (Chrome, Dark)
https://user-images.githubusercontent.com/17293/123081595-6693c600-d41e-11eb-855c-1e25e2d6513d.mp4
New behavior (Firefox, Light)
https://user-images.githubusercontent.com/17293/123081614-6dbad400-d41e-11eb-8b6f-b1770d0db9c7.mp4
New behavior (Firefox, Dark)
https://user-images.githubusercontent.com/17293/123081640-76aba580-d41e-11eb-8538-a995917036ec.mp4