782 give every modal a header with title and close button

[dhinrichs-scottlogic]

Description

Every Modal now has a heading and a close button with the text "close" and an x icon.

Screenshots

Notes

• new OverlayHeader component
• new x icon svg
• style update for DocViewer and Handbook

Concerns

• I took the svg from here and then removed anything I didn't understand that seemed unnecessary, so would be great to double check that I didn't remove anything important.

Checklist

Have you done the following?

• Linked the relevant Issue
• Added tests
• Ensured the workflow steps are passing

[pmarsh-scottlogic]

I've not done a proper review yet, but I noticed that on the handbook the header is overlapping the top of the scroll bar:

Then I realised how the handbook header was structured:

• The overlay-header div sits at the top with position:fixed while the handbook-overlay div sits tucked underneath, and it's up to some clever margins to nudge the content and spine down a bit below the header.

And while this looks grand if you get the margins just so, It seems vulnerable to visual bugs down the line.

Ideally we'd have the overlay-header actually take up space in the div, and have the spine and content fill up the remaining space. I had a go at that in this separate branch (You can click compare and pull request to see the changes). It would require some more css fiddling to get the other modals looking good again though, since they all depend on the overlay-header having position:fixed.

[pmarsh-scottlogic]

Visual changes look cracking by the way! Should've led with that 😅

[chriswilty]

Excellent work, looks amazing ❤️

Just a handful of minor suggestions.

[dhinrichs-scottlogic]

@pmarsh-scottlogic Chris did some css magic, the issue with the scrollbar and margins should be fixed and future-proofed now.

[chriswilty]

Lovely ❤️