App Themes

[walmat]

---

name: App Themes
about: Implements dark mode / light mode

Changes

• Added themifying to the app
  • themes.scss defined variables to be used during scaffolding
  • fonts.scss defined to be used for differing operating systems
• Added global action to toggle between themes

TODO

• Fix button toggle propagation throughout app
• Fix react-select styling
• Iron out icon visual bugs

Checks

• CI passes
• Coverage (<2%∆)
• Manual Checks
  • Test out visualality of light and dark mode ALL features
  • Think about captcha window dark mode?

fixes #327

[pr1sm]

I'm looking forward to seeing this hit master!

Most of the comments I had were around changing the naming scheme of the action and adding a constant THEMES map to reference instead of using string literals.

One thing I noticed as well is that there is nothing in the current code that tells the top level app component to redraw itself. Since this component is outside of the redux connected components, triggering a state change will not automatically trigger a redraw. You'll have to use this.forceUpdate() (reference is here) to redraw the app component.

[walmat]

@pr1sm think I'm ready for a second review (hopefully final!)

stale

[pr1sm]

Nice, this looks great! Just had a couple of quick suggestions.

One thing I noticed while testing is that the react-select components are a hair slower than the rest of the frontend at updating. Not sure if that's a quick fix or not, but I don't think it's important enough to be a blocker, we can make a separate issue to improve the performance of theme switching

[walmat]

Think about captcha window (and other windows..) dark mode

Any ideas @pr1sm?

[pr1sm]

I'm not sure what the best way is to send the theme over. Maybe using a query string on the captcha url? A script could look for this and make adjustments to the css.

There's probably a better solution out there, but that's just the first thing off the top of my head

[pr1sm]

Just a couple of small changes.

[pr1sm]

Nice, looks great!

[pr1sm]

merging...