Refactor styling element into separate classes in CSS files

[kaseyliu]

Description
Right now, most of our styling elements are coded as inline styling on the Chakra element's style={}. However, many of them are the same and we want to remove the repetition. We would prefer to separate the styling elements (for all files) into a const that can be exported in. We can do this in the same file as the component, for example:
export const cardStyles = { p: 4, … }; <Box {...cardStyles}> If you notice common styling across multiple files/components, then make a separate file for the styling that the other files can import. Let us know if you have any questions!