Use IconButton for nicer "edit" and "remove revision" icons, and set default appearance for all buttons

julienw commented 4 months ago

It's probably easier to look at commits separately.

Commit 1: uses IconButton instead of Button for some of our icons -- namely the "edit" button and the "remove revision" button. This makes these buttons much nicer in the process, especially on hover. Note that this was needed for setting the variant by default in commit 2, that's why I included it in this PR too.
Commit 2: set some defaults for all buttons: variant = contained so that they look like button, and disableElevation to remove box shadows. I think that the shared styles do some of "variant = contained" too and we might want to simplify them later, but I didn't want to do that now. (see https://mui.com/material-ui/customization/theme-components/#theme-default-props about this -- we could also add disableRipple if we want to)
Commit 3: remove the "variant" property where appropriate now that it's set globally.
Commit 4: update test snapshots

To summarize visible changes:

removes the box shadows on buttons like the design says
makes the "remove revision" icon a bit bigger
makes the hover style for both the "edit" icon and "remove revision" icon nicer, and their hit size bigger
Some spacings are slightly different too but I think I managed to keep these changes minimal.

I think that the only debatable change is making the variant contained by default. It can still be overriden on a case by case basis by using variant="text" or "outlined".

Please tell me what you think!

Deploy preview Production version

Before: After:

netlify[bot] commented 4 months ago

Deploy Preview for mozilla-perfcompare ready!

Name	Link
Latest commit	44b792641238f0edfe52c7e664058888b164efa5
Latest deploy log	https://app.netlify.com/sites/mozilla-perfcompare/deploys/66599c1cdd249c00080e0caa
Deploy Preview	https://deploy-preview-665--mozilla-perfcompare.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

codecov[bot] commented 4 months ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 97.18%. Comparing base (ce5919d) to head (8a4753e).

:exclamation: Current head 8a4753e differs from pull request most recent head 44b7926

Please upload reports for the commit 44b7926 to get more accurate results.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## beta #665 +/- ## ======================================= Coverage 97.17% 97.18% ======================================= Files 67 67 Lines 1488 1491 +3 Branches 256 257 +1 ======================================= + Hits 1446 1449 +3 Misses 38 38 Partials 4 4 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

mozilla / perfcompare