Chore: Tweak UI to improve contrast between read & unread messages

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;

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

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