added hide icon ; correct color for icons

daostack · Aug 2, 2023 · 19e4537 · 19e4537
1 parent 685e67d
commit 19e4537
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 6 deletions.
diff --git a/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss b/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss
@@ -210,10 +210,6 @@
   .custom-dropdown-wrapper__menu {
     z-index: $dropdown-z-index;
   }
-
-  svg {
-    color: $light-gray-2;
-  }
 }
 
 .menuArrowButton {

diff --git a/src/shared/components/ElementDropdown/ElementDropdown.module.scss b/src/shared/components/ElementDropdown/ElementDropdown.module.scss
@@ -20,3 +20,7 @@
     margin-left: 1rem;
   }
 }
+
+.redIcon {
+  color: red;
+}
diff --git a/src/shared/components/ElementDropdown/ElementDropdown.tsx b/src/shared/components/ElementDropdown/ElementDropdown.tsx
@@ -9,6 +9,7 @@ import { useNotification, useModal } from "@/shared/hooks";
 import {
   CopyIcon,
   Edit3Icon,
+  HideIcon,
   ReplyIcon,
   Report2Icon,
   Share3Icon,
@@ -213,7 +214,10 @@ const ElementDropdown: FC<ElementDropdownProps> = ({
     ) {
       items.push({
         text: (
-          <span className={elementDropdownStyles.menuItemRedText}>Hide</span>
+          <div className={elementDropdownStyles.itemContent}>
+            <HideIcon />
+            <span>Hide</span>
+          </div>
         ),
         searchText: "Hide",
         value: ElementDropdownMenuItems.Hide,
@@ -224,7 +228,7 @@ const ElementDropdown: FC<ElementDropdownProps> = ({
       items.push({
         text: (
           <div className={elementDropdownStyles.itemContent}>
-            <Trash2Icon />
+            <Trash2Icon className={elementDropdownStyles.redIcon} />
             <span className={elementDropdownStyles.menuItemRedText}>
               Delete
             </span>

diff --git a/src/shared/icons/hide.icon.tsx b/src/shared/icons/hide.icon.tsx
@@ -0,0 +1,40 @@
+import React, { ReactElement } from "react";
+
+interface HideIconProps {
+  className?: string;
+}
+
+export default function HideIcon({ className }: HideIconProps): ReactElement {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.5851 10.5879C10.21 10.963 9.99942 11.4718 9.99951 12.0022C9.99961 12.5327 10.2104 13.0414 10.5856 13.4164C10.9607 13.7914 11.4695 14.002 11.9999 14.0019C12.5304 14.0018 13.039 13.791 13.4141 13.4159"
+        stroke="#131B23"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M16.681 16.673C15.2782 17.5507 13.6547 18.0109 12 18C8.4 18 5.4 16 3 12C4.272 9.88003 5.712 8.32203 7.32 7.32603M10.18 6.18003C10.779 6.05876 11.3888 5.99845 12 6.00003C15.6 6.00003 18.6 8.00003 21 12C20.334 13.11 19.621 14.067 18.862 14.87"
+        stroke="#131B23"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M3 3L21 21"
+        stroke="#131B23"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/src/shared/icons/index.ts b/src/shared/icons/index.ts
@@ -60,3 +60,4 @@ export { default as FileIcon } from "./file.icon";
 export { default as EmojiIcon } from "./emoji.icon";
 export { default as ReplyIcon } from "./reply.icon";
 export { default as CopyIcon } from "./copy.icon";
+export { default as HideIcon } from "./hide.icon";