feat: feature/mvp-sprint-1 Made settings menu more user friendly

remix/app/components/Thingtime/SettingsMenu.tsx

@@ -1,10 +1,42 @@
 import React, { useState } from "react"
+import ClickAwayListener from "react-click-away-listener"
 import { Center, Flex, Text } from "@chakra-ui/react"
 
 import { Icon } from "../Icon/Icon"
 
 export const SettingsMenu = (props) => {
   const [show, setShow] = useState(false)
+  const hideRef = React.useRef(null)
+  const [opacity, setOpacity] = React.useState(props?.opacity === 0 ? 0 : 1)
+
+  const opacityRef = React.useRef(null)
+
+  const waitTime = 1555
+
+  React.useEffect(() => {
+    clearInterval(opacityRef?.current)
+    if (props?.opacity) {
+      setOpacity(props?.opacity)
+    } else {
+      opacityRef.current = setInterval(() => {
+        setOpacity(props?.opacity)
+        setShow(false)
+      }, waitTime)
+    }
+  }, [props?.opacity])
+
+  React.useEffect(() => {
+    if (show || props?.opacity) {
+      clearInterval(hideRef?.current)
+    }
+  }, [show, props?.opacity])
+
+  const maybeHide = React.useCallback(() => {
+    clearInterval(hideRef?.current)
+    hideRef.current = setTimeout(() => {
+      setShow(false)
+    }, waitTime)
+  }, [])
 
   const showMenu = React.useCallback(() => {
     setShow(true)
@@ -46,21 +78,22 @@ export const SettingsMenu = (props) => {
   const iconSize = 10
 
   return (
+    <ClickAwayListener onClickAway={hideMenu}>
       <Center
         position="relative"
         // width="100%"
         paddingRight={36}
-      opacity={props?.opacity}
+        opacity={opacity}
-      cursor="pointer"
         transition={props?.transition || "all 0.2s ease-in-out"}
         onMouseEnter={showMenu}
-      onMouseLeave={hideMenu}
+        onMouseLeave={maybeHide}
       >
         <Flex
           paddingLeft={1}
           // opacity={showContextIcon ? 1 : 0}
-        transition="all 0.2s ease-in-out"
+          cursor="pointer"
           // onClick={deleteValue}
+          transition="all 0.2s ease-in-out"
         >
           <Icon name="wizard" size={7}></Icon>
         </Flex>
@@ -85,10 +118,12 @@ export const SettingsMenu = (props) => {
               <Flex
                 alignItems="center"
                 flexDirection="row"
-              _hover={{
+                paddingRight={basePadding * 2}
-                background: "greys.light",
+                paddingLeft={basePadding * 1}
-              }}
+                // _hover={{
-              paddingX={basePadding * 1}
+                //   background: "greys.light",
+                // }}
+                // paddingX={basePadding * 1}
                 paddingY={basePadding / 2}
               >
                 <Icon marginBottom="-2px" name="cyclone" size={iconSize}></Icon>
@@ -114,6 +149,7 @@ export const SettingsMenu = (props) => {
                           background: "greys.light",
                         },
                       }}
+                      cursor="pointer"
                       onClick={() => onChangeType(type?.key || type)}
                       paddingY={1}
                     >
@@ -121,7 +157,8 @@ export const SettingsMenu = (props) => {
                         alignItems="center"
                         flexDirection="row"
                         width="100%"
-                      paddingX={basePadding * 2}
+                        paddingRight={basePadding * 4}
+                        paddingLeft={basePadding * 2}
                         paddingY={basePadding / 2}
                       >
                         <Icon
@@ -145,6 +182,7 @@ export const SettingsMenu = (props) => {
                 _hover={{
                   background: "greys.light",
                 }}
+                cursor="pointer"
                 onClick={onDelete}
                 paddingX={basePadding * 1}
                 paddingY={basePadding / 2}
@@ -158,5 +196,6 @@ export const SettingsMenu = (props) => {
           </Flex>
         </Flex>
       </Center>
+    </ClickAwayListener>
   )
 }