feat: Differentiate features available only for moderators

[deveshidwivedi]

What

Added visual signals to distinguish features exclusive to moderators. This helps prevent confusion and also makes it easier to spot specific functionalities.

Screenshot

Related issue(s) and discussion

• Fixes UI: identify features that are only available for moderators #6758

[stephanegigandet]

Thanks for the PR @deveshidwivedi ! For PRs that change the website, it's a good idea to add a screenshot that show the results of the changes, so that people can see them without having to test your code locally.

In the issue @CharlesNepote said "We should visually identify features that are only available for moderators.", but there wasn't any details on how to do this visual differenciation.

With your PR there is a differenciation, but there is no way for users to understand what this visual differenciation is about. I think we should make it more clear, with some text "Moderator feature" maybe.

[teolemon]

@stephanegigandet We could use the shield/police material symbols, and also have a distinctive color, like "traffic light orange" or "construction yellow"

[alexfauquette]

And the shield could have a tooltip explaining why it is here

[deveshidwivedi]

@stephanegigandet I have tried to incorporate the above suggestions but am unable to view the edit page as an admin. I have implemented the css on another element to check if it works before committing. Could you please help me resolve this issue so that I could add the screenshot for everyone to view?

[hangy]

@stephanegigandet I have tried to incorporate the above suggestions but am unable to view the edit page as an admin. I have implemented the css on another element to check if it works before committing. Could you please help me resolve this issue so that I could add the screenshot for everyone to view?

Make yourself a moderator, see #9684 (comment)

[deveshidwivedi]

Thank you! @hangy

[deveshidwivedi]

Hello everyone! Could you please give feedback on the recent updates based on the suggestions:

On hovering(specific element):

@stephanegigandet @alexfauquette @teolemon @hangy @alexgarel
Thanks!

[stephanegigandet]

. I have implemented the css on another element to check if it works before committing.

Hi @deveshidwivedi , thanks for adding the shield. It looks a bit weird on some of the elements:

The first one looks good I think, but on the checkbox and on the "manage images" dropdown, we don't have the yellow color and the shield position could be improved I think.

Have you been able to make yourself an admin and moderator?

[deveshidwivedi]

@stephanegigandet I was able to make myself the moderator and hence tested and updated the styling. Could you please take a look at the recent changes?

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 49.58%. Comparing base (dc04d18) to head (465dc64).
Report is 200 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #10037      +/-   ##
==========================================
+ Coverage   49.54%   49.58%   +0.03%     
==========================================
  Files          67       70       +3     
  Lines       20650    20933     +283     
  Branches     4980     5019      +39     
==========================================
+ Hits        10231    10379     +148     
- Misses       9131     9264     +133     
- Partials     1288     1290       +2     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[stephanegigandet]

It looks good to me, thank you!