Replace Material Paper with Garden Well

[kerrisim]

Short description

Description

Using Garden's Well component to replace Material UI's Paper component within the Admin dashboard page

References

Github Issue

Screenshots (if needed)

Before

After

Risks (if any)

• [Low] - UI component change

[samzx]

Could we add margins (right, left) between the two horizontal wells (for all of them)? Using styled components if possible.

I think it'd look better that way, especially since the Wells have a border radius and it being so close each other they kind of look like they're over lapping a bit too.

Edit: ie [ ][ ] becomes [ ] [ ]

[kerrisim]

Hey @samzx, I added some margins to the Well components. I also updated the screenshots to what they look like now. Does that work?

[samzx]

Perfect, thanks for that! 😊

[samzx]

Only other thing to add is maybe creating a StyledWell component instead of the const styles

ie.

const StyledWell = styled(Well)`
    width: 100%;
    height: 100%;
    padding: 20px;
`

and using that instead of the Well component. Lmk if you'd like to pair on that :)

[kerrisim]

I didn't know that styled components was a thing. That's pretty cool!! I've made the change ☺️