Add danger background to dangerous menu items on hover (#3148)

closes #3105

app/components/ContextMenu/MenuItem.tsx

@@ -11,6 +11,7 @@ type Props = {
   children?: React.ReactNode;
   selected?: boolean;
   disabled?: boolean;
+  dangerous?: boolean;
   to?: string;
   href?: string;
   target?: "_blank";
@@ -92,7 +93,11 @@ const Spacer = styled.svg`
   flex-shrink: 0;
 `;
 
-export const MenuAnchorCSS = css<{ level?: number; disabled?: boolean }>`
+export const MenuAnchorCSS = css<{
+  level?: number;
+  disabled?: boolean;
+  dangerous?: boolean;
+}>`
   display: flex;
   margin: 0;
   border: 0;
@@ -128,7 +133,7 @@ export const MenuAnchorCSS = css<{ level?: number; disabled?: boolean }>`
   &:focus,
   &.focus-visible {
     color: ${props.theme.white};
-    background: ${props.theme.primary};
+    background: ${props.dangerous ? props.theme.danger : props.theme.primary};
     box-shadow: none;
     cursor: pointer;
 

app/components/ContextMenu/Template.tsx

@@ -163,6 +163,7 @@ function Template({ items, actions, context, ...menu }: Props) {
               onClick={item.onClick}
               disabled={item.disabled}
               selected={item.selected}
+              dangerous={item.dangerous}
               key={index}
               icon={item.icon}
               {...menu}

app/menus/CollectionGroupMemberMenu.tsx

@@ -34,6 +34,7 @@ function CollectionGroupMemberMenu({ onMembers, onRemove }: Props) {
             {
               type: "button",
               title: t("Remove"),
+              dangerous: true,
               onClick: onRemove,
             },
           ]}

app/menus/CollectionMenu.tsx

@@ -171,6 +171,7 @@ function CollectionMenu({
       {
         type: "button",
         title: `${t("Delete")}…`,
+        dangerous: true,
         visible: !!(collection && can.delete),
         onClick: () => setShowCollectionDelete(true),
         icon: <TrashIcon />,

app/menus/DocumentMenu.tsx

@@ -385,9 +385,17 @@ function DocumentMenu({
               visible: !!can.archive,
               icon: <ArchiveIcon />,
             },
+            {
+              type: "button",
+              title: `${t("Move")}…`,
+              onClick: () => setShowMoveModal(true),
+              visible: !!can.move,
+              icon: <MoveIcon />,
+            },
             {
               type: "button",
               title: `${t("Delete")}…`,
+              dangerous: true,
               onClick: () => setShowDeleteModal(true),
               visible: !!can.delete,
               icon: <TrashIcon />,
@@ -395,17 +403,11 @@ function DocumentMenu({
             {
               type: "button",
               title: `${t("Permanently delete")}…`,
+              dangerous: true,
               onClick: () => setShowPermanentDeleteModal(true),
               visible: can.permanentDelete,
               icon: <CrossIcon />,
             },
-            {
-              type: "button",
-              title: `${t("Move")}…`,
-              onClick: () => setShowMoveModal(true),
-              visible: !!can.move,
-              icon: <MoveIcon />,
-            },
             {
               type: "button",
               title: t("Enable embeds"),

app/menus/FileOperationMenu.tsx

@@ -1,3 +1,4 @@
+import { DownloadIcon, TrashIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useMenuState } from "reakit/Menu";
@@ -26,6 +27,7 @@ function FileOperationMenu({ id, onDelete }: Props) {
             {
               type: "link",
               title: t("Download"),
+              icon: <DownloadIcon />,
               href: "/api/fileOperations.redirect?id=" + id,
             },
             {
@@ -34,6 +36,8 @@ function FileOperationMenu({ id, onDelete }: Props) {
             {
               type: "button",
               title: t("Delete"),
+              icon: <TrashIcon />,
+              dangerous: true,
               onClick: onDelete,
             },
           ]}

app/menus/GroupMemberMenu.tsx

@@ -24,6 +24,7 @@ function GroupMemberMenu({ onRemove }: Props) {
           items={[
             {
               type: "button",
+              dangerous: true,
               title: t("Remove"),
               onClick: onRemove,
             },

app/menus/GroupMenu.tsx

@@ -1,4 +1,5 @@
 import { observer } from "mobx-react";
+import { EditIcon, GroupIcon, TrashIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useMenuState } from "reakit/Menu";
@@ -50,6 +51,7 @@ function GroupMenu({ group, onMembers }: Props) {
             {
               type: "button",
               title: `${t("Members")}…`,
+              icon: <GroupIcon />,
               onClick: onMembers,
               visible: !!(group && can.read),
             },
@@ -59,12 +61,15 @@ function GroupMenu({ group, onMembers }: Props) {
             {
               type: "button",
               title: `${t("Edit")}…`,
+              icon: <EditIcon />,
               onClick: () => setEditModalOpen(true),
               visible: !!(group && can.update),
             },
             {
               type: "button",
               title: `${t("Delete")}…`,
+              icon: <TrashIcon />,
+              dangerous: true,
               onClick: () => setDeleteModalOpen(true),
               visible: !!(group && can.delete),
             },

app/menus/MemberMenu.tsx

@@ -24,6 +24,7 @@ function MemberMenu({ onRemove }: Props) {
             {
               type: "button",
               title: t("Remove"),
+              dangerous: true,
               onClick: onRemove,
             },
           ]}

app/menus/ShareMenu.tsx

@@ -1,4 +1,5 @@
 import { observer } from "mobx-react";
+import { ArrowIcon, CopyIcon, TrashIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
@@ -62,15 +63,22 @@ function ShareMenu({ share }: Props) {
       <OverflowMenuButton aria-label={t("Show menu")} {...menu} />
       <ContextMenu {...menu} aria-label={t("Share options")}>
         <CopyToClipboard text={share.url} onCopy={handleCopy}>
-          <MenuItem {...menu}>{t("Copy link")}</MenuItem>
+          <MenuItem {...menu} icon={<CopyIcon />}>
+            {t("Copy link")}
+          </MenuItem>
         </CopyToClipboard>
-        <MenuItem {...menu} onClick={handleGoToDocument}>
+        <MenuItem {...menu} onClick={handleGoToDocument} icon={<ArrowIcon />}>
           {t("Go to document")}
         </MenuItem>
         {can.revoke && (
           <>
             <hr />
-            <MenuItem {...menu} onClick={handleRevoke}>
+            <MenuItem
+              {...menu}
+              onClick={handleRevoke}
+              icon={<TrashIcon />}
+              dangerous
+            >
               {t("Revoke link")}
             </MenuItem>
           </>

app/menus/UserMenu.tsx

@@ -157,6 +157,7 @@ function UserMenu({ user }: Props) {
             {
               type: "button",
               title: `${t("Revoke invite")}…`,
+              dangerous: true,
               onClick: handleRevoke,
               visible: user.isInvited,
             },
@@ -169,6 +170,7 @@ function UserMenu({ user }: Props) {
             {
               type: "button",
               title: `${t("Suspend account")}…`,
+              dangerous: true,
               onClick: handleSuspend,
               visible: !user.isInvited && !user.isSuspended,
             },

app/types.ts

@@ -7,6 +7,7 @@ export type MenuItemButton = {
   type: "button";
   title: React.ReactNode;
   onClick: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
+  dangerous?: boolean;
   visible?: boolean;
   selected?: boolean;
   disabled?: boolean;