From 6a5d856093bce8fb8b33abedddafeee82f0fcc2f Mon Sep 17 00:00:00 2001
From: Bruno Windels <bruno@windels.cloud>
Date: Fri, 28 May 2021 16:25:23 +0200
Subject: [PATCH] add destructive flag to delete menu option

---
 src/platform/web/ui/css/themes/element/theme.css  | 10 ++--------
 src/platform/web/ui/general/Menu.js               | 15 ++++++++++++++-
 .../ui/session/room/timeline/BaseMessageView.js   |  2 +-
 3 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css
index 93ba036d..9ef124aa 100644
--- a/src/platform/web/ui/css/themes/element/theme.css
+++ b/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 {
diff --git a/src/platform/web/ui/general/Menu.js b/src/platform/web/ui/general/Menu.js
index 10c5f07e..2fed5e2d 100644
--- a/src/platform/web/ui/general/Menu.js
+++ b/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;
+    }
 }
diff --git a/src/platform/web/ui/session/room/timeline/BaseMessageView.js b/src/platform/web/ui/session/room/timeline/BaseMessageView.js
index 5e069dad..b90c89b8 100644
--- a/src/platform/web/ui/session/room/timeline/BaseMessageView.js
+++ b/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;
     }