✨ Feat: Colors for contents having status other than Opened

[piRGoif]

Feature description

To ease status identification in the Space Contents view, have a distinctive text color and background color to contents having status different than Opened

How it works

Sample :

With the following CSS classes :

.contentItemDeprecated * {
  color: #9e9e9e !important;
  background-color: #f5f5f5;
  font-style: italic;
}

.contentItemValidated * {
  color: #27c164 !important;
  background-color: #e6f8ed;  
}

.contentItemCancelled * {
  color: #e93147 !important;
  background-color: #fdeaec;  
  font-style: italic;
}

Related PR

No response

[lebouquetin]

distinctive text color

This is generally a bad UI pattern. This is one of many lessons learned reading Erik Kennedy publications.

However, having a colored background may be a nice improvment 👍

Suggested colors should be updated (red for cancelled is inappropriate because red will catch the eye while cancelled is something which should be almost invisible)

[piRGoif]

distinctive text color

This is generally a bad UI pattern. This is one of many lessons learned reading Erik Kennedy publications.

I've added his blog to my rss aggregator O:)

Suggested colors should be updated (red for cancelled is inappropriate because red will catch the eye while cancelled is something which should be almost invisible)

Perfectly right !

Here is a new proposition :

I've updated:

• the cancelled line from red to grey
• fix the colors to have a bigger contrast ratio between text color and bg color (thanks to https://webaim.org/resources/contrastchecker/)

Code :

.contentItemValidated * {
  color: #145C30 !important;
  background-color: #e6f8ed;  
}

.contentItemDeprecated * {
  color: #525252 !important;
  background-color: #f5f5f5;
  font-style: italic;
}

.contentItemCancelled * {
  color: #525252 !important;
  background-color: #FEF7F0;  
  font-style: italic;
}

.FilenameWithBadges__label {
  padding-right: 0.2rem;
}