Remove inline styling in favor of material-ui Box component

[amoedoamorim]

Tell us about your request
Remove inline styling in favor of material-ui Box component

Which service(s) is this request for?
Let us know which services(s) you want this for?

• Check Web
• Check Mark

Tell us about the problem you're trying to solve. What are you trying to do, and why is it hard?
In order to achieve a better code organization, we're shifting away from inline styling.
Also, by using material-ui's css-in-js solution we benefit from the rtl layout handling.
When styling for spacing such as margins and paddings, it makes sense to use the Box component.

Sample code locations (not limited to):
https://github.com/meedan/check-web/blob/develop/src/app/components/source/UserSecurity.js#L479
https://github.com/meedan/check-web/blob/develop/src/app/components/tag/TagInput.js#L98
https://github.com/meedan/check-web/blob/develop/src/app/components/team/TeamTasks.js

Additional context
To know more about React Box component: https://material-ui.com/components/box/

[sparkingdark]

Want to work on it.

Is this issue taken? Or can i work on it too ?

[Hard-Coder05]

@amoedoamorim I would like to work on this issue! Please assign this to me! Any of the two Check Web or Check Mark will work for me!

[amoedoamorim]

@karenefereyan I have assigned it to you! Thanks for your interest. Please go ahead and let us know if you have any trouble.

[amoedoamorim]

@Hard-Coder05 Thank you for your interest! I assigned this issue to @karenefereyan but it doesn't mean you cannot submit meaningful contributions too. You can browse the code for similar patterns and fixes.

[abhisheknaiidu]

Hey @karenefereyan are you still working on this?

@abhisheknaiidu please go on

[aloks98]

Can I take up this issue?