diff --git a/app/helpers/forum_topics_helper.rb b/app/helpers/forum_topics_helper.rb
index 29296c89c..efdb9e5b0 100644
--- a/app/helpers/forum_topics_helper.rb
+++ b/app/helpers/forum_topics_helper.rb
@@ -18,6 +18,8 @@ module ForumTopicsHelper
:approved
elsif topic.category_name == "Tags" && topic.bulk_update_requests.present? && topic.bulk_update_requests.all?(&:is_rejected?)
:rejected
+ else
+ nil
end
end
diff --git a/app/javascript/src/styles/base/040_colors.css b/app/javascript/src/styles/base/040_colors.css
index 83b141c35..fc1f57fee 100644
--- a/app/javascript/src/styles/base/040_colors.css
+++ b/app/javascript/src/styles/base/040_colors.css
@@ -161,7 +161,7 @@ html {
--forum-vote-down-color: var(--red-5);
--forum-topic-status-new-color: var(--red-4);
- --forum-topic-status-pending-color: var(--azure-5);
+ --forum-topic-status-pending-color: var(--blue-5);
--forum-topic-status-approved-color: var(--green-4);
--forum-topic-status-rejected-color: var(--red-4);
@@ -368,10 +368,10 @@ body[data-current-user-theme="dark"] {
--forum-vote-meh-color: var(--yellow-2);
--forum-vote-down-color: var(--red-4);
- --forum-topic-status-new-color: var(--red-4);
- --forum-topic-status-pending-color: var(--blue-4);
- --forum-topic-status-approved-color: var(--green-4);
- --forum-topic-status-rejected-color: var(--red-4);
+ --forum-topic-status-new-color: var(--red-3);
+ --forum-topic-status-pending-color: var(--azure-3);
+ --forum-topic-status-approved-color: var(--green-3);
+ --forum-topic-status-rejected-color: var(--red-3);
--moderation-report-text-color: var(--red-4);
--moderation-report-background-color: var(--red-9);
diff --git a/app/javascript/src/styles/specific/forum.scss b/app/javascript/src/styles/specific/forum.scss
index ac5f6bc9b..7b3c8ae40 100644
--- a/app/javascript/src/styles/specific/forum.scss
+++ b/app/javascript/src/styles/specific/forum.scss
@@ -8,37 +8,49 @@ div#c-forum-topics {
white-space: nowrap;
}
- .topic-status {
+ a.topic-status {
margin-right: 0.25em;
- vertical-align: bottom;
&.label {
+ display: inline-block;
font-size: 0.7em;
text-transform: uppercase;
- border-radius: 3px;
- padding: 4px;
- color: white;
+ border: 1px solid;
+ border-radius: 0.25rem;
+ background-color: var(--body-background-color);
+ padding: 0.125rem 0.25rem;
+
+ &:hover {
+ color: var(--inverse-text-color);
+ }
}
&.icon {
color: var(--muted-text-color);
- font-size: 1em;
}
&.new {
- background-color: var(--forum-topic-status-new-color);
+ color: var(--forum-topic-status-new-color);
+ border-color: var(--forum-topic-status-new-color);
+ &:hover { background-color: var(--forum-topic-status-new-color); }
}
&.pending {
- background-color: var(--forum-topic-status-pending-color);
+ color: var(--forum-topic-status-pending-color);
+ border-color: var(--forum-topic-status-pending-color);
+ &:hover { background-color: var(--forum-topic-status-pending-color); }
}
&.approved {
- background-color: var(--forum-topic-status-approved-color);
+ color: var(--forum-topic-status-approved-color);
+ border-color: var(--forum-topic-status-approved-color);
+ &:hover { background-color: var(--forum-topic-status-approved-color); }
}
&.rejected {
- background-color: var(--forum-topic-status-rejected-color);
+ color: var(--forum-topic-status-rejected-color);
+ border-color: var(--forum-topic-status-rejected-color);
+ &:hover { background-color: var(--forum-topic-status-rejected-color); }
}
}
diff --git a/app/views/forum_topics/_listing.html.erb b/app/views/forum_topics/_listing.html.erb
index bd04313c1..24976f27e 100644
--- a/app/views/forum_topics/_listing.html.erb
+++ b/app/views/forum_topics/_listing.html.erb
@@ -1,33 +1,23 @@
<%= table_for forum_topics, width: "100%" do |t| %>
<% t.column "Title" do |topic| %>
<% if !topic.is_read? %>
- <%= link_to forum_topics_path(search: { is_read: false }) do %>
- New
- <% end %>
+ <%= link_to "New", forum_topics_path(search: { is_read: false }), class: "topic-status label new" %>
<% end %>
<% if topic.is_sticky? %>
- <%= link_to forum_topics_path(search: { is_sticky: true }) do %>
- <%= sticky_icon(class: "topic-status stickied", title: "Stickied") %>
- <% end %>
+ <%= link_to sticky_icon, forum_topics_path(search: { is_sticky: true }), class: "topic-status icon stickied", title: "Stickied" %>
<% end %>
<% if topic.is_locked? %>
- <%= link_to forum_topics_path(search: { is_locked: true }) do %>
- <%= lock_icon(class: "topic-status locked", title: "Locked") %>
- <% end %>
+ <%= link_to lock_icon, forum_topics_path(search: { is_locked: true }), class: "topic-status icon locked", title: "Locked" %>
<% end %>
<% if topic.is_deleted? %>
- <%= link_to forum_topics_path(search: { is_deleted: true }) do %>
- <%= delete_icon(class: "topic-status deleted", title: "Deleted") %>
- <% end %>
+ <%= link_to delete_icon, forum_topics_path(search: { is_deleted: true }), class: "topic-status icon deleted", title: "Deleted" %>
<% end %>
<% if topic.is_private? %>
- <%= link_to forum_topics_path(search: { is_private: true }) do %>
- <%= private_icon(class: "topic-status private", title: "#{User.level_string(topic.min_level)} only") %>
- <% end %>
+ <%= link_to private_icon, forum_topics_path(search: { is_private: true }), class: "topic-status icon private", title: "#{User.level_string(topic.min_level)} only" %>
<% end %>
<% if forum_topic_status(topic).present? %>
@@ -42,8 +32,8 @@
<% end %>
<% t.column "Status", width: "1%" do |topic| %>
<% status = forum_topic_status(topic) %>
- <%= link_to forum_topics_path(search: { status: status }) do %>
- <%= status %>
+ <% if status.present? %>
+ <%= link_to status, forum_topics_path(search: { status: status }), class: "topic-status label #{status}" %>
<% end %>
<% end %>
<% t.column "Creator", width: "8%" do |topic| %>