Visual differentiation needed for Access Status

[paulo-graca]

Describe the bug
Currently, when displaying different access status like open access, restricted access, ... there is no visual differentiation.

all look the same.

To Reproduce
Steps to reproduce the behavior:

1. Firstly you should have content with different types of access (specific resource policies for open access, embargoed access)
2. Activate the required configuration on your client site (angular):

# Item Config
item:
  showAccessStatuses: true

3. Perform a query (can be an empty one and you will have a list of items). Please mind that this only applies to generic Items or Publications.

Expected behavior
I hoped to have a visual differentiation for different access status. Could be something based on a different color, a specific style class. Of course I can theme that component and do that on my side, but I think it makes more sense to have it like that for all implementations.

[pilasou]

@paulo-graca I like the idea...but talking about color design always seems to me like a pandora's box! :) There are 4 status to cover: OA, Embargo, Restricted and Metadata only. Maybe it would be possible by following a simple color code (green for OA, red for restricted, etc.), like this:

My concern is that on a result page, it can look like fireworks:

[mwoodiupui]

Please bear in mind that the four states are simply names for combinations of starting and ending dates for ResourcePolicy instances. Other combinations are possible. Here we have two types of embargo: limited (maximum of two years) and unlimited (can be embargoed "forever"). Collections use one or the other as required.

[tdonohue]

Not against this idea, but priority is uncertain. It might be possible to simply make it easier for sites to color each status button differently via CSS...instead of defaulting to a specific color scheme (which can be a "pandora's box" as @pilasou notes)

For now, moving this to backlog as priority is unclear to me.

[paulo-graca]

Concluding, to avoid fireworks It would be better to add specific stylesheet classes, perhaps based on the access status itself, like:

<span class="badge badge-secondary access-status-value open-access">Open Access</span>

then, anyone can custom it as it pleases.

[paulo-graca]

@pilasou @mwoodiupui @tdonohue I've just created this tiny PR to address this:
#2579