From b0c7fd03033696d3d8b839d72248707663ab5302 Mon Sep 17 00:00:00 2001
From: Rodrigo Nascimento <rodrigoknascimento@gmail.com>
Date: Fri, 29 Sep 2017 09:34:59 -0300
Subject: [PATCH] Merge pull request #8315 from
 RocketChat/message-actions-popover

[FIX] Put delete action on another popover group
---
 packages/rocketchat-lib/client/MessageAction.js  |  1 +
 .../client/imports/components/popover.css        |  2 +-
 packages/rocketchat-ui/client/views/app/room.js  | 16 +++++++++-------
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/rocketchat-lib/client/MessageAction.js b/packages/rocketchat-lib/client/MessageAction.js
index e73f3309bee..4a931008a51 100644
--- a/packages/rocketchat-lib/client/MessageAction.js
+++ b/packages/rocketchat-lib/client/MessageAction.js
@@ -173,6 +173,7 @@ Meteor.startup(function() {
 		icon: 'trash',
 		label: 'Delete',
 		context: ['message', 'message-mobile'],
+		color: 'alert',
 		action() {
 			const message = this._arguments[1];
 			chatMessages[Session.get('openedRoom')].confirmDeleteMsg(message);
diff --git a/packages/rocketchat-theme/client/imports/components/popover.css b/packages/rocketchat-theme/client/imports/components/popover.css
index 94fdc55db8b..25de8edb18c 100644
--- a/packages/rocketchat-theme/client/imports/components/popover.css
+++ b/packages/rocketchat-theme/client/imports/components/popover.css
@@ -93,7 +93,7 @@
 		font-size: var(--popover-item-text-size);
 		align-items: center;
 
-		&--error {
+		&--alert {
 			color: var(--color-error);
 
 			& .rc-icon {
diff --git a/packages/rocketchat-ui/client/views/app/room.js b/packages/rocketchat-ui/client/views/app/room.js
index 6e84324a102..3182ecf1122 100644
--- a/packages/rocketchat-ui/client/views/app/room.js
+++ b/packages/rocketchat-ui/client/views/app/room.js
@@ -547,24 +547,26 @@ Template.room.events({
 		}
 
 		const [, message] = this._arguments;
-		const items = RocketChat.MessageAction.getButtons(message, context, 'menu').map(item => {
+		const allItems = RocketChat.MessageAction.getButtons(message, context, 'menu').map(item => {
 			return {
 				icon: item.icon,
 				name: t(item.label),
 				type: 'message-action',
 				id: item.id,
-				modifier: item.id === 'delete-message' ? 'error' : null
+				modifier: item.color
 			};
 		});
+		const [items, deleteItem] = allItems.reduce((result, value) => (result[value.id === 'delete-message' ? 1 : 0].push(value), result), [[], []]);
+		const groups = [{ items }];
+
+		if (deleteItem.length) {
+			groups.push({ items: deleteItem });
+		}
 
 		const config = {
 			columns: [
 				{
-					groups: [
-						{
-							items
-						}
-					]
+					groups
 				}
 			],
 			instance: i,