Generalize layout and make it consistent within webviz-subsurface

[anders-kiaer]

There are designs/layout/utility functions that probably should be generalized and e.g. offered through webviz-core-components and/or as common utility functions in webviz-subsurface / webviz-config package?

Tasks:

• Detect common design patterns/utilities that should be reusable.
• Move them to a common place (e.g. webviz-core-components and/or webviz-subsurface and/or webviz-config).
• Make layout more consistent throughout webviz-subsurface by reusing the same code.

See:

• https://webviz-subsurface-example.azurewebsites.net/parameter-analysis
• https://webviz-subsurface-example.azurewebsites.net/volumetric-analysis
• Add missing display: block on selectors #659

[asnyv]

We should at the same time take a look at how we can optimize space usage and how "friendly" the Webviz plugins/figures are for direct use in e.g. presentations and reports 😊

With this I mean things like:

• Whether we can standardize, and often cut, borders/spacing between elements
• Consider to remove shadowing. Why: Shadows adds some "visual noise", especially when cropping figures for presentations/reports, plus that they take up space that could be used for plots and figures
• Standardize size and bold/not bold for selectors, headers, titles, axes and etc (more aesthetically pleasing in reports if the plots follow as similar formatting as possible.
• A way to maximize plots if the view consists of multiple subplots
• Try to avoid different background colors, especially surrounding plots. Not a big problem in webviz itself, but you usually don't want variations in background colors if you e.g. use Webviz to generate figures for presentations and reports (similar to shadows)

[HansKallekleiv]

One suggestion is to:

• Create a few layout components in webviz-core-components to reduce code and standardize layout with regards to colors, fonts and e.g. border styling.
• Add a "print mode" button to the plugin wrapper toolbar that removes some of the styling, e.g. borders/shadows of the layout components. Should be easy to implement on the React side, some initial testing here: Styled div wrapper and ThemeContext webviz-core-components#143

[anders-kiaer]

The main part of this issue is now solved by #667 as I see it. I'm suggesting closing this and move the remaining ideas to separate issues:

• Print mode (remove shadows, borders...)
• Maximize parts/frames of a plugin.

I can do this if no objections 🙂