From cb0914ec2a15fbc9665d5fea6ff0c7fecb2df538 Mon Sep 17 00:00:00 2001
From: Diego Sampaio <chinello@gmail.com>
Date: Mon, 27 Nov 2017 17:11:58 -0200
Subject: [PATCH] Set background color to channels

---
 packages/rocketchat-lib/lib/getAvatarColor.js         |  5 +++++
 packages/rocketchat-lib/package.js                    |  1 +
 .../imports/components/sidebar/sidebar-item.css       | 11 ++++++++++-
 .../rocketchat-ui-sidenav/client/sidebarItem.html     |  2 +-
 packages/rocketchat-ui-sidenav/client/sidebarItem.js  |  3 +++
 server/startup/avatar.js                              |  6 +-----
 6 files changed, 21 insertions(+), 7 deletions(-)
 create mode 100644 packages/rocketchat-lib/lib/getAvatarColor.js

diff --git a/packages/rocketchat-lib/lib/getAvatarColor.js b/packages/rocketchat-lib/lib/getAvatarColor.js
new file mode 100644
index 00000000000..ccc93b34582
--- /dev/null
+++ b/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];
+};
diff --git a/packages/rocketchat-lib/package.js b/packages/rocketchat-lib/package.js
index 442f7231ced..7af9029ea14 100644
--- a/packages/rocketchat-lib/package.js
+++ b/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');
diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-item.css b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-item.css
index 0cb6a3317da..011353d6c8a 100644
--- a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-item.css
+++ b/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 {
diff --git a/packages/rocketchat-ui-sidenav/client/sidebarItem.html b/packages/rocketchat-ui-sidenav/client/sidebarItem.html
index 80b6c64b10c..4bb8794d98f 100644
--- a/packages/rocketchat-ui-sidenav/client/sidebarItem.html
+++ b/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}}
diff --git a/packages/rocketchat-ui-sidenav/client/sidebarItem.js b/packages/rocketchat-ui-sidenav/client/sidebarItem.js
index f6a8ccc42da..2701d131ab4 100644
--- a/packages/rocketchat-ui-sidenav/client/sidebarItem.js
+++ b/packages/rocketchat-ui-sidenav/client/sidebarItem.js
@@ -15,6 +15,9 @@ Template.sidebarItem.helpers({
 		}
 
 		return false;
+	},
+	colorStyle() {
+		return `background-color: ${ RocketChat.getAvatarColor(this.name) }`;
 	}
 });
 
diff --git a/server/startup/avatar.js b/server/startup/avatar.js
index 565aee7b6c7..0109c70945c 100644
--- a/server/startup/avatar.js
+++ b/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('.');