Dividers and descriptive headers

These are proposed updates to the how forms are divider and how headers/descriptions are provided...

Currently used headers

This screenshot shows the Clinical Annotation search results screen, with a currently implemented "Search Type Participants"...

The main issue with this header is that it's reusing layout/style elements originally designed to label and separate individual form elements. This header is now also being used to add descriptive label for the entire form; okay in principle, but visually confusing as it's not visually different enough. Instead, if a header (and possibly short description) needs to be added, it should look like this...

This design makes the header and description stand out better, making it clear the text it provides is separate from the table headers or label headers.

Currently used dividers

This screenshot shows the Clinical Annotation detail screen, with how a divider is currently being used

The confusion is readily apparent here, especially with the already confusing current header. The black line is used to separate the two screen forms, but no explanation is provided why. Worse, the current header is being used to describe the table below, and since it is empty, doesn't provide enough description to follow up the header. It just looks like a series of black/blues lines with a out-of-context floating word or two. (Note, in this example, we are ignoring the HTML translation text issue).

The proposed change for the black-line divider is...

Here, we are using the same header layout design to separate the two form elements. It keeps things consistent (same design/layout element used), and it is proposed there should always be a header and/or descriptive text if a form needs to be divided. The idea is, if a form (or series of stacked forms) are so complicated in appearance that then need to be visually divided, then it needs some sort of descriptive next to explain it.