web: introduce "dangerous" variant for menu items

apps/web/src/components/attachment/index.tsx

@@ -317,7 +317,7 @@ const AttachmentMenuItems: (
     {
       type: "button",
       key: "permanent-delete",
-      styles: { icon: { color: "red" }, text: { color: "red" } },
+      variant: "dangerous",
       title: "Delete permanently",
       icon: DeleteForver.path,
       onClick: () => Multiselect.deleteAttachments([attachment])

apps/web/src/components/note/index.tsx

@@ -501,7 +501,7 @@ const menuItems: (note: any, items?: any[]) => MenuItem[] = (
       type: "button",
       key: "movetotrash",
       title: "Move to trash",
-      styles: { icon: { color: "red" }, text: { color: "red" } },
+      variant: "dangerous",
       icon: Trash.path,
       isDisabled:
         items.length === 1

apps/web/src/components/notebook/index.tsx

@@ -190,7 +190,7 @@ const menuItems: (notebook: any, items?: any[]) => MenuItem[] = (
       type: "button",
       key: "movetotrash",
       title: "Move to trash",
-      styles: { icon: { color: "red" }, text: { color: "red" } },
+      variant: "dangerous",
       icon: Trash.path,
       onClick: async () => {
         const result = await confirm({

apps/web/src/components/reminder/index.tsx

@@ -144,7 +144,7 @@ const menuItems: (
       type: "button",
       key: "delete",
       title: "Delete",
-      styles: { icon: { color: "red" }, text: { color: "red" } },
+      variant: "dangerous",
       icon: Trash.path,
       onClick: async () => {
         confirm({

apps/web/src/components/tag/index.tsx

@@ -89,7 +89,7 @@ const menuItems: (tag: any, items?: any[]) => MenuItem[] = (
     {
       type: "button",
       key: "delete",
-      styles: { icon: { color: "red" }, text: { color: "red" } },
+      variant: "dangerous",
       title: "Delete",
       icon: DeleteForver.path,
       onClick: async () => {

apps/web/src/components/topic/index.tsx

@@ -104,7 +104,7 @@ const menuItems: (topic: any, items?: any[]) => MenuItem[] = (
       key: "delete",
       title: "Delete",
       icon: Trash.path,
-      styles: { icon: { color: "red" }, text: { color: "red" } },
+      variant: "dangerous",
       onClick: async () => {
         const result = await confirm({
           title: `Delete ${pluralize(items.length, "topic")}?`,

apps/web/src/components/trash-item/index.tsx

@@ -87,7 +87,7 @@ const menuItems: (item: any, items?: any[]) => MenuItem[] = (
       key: "delete",
       title: "Delete",
       icon: DeleteForver.path,
-      styles: { icon: { color: "red" }, text: { color: "red" } },
+      variant: "dangerous",
       onClick: async () => {
         if (!(await showMultiPermanentDeleteConfirmation(items.length))) return;
         const ids = items.map((i) => i.id);

packages/ui/src/components/menu/menu-button.tsx

@@ -41,7 +41,8 @@ export function MenuButton(props: MenuButtonProps) {
     isChecked,
     menu,
     modifier,
-    styles
+    styles,
+    variant = "normal"
   } = item;
   const itemRef = useRef<HTMLButtonElement>(null);
 
@@ -74,8 +75,8 @@ export function MenuButton(props: MenuButtonProps) {
             <Icon
               path={icon}
               size={"medium"}
-              sx={{ mr: 2, ...styles?.icon }}
-              color={styles?.icon?.color as string}
+              sx={{ mr: 2 }}
+              color={variant === "dangerous" ? "icon-error" : "icon"}
             />
           )}
           <Text
@@ -84,6 +85,7 @@ export function MenuButton(props: MenuButtonProps) {
             sx={{
               fontSize: "inherit",
               fontFamily: "inherit",
+              color: variant === "dangerous" ? "paragraph-error" : "paragraph",
               ...styles?.title
             }}
           >
@@ -95,15 +97,27 @@ export function MenuButton(props: MenuButtonProps) {
             sx={{ ml: 4 }}
             data-test-id={`toggle-state-${isChecked ? "on" : "off"}`}
           >
-            {isChecked && <Icon path={mdiCheck} size={"small"} />}
-            {menu && <Icon path={mdiChevronRight} size={"small"} />}
+            {isChecked && (
+              <Icon
+                path={mdiCheck}
+                size={"small"}
+                color={variant === "dangerous" ? "icon-error" : "icon"}
+              />
+            )}
+            {menu && (
+              <Icon
+                path={mdiChevronRight}
+                size={"small"}
+                color={variant === "dangerous" ? "icon-error" : "icon"}
+              />
+            )}
             {modifier && (
               <Text
                 as="span"
                 sx={{
                   fontFamily: "body",
                   fontSize: "menu",
-                  color: "paragraph"
+                  color: "paragraph-secondary"
                 }}
               >
                 {modifier}

packages/ui/src/components/menu/types.ts

@@ -45,10 +45,10 @@ export type MenuButtonItem = BaseMenuItem<"button"> & {
   isChecked?: boolean;
   modifier?: string;
   menu?: { title?: string; items: MenuItem[] };
+  variant?: "dangerous" | "normal";
 
   styles?: {
     title?: ThemeUICSSObject;
-    icon?: ThemeUICSSObject;
   };
 };