V1 (#118)

* chore: upgrade minor versions
* chore: upgrade cypress
* chore: upgrade fe dependencies
* update readme
* update osx images
* update readme
* upgrade dependencies
* upgrade test dependency
* feat: add option to input autofill
* feat: autofill to the left
* chore: update docs
* chore: cleanup ci
* version bump
* style: prevent zero height bar
* fix: prevent loosing menu
* ux: improve input, no spellcheck or autocomplete
* small ux improvements in cuesheets
* feat 111/increase maximum number of events
* fix: optimistic delete issue with filter
* refact: pincode workflow
* chore: add versioning to packages

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

@@ -1,21 +1,23 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { HStack } from '@chakra-ui/react';
 import { Draggable } from 'react-beautiful-dnd';
-import { FiMoreVertical } from '@react-icons/all-files/fi/FiMoreVertical';
 import { millisToMinutes } from 'common/utils/dateConfig';
-import ActionButtons from '../list/ActionButtons';
-import DeleteIconBtn from 'common/components/buttons/DeleteIconBtn';
-import ApplyIconBtn from 'common/components/buttons/ApplyIconBtn';
+import { IoRemove } from '@react-icons/all-files/io5/IoRemove';
+import { FiCheck } from '@react-icons/all-files/fi/FiCheck';
+import { FiMoreVertical } from '@react-icons/all-files/fi/FiMoreVertical';
+import ActionButtons from '../../../common/components/buttons/ActionButtons';
 import DelayInput from 'common/input/DelayInput';
+import TooltipActionBtn from '../../../common/components/buttons/TooltipActionBtn';
+import TooltipLoadingActionBtn from '../../../common/components/buttons/TooltipLoadingActionBtn';
 import style from './DelayBlock.module.scss';
 import PropTypes from 'prop-types';
 
 export default function DelayBlock(props) {
   const { eventsHandler, data, index, actionHandler } = props;
 
-  const applyDelayHandler = () => {
+  const applyDelayHandler = useCallback(() => {
     eventsHandler('applyDelay', { id: data.id, duration: data.duration });
-  };
+  }, [data.duration, data.id, eventsHandler]);
 
   const delayValue = data.duration != null ? millisToMinutes(data.duration) : undefined;
   return (
@@ -27,8 +29,20 @@ export default function DelayBlock(props) {
           </span>
           <DelayInput className={style.input} value={delayValue} actionHandler={actionHandler} />
           <HStack spacing='0.5em' className={style.actionOverlay}>
-            <ApplyIconBtn clickhandler={applyDelayHandler} />
-            <DeleteIconBtn actionHandler={actionHandler} />
+            <TooltipActionBtn
+              clickHandler={applyDelayHandler}
+              icon={<FiCheck />}
+              colorScheme='orange'
+              tooltip='Apply delays'
+              _hover={{ bg: 'orange.400' }}
+            />
+            <TooltipLoadingActionBtn
+              clickHandler={() => actionHandler('delete')}
+              icon={<IoRemove />}
+              colorScheme='red'
+              tooltip='Delete'
+              _hover={{ bg: 'red.400' }}
+            />
             <ActionButtons showAdd actionHandler={actionHandler} />
           </HStack>
         </div>