user status color

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

@@ -456,6 +456,22 @@
 		margin-left: -16px;
 
 		border-radius: 50%;
+
+		&--online {
+			background-color: var(--color-success);
+		}
+
+		&--away {
+			background-color: var(--color-alert);
+		}
+
+		&--busy {
+			background-color: var(--color-error);
+		}
+
+		&--offline {
+			background-color: var(--color-gray-medium);
+		}
 	}
 
 	&__picture {

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

@@ -26,27 +26,6 @@ Template.chatRoomItem.helpers({
 			alertClass = 'sidebar-item__link--active';
 		}
 
-		let statusClass = false;
-
-		if (this.t === 'd') {
-			switch (RocketChat.roomTypes.getUserStatus(this.t, this.rid)) {
-				case 'online':
-					statusClass = 'general-success-background';
-					break;
-				case 'away':
-					statusClass = 'general-pending-background';
-					break;
-				case 'busy':
-					statusClass = 'general-error-background';
-					break;
-				case 'offline':
-					statusClass = 'general-inactive-background';
-					break;
-				default:
-					statusClass = 'general-inactive-background';
-			}
-		}
-
 		// Sound notification
 		if (!(FlowRouter.getParam('name') === this.name) && !this.ls && this.alert === true) {
 			KonchatNotification.newRoom(this.rid);
@@ -65,7 +44,7 @@ Template.chatRoomItem.helpers({
 			active,
 			archivedClass,
 			alertClass,
-			statusClass
+			statusClass: this.t === 'd' ? RocketChat.roomTypes.getUserStatus(this.t, this.rid) : false
 		};
 	}
 });

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

@@ -1,9 +1,9 @@
 <template name="sidebarItem">
 	<li class="sidebar-item {{#if active}}sidebar-item--active{{else}}{{#if darken}}sidebar-item--darken{{else}}sidebar-item--lighten{{/if}}{{/if}} {{#if toolbar}}popup-item{{/if}}" data-id="{{_id}}">
+		{{#if statusClass}}
+			<div class="sidebar-item__user-status sidebar-item__user-status--{{statusClass}}"></div>
+		{{/if}}
 		<a class="sidebar-item__link {{alertClass}} {{#if active}}sidebar-item__link--active{{/if}}" href="{{#if route}}{{route}}{{else}}{{pathFor pathSection group=pathGroup}}{{/if}}" title="{{name}}">
-			{{#if statusClass}}
-				<div class="sidebar-item__user-status {{statusClass}}"></div>
-			{{/if}}
 			<div class="sidebar-item__picture">
 				{{#if icon}}
 					<svg class="sidebar-item__icon sidebar-item__icon--{{icon}}">