From 73f839abe273ce04efb7c54a10d980d2a6cc5905 Mon Sep 17 00:00:00 2001
From: Karl Prieb <karl@prieb.me>
Date: Tue, 26 Sep 2017 13:07:23 -0300
Subject: [PATCH] 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        | 10 +++++++---
 3 files changed, 9 insertions(+), 4 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..de2bf629967 100644
--- a/packages/rocketchat-ui/client/views/app/room.js
+++ b/packages/rocketchat-ui/client/views/app/room.js
@@ -547,22 +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 groups = allItems.reduce((result, value) => (result[value.id === 'delete-message' ? 1 : 0].push(value), result), [[], []]);
 
 		const config = {
 			columns: [
 				{
 					groups: [
 						{
-							items
+							items: groups[0]
+						},
+						{
+							items: groups[1]
 						}
 					]
 				}