add destructive flag to delete menu option

src/platform/web/ui/css/themes/element/theme.css

@@ -671,14 +671,8 @@ button.link {
     padding: 8px 32px 8px 8px;
 }
 
-.menu button:focus {
-    background-color: #03B381;
-    color: white;
-}
-
-.menu button:hover {
-    background-color: #03B381;
-    color: white;
+.menu .destructive button {
+    color: #FF4B55;
 }
 
 .InviteView_body {

src/platform/web/ui/general/Menu.js

@@ -28,8 +28,15 @@ export class Menu extends TemplateView {
 
     render(t) {
         return t.ul({className: "menu", role: "menu"}, this._options.map(o => {
+            const className = {
+                destructive: o.destructive,
+            };
+            if (o.icon) {
+                className.icon = true;
+                className[o.icon] = true;
+            }
             return t.li({
-                className: o.icon ? `icon ${o.icon}` : "",
+                className,
             }, t.button({onClick: o.callback}, o.label));
         }));
     }
@@ -40,10 +47,16 @@ class MenuOption {
         this.label = label;
         this.callback = callback;
         this.icon = null;
+        this.destructive = false;
     }
 
     setIcon(className) {
         this.icon = className;
         return this;
     }
+
+    setDestructive() {
+        this.destructive = true;
+        return this;
+    }
 }

src/platform/web/ui/session/room/timeline/BaseMessageView.js

@@ -82,7 +82,7 @@ export class BaseMessageView extends TemplateView {
         if (vm.isPending) {
             options.push(Menu.option(vm.i18n`Cancel`, () => vm.abortSending()));
         } else if (vm.shape !== "redacted") {
-            options.push(Menu.option(vm.i18n`Delete`, () => vm.redact()));
+            options.push(Menu.option(vm.i18n`Delete`, () => vm.redact()).setDestructive());
         }
         return options;
     }