Repository: thunderbird/thunderbird-android (language: kotlin)

Issue:
Message list appearance
Right now the message list looks very dated. To move to a more modern look I suggest the following changes:

- [x] For unread messages display subject, sender (and possibly the date) in bold. See #4189
- [x] Don't change the background color for unread messages by default, i.e. make 'General settings > Display > Change colour when read' unchecked by default. See #4128
- [x] Align text (subject, sender, preview) with folder name in the toolbar. See #4177
- [x] Tweak icon to star a message. See #4124
- [x] Remove colored bar at the left that indicates which account a message belongs to. In list views where we mix messages from different accounts we probably still want to show some kind of indicator. See #4177 (change account chip), #4181 (hide chip)
- [x] Increase font size of subject line. See #4116
- [x] Reduce the font size of placeholder contact images a little bit. See #4123
- [x] Use material design colors for contact image placeholders. See #4162 

Experimental things (don't implement before all of the above is done):
- [x] Use more vertical padding for the message list items.
- [ ] ~~Use an outline for the box around the number of messages in a thread to make it less pronounced.~~
- [x] For read messages use preview text color for subject and sender. That way unread messages stand out even more.
- [x] Experiment with list item divider options: full line, shortened line (see #1859), no line
- [x] Use color for starred messages (see #5512)
- [ ] Experiment with using Roboto Thin as font

If you want to help out with the implementation, please create a pull request that only deals with **one** item from this list. It's much easier to iterate on a pull request if there's only one change at a time.
improve the visibility of unread messages when using dark theme
### Checklist

- [X] I have used the search function to see if someone else has already submitted the same feature request.
- [X] I will describe the problem with as much detail as possible.
- [X] This issue only contains a request for one single feature, **not** multiple (related) features.

### App version

6.400

### Problem you are trying to solve

The visibility and identification of unread messages using the dark theme is difficult, so I suggest to improve it perhaps by changing the color of read messages to gray

Here is a screenshot to demonstrate - this was taken on a OnePlus 6

Congratulations for the The team for this awesome app!

![Screenshot_20230221-075643](https://user-images.githubusercontent.com/86367839/220326341-0be605ac-597c-48c7-9535-3270b8f13e48.jpg)


### Suggested solution

Change the color of read messages to gray - here is a screenshot of the nine app which seems to be doing that

![Screenshot_20230221-080208](https://user-images.githubusercontent.com/86367839/220327661-c919457e-90a0-4f2e-8579-116d17da6ca7.jpg)


### Screenshots / Drawings / Technical details

_No response_


Discussion hints:
Could I also suggest
[ ] Use pastel colours for placeholder contact images
[ ] Shorten grey line between successive messages
to attempt more parity with #1859 (which I presume is the design brief we are heading towards).  

In this vein, I don't think that making the sender and subject preview text colour will be useful.  It will blur the distinction between the subject and the content (in fact it will make it ambiguous as they are just separated by a space) and I feel that if done correctly, bold should be more than enough to show which emails are read and which not.
> [ ] Use pastel colours for placeholder contact images

I'd like us to use more material-y colors. But I find the ones from #1859 are too light.

> [ ] Shorten grey line between successive messages

I haven't yet made up my mind on what the list item divider should look like. Full line, shortened line, and no line at all are all options I think could work. I'll experiment with all these options once the other items have been implemented.

> In this vein, I don't think that making the sender and subject preview text colour will be useful. It will blur the distinction between the subject and the content (in fact it will make it ambiguous as they are just separated by a space) and I feel that if done correctly, bold should be more than enough to show which emails are read and which not.

Good point about the border between sender (or subject, depending on settings) and the message content being blurred. Using a dash as divider (like the concept design in #1859) might be a good idea.
I suggested using the same text color because I find it works really well in Gmail.  I'm not set on this approach. So this should probably go into the "experiment" bucket. I've updated the first post.
> I'd like us to use more material-y colors. But I find the ones from #1859 are too light.

@cketti What shade of the colors do you prefer? In my opinion, 500 is too "strong". I like 300 or 700 more. 

<img width="400" src="https://user-images.githubusercontent.com/5811634/61999577-b9df2b80-b0c4-11e9-8c7f-6006e962daa2.jpg" />

@ByteHamster: It probably depends on the color. Yellow 300 or Grey 300 feel too light. We probably also want different shades depending on the theme. Maybe start with 400 for the light theme? 
You could open a new issue where you post screenshots showing different options. That's probably easier than trying to pick suitable colors from a color matrix.
> Remove colored bar at the left that indicates which account a message belongs to. In list views where we mix messages from different accounts we probably still want to show some kind of indicator. Suggestions on how to do this without such a bar on the left are very welcome.

Spark has a nice solution to this that should be familiar to the users of k9. 
They use a colored bar in the first line of the message view. First line consist of label icon (mostly autoassigned via ML I presume), colored bar (if in multiinbox), email sender. Seems like this language should feel right at home in k9
> Spark has a nice solution to this that should be familiar to the users of k9.
> They use a colored bar in the first line of the message view. First line consist of label icon (mostly autoassigned via ML I presume), colored bar (if in multiinbox), email sender. Seems like this language should feel right at home in k9

Sounds interesting. Can you post a screenshot?
![image](https://user-images.githubusercontent.com/1051410/62879718-12046780-bd2c-11e9-95e4-a734d7ad0eb4.png)

Message details in turn have no account indicator. Which makes sense since they already show the recipient.
I'm definitely in the camp that _**does not**_ like the reduced color when viewing messages now. It's changed from a thicker bar to a thin, vertical line of pixels. 

When you've got a dozen different mail accounts in Unified Inbox, it's nearly impossible to tell which messages came into which account anymore. In previous versions, it was very clear. Now it's a lot more difficult, and there doesn't appear to be a way to fix/change/influence it. 

Can we please make this configurable, or revert to the previous behavior? This new look is a _lot_  worse for usability. 
I would like to suggest to romove the horizontal divider line between each message.


Pull request: Tweak message list design (2)
- Make sure there's space between subject and date
- Add en dash to separate sender name and preview text
- Use different text colors for read and unread messages
- Display date in same style as subject

|Before|After|
|-|-|
|![image](https://user-images.githubusercontent.com/218061/220365973-bbda6a4e-7076-4ff6-98e4-521c43e71848.png)|![image](https://user-images.githubusercontent.com/218061/220430554-89f5ae8d-cb91-4d73-b0a9-852cd0fbf88b.png)|
|![image](https://user-images.githubusercontent.com/218061/220365864-304c15d2-fea1-484c-b6cb-5763854e4fd6.png)|![image](https://user-images.githubusercontent.com/218061/220430597-c09d7fba-e7fe-4951-803a-deb66e08d19d.png)|

Closes #4110
Closes #6692

Test command: ./gradlew :app:ui:legacy:testDebugUnitTest --tests "com.fsck.k9.ui.messagelist.MessageListAdapterTest"

Fix patch:
diff --git a/app/ui/legacy/src/main/java/com/fsck/k9/ui/messagelist/MessageListAdapter.kt b/app/ui/legacy/src/main/java/com/fsck/k9/ui/messagelist/MessageListAdapter.kt
index 50166b3af4d..687e6d3435a 100644
--- a/app/ui/legacy/src/main/java/com/fsck/k9/ui/messagelist/MessageListAdapter.kt
+++ b/app/ui/legacy/src/main/java/com/fsck/k9/ui/messagelist/MessageListAdapter.kt
@@ -49,6 +49,8 @@ class MessageListAdapter internal constructor(
     private val forwardedIcon: Drawable = theme.resolveDrawableAttribute(R.attr.messageListForwarded)
     private val answeredIcon: Drawable = theme.resolveDrawableAttribute(R.attr.messageListAnswered)
     private val forwardedAnsweredIcon: Drawable = theme.resolveDrawableAttribute(R.attr.messageListAnsweredForwarded)
+    private val unreadTextColor: Int = theme.resolveColorAttribute(R.attr.messageListUnreadTextColor)
+    private val readTextColor: Int = theme.resolveColorAttribute(R.attr.messageListReadTextColor)
     private val previewTextColor: Int = theme.resolveColorAttribute(R.attr.messageListPreviewTextColor)
     private val activeItemBackgroundColor: Int = theme.resolveColorAttribute(
         colorAttrId = R.attr.messageListActiveItemBackgroundColor,
@@ -321,6 +323,7 @@ class MessageListAdapter internal constructor(
         }
 
         with(messageListItem) {
+            val textColor = if (isRead) readTextColor else unreadTextColor
             val maybeBoldTypeface = if (isRead) Typeface.NORMAL else Typeface.BOLD
             val displayDate = relativeDateTimeFormatter.formatDate(messageDate)
             val displayThreadCount = if (appearance.showingThreadedList) threadCount else 0
@@ -343,19 +346,25 @@ class MessageListAdapter internal constructor(
             val messageStringBuilder = SpannableStringBuilder(beforePreviewText)
             if (appearance.previewLines > 0) {
                 val preview = getPreview(isMessageEncrypted, previewText)
-                messageStringBuilder.append(" ").append(preview)
+                if (preview.isNotEmpty()) {
+                    messageStringBuilder.append(" – ").append(preview)
+                }
             }
+            holder.preview.setTextColor(textColor)
             holder.preview.setText(messageStringBuilder, TextView.BufferType.SPANNABLE)
 
             formatPreviewText(holder.preview, beforePreviewText, isRead)
 
             holder.subject.typeface = Typeface.create(holder.subject.typeface, maybeBoldTypeface)
+            holder.subject.setTextColor(textColor)
             if (appearance.senderAboveSubject) {
                 holder.subject.text = displayName
             } else {
                 holder.subject.text = subject
             }
 
+            holder.date.typeface = Typeface.create(holder.date.typeface, maybeBoldTypeface)
+            holder.date.setTextColor(textColor)
             holder.date.text = displayDate
             holder.attachment.isVisible = hasAttachments
 
diff --git a/app/ui/legacy/src/main/res/layout/message_list_item.xml b/app/ui/legacy/src/main/res/layout/message_list_item.xml
index caf633f2ed8..b309f88ee4a 100644
--- a/app/ui/legacy/src/main/res/layout/message_list_item.xml
+++ b/app/ui/legacy/src/main/res/layout/message_list_item.xml
@@ -46,14 +46,14 @@
         android:bufferType="spannable"
         android:singleLine="false"
         android:textAppearance="@style/TextAppearance.K9.Small"
-        android:textColor="?android:attr/textColorPrimary"
         app:layout_constraintBottom_toBottomOf="@+id/divider"
         app:layout_constraintEnd_toStartOf="@+id/star"
         app:layout_constraintStart_toEndOf="@+id/barrier_start"
         app:layout_constraintTop_toTopOf="@+id/barrier_first_line_bottom"
         app:layout_constraintVertical_bias="0.0"
         app:layout_goneMarginEnd="16dp"
-        tools:text="Message preview" />
+        tools:text="Message preview"
+        tools:textColor="?attr/messageListPreviewTextColor" />
 
     <com.fsck.k9.ui.messagelist.AccountChip
         android:id="@+id/account_color_chip"
@@ -77,23 +77,24 @@
         android:id="@+id/subject"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:ellipsize="marquee"
+        android:layout_marginEnd="6dp"
+        android:ellipsize="end"
         android:singleLine="true"
         android:textAppearance="@style/TextAppearance.K9.MediumSmall"
-        android:textColor="?android:attr/textColorPrimary"
         app:layout_constrainedWidth="true"
         app:layout_constraintEnd_toStartOf="@+id/thread_count"
         app:layout_constraintHorizontal_bias="0.0"
         app:layout_constraintHorizontal_chainStyle="packed"
         app:layout_constraintStart_toEndOf="@+id/status"
         app:layout_constraintTop_toTopOf="@+id/top_guideline"
-        tools:text="Subject" />
+        tools:text="Subject"
+        tools:textColor="?attr/messageListReadTextColor" />
 
     <TextView
         android:id="@+id/thread_count"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_marginStart="6dp"
+        android:layout_marginEnd="4dp"
         android:focusable="false"
         android:textAppearance="@style/TextAppearance.K9.Small"
         android:textColor="?attr/messageListThreadCountTextColor"
diff --git a/app/ui/legacy/src/main/res/values/attrs.xml b/app/ui/legacy/src/main/res/values/attrs.xml
index bf23108a9ac..c5c4fba4aff 100644
--- a/app/ui/legacy/src/main/res/values/attrs.xml
+++ b/app/ui/legacy/src/main/res/values/attrs.xml
@@ -79,6 +79,8 @@
         <attr name="messageListActiveItemBackgroundColor" format="reference|color"/>
         <attr name="messageListActiveItemBackgroundAlphaFraction" format="fraction"/>
         <attr name="messageListActiveItemBackgroundAlphaBackground" format="reference|color"/>
+        <attr name="messageListUnreadTextColor" format="reference|color"/>
+        <attr name="messageListReadTextColor" format="reference|color"/>
         <attr name="messageListPreviewTextColor" format="reference|color"/>
         <attr name="messageListDividerColor" format="reference|color"/>
         <attr name="messageListStateIconTint" format="reference|color"/>
diff --git a/app/ui/legacy/src/main/res/values/themes.xml b/app/ui/legacy/src/main/res/values/themes.xml
index cfdcba3469b..13f33fae7e9 100644
--- a/app/ui/legacy/src/main/res/values/themes.xml
+++ b/app/ui/legacy/src/main/res/values/themes.xml
@@ -101,7 +101,9 @@
         <item name="messageListActiveItemBackgroundColor">?attr/colorSecondaryVariant</item>
         <item name="messageListActiveItemBackgroundAlphaFraction">60%</item>
         <item name="messageListActiveItemBackgroundAlphaBackground">?attr/colorSurface</item>
-        <item name="messageListPreviewTextColor">#ff696969</item>
+        <item name="messageListUnreadTextColor">#dd000000</item>
+        <item name="messageListReadTextColor">#ff444444</item>
+        <item name="messageListPreviewTextColor">#ff444444</item>
         <item name="messageListDividerColor">#ffcccccc</item>
         <item name="messageListStateIconTint">#bbbbbb</item>
         <item name="messageListAttachment">@drawable/ic_messagelist_attachment</item>
@@ -262,7 +264,9 @@
         <item name="messageListActiveItemBackgroundColor">?attr/colorSecondaryVariant</item>
         <item name="messageListActiveItemBackgroundAlphaFraction">50%</item>
         <item name="messageListActiveItemBackgroundAlphaBackground">?attr/colorSurface</item>
-        <item name="messageListPreviewTextColor">#ffa0a0a0</item>
+        <item name="messageListUnreadTextColor">#ffffffff</item>
+        <item name="messageListReadTextColor">#ffaaaaaa</item>
+        <item name="messageListPreviewTextColor">#ffaaaaaa</item>
         <item name="messageListDividerColor">#ff333333</item>
         <item name="messageListStateIconTint">#777777</item>
         <item name="messageListAttachment">@drawable/ic_messagelist_attachment</item>


Test patch:
diff --git a/app/ui/legacy/src/test/java/com/fsck/k9/ui/messagelist/MessageListAdapterTest.kt b/app/ui/legacy/src/test/java/com/fsck/k9/ui/messagelist/MessageListAdapterTest.kt
index 1d4f9f810ea..d3ed1221a4c 100644
--- a/app/ui/legacy/src/test/java/com/fsck/k9/ui/messagelist/MessageListAdapterTest.kt
+++ b/app/ui/legacy/src/test/java/com/fsck/k9/ui/messagelist/MessageListAdapterTest.kt
@@ -472,7 +472,7 @@ class MessageListAdapterTest : RobolectricTest() {
         return holder.itemView
     }
 
-    fun secondLine(senderOrSubject: String, preview: String) = "$senderOrSubject $preview"
+    fun secondLine(senderOrSubject: String, preview: String) = "$senderOrSubject – $preview"
 
     val View.accountChipView: View get() = findViewById(R.id.account_color_chip)
     val View.starView: View get() = findViewById(R.id.star)