feat(landing): increase visual prominence of category in layer dropdown

[ajacombs]

Description

Increase the visual prominence of the category heading in the layer dropdown on the landing page. It does this by:

• Increasing the size, from 75% layer name size to 90% layer name size.
• Darkening the colour, from a light grey #999999 to LUI teal #00425d
• Adding 1px of letterspacing, common typographic practice for all caps text to improve legibility.

Before:

After:

Intention

After adding the georeferenced historical imagery layers to Basemaps, there are many more layers in the dropdown than before. The category of these layers is also more important than before when searching, thus increasing the visual prominence of the category header will improve the UX when searching for a layer in the dropdown.

The method of inserting styles into the react-select Select component feels very non-ideal, but seems to be the necessary way currently to modify the styles of the dropdown. Future work to refactor the frontend should include looking at a more comprehensive approach for styling components.

PR updated with new commit which swaps to using basic CSS styles in index.css, and adding classNamePrefix and id props to the Select component to allow the CSS selectors to have consistent names to target.

Checklist

If not applicable, provide explanation of why.

• Tests updated
• Docs updated
• Issue linked in title