This fixes the search icon in the search box not being centered properly
and also not having the muted color style.
The container is a flex-box layout which already tries to center its
items. But due to the icons in MUI having a display of `inline-block`,
our `Box` container also needs `display: inline-flex` to properly
calculate the height. Now the box container is the same height as the
icon and it gets centered correctly again.
This is the same methodology that the MUI native `IconButton` also uses
as a display value. See
https://github.com/mui/material-ui/issues/33020#issuecomment-1149971549
Current web version:
Proposed fix:
This also removes the `icon` CSS class from the Box container since it
does not exist anyway. And we fixed the theme color not being applied.
This was otherwise just passed as a raw string to the color property and
now correctly uses the intended theme color.
Thanks!
This fixes the search icon in the search box not being centered properly and also not having the muted color style.
The container is a flex-box layout which already tries to center its items. But due to the icons in MUI having a display of `inline-block`, our `Box` container also needs `display: inline-flex` to properly calculate the height. Now the box container is the same height as the icon and it gets centered correctly again.
This is the same methodology that the MUI native `IconButton` also uses
as a display value. See https://github.com/mui/material-ui/issues/33020#issuecomment-1149971549
This also removes the `icon` css class from the Box container since it does not exist anyway. And we fixed the theme color not being applied. This was otherwise just passed as a raw string to the color property and now correctly uses the intended theme color.
The hover and ripple effects and the positioning were off on the mobile upload button, because the `.mobile-button` class used the wrong class to let the element appear again. It used `display: block`, but the MUI IconButton actually has `display: inline-flex`, which will also fix the wrong height of the button.
See https://github.com/mui/material-ui/issues/33020
Previously the button was assigned 0 left padding instead of its default 12px padding. This caused the ripple and hover effects to be off. It also caused the button to be right on the screen edge on mobile.
This is now fixed by just removing the override.
