bugfix: event handler

client/src/common/components/buttons/AddIconBtn.jsx

@@ -1,5 +1,5 @@
 import { IconButton } from '@chakra-ui/button';
-import { FiPlus } from "react-icons/fi";
+import { FiPlus } from 'react-icons/fi';
 
 export default function AddIconBtn(props) {
   return (
@@ -7,7 +7,7 @@ export default function AddIconBtn(props) {
       size={props.size || 'xs'}
       icon={<FiPlus />}
       colorScheme='blue'
-      onClick={() => props.clickHandler}
+      onClick={props.clickHandler}
     />
   );
 }

client/src/common/components/buttons/BlockIconBtn.jsx

@@ -7,7 +7,7 @@ export default function BlockIconBtn(props) {
       size={props.size || 'xs'}
       icon={<FiMinusCircle />}
       colorScheme='purple'
-      onClick={() => props.clickHandler}
+      onClick={props.clickHandler}
     />
   );
 }

client/src/common/components/buttons/DelayIconBtn.jsx

@@ -7,7 +7,7 @@ export default function DelayIconBtn(props) {
       size={props.size || 'xs'}
       icon={<FiClock />}
       colorScheme='yellow'
-      onClick={() => props.clickHandler}
+      onClick={props.clickHandler}
     />
   );
 }

client/src/common/components/buttons/DeleteIconBtn.jsx

@@ -7,7 +7,7 @@ export default function DeleteIconBtn(props) {
       size={props.size || 'xs'}
       icon={<FiMinus />}
       colorScheme='red'
-      onClick={() => props.clickHandler}
+      onClick={props.clickHandler}
     />
   );
 }

client/src/common/input/DelayValue.jsx

@@ -4,7 +4,7 @@ export default function DelayValue(props) {
   const { delay } = props;
   const delayed = delay > 0;
   return (
-    <div className={delayed && style.delayValue}>
+    <div className={delayed ? style.delayValue : undefined}>
       {delayed && <span>{`+ ${delay}`}</span>}
     </div>
   );

client/src/common/input/EditableTimer.jsx

@@ -37,8 +37,6 @@ export default function EditableTimer(props) {
     setValue(addAndFormat(time, delay));
   };
 
-  console.log('hh', value, time);
-
   return (
     <div className={style.time}>
       <Editable

client/src/features/editors/list/Block.module.css

@@ -33,10 +33,18 @@
   transition: linear 0.1s;
 }
 
+.eventRow:hover > .actionOverlay,
+.eventRowActive:hover > .actionOverlay,
+.block:hover > .actionOverlay,
+.delay:hover > .actionOverlay {
+  opacity: 0.85;
+  transition: linear 0.1s;
+}
+
+/* NA */
 .actionOverlay:hover {
   opacity: 1;
 }
-
 /* ============= EVENT ITEM ============= */
 
 .eventRow,

client/src/features/editors/list/BlockBlock.jsx

@@ -1,5 +1,3 @@
-import { IconButton } from '@chakra-ui/button';
-import { AddIcon, MinusIcon } from '@chakra-ui/icons';
 import AddIconBtn from '../../../common/components/buttons/AddIconBtn';
 import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn';
 import style from './Block.module.css';
@@ -8,7 +6,7 @@ export default function BlockBlock(props) {
   const { eventsHandler, index, data } = props;
 
   const addHandler = () => {
-    eventsHandler('add', { type: 'block', order: index + 1 });
+    eventsHandler('add', { type: 'event', order: index + 1 });
   };
   const deleteHandler = () => {
     eventsHandler('delete', data.id);

client/src/features/editors/list/DelayBlock.jsx

@@ -1,5 +1,3 @@
-import { IconButton } from '@chakra-ui/button';
-import { AddIcon, MinusIcon } from '@chakra-ui/icons';
 import { Box } from '@chakra-ui/layout';
 import {
   Slider,
@@ -8,7 +6,6 @@ import {
   SliderTrack,
 } from '@chakra-ui/slider';
 import { useEffect, useState } from 'react';
-import style from './List.module.css';
 import AddIconBtn from '../../../common/components/buttons/AddIconBtn';
 import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn';
 import style from './Block.module.css';
@@ -34,14 +31,12 @@ export default function DelayBlock(props) {
     setDelay(data.timerDuration);
   }, [data]);
   const addHandler = () => {
-    eventsHandler('add', { type: 'block', order: index + 1 });
   };
   const deleteHandler = () => {
     eventsHandler('delete', data.id);
   };
 
   return (
-    <div className={style.delayContainer}>
     <div className={style.delay}>
       <div className={style.delayValue}>{`${delay} min`}</div>
       <Slider
@@ -59,15 +54,6 @@ export default function DelayBlock(props) {
         <SliderThumb boxSize={4} />
       </Slider>
       <div className={style.actionOverlay}>
-        />
-        <IconButton
-          size='xs'
-          icon={<AddIcon />}
-          colorScheme='blue'
-          onClick={() =>
-            eventsHandler('add', { type: 'event', order: index + 1 })
-          }
-        />
         <DeleteIconBtn clickHandler={deleteHandler} />
         <AddIconBtn clickHandler={addHandler} />
       </div>

client/src/features/editors/list/EventBlock.jsx

@@ -28,7 +28,7 @@ export default function EventBlock(props) {
   };
 
   const addHandler = () => {
-    eventsHandler('add', { type: 'block', order: index + 1 });
+    eventsHandler('add', { type: 'event', order: index + 1 });
   };
   const delayHandler = () => {
     eventsHandler('add', { type: 'delay', order: index + 1 });

client/src/features/menu/EventListMenu.jsx

@@ -1,8 +1,7 @@
-import { AddIcon, ChevronDownIcon } from '@chakra-ui/icons';
+import { FiChevronDown } from 'react-icons/fi';
 import {
   Button,
   ButtonGroup,
-  IconButton,
   Menu,
   MenuButton,
   MenuItem,
@@ -30,7 +29,7 @@ export default function EventListMenu(props) {
             Upload
           </Button>
           <MenuButton as={Button} {...buttonProps}>
-            <ChevronDownIcon />
+            <FiChevronDown />
           </MenuButton>
         </ButtonGroup>
         <MenuList>
@@ -42,7 +41,7 @@ export default function EventListMenu(props) {
         <ButtonGroup isAttached>
           <Button {...buttonProps}>Save</Button>
           <MenuButton as={Button} {...buttonProps}>
-            <ChevronDownIcon />
+            <FiChevronDown />
           </MenuButton>
         </ButtonGroup>
         <MenuList>