[andrewn]

⚠️ Requires #1075 to be merged first before review

Currently, "user" pages like Log In, Sign Up, Account Settings and re-usable like form and form-container are not theme-aware.

This makes it difficult to reuse CSS across the app. For example, the striped tables in #1075 are theme-aware, but the colours are wrong when embedded in the Account page.

This PR:

• Convert pages to be theme-aware
  • Account
  • Email verification
  • Log in
  • Sign up
  • Password reset
  • New password
• Make forms theme-aware
• Use theme variables for table stripes across app
• Implement boxed design
• Reduce CSS variables where possible

I have verified that this pull request:

• has no linting errors (npm run lint)
• is from a uniquely-named feature branch and has been rebased on top of the latest master. (If I was asked to make more changes, I have made sure to rebase onto master then too)
• is descriptively named and links to an issue number, i.e. Fixes #123

[andrewn]

@catarak suggested:

one option for the design, that would keep the tabs at the top, would be to wrap the settings container in a box (e.g. like the login design here) so that the tab strip wouldn't be floating.

[andrewn]

@catarak I think this is looking much better. Do you think we need a background image as in the design? I can't seem to extract that one from the Sketch file.

[catarak]

@catarak I think this is looking much better. Do you think we need a background image as in the design? I can't seem to extract that one from the Sketch file.

I think the idea behind that design is that there would be a p5.js sketch running in the background, like the p5.js website. I think it makes sense not to include that for the settings page!

[andrewn]

Ah, ok. Yeah, I think it would be distracting to have all sounds and movement on these pages.

I'll leave it blank for now as I don't want to spend too much more time on this.

[catarak]

This is looking good! A few things:

• I think the "X" to close the page should still be at the upper right-hand corner, rather than within the inner pane
• I think the background color of the page should match the theme

[andrewn]

I just cherry-picked the commits on top of feature/public-api so it's easier to review.

As I force-pushed, you'll probably want to delete any local copies of this branch to avoid things getting weird.

[andrewn]

I just cherry-picked the commits on top of feature/public-api so it's easier to review.

As I force-pushed, you'll probably want to delete any local copies of this branch to avoid things getting weird.

[andrewn]

• I think the "X" to close the page should still be at the upper right-hand corner, rather than within the inner pane

The designs have Back to the editor call out instead of an "X" so I implemented this.

What do you think?

• I think the background color of the page should match the theme

👍 ✅

[catarak]

i think this looks a lot better, and is ready to merge!