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

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 {

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;
 

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