consider refactoring templates and Sass to maximize reuse/reusability

[cfm]

Description

While well beyond the scope of #5972, the UI refactoring and tweaking involved in #5986 and #5987 demonstrates that the separate templates and overlapping Sass stylesheets can be difficult to reason about between the Source and Journalist Interfaces. Once this accessibility-focused refactoring is complete, it would be good to investigate whether the two interfaces' templates and stylesheets can at least be made equivalently (homologously) intertwined, so that it's more obvious to contributors when and how changes to one interface have side effects in the other.

This could be as simple as inheriting from a common base.html template and templating reused widgets in HTML as well as in Sass—not unlike the component library proposed in freedomofpress/securedrop-client#1328.

The counterargument to this proposal is that the Source and Journalist Interfaces should be completely separate in both their templates and their stylesheets. The exception might be widgets such as locales.html which are currently replicated, but could be shared, identically between the two interfaces.

User Research Evidence

#6080

User Stories

As a contributor, I want to be able to reason easily about templates and Sass between the Source and Journalist Interfaces.

[cfm]

@zenmonkeykstop suggested today that he might favor separating the Source and Journalist Interfaces' templates and stylesheets completely, rather than refactoring them for reusability. I've updated the description to mention this counterargument and noted the possible exception of widgets that are truly replicated between the two interfaces.

[gonzalo-bulnes]

In a web context, I'd suggest using CSS custom properties instead of moving towards CSS pre-processing (SASS and friends). They've got good support across browsers and don't require extra tooling.

Typical examples of use include theming, I'm happy to 🍐 pair or discuss some code examples if anyone wants a quick intro. 🙂

[legoktm]

The counterargument to this proposal is that the Source and Journalist Interfaces should be completely separate in both their templates and their stylesheets. The exception might be widgets such as locales.html which are currently replicated, but could be shared, identically between the two interfaces.

My understanding is that this is the direction we went in, correct @eaon ?

[eaon]

Kind of. It turned out that refactoring portions of the SI was a Sisyphean task while it was entangled with the JI, so I opted to split them apart first.

However, should the JI also get a make-over, I think reusing portions (in a simpler manner by linking a file common.css or something like it from both interfaces) would make sense, but either way, Sass should stay out of the picture IMO.

@cfm if you're cool with, and especially now that #6529 was merged, I'd opt for closing this ticket.

[cfm]

Fine by me, @eaon! Closing.