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,

client/src/common/input/DelayInput.jsx

@@ -8,7 +8,7 @@ const inputProps = {
   backgroundColor: 'rgba(0,0,0,0.05)',
   color: '#fff',
   border: '1px solid #ecc94b55',
-  borderRadius: '4px',
+  borderRadius: '8px',
   placeholder: '-',
   textAlign: 'center',
 };

client/src/common/input/EditableText.jsx

@@ -1,6 +1,6 @@
 import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable';
 import { useEffect, useState } from 'react';
-import style from './EditableText.module.css';
+import style from './EditableText.module.scss';
 
 export default function EditableText(props) {
   const { label, defaultValue, placeholder, submitHandler, ...rest } = props;
@@ -33,10 +33,7 @@ export default function EditableText(props) {
         className={style.inline}
         {...rest}
       >
-        <EditablePreview
-          color={text === '' ? '#666' : 'inherit'}
-          maxWidth='75%'
-        />
+        <EditablePreview color={text === '' ? '#666' : 'inherit'} maxWidth='75%' />
         <EditableInput overflowX='hidden' maxWidth='75%' />
       </Editable>
     </div>

client/src/common/input/EditableText.module.scss

@@ -7,8 +7,17 @@
 }
 
 .block {
-  display: 'block';
   overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+
+  *:nth-of-type(2) {
+    flex: 1;
+    width: 20em;
+  }
+
 }
 
 .inline {

client/src/common/input/EditableTimer.module.css

@@ -2,13 +2,12 @@
 .delayedEditable {
   background-color: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.05);
-  border-radius: 4px;
   width: 6.5em;
   letter-spacing: 1px;
   height: fit-content;
 
   text-align: center;
-  border-radius: 4px;
+  border-radius: 8px;
 }
 
 .delayedEditable {