UX: update heading style in review queue refresh (#36391)

This inverts the flag header colors so we get clearer separation between
items, and removes the color coding from the flag type. The header is
also now a little shorter which felt right due to the higher contrast.

Before:

<img width="1704" height="1570" alt="image"
src="https://github.com/user-attachments/assets/59159044-26a0-42bb-b5b8-d1407b1ef08a"
/>


After:

<img width="1702" height="1486" alt="image"
src="https://github.com/user-attachments/assets/3bb6fc01-9cfd-494d-9d63-f4e26e2106b7"
/>
This commit is contained in:
Kris
2025-12-02 16:54:00 -05:00
committed by GitHub
parent 150c51aedc
commit bed4079cdb
4 changed files with 40 additions and 120 deletions
@@ -5,28 +5,28 @@ module PageObjects
module Review
class FlagReason < PageObjects::Components::Base
def has_spam_flag_reason?(reviewable, count: 1)
has_flag_reason?(reviewable, css_class: "spam", type: :spam, count:)
has_flag_reason?(reviewable, type: :spam, count:)
end
def has_off_topic_flag_reason?(reviewable, count: 1)
has_flag_reason?(reviewable, css_class: "off-topic", type: :off_topic, count:)
has_flag_reason?(reviewable, type: :off_topic, count:)
end
def has_illegal_flag_reason?(reviewable, count: 1)
has_flag_reason?(reviewable, css_class: "illegal", type: :illegal, count:)
has_flag_reason?(reviewable, type: :illegal, count:)
end
def has_inappropriate_flag_reason?(reviewable, count: 1)
has_flag_reason?(reviewable, css_class: "inappropriate", type: :inappropriate, count:)
has_flag_reason?(reviewable, type: :inappropriate, count:)
end
def has_needs_approval_flag_reason?(reviewable, count: 1)
has_flag_reason?(reviewable, css_class: "needs-approval", type: :needs_approval, count:)
has_flag_reason?(reviewable, type: :needs_approval, count:)
end
private
def has_flag_reason?(reviewable, css_class:, type:, count: 1)
def has_flag_reason?(reviewable, type:, count: 1)
within_reviewable_item(reviewable) do
expected_text =
if count > 1
@@ -36,14 +36,14 @@ module PageObjects
end
within(".review-item__header") do
expect(find(".review-item__flag-reason.--#{css_class}").text.gsub(/\s+/, " ")).to eq(
expected_text,
)
flag_reason_element =
find(".review-item__flag-reason", text: ReviewableScore.type_title(type))
expect(flag_reason_element.text.gsub(/\s+/, " ")).to eq(expected_text)
if count > 1
expect(page).to have_css(".review-item__flag-count.--#{css_class}")
expect(flag_reason_element).to have_css(".review-item__flag-count")
else
expect(page).to have_no_css(".review-item__flag-count.--#{css_class}")
expect(flag_reason_element).to have_no_css(".review-item__flag-count")
end
end
end