Set background color to channels

packages/rocketchat-lib/lib/getAvatarColor.js

@@ -0,0 +1,5 @@
+const colors = ['#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5', '#2196F3', '#03A9F4', '#00BCD4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFC107', '#FF9800', '#FF5722', '#795548', '#9E9E9E', '#607D8B'];
+
+RocketChat.getAvatarColor = function(name) {
+	return colors[name.length % colors.length];
+};

packages/rocketchat-lib/package.js

@@ -53,6 +53,7 @@ Package.onUse(function(api) {
 	api.addFiles('lib/settings.js');
 	api.addFiles('lib/callbacks.js');
 	api.addFiles('lib/fileUploadRestrictions.js');
+	api.addFiles('lib/getAvatarColor.js');
 	api.addFiles('lib/getValidRoomName.js');
 	api.addFiles('lib/placeholders.js');
 	api.addFiles('lib/promises.js');

packages/rocketchat-theme/client/imports/components/sidebar/sidebar-item.css

@@ -13,12 +13,21 @@
 
 	&__picture {
 		flex: 0 0 var(--sidebar-item-big-thumb-size);
+		color: var(--sidebar-item-unread-color);
+		border-radius: var(--sidebar-item-radius);
+
+		width: var(--sidebar-item-big-thumb-size);
+		height: var(--sidebar-item-big-thumb-size);
 	}
 
-	&__icon {
+	&__user-thumb {
 		width: var(--sidebar-item-big-thumb-size);
 		height: var(--sidebar-item-big-thumb-size);
 	}
+
+	&__icon {
+		margin: 0 auto;
+	}
 }
 
 .sidebar-item {

packages/rocketchat-ui-sidenav/client/sidebarItem.html

@@ -5,7 +5,7 @@
 		{{/if}}
 		<a class="sidebar-item__link" href="{{#if route}}{{route}}{{else}}{{pathFor pathSection group=pathGroup}}{{/if}}" title="{{name}}">
 			{{#if icon}}
-				<div class="sidebar-item__picture">
+				<div class="sidebar-item__picture" style="{{colorStyle}}">
 					{{> icon block="sidebar-item__icon" icon=icon}}
 				</div>
 			{{else}}

packages/rocketchat-ui-sidenav/client/sidebarItem.js

@@ -15,6 +15,9 @@ Template.sidebarItem.helpers({
 		}
 
 		return false;
+	},
+	colorStyle() {
+		return `background-color: ${ RocketChat.getAvatarColor(this.name) }`;
 	}
 });
 

server/startup/avatar.js

@@ -55,8 +55,6 @@ Meteor.startup(function() {
 					}
 				}
 
-				const colors = ['#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5', '#2196F3', '#03A9F4', '#00BCD4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFC107', '#FF9800', '#FF5722', '#795548', '#9E9E9E', '#607D8B'];
-
 				if (RocketChat.settings.get('UI_Use_Name_Avatar')) {
 					const user = RocketChat.models.Users.findOneByUsername(username, {
 						fields: {
@@ -76,9 +74,7 @@ Meteor.startup(function() {
 					color = '#000';
 					initials = username;
 				} else {
-					const position = username.length % colors.length;
-
-					color = colors[position];
+					color = RocketChat.getAvatarColor(username);
 					username = username.replace(/[^A-Za-z0-9]/g, '.').replace(/\.+/g, '.').replace(/(^\.)|(\.$)/g, '');
 
 					const usernameParts = username.split('.');