Feat: PfR theme

[jfmcquade]

PR Checklist

• [x] PR title descriptive (can be used in release notes)

Description

Adds a new theme specifically for the PfR deployment.

The new theme uses the colours black and red as the two source colours from which the theme is generated. It also uses the specific shade of green, taken from the logo, as the "success" green colour used throughout the app (e.g. for the green ticks on completed modules). I did experiment with other combinations of the colour scheme, but these resulted in red and green being too prominent, which looks odd but also conflicts with the standard use of red and green as "success" and "warning" colours in apps (although currently we don't use red anywhere by default). See the screenshots at the very bottom of the PR description for the rejected colour schemes.

It may be that further tweaks are necessary as a follow-up, either to the theme override values for specific components, or to the authoring (for example, many of the icons used are blue).

Dev notes

In the future, deployment-specific themes (or at least the minimal data required for their generation) should live in content repos, see new issue #2168. However this is a significant task that is not currently high priority. Adding a new theme to the code repo, whilst not ideal, does not cause any issues, but it does defy the separation of code from deployment-specific data to include a named "pfr" theme in the code repo. One way around this would be to rename the theme from "pfr" to something more general (e.g. "black-red"), as in theory another deployment may wish to use this theme. However, as we're specifically using the brand colours of PfR, that feels a bit like sleight of hand, and wouldn't solve the problem.

Testing

This PR in the PfR repo should be merged before testing, as the config has been updated to target the pfr theme.

After checking out the PfR deployment and pulling the latest changes, run yarn start as usual. Initially, the theme changes will not be visible because the "default" theme, which is available as a fallback, will be applied if it has previously been set as the app's active theme. In order to update the theme, you will need to reset the app using the "Reset app" button in the main menu. This will clear any cached data in your browser associated with the PfR app, giving you the experience of someone running the app for the first time. You should then see the changes to the visual styles.

Git Issues

Closes #2165

Screenshots/Videos

Before

After

Rejected colour schemes

[laetitiaCA]

This look ok, thanks @jfmcquade. We will further refine the final App theme to be user friendly based on these colours.

[chrismclarke]

Makes sense to me, yeah not sure quite what the best way to implement content-repo themes is but happy to follow-up in linked issue (thanks for separating out)