From e81161bca5eacc83e92c26e37078785e6cead35c Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Wed, 11 Mar 2020 00:01:56 -0500
Subject: [PATCH] forum: adjust BUR status label colors (again).

* Indicate unread topics in bold instead of with a "NEW" label.
* Use pills for labels.
---
 app/javascript/src/styles/base/040_colors.css | 15 +++++++--------
 app/javascript/src/styles/specific/forum.scss | 19 +++++++++----------
 app/models/forum_topic.rb                     |  4 ++++
 app/views/forum_topics/_listing.html.erb      |  4 ----
 4 files changed, 20 insertions(+), 22 deletions(-)

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 @@
       </span>
     <% end %>
 
-    <% if !topic.is_read? %>
-      <span class="topic-status label new">New</span>
-    <% end %>
-
     <% status = forum_topic_status(topic) %>
     <% if status.present? %>
       <span class="topic-status label <%= status %>"><%= status %></span>