From 4ed5011a8f06af260892f09eb63f3e3147c27772 Mon Sep 17 00:00:00 2001
From: Ralph Slooten <axllent@gmail.com>
Date: Sun, 18 May 2025 09:55:29 +1200
Subject: [PATCH] Chore: Tweak UI to improve contrast between read & unread
 messages

---
 .../ui-src/assets/_bootstrap_variables.scss   |  2 ++
 server/ui-src/assets/styles.scss              | 21 ++++++++-----------
 server/ui-src/views/MessageView.vue           |  2 +-
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/server/ui-src/assets/_bootstrap_variables.scss b/server/ui-src/assets/_bootstrap_variables.scss
index 2197cc9..37016a2 100644
--- a/server/ui-src/assets/_bootstrap_variables.scss
+++ b/server/ui-src/assets/_bootstrap_variables.scss
@@ -15,7 +15,9 @@ $font-family-sans-serif:
 
 $link-decoration: none;
 $primary: #2c3e50;
+$secondary: #495057;
 $list-group-disabled-color: #adb5bd;
 $enable-negative-margins: true;
 $body-color-dark: #e7eaed;
 $offcanvas-border-width: 0;
+$body-color: #080808;
diff --git a/server/ui-src/assets/styles.scss b/server/ui-src/assets/styles.scss
index 0688ed7..de15a73 100644
--- a/server/ui-src/assets/styles.scss
+++ b/server/ui-src/assets/styles.scss
@@ -228,27 +228,24 @@
 	}
 }
 
-#message-page {
+#message-page,
+#MessageList {
 	.list-group-item.message:first-child {
 		border-top: 0;
 	}
 
-	.message {
-		.subject {
-			color: $text-muted;
-
-			b {
-				color: $list-group-color;
-			}
-
-			small {
-				opacity: 0.5;
-			}
+	.message:not(.active) {
+		b {
+			color: $list-group-color;
 		}
 
 		&.read {
 			color: $text-muted;
 
+			> div {
+				opacity: 0.5;
+			}
+
 			b {
 				color: $list-group-color;
 			}
diff --git a/server/ui-src/views/MessageView.vue b/server/ui-src/views/MessageView.vue
index c706913..413b905 100644
--- a/server/ui-src/views/MessageView.vue
+++ b/server/ui-src/views/MessageView.vue
@@ -599,7 +599,7 @@ export default {
 					<div class="list-group">
 						<RouterLink v-for="message in messagesList" :to="'/view/' + message.ID" :key="message.ID"
 							:id="message.ID"
-							class="row gx-1 message d-flex small list-group-item list-group-item-action"
+							class="row gx-1 message d-flex small list-group-item list-group-item-action message"
 							:class="message.Read ? 'read' : '', isActive(message.ID) ? 'active' : ''">
 							<div class="col overflow-x-hidden">
 								<div class="text-truncate privacy small">