From 37cc1d0aeb58ffca575e2754f1c0695351076bf4 Mon Sep 17 00:00:00 2001
From: Tim Kinnane <timkinnane@gmail.com>
Date: Thu, 16 Aug 2018 00:08:38 +1000
Subject: [PATCH] [IMPROVE] Role tag UI (#11674)

Role and bot tags are too prominent. When conversations involve lots of sequential messages from bots or users with role tags, the tags make it hard on the eye to track down the message stream. The end effect is a messy view and high cognitive load.

I removed the bot tag from sequential messages entirely and reduced the visual impact of all role tags.

Includes:
- Visual enhancement for less busy tags
- Consolidated styles for role tags
- Use color classes in markup instead of css

Example shows a conversation I'm having with our new buddy Faldo...

Before:
<img width="561" alt="screenshot 2018-08-04 14 52 59" src="https://user-images.githubusercontent.com/1774379/43673494-4ebb4392-9807-11e8-9bc1-ddfc8965569b.png">

After:
<img width="569" alt="screenshot 2018-08-04 16 44 41" src="https://user-images.githubusercontent.com/1774379/43673499-635d75b8-9807-11e8-877d-4a55c723f2bb.png">
---
 .../client/imports/general/base_old.css             | 13 ++++---------
 packages/rocketchat-theme/server/colors.less        |  5 -----
 packages/rocketchat-ui-message/client/message.html  |  4 ++--
 3 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/packages/rocketchat-theme/client/imports/general/base_old.css b/packages/rocketchat-theme/client/imports/general/base_old.css
index f0ad74190e440..c16e287681217 100644
--- a/packages/rocketchat-theme/client/imports/general/base_old.css
+++ b/packages/rocketchat-theme/client/imports/general/base_old.css
@@ -3115,8 +3115,8 @@
 		& .is-bot,
 		& .role-tag {
 			padding: 1px 4px;
-
-			border-radius: 2px;
+			border-radius: 4px;
+			border-width: 1px;
 		}
 	}
 
@@ -3147,7 +3147,8 @@
 			text-align: right;
 
 			& .time,
-			& .role-tag {
+			& .role-tag,
+			& .is-bot {
 				display: none;
 			}
 
@@ -3868,12 +3869,6 @@ body:not(.is-cordova) {
 			font-weight: 300;
 			line-height: 18px;
 		}
-
-		& .role-tag {
-			padding: 1px 4px;
-
-			border-radius: 2px;
-		}
 	}
 
 	& .stats li {
diff --git a/packages/rocketchat-theme/server/colors.less b/packages/rocketchat-theme/server/colors.less
index c7dbbbc6aaec3..50e6f3bca3d53 100755
--- a/packages/rocketchat-theme/server/colors.less
+++ b/packages/rocketchat-theme/server/colors.less
@@ -584,11 +584,6 @@ input:-webkit-autofill {
 		}
 	}
 
-	.is-bot,
-	.role-tag {
-		color: contrast(@info-font-color);
-	}
-
 	a {
 		color: @link-font-color;
 
diff --git a/packages/rocketchat-ui-message/client/message.html b/packages/rocketchat-ui-message/client/message.html
index c5dd433820c24..c7c93aed55752 100644
--- a/packages/rocketchat-ui-message/client/message.html
+++ b/packages/rocketchat-ui-message/client/message.html
@@ -24,10 +24,10 @@
 		<button type="button" class="user user-card-message color-primary-font-color" data-username="{{u.username}}" tabindex="1">{{getName}}{{#if showUsername}} <span class="message-alias border-component-color color-info-font-color">@{{u.username}}</span>{{/if}}</button>
 		<span class="info border-component-color color-info-font-color">
 			{{#each roleTags}}
-				<span class="role-tag background-info-font-color" data-role="{{description}}">{{description}}</span>
+				<span class="role-tag color-secondary-color border-component-color" data-role="{{description}}">{{description}}</span>
 			{{/each}}
 			{{#if isBot}}
-				<span class="is-bot background-info-font-color">BOT</span>
+				<span class="is-bot color-secondary-color border-component-color">Bot</span>
 			{{/if}}
 			<span class="time" title='{{date}} {{time}}'>{{time}}</span>
 			{{#if showTranslated}}