Put delete action on another popover group

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);

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 {

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]
 						}
 					]
 				}