From f9199078553d4e5290142942c384f4b5f29519c1 Mon Sep 17 00:00:00 2001
From: Kartik Prajapati <kartikprajapati987@gmail.com>
Date: Tue, 15 Dec 2020 04:29:00 +0530
Subject: [PATCH] Enhance delete button in context menu (#2591)

---
 src/actions/actionDeleteSelected.tsx |  2 +-
 src/components/ContextMenu.scss      | 14 ++++++++++++++
 src/components/ContextMenu.tsx       |  8 ++++++--
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/actions/actionDeleteSelected.tsx b/src/actions/actionDeleteSelected.tsx
index b4404ec83..88e014503 100644
--- a/src/actions/actionDeleteSelected.tsx
+++ b/src/actions/actionDeleteSelected.tsx
@@ -136,7 +136,7 @@ export const actionDeleteSelected = register({
     };
   },
   contextItemLabel: "labels.delete",
-  contextMenuOrder: 3,
+  contextMenuOrder: 999999,
   keyTest: (event) => event.key === KEYS.BACKSPACE || event.key === KEYS.DELETE,
   PanelComponent: ({ elements, appState, updateData }) => (
     <ToolButton
diff --git a/src/components/ContextMenu.scss b/src/components/ContextMenu.scss
index 40d3ce767..046387bee 100644
--- a/src/components/ContextMenu.scss
+++ b/src/components/ContextMenu.scss
@@ -32,6 +32,13 @@
 
     display: grid;
     grid-template-columns: 1fr 0.2fr;
+
+    &.dangerous {
+      div:nth-child(1) {
+        color: $oc-red-7;
+      }
+    }
+
     div:nth-child(1) {
       justify-self: start;
       margin-inline-end: 20px;
@@ -46,6 +53,13 @@
   .context-menu-option:hover {
     color: var(--popup-background-color);
     background-color: var(--select-highlight-color);
+
+    &.dangerous {
+      div:nth-child(1) {
+        color: var(--popup-background-color);
+      }
+      background-color: $oc-red-6;
+    }
   }
 
   .context-menu-option:focus {
diff --git a/src/components/ContextMenu.tsx b/src/components/ContextMenu.tsx
index f0b67552b..71abcf5a8 100644
--- a/src/components/ContextMenu.tsx
+++ b/src/components/ContextMenu.tsx
@@ -26,7 +26,6 @@ const ContextMenu = ({ options, onCloseRequest, top, left }: Props) => {
   const isDarkTheme = !!document
     .querySelector(".excalidraw")
     ?.classList.contains("Appearance_dark");
-
   return (
     <div
       className={clsx("excalidraw", {
@@ -45,7 +44,12 @@ const ContextMenu = ({ options, onCloseRequest, top, left }: Props) => {
         >
           {options.map(({ action, shortcutName, label }, idx) => (
             <li data-testid={shortcutName} key={idx} onClick={onCloseRequest}>
-              <button className="context-menu-option" onClick={action}>
+              <button
+                className={`context-menu-option ${
+                  shortcutName === "delete" ? "dangerous" : ""
+                }`}
+                onClick={action}
+              >
                 <div>{label}</div>
                 <div>
                   {shortcutName