feat: Wrap MUI button and apply styles, references #1318

[ajhollid]

This PR is a proposal for wrapping MUI components and applying styles as discussed and referenced in #1318. It wraps an MUI Button and applies our styles from the GlobalTheme.

Please try using the component next to a regular MUI Button, all styles appear to be applied correctly to me and the component appears identical to an MUI button styled by the GlobalTheme

I propose that we use styled components as this MUI has support out of the box and this is how MUI components are styled themselves.

This will also allow us to pretty much directly copy and paste styles out of the Global theme which should speed up the process.

I suggest we standardize on this approach going forward. That said I'm completely open to disucssion on the topic if anyone has strong opinions!

Once we've decided on the method of styling we'd like to use we can go forward and wrap all the necessary components.

[marcelluscaio]

That is exactly what I had in mind, @ajhollid. I just don't see the need for calling styled. We can simply do :

const Button = ... return (<MuiButton sx={all the styles}/>)

[ajhollid]

That is exactly what I had in mind, @ajhollid. I just don't see the need for calling styled. We can simply do :

const Button = ... return (<MuiButton sx={all the styles}/>)

Sure that works too, using styled was nice because I could just directly copy paste from the theme.

I'm ok with either approach, I'll leave the call with you!

If sx makes more sense can you make the changes and push to this branch so we have it as a reference for how to proceed?

Thanks!

[jennifer-gan]

This PR is a proposal for wrapping MUI components and applying styles as discussed and referenced in #1318. It wraps an MUI Button and applies our styles from the GlobalTheme.

Please try using the component next to a regular MUI Button, all styles appear to be applied correctly to me and the component appears identical to an MUI button styled by the GlobalTheme

I propose that we use styled components as this MUI has support out of the box and this is how MUI components are styled themselves.

This will also allow us to pretty much directly copy and paste styles out of the Global theme which should speed up the process.

I suggest we standardize on this approach going forward. That said I'm completely open to disucssion on the topic if anyone has strong opinions!

Once we've decided on the method of styling we'd like to use we can go forward and wrap all the necessary components.

Makes sense as MUI is recommending to use styled to wrap component and its overriding props