Migrate to SCSS

[smartspot2]

Closes #345.

The existing CSS organization sucks: there was one huge styles.css file, containing a messy mashup of various styles for various components. We had begun using separate CSS files later on, but the weird dependencies between classes across all of these files, along with bad defaults created a lot of duplicated CSS code.

This PR aims to make the styles a lot more organized, utilizing SCSS to allow for more advanced functionality.

• Base styles were created for buttons, forms, modals, etc., and additional global variables were created for various lengths, to allow for less repeated styling code.
• A lot of existing styles were also replaced and revamped with more consistent styling across the entire site. This makes the UI a lot more cohesive and intuitive.
• All of the CSS is now in separate files, grouped (approximately) by the page they affect. These styles are then imported from the respective TSX files. The original styles.css file is deleted.
• Webpack was further configured to compile and minify (in production) these CSS files.

⚠️ This PR will break all styling from other PRs! This is simply due to the change in directory of the CSS files; most issues will be resolved by simply moving the CSS file into the correct location and importing it from the component. Some of these changes may also visually break some new components not merged into master yet, but these should generally be rare, as typically new components/features use their own styling. In the same vein, these new components should also try to use some of the shared base styles instead of creating their own styles, wherever possible.

In the future (as this PR is long enough as is), we can think about adding scoped styling, forcing styles to be imported explicitly in each component file. This would protect against any name clashes (with automatic suffixes added to each class), and also ensures that we import all of the styles we need, rather than silently stealing styles from other components.

(This is a beefy PR, but the vast majority of the changes are just copying over CSS styles to new files, and from the package-lock.json file changes.)

[cypress]

Passing run #200 ↗︎

0

78

0

0

0

Details:

Migrate to SCSS
Project: csm_web	Commit: 8b6e1b86f2
Status: Passed	Duration: 02:40 💡
Started: Sep 9, 2023 11:00 PM	Ended: Sep 9, 2023 11:03 PM

_{This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.}

[edwardneo]

Everything looks good! I don't know too much about Cypress, so I'll let Eric take a deeper look at that.

[ericyche]

it works on my end but i'll take another look after conflicts are resolved

[ericyche]

it good. thank you alec

[edwardneo]

Looks good to me -- rebase and merge!