diff --git a/app/javascript/src/styles/base/040_colors.css b/app/javascript/src/styles/base/040_colors.css
index 223f15211..128496624 100644
--- a/app/javascript/src/styles/base/040_colors.css
+++ b/app/javascript/src/styles/base/040_colors.css
@@ -61,10 +61,9 @@
--forum-vote-up-color: green;
--forum-vote-meh-color: goldenrod;
--forum-vote-down-color: red;
- --forum-topic-status-new-color: red;
- --forum-topic-status-pending-color: darkorange;
- --forum-topic-status-approved-color: green;
- --forum-topic-status-rejected-color: red;
+ --forum-topic-status-pending-color: hsla(210, 25%, 55%, 1);
+ --forum-topic-status-approved-color: hsla(120, 25%, 55%, 1);
+ --forum-topic-status-rejected-color: hsla(0, 25%, 55%, 1);
--moderation-report-text-color: red;
--moderation-report-border: 2px solid red;
@@ -233,6 +232,7 @@ body[data-current-user-theme="dark"] {
--aqua-1: #4aada3; /* hsluv(180, 80, 65); */
--aqua-2: #57cabe; /* hsluv(180, 80, 75); */
--blue-0: #2c3d51; /* hsluv(245, 50, 25); */
+ --blue-3: #356ea1; /* hsluv(245, 80, 45); */
--blue-1: #51a3ec; /* hsluv(245, 80, 65); */
--blue-2: #8fbcf1; /* hsluv(245, 80, 75); */
--indigo-0: #323573; /* hsluv(265, 50, 25); */
@@ -327,10 +327,9 @@ body[data-current-user-theme="dark"] {
--forum-vote-up-color: var(--green-1);
--forum-vote-meh-color: var(--yellow-1);
--forum-vote-down-color: var(--red-1);
- --forum-topic-status-new-color: var(--red-1);
- --forum-topic-status-pending-color: var(--yellow-1);
- --forum-topic-status-approved-color: var(--green-1);
- --forum-topic-status-rejected-color: var(--red-1);
+ --forum-topic-status-pending-color: var(--blue-3);
+ --forum-topic-status-approved-color: var(--green-3);
+ --forum-topic-status-rejected-color: var(--red-3);
--moderation-report-text-color: var(--red-1);
--moderation-report-border: 2px solid var(--red-1);
diff --git a/app/javascript/src/styles/specific/forum.scss b/app/javascript/src/styles/specific/forum.scss
index 9a5eafad9..7aa2fe872 100644
--- a/app/javascript/src/styles/specific/forum.scss
+++ b/app/javascript/src/styles/specific/forum.scss
@@ -45,8 +45,11 @@ div#c-forum-topics {
vertical-align: bottom;
&.label {
- font-size: 0.8em;
+ font-size: 0.7em;
text-transform: uppercase;
+ border-radius: 3px;
+ padding: 3px;
+ color: white;
}
&.icon {
@@ -54,26 +57,22 @@ div#c-forum-topics {
font-size: 1em;
}
- &.new {
- color: var(--forum-topic-status-new-color);
- }
-
&.pending {
- color: var(--forum-topic-status-pending-color);
+ background-color: var(--forum-topic-status-pending-color);
}
&.approved {
- color: var(--forum-topic-status-approved-color);
+ background-color: var(--forum-topic-status-approved-color);
}
&.rejected {
- color: var(--forum-topic-status-rejected-color);
+ background-color: var(--forum-topic-status-rejected-color);
}
}
#a-index {
- td {
- line-height: 1.5em;
+ tr[data-is-read="false"] .forum-post-link {
+ font-weight: bold;
}
.updated-at-column {
diff --git a/app/models/forum_topic.rb b/app/models/forum_topic.rb
index 4e14ba1ed..1ecaeaeaa 100644
--- a/app/models/forum_topic.rb
+++ b/app/models/forum_topic.rb
@@ -167,6 +167,10 @@ class ForumTopic < ApplicationRecord
title.gsub(/\A\[APPROVED\]|\[REJECTED\]/, "")
end
+ def html_data_attributes
+ super + [:is_read?]
+ end
+
def self.available_includes
[:creator, :updater, :original_post]
end
diff --git a/app/views/forum_topics/_listing.html.erb b/app/views/forum_topics/_listing.html.erb
index d098794bd..089bd52ff 100644
--- a/app/views/forum_topics/_listing.html.erb
+++ b/app/views/forum_topics/_listing.html.erb
@@ -24,10 +24,6 @@
<% end %>
- <% if !topic.is_read? %>
- New
- <% end %>
-
<% status = forum_topic_status(topic) %>
<% if status.present? %>
<%= status %>