Low quality / non-constructive comments are not grayed out

[Zhao-Andy]

Describe the bug

Previously, low quality / non-construcitve comments were faded / had grayed out text to signify that they're less visible. I think this was removed by accident, so we can add it back in. This might also be an opportunity to update the design a bit to make it more clear.

To Reproduce

1. Write a comment
2. Refresh the page
3. If you are a trusted user, you should be able to click three dots menu and mark the comment with a thumbs down and vomit reaction
4. Go back to the article and comment's link
5. See that it is marked as low quality / non-constructive

In article's comment's section:

In comment's show page:

[github-actions[bot]]

Thanks for the issue, we will take it into consideration! Our team of engineers is busy working on many types of features, please give us time to get back to you.

Feature requests that require more discussion may be closed. Read more about our feature request process on forem.dev.

To our amazing contributors: issues labeled type: bug are always up for grabs, but for feature requests, please wait until we add a ready for dev before starting to work on it.

To claim an issue to work on, please leave a comment. If you've claimed the issue and need help, please ping @forem/oss. The OSS Community Manager or the engineers on OSS rotation will follow up.

For full info on how to contribute, please check out our contributors guide.

[lisasy]

@lisasy tagging myself to look at this later.

[lisasy]

Hi @Zhao-Andy, here is proposed design for how to improve this — included why this is a user problem that impacts our business. Does this look good? If so, let's do this!

Solution-wise:

1. We use the Crayons component for this notice
2. We update the comment body to base-60
3. We check to see it renders well across all of our themes.

[Zhao-Andy]

This looks great! I'm happy to implement it. cc @pkfrank @michael-tharrington if you two have any thoughts.

[pkfrank]

I don't want to bike-shed too much, but I do think the Red highlighting here might unintentionally draw more attention to the post (which we don't want).

I think the base-60 faded adjustment is great. That grayed out text, along with the message above, might be enough IMO.

[michael-tharrington]

Good point about the red text @pkfrank, I think the grayed out text + messaging would work great.

[Zhao-Andy]

Re: the danger / red notice. If not red, we can go for the warning / yellow notice, or maybe the default notice?

[michael-tharrington]

I think my vote would be the default notice paired with the faded adjustment to the message.

[lisasy]

@Zhao-Andy Warning/yellow would be great :) Thanks for the feedback! @pkfrank

[michael-tharrington]

@lisasy I'm fine if we decided to us the yellow, but to @pkfrank's point doesn't this draw more attention to the comment that we're trying to make less noticeable? I think yellow and red will draw attention whereas grey will not. This is why my vote is for the default.

[lisasy]

@michael-tharrington If you see the problem statement in the mock, here is how it is stated:

When someone looks at a “low-quality” message, it’s not clear to them that this message might be low quality and/or offensive. Because of this, they might think Forem allows low quality content like this to propogate on our platform, when that isn’t the case.

We want to make clear to someone that Forem is positioned to take action on low-quality content like this, and it is appropriately to use the "warning" label here to visually communicate our position. Let's commit to warning (yellow) since we will also have the grayed out text as well.

[michael-tharrington]

@lisasy That makes sense! You're totally right that we don't want our low quality message to be overlooked. Plus thinking about it all more critically now, when we mark something with the overlay it does knock the comment down the list + the author has the ability to hide messages if they want.