From a2fb1eec0a92b777b3c52780987dcdc014a2f8a4 Mon Sep 17 00:00:00 2001
From: Ryan Johnson <rjohnson@mozilla.com>
Date: Thu, 8 Aug 2024 12:43:02 -0700
Subject: [PATCH] improve differentiation of read/unread inbox messages

---
 kitsune/messages/jinja2/messages/inbox.html             | 2 +-
 kitsune/sumo/static/sumo/scss/components/_messages.scss | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/kitsune/messages/jinja2/messages/inbox.html b/kitsune/messages/jinja2/messages/inbox.html
index d1d9275ecfe..eac3b085bc1 100644
--- a/kitsune/messages/jinja2/messages/inbox.html
+++ b/kitsune/messages/jinja2/messages/inbox.html
@@ -29,7 +29,7 @@ <h1 class="sumo-page-heading">{{ title }}</h1>
             </li>
             <!-- Repeat the following div for each email message -->
           {% for message in msgs.object_list %}
-            <li class="email-row{% if message.read %} read{% endif %}">
+            <li class="email-row{% if not message.read %} unread{% endif %}">
                 <div class="email-cell check">
                     <input class="field checkbox no-label" type="checkbox" aria-label="Select this message" name="id" value="{{ message.id }}" id="id_checkbox_{{ message.id }}">
                 </div>
diff --git a/kitsune/sumo/static/sumo/scss/components/_messages.scss b/kitsune/sumo/static/sumo/scss/components/_messages.scss
index b25a0e42577..53e780a8c63 100644
--- a/kitsune/sumo/static/sumo/scss/components/_messages.scss
+++ b/kitsune/sumo/static/sumo/scss/components/_messages.scss
@@ -11,6 +11,7 @@
     display: flex;
     width: 100%;
     box-sizing: border-box; // Include padding and border in width calculations
+    background-color: #fff;
 
     .email-cell {
         padding: 8px;
@@ -21,6 +22,7 @@
         text-overflow: ellipsis; // Add ellipsis for overflowing text
         white-space: nowrap; // Prevent text from wrapping
         flex-shrink: 0; // Prevent columns from shrinking
+        font-weight: normal;
 
         &:first-child { width: 5%; } // Checkbox cell
         &:nth-child(2) { width: 10%; } // Avatar cell
@@ -37,11 +39,9 @@
         }
     }
 
-    &.read {
-        background-color: #f9f9f9; // Set white background for the whole row if read
-
+    &.unread {
         .email-cell {
-            background-color: #f9f9f9; // Ensure each cell in a read message also has a white background
+            font-weight: bold; // Differentiate unread messages with a bold font
         }
     }
 }