changed icon component, paddings

src/components/drop-down-menu/ContextMenu.tsx

@@ -3,9 +3,9 @@
 /* -------------------------------------------------------------------------- */
 import React, { Fragment } from "react";
 import { Menu, Transition } from "@headlessui/react";
-import { PropsPartion } from "./ContextMenuItem";
+import { PropsPartion } from "./drop-down-menu/ContextMenuItem";
 import classNames from "classnames";
-import { ReactComponent as SelectIcon } from "assets/svg/select-arrow.svg";
+import { SVGCaretDown } from "components/icons";
 type ChildType = React.ReactElement<any & PropsPartion[]>;
 type ChildrenType = ChildType[] | ChildType;
 
@@ -25,13 +25,13 @@ type MenuProps = {
 /* -------------------------------------------------------------------------- */
 
 const MenuButtonStyle = `
+items-center
 inline-flex 
 justify-center w-full
 cursor-default    
 rounded
 border border-gray-100
 outline-8
-bg-white
 py-2
 pl-4 
 pr-1 
@@ -52,16 +52,16 @@ py-2 px-4 sm:text-sm`;
 /*                          Component implementation                          */
 /* -------------------------------------------------------------------------- */
 /**
-*   Use width ContextMenuAction.tsx , for example: 
-*   <ContextMenu button="MyButton" emphasis="low/high">
-*   <ContextMenuAction
-*   caption="First Menu"
-*   icon={icon}
-*   action={() => alert('click')}
-*   ></ContextMenuAction>
-*   ...
-*  </ContextMenu>
-*/
+ *   Use width ContextMenuAction.tsx , for example:
+ *   <ContextMenu button="MyButton" emphasis="low/high">
+ *   <ContextMenuAction
+ *   caption="First Menu"
+ *   icon={icon}
+ *   action={() => alert('click')}
+ *   ></ContextMenuAction>
+ *   ...
+ *  </ContextMenu>
+ */
 export default function ContextMenu({
   button,
   children,
@@ -69,48 +69,50 @@ export default function ContextMenu({
   emphasis = "low",
 }: MenuProps) {
   return (
-      <Menu as="div" className="relative inline-block text-right">
-        {({ open }) => (
-          <>
-            <Menu.Button
+    <Menu as="div" className="relative inline-block text-right">
+      {({ open }) => (
+        <>
+          <Menu.Button
+            className={classNames([
+              `${MenuButtonStyle}`,
+              {
+                "hover:bg-gray-100 font-bold uppercase": emphasis === "high",
+              },
+              className,
+            ])}
+          >
+            {button}
+            <SVGCaretDown
+              className={`${
+                open ? "rotate-180 transform" : "font-normal"
+              } my-2 mx-3 w-4 flex-center fill-gray-900 stroke-gray-900`}
+              aria-hidden="true"
+            />
+          </Menu.Button>
+
+          <Transition
+            as={Fragment}
+            show={open}
+            enter="transition ease-out duration-100"
+            enterFrom="transform opacity-0 scale-95"
+            enterTo="transform opacity-100 scale-100"
+            leave="transition ease-in duration-75"
+            leaveFrom="transform opacity-100 scale-100"
+            leaveTo="transform opacity-0 scale-95"
+          >
+            <Menu.Items
+              static
               className={classNames([
-                `${MenuButtonStyle}`,
-                { "bg-gray-100 font-bold uppercase": emphasis === "high" },
                 className,
+                `${MenuItemStyle}`,
+                { "ml-2": emphasis === "high" },
               ])}
             >
-              {button}
-              <SelectIcon
-                className={`${
-                  open ? "rotate-180 transform" : "font-normal"
-                } my-2 mx-3 h-2 w-3 flex-center`}
-                aria-hidden="true"
-              />
-            </Menu.Button>
-
-            <Transition
-              as={Fragment}
-              show={open}
-              enter="transition ease-out duration-100"
-              enterFrom="transform opacity-0 scale-95"
-              enterTo="transform opacity-100 scale-100"
-              leave="transition ease-in duration-75"
-              leaveFrom="transform opacity-100 scale-100"
-              leaveTo="transform opacity-0 scale-95"
-            >
-              <Menu.Items
-                static
-                className={classNames([
-                  className,
-                  `${MenuItemStyle}`,
-                  { "ml-2": emphasis === "high" },
-                ])}
-              >
-                {children}
-              </Menu.Items>
-            </Transition>
-          </>
-        )}
-      </Menu>
+              {children}
+            </Menu.Items>
+          </Transition>
+        </>
+      )}
+    </Menu>
   );
 }

src/components/drop-down-menu/ContextMenuAction.tsx

@@ -1,7 +1,6 @@
 import classNames from "classnames";
 import React from "react";
 
-
 type Props = {
   action: Function;
   caption: string;
@@ -18,19 +17,16 @@ export default function ContextMenuAction({
   className,
 }: Props) {
   return (
-    <button
+    <a
+      href="#"
       onClick={(e) => action(e)}
-      disabled={disabled}
       className={classNames([
-        "group flex items-center text-base",
-        { "opacity-50": disabled, "cursor-default": !disabled },
+        "group flex px-2 rounded items-center text-base hover:bg-gray-100",
         className,
       ])}
     >
       {icon && <div className="mr-2 h-5 w-5">{icon}</div>}
       <span className="px-2 py-2">{caption}</span>
-    </button>
-    
+    </a>
   );
 }
-