Merge pull request mozilla#6178 from escattone/improved-distinction-o…

…f-read-unread-messages

improve differentiation of read/unread inbox messages

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>

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
         }
     }
 }