[Social Farms & Gardens-Spring-24] Add colour options for data groups

[lin-d-hop]

Please track under clockify project [Social Farms & Gardens-Spring-24]

Description

Following on from #309 we want to implement these designs such that 'Data Groups' can be assigned a colour code.

Design: https://xd.adobe.com/view/bc683f6a-8c40-49d1-85d8-c60932251927-e93b/screen/c0d8a0ea-7d06-475c-8785-808f0d73d77e Colour set 4 was chosen.

As there are just 5 colours to choose from, we can create the assignment of the colour in the DB in the way that feels most appropriate - the hex, or just a number 1-5, or something else. Up to you.

When a colour is associated with a data group we should see a UI change in two places:

1. Any marker/poly/line that is a member of that data group should have the marker itself, the line and poly border line and the info box render in the associated colour. Note that there are not design examples for the lines and poly border lines.
2. The on/off toggle should display in that colour when turned on, as per designs.

Acceptance Criteria

• Two UI changes as specified above
• If a marker/poly/line is moved to another data group, its colour should change accordingly.
• The default marker colour remains the same.
• Any data group without a specified colour should render in the default colour.
• Currently when markers/lines/polys that are drawn are selected they change colour, and when markers/lines/polys that are part of data groups are selected they do not change colour. Let's keep this behaviour.

[ms0ur1s]

@lin-d-hop, UI changes have been implemented and PR submitted.

[ms0ur1s]

Hex colours added to staging DB, looking good so far.

[lin-d-hop]

This is looking really great!!

Something to note in the UG is that any colour close to white will have insufficient contrast to work.