From bd2debb39cac4eaed236f52fcbb956ed6d80fe4a Mon Sep 17 00:00:00 2001
From: Nico Alt <nicoalt@posteo.org>
Date: Wed, 9 Sep 2020 14:02:44 +0200
Subject: [PATCH] Use different colors for usernames in messages

Related to #53. This already improves UX a lot, but I still think we
should omit the username if it doesn't change between messages. Thinking
about it, we could even omit the time if it doesn't change.

The color used is Briar's primary "Lime" color, as per
* https://briar-styleguide.netlify.app/brand/
* https://code.briarproject.org/briar/briar-styleguide/-/blob/2e8fa50a2628ce685ad2a3c88337388b29f496ba/layouts/partials/brand/colors.html#L15
---
 briar-gtk/briar_gtk/widgets/private_message.py | 9 ++++++---
 briar-gtk/data/ui/application.css              | 8 +++++++-
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/briar-gtk/briar_gtk/widgets/private_message.py b/briar-gtk/briar_gtk/widgets/private_message.py
index f995101..9563fc0 100644
--- a/briar-gtk/briar_gtk/widgets/private_message.py
+++ b/briar-gtk/briar_gtk/widgets/private_message.py
@@ -22,10 +22,13 @@ class PrivateMessageWidget(Gtk.ListBoxRow):
         self.set_margin_top(12)
 
         username = contact_name
+        username_style_class = "username"
         if message["local"]:
             username = _("Myself")
+            username_style_class = "username-self"
 
-        username_info = PrivateMessageWidget._create_username_info(username)
+        username_info = PrivateMessageWidget._create_username_info(
+            username, username_style_class)
         date_info = PrivateMessageWidget._create_date_info(
             message["timestamp"] / 1000)
         info = PrivateMessageWidget._create_info(username_info, date_info)
@@ -44,11 +47,11 @@ class PrivateMessageWidget(Gtk.ListBoxRow):
         self.show_all()
 
     @staticmethod
-    def _create_username_info(username):
+    def _create_username_info(username, username_style_class):
         username_label = Gtk.Label.new(username)
         username_label.set_justify(Gtk.Justification.LEFT)
         username_label.set_halign(Gtk.Align.START)
-        username_label.get_style_context().add_class("username")
+        username_label.get_style_context().add_class(username_style_class)
 
         username_event_box = Gtk.EventBox()
         username_event_box.add(username_label)
diff --git a/briar-gtk/data/ui/application.css b/briar-gtk/data/ui/application.css
index bbcfcb6..fc3c7b3 100644
--- a/briar-gtk/data/ui/application.css
+++ b/briar-gtk/data/ui/application.css
@@ -61,12 +61,18 @@
   opacity: 0.5;
 }
 
+row .username-self {
+  font-weight: bold;
+  font-size: small;
+  color: @theme_selected_bg_color;
+}
+
 row .username {
   font-weight: bold;
   font-size: small;
+  color: #74B816;
 }
 
-row .username,
 row.msg-emote,
 .divider {
   color: @theme_selected_bg_color;
-- 
GitLab