Enhance delete button in context menu (#2591)

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

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 {

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