From 5af5549173ef23bb8d8433833aaad1d96a675082 Mon Sep 17 00:00:00 2001
From: Abdullah Atta <abdullahatta@streetwriters.co>
Date: Mon, 7 Aug 2023 06:54:11 +0500
Subject: [PATCH] web: introduce "dangerous" variant for menu items

---
 apps/web/src/components/attachment/index.tsx  |  2 +-
 apps/web/src/components/note/index.tsx        |  2 +-
 apps/web/src/components/notebook/index.tsx    |  2 +-
 apps/web/src/components/reminder/index.tsx    |  2 +-
 apps/web/src/components/tag/index.tsx         |  2 +-
 apps/web/src/components/topic/index.tsx       |  2 +-
 apps/web/src/components/trash-item/index.tsx  |  2 +-
 .../ui/src/components/menu/menu-button.tsx    | 26 ++++++++++++++-----
 packages/ui/src/components/menu/types.ts      |  2 +-
 9 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/components/attachment/index.tsx b/apps/web/src/components/attachment/index.tsx
index 4df2cd0c6..1dacce310 100644
--- a/apps/web/src/components/attachment/index.tsx
+++ b/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])
diff --git a/apps/web/src/components/note/index.tsx b/apps/web/src/components/note/index.tsx
index 291e6d867..a3a2ce085 100644
--- a/apps/web/src/components/note/index.tsx
+++ b/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
diff --git a/apps/web/src/components/notebook/index.tsx b/apps/web/src/components/notebook/index.tsx
index 7ab53f60a..a77939f45 100644
--- a/apps/web/src/components/notebook/index.tsx
+++ b/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({
diff --git a/apps/web/src/components/reminder/index.tsx b/apps/web/src/components/reminder/index.tsx
index ad92f0764..eb20a5e55 100644
--- a/apps/web/src/components/reminder/index.tsx
+++ b/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({
diff --git a/apps/web/src/components/tag/index.tsx b/apps/web/src/components/tag/index.tsx
index 9b3b76729..3d752076f 100644
--- a/apps/web/src/components/tag/index.tsx
+++ b/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 () => {
diff --git a/apps/web/src/components/topic/index.tsx b/apps/web/src/components/topic/index.tsx
index 5cf4f1e22..04e430cd4 100644
--- a/apps/web/src/components/topic/index.tsx
+++ b/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")}?`,
diff --git a/apps/web/src/components/trash-item/index.tsx b/apps/web/src/components/trash-item/index.tsx
index 1d501790c..8db56fd72 100644
--- a/apps/web/src/components/trash-item/index.tsx
+++ b/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);
diff --git a/packages/ui/src/components/menu/menu-button.tsx b/packages/ui/src/components/menu/menu-button.tsx
index 671ac08d2..f17351c32 100644
--- a/packages/ui/src/components/menu/menu-button.tsx
+++ b/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}
diff --git a/packages/ui/src/components/menu/types.ts b/packages/ui/src/components/menu/types.ts
index 625ec7d09..d27b0a38b 100644
--- a/packages/ui/src/components/menu/types.ts
+++ b/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;
   };
 };