Sass reformat

[edward-shen]

Reformat to Sass.

Site works, the style's just a little different rn.

Resolves #40.

Todo:

• [ ] Obtain original styles
• [ ] Make things Sassy
• [ ] Remove css modules from deps.
  • [ ] frontend/components/SplashPage/*
• [ ] (opt.) Perhaps rewrite all HTML classes and get rid of all !important
• [ ] (opt.) Check for #27.
• [ ] (opt.) Check for #46.

I have no idea how to fix these tests.

[ryanhugh]

Overall looks pretty awesome!

Another quick note: a good chunk of the !important css is to override css from UI libraries (mostly semantic UI)

[ryanhugh]

Done:

• All of the css is now in a scss file and has been moved from the components folder to the css folder.
• Removed css modules from package.json and the webpack config

However, only some of the css has been converted to scss. Now that we have access to a lot of the more powerful features of sass we should rewrite a good amount of the css to use these new features. This can be done in a future PR.

I also think it might be a good idea to keep some things like this in css with the cx module instead of using && to chain conditionals (example below). Might also be worth converting some of the inline style='s to className='s too. Will think about this more later.

 -          displayNone: !this.state.showMoreThanTitle && macros.isMobile,
...
 +         display: (!this.state.showMoreThanTitle && macros.isMobile) && 'none',

Relevant: https://github.com/airbnb/javascript/tree/master/css-in-javascript#inline

In the jest snapshot changes this is pretty common. Not really sure what is going on, but am ok with just approving them.

-          "key": ".1",
+          "key": undefined,