Feat/block improvements (#95)

* feat/89-block-improvements style: replace reload icon
* feat/block-feat/block-improvements add cursor buttons
* feat/block-improvements hover to create
* feat/block-improvements change settings in modal
* feat/block-improvements version bump

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

@@ -1,6 +1,6 @@
 import { IconButton } from '@chakra-ui/button';
 import { Tooltip } from '@chakra-ui/tooltip';
-import { FiChevronsDown } from 'react-icons/fi';
+import { FiCheck } from 'react-icons/fi';
 
 export default function ApplyIconBtn(props) {
   const { clickhandler, ...rest } = props;
@@ -8,7 +8,7 @@ export default function ApplyIconBtn(props) {
     <Tooltip label='Apply delays'>
       <IconButton
         size={props.size || 'xs'}
-        icon={<FiChevronsDown />}
+        icon={<FiCheck />}
         colorScheme='orange'
         onClick={clickhandler}
         _focus={{ boxShadow: 'none' }}

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

@@ -0,0 +1,22 @@
+import { IconButton } from '@chakra-ui/button';
+import { Tooltip } from '@chakra-ui/tooltip';
+import { IoCaretDown } from 'react-icons/io5';
+
+export default function CursorDownBtn(props) {
+  const { clickhandler, active, ref } = props;
+  return (
+    <Tooltip label='Move cursor down Alt + ↓'>
+      <IconButton
+        ref={ref}
+        size={props.size || 'xs'}
+        icon={<IoCaretDown />}
+        color={active ? 'pink.100' : 'pink.300'}
+        borderColor={active ? undefined : 'pink.300'}
+        backgroundColor={active ? 'pink.400' : undefined}
+        variant={active ? 'solid' : 'outline'}
+        onClick={clickhandler}
+        _focus={{ boxShadow: 'none' }}
+      />
+    </Tooltip>
+  );
+}

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

@@ -2,7 +2,7 @@ import { IconButton } from '@chakra-ui/button';
 import { Tooltip } from '@chakra-ui/tooltip';
 import { FiTarget } from 'react-icons/fi';
 
-export default function LockIconBtn(props) {
+export default function CursorLockedBtn(props) {
   const { clickhandler, active, ref } = props;
   return (
     <Tooltip label='Lock cursor to current'>

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

@@ -0,0 +1,22 @@
+import { IconButton } from '@chakra-ui/button';
+import { Tooltip } from '@chakra-ui/tooltip';
+import { IoCaretUp } from 'react-icons/io5';
+
+export default function CursorUpBtn(props) {
+  const { clickhandler, active, ref } = props;
+  return (
+    <Tooltip label='Move cursor up Alt + ↑'>
+      <IconButton
+        ref={ref}
+        size={props.size || 'xs'}
+        icon={<IoCaretUp />}
+        color={active ? 'pink.100' : 'pink.300'}
+        borderColor={active ? undefined : 'pink.300'}
+        backgroundColor={active ? 'pink.400' : undefined}
+        variant={active ? 'solid' : 'outline'}
+        onClick={clickhandler}
+        _focus={{ boxShadow: 'none' }}
+      />
+    </Tooltip>
+  );
+}

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

@@ -1,5 +1,5 @@
 import { IconButton } from '@chakra-ui/button';
-import { IoReload } from 'react-icons/io5';
+import { IoArrowUndo } from 'react-icons/io5';
 import { Tooltip } from '@chakra-ui/tooltip';
 
 export default function ReloadIconButton(props) {
@@ -7,7 +7,7 @@ export default function ReloadIconButton(props) {
   return (
     <Tooltip label='Reload event' openDelay={500} shouldWrapChildren={props.disabled}>
       <IconButton
-        icon={<IoReload size='22px' />}
+        icon={<IoArrowUndo size='22px' />}
         colorScheme='whiteAlpha'
         backgroundColor='#ffffff05'
         variant='outline'

client/src/common/components/countdown/Countdown.jsx

@@ -25,7 +25,7 @@ const Countdown = ({ time, small, isNegative, hideZeroHours }) => {
 export default memo(Countdown);
 
 Countdown.propTypes = {
-  time: PropTypes.number.isRequired,
+  time: PropTypes.number,
   small: PropTypes.bool,
   isNegative: PropTypes.bool,
   hideZeroHour: PropTypes.bool,