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/common/components/buttons/ActionButtons.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/menu';
+import { IconButton } from '@chakra-ui/button';
+import { FiClock } from '@react-icons/all-files/fi/FiClock';
+import { FiMinusCircle } from '@react-icons/all-files/fi/FiMinusCircle';
+import { FiPlus } from '@react-icons/all-files/fi/FiPlus';
+import { Tooltip } from '@chakra-ui/tooltip';
+import PropTypes from 'prop-types';
+
+export default function ActionButtons(props) {
+  const { showAdd, showDelay, showBlock, actionHandler } = props;
+
+  const menuStyle = {
+    color: '#000000',
+    backgroundColor: 'rgba(255,255,255,1)',
+  };
+
+  return (
+    <Menu isLazy lazyBehavior='unmount'>
+      <Tooltip label='Add ...' delay={500}>
+        <MenuButton
+          as={IconButton}
+          aria-label='Options'
+          size='xs'
+          icon={<FiPlus />}
+          _expanded={{ bg: 'orange.300', color: 'white' }}
+          _focus={{ boxShadow: 'none' }}
+          backgroundColor='orange.200'
+          color='orange.500'
+        />
+      </Tooltip>
+      <MenuList style={menuStyle}>
+        <MenuItem icon={<FiPlus />} onClick={() => actionHandler('event')} isDisabled={!showAdd}>
+          Add Event after
+        </MenuItem>
+
+        <MenuItem icon={<FiClock />} onClick={() => actionHandler('delay')} isDisabled={!showDelay}>
+          Add Delay after
+        </MenuItem>
+        <MenuItem
+          icon={<FiMinusCircle />}
+          onClick={() => actionHandler('block')}
+          isDisabled={!showBlock}
+        >
+          Add Block after
+        </MenuItem>
+      </MenuList>
+    </Menu>
+  );
+}
+
+ActionButtons.propTypes = {
+  showAdd: PropTypes.bool,
+  showDelay: PropTypes.bool,
+  showBlock: PropTypes.bool,
+  actionHandler: PropTypes.func,
+}

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

@@ -1,18 +0,0 @@
-import { IconButton } from '@chakra-ui/button';
-import { FiPlus } from '@react-icons/all-files/fi/FiPlus';
-
-export default function AddIconBtn(props) {
-  const { clickhandler, ...rest } = props;
-  return (
-    <IconButton
-      size={props.size || 'xs'}
-      icon={<FiPlus />}
-      _expanded={{ bg: 'orange.300', color: 'white' }}
-      _focus={{ boxShadow: 'none' }}
-      backgroundColor={'orange.200'}
-      color={'orange.500'}
-      onClick={clickhandler}
-      {...rest}
-    />
-  );
-}

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

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

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

@@ -1,16 +0,0 @@
-import { IconButton } from '@chakra-ui/button';
-import { FiMinusCircle } from '@react-icons/all-files/fi/FiMinusCircle';
-
-export default function BlockIconBtn(props) {
-  const { clickhandler, ...rest } = props;
-  return (
-    <IconButton
-      size={props.size || 'xs'}
-      icon={<FiMinusCircle />}
-      colorScheme='purple'
-      onClick={clickhandler}
-      _focus={{ boxShadow: 'none' }}
-      {...rest}
-    />
-  );
-}

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

@@ -1,20 +0,0 @@
-import React from 'react';
-import { IconButton } from '@chakra-ui/button';
-import { Tooltip } from '@chakra-ui/tooltip';
-import { FiChevronsUp } from '@react-icons/all-files/fi/FiChevronsUp';
-
-export default function CollapseBtn(props) {
-  const { clickhandler, size } = props;
-  return (
-    <Tooltip label='Collapse all'>
-      <IconButton
-        size={size || 'xs'}
-        icon={<FiChevronsUp />}
-        colorScheme='white'
-        variant='outline'
-        onClick={clickhandler}
-        _focus={{ boxShadow: 'none' }}
-      />
-    </Tooltip>
-  );
-}

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

@@ -1,18 +0,0 @@
-import { Button } from '@chakra-ui/button';
-import { FiTarget } from '@react-icons/all-files/fi/FiTarget';
-
-export default function CurrentBtn(props) {
-  const { clickhandler, active } = props;
-  return (
-    <Button
-      size={props.size || 'xs'}
-      leftIcon={<FiTarget />}
-      colorScheme='whiteAlpha'
-      variant={active ? 'solid' : 'outline'}
-      onClick={clickhandler}
-      _focus={{ boxShadow: 'none' }}
-    >
-      Goto Current
-    </Button>
-  );
-}

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

@@ -1,23 +0,0 @@
-import React from 'react';
-import { IconButton } from '@chakra-ui/button';
-import { Tooltip } from '@chakra-ui/tooltip';
-import { IoCaretDown } from '@react-icons/all-files/io5/IoCaretDown';
-
-export default function CursorDownBtn(props) {
-  const { clickhandler, active, ref, size } = props;
-  return (
-    <Tooltip label='Move cursor down Alt + ↓'>
-      <IconButton
-        ref={ref}
-        size={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

@@ -1,24 +0,0 @@
-import React from 'react';
-import { IconButton } from '@chakra-ui/button';
-import { Tooltip } from '@chakra-ui/tooltip';
-import { FiTarget } from '@react-icons/all-files/fi/FiTarget';
-
-export default function CursorLockedBtn(props) {
-  const { clickhandler, active, ref, size, ...rest } = props;
-  return (
-    <Tooltip label='Lock cursor to current'>
-      <IconButton
-        ref={ref}
-        size={size || 'xs'}
-        icon={<FiTarget />}
-        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' }}
-        {...rest}
-      />
-    </Tooltip>
-  );
-}

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

@@ -1,23 +0,0 @@
-import React from 'react';
-import { IconButton } from '@chakra-ui/button';
-import { Tooltip } from '@chakra-ui/tooltip';
-import { IoCaretUp } from '@react-icons/all-files/io5/IoCaretUp';
-
-export default function CursorUpBtn(props) {
-  const { clickhandler, active, ref, size } = props;
-  return (
-    <Tooltip label='Move cursor up Alt + ↑'>
-      <IconButton
-        ref={ref}
-        size={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/DelayIconBtn.jsx

@@ -1,16 +0,0 @@
-import { IconButton } from '@chakra-ui/button';
-import { FiClock } from '@react-icons/all-files/fi/FiClock';
-
-export default function DelayIconBtn(props) {
-  const { clickhandler, ...rest } = props;
-  return (
-    <IconButton
-      size={props.size || 'xs'}
-      icon={<FiClock />}
-      colorScheme='yellow'
-      onClick={clickhandler}
-      _focus={{ boxShadow: 'none' }}
-      {...rest}
-    />
-  );
-}

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

@@ -1,29 +0,0 @@
-import React, { useState } from 'react';
-import { IconButton } from '@chakra-ui/button';
-import { IoRemove } from '@react-icons/all-files/io5/IoRemove';
-import { Tooltip } from '@chakra-ui/tooltip';
-
-export default function DeleteIconBtn(props) {
-  const { actionHandler, size, ...rest } = props;
-  const [loading, setLoading] = useState(false);
-
-  const handleClick = () => {
-    setLoading(true);
-    actionHandler('delete');
-  };
-
-  return (
-    <Tooltip label='Delete'>
-      <IconButton
-        size={size || 'xs'}
-        icon={<IoRemove />}
-        colorScheme='red'
-        onClick={handleClick}
-        _focus={{ boxShadow: 'none' }}
-        disabled={loading}
-        isLoading={loading}
-        {...rest}
-      />
-    </Tooltip>
-  );
-}

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

@@ -2,19 +2,26 @@ import React from 'react';
 import { IoCloseSharp } from '@react-icons/all-files/io5/IoCloseSharp';
 import { IoCheckmarkSharp } from '@react-icons/all-files/io5/IoCheckmarkSharp';
 import { Button } from '@chakra-ui/button';
+import PropTypes from 'prop-types';
 
 export default function EnableBtn(props) {
-  const { active, text, actionHandler, size } = props;
+  const { active, text, actionHandler, size = 'xs' } = props;
   return (
     <Button
-      size={size || 'xs'}
+      size={size}
       leftIcon={active ? <IoCheckmarkSharp /> : <IoCloseSharp />}
       colorScheme='blue'
       variant={active ? 'solid' : 'outline'}
       onClick={actionHandler}
-      _focus={{ boxShadow: 'none' }}
     >
       {text}
     </Button>
   );
 }
+
+EnableBtn.propTypes = {
+  active: PropTypes.bool,
+  text: PropTypes.string,
+  actionHandler: PropTypes.func,
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
+}

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

@@ -1,20 +0,0 @@
-import React from 'react';
-import { IconButton } from '@chakra-ui/button';
-import { Tooltip } from '@chakra-ui/tooltip';
-import { FiChevronsDown } from '@react-icons/all-files/fi/FiChevronsDown';
-
-export default function ExpandBtn(props) {
-  const { clickhandler, size } = props;
-  return (
-    <Tooltip label='Expand all'>
-      <IconButton
-        size={size || 'xs'}
-        icon={<FiChevronsDown />}
-        colorScheme='white'
-        variant='outline'
-        onClick={clickhandler}
-        _focus={{ boxShadow: 'none' }}
-      />
-    </Tooltip>
-  );
-}

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

@@ -1,22 +0,0 @@
-import React from 'react';
-import { IconButton } from '@chakra-ui/button';
-import { IoPlaySkipForward } from '@react-icons/all-files/io5/IoPlaySkipForward';
-import { Tooltip } from '@chakra-ui/tooltip';
-
-export default function NextIconBtn(props) {
-  const { clickhandler, disabled, ...rest } = props;
-  return (
-    <Tooltip label='Next event' openDelay={500} shouldWrapChildren={disabled}>
-      <IconButton
-        icon={<IoPlaySkipForward size='22px' />}
-        colorScheme='whiteAlpha'
-        backgroundColor='#ffffff11'
-        variant='outline'
-        onClick={clickhandler}
-        width={90}
-        _focus={{ boxShadow: 'none' }}
-        {...rest}
-      />
-    </Tooltip>
-  );
-}

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

@@ -1,22 +0,0 @@
-import React from 'react';
-import { IconButton } from '@chakra-ui/button';
-import { IoMicSharp } from '@react-icons/all-files/io5/IoMicSharp';
-import { IoMicOffOutline } from '@react-icons/all-files/io5/IoMicOffOutline';
-import { Tooltip } from '@chakra-ui/tooltip';
-
-export default function OnAirIconBtn(props) {
-  const { actionHandler, active, size, ...rest } = props;
-  return (
-    <Tooltip label={active ? 'Go Off Air' : 'Go On Air'} openDelay={500}>
-      <IconButton
-        size={size || 'xs'}
-        icon={active ? <IoMicSharp size='24px' /> : <IoMicOffOutline size='24px' />}
-        colorScheme='blue'
-        variant={active ? 'solid' : 'outline'}
-        onClick={() => actionHandler('update', { field: 'isPublic', value: !active })}
-        _focus={{ boxShadow: 'none' }}
-        {...rest}
-      />
-    </Tooltip>
-  );
-}

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { IconButton } from '@chakra-ui/button';
 import { IoPause } from '@react-icons/all-files/io5/IoPause';
 import { Tooltip } from '@chakra-ui/tooltip';
+import PropTypes from 'prop-types';
 
 export default function PauseIconBtn(props) {
   const { clickhandler, active, disabled, ...rest } = props;
@@ -10,12 +11,19 @@ export default function PauseIconBtn(props) {
       <IconButton
         icon={<IoPause size='24px' />}
         colorScheme='orange'
+        _hover={!disabled && { bg: 'orange.400' }}
         variant={active ? 'solid' : 'outline'}
         onClick={clickhandler}
         width={120}
-        _focus={{ boxShadow: 'none' }}
+        disabled={disabled}
         {...rest}
       />
     </Tooltip>
   );
 }
+
+PauseIconBtn.propTypes = {
+  clickhandler: PropTypes.func,
+  active: PropTypes.bool,
+  disabled: PropTypes.bool
+}

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

@@ -1,22 +0,0 @@
-import React from 'react';
-import { IconButton } from '@chakra-ui/button';
-import { IoPlaySkipBack } from '@react-icons/all-files/io5/IoPlaySkipBack';
-import { Tooltip } from '@chakra-ui/tooltip';
-
-export default function PrevIconBtn(props) {
-  const { clickhandler, disabled, ...rest } = props;
-  return (
-    <Tooltip label='Previous event' openDelay={500} shouldWrapChildren={disabled}>
-      <IconButton
-        icon={<IoPlaySkipBack size='22px' />}
-        colorScheme='whiteAlpha'
-        backgroundColor='#ffffff11'
-        variant='outline'
-        onClick={clickhandler}
-        width={90}
-        _focus={{ boxShadow: 'none' }}
-        {...rest}
-      />
-    </Tooltip>
-  );
-}

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

@@ -2,20 +2,26 @@ import React from 'react';
 import { IconButton } from '@chakra-ui/button';
 import { Tooltip } from '@chakra-ui/tooltip';
 import { FiUsers } from '@react-icons/all-files/fi/FiUsers';
+import PropTypes from 'prop-types';
 
 export default function PublicIconBtn(props) {
-  const { actionHandler, active, size, ...rest } = props;
+  const { actionHandler, active, size = 'xs', ...rest } = props;
   return (
     <Tooltip label={active ? 'Make event private' : 'Make event public'}>
       <IconButton
-        size={size || 'xs'}
+        size={size}
         icon={<FiUsers />}
         colorScheme='blue'
         variant={active ? 'solid' : 'outline'}
         onClick={() => actionHandler('update', { field: 'isPublic', value: !active })}
-        _focus={{ boxShadow: 'none' }}
         {...rest}
       />
     </Tooltip>
   );
 }
+
+PublicIconBtn.propTypes = {
+  actionHandler: PropTypes.func,
+  active: PropTypes.bool,
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
+};

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

@@ -0,0 +1,67 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { Button, IconButton } from '@chakra-ui/button';
+import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+} from '@chakra-ui/modal';
+import { Tooltip } from '@chakra-ui/tooltip';
+import { FiPower } from '@react-icons/all-files/fi/FiPower';
+import PropTypes from 'prop-types';
+
+export default function QuitIconBtn(props) {
+  const { clickHandler, size = 'lg', ...rest } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const onClose = () => setIsOpen(false);
+  const cancelRef = useRef();
+
+  const handleShutdown = useCallback(() => {
+    onClose();
+    clickHandler();
+  },[clickHandler]);
+
+  return (
+    <>
+      <Tooltip label='Quit Application'>
+        <IconButton
+          size={size}
+          icon={<FiPower />}
+          colorScheme='red'
+          variant='outline'
+          isRound
+          onClick={() => setIsOpen(true)}
+          _focus={{ boxShadow: 'none' }}
+          {...rest}
+        />
+      </Tooltip>
+      <AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
+        <AlertDialogOverlay>
+          <AlertDialogContent>
+            <AlertDialogHeader fontSize='lg' fontWeight='bold'>
+              Server Shutdown
+            </AlertDialogHeader>
+            <AlertDialogBody>
+              This will shutdown the program and all running servers. Are you sure?
+            </AlertDialogBody>
+            <AlertDialogFooter>
+              <Button ref={cancelRef} onClick={onClose}>
+                Cancel
+              </Button>
+              <Button colorScheme='red' onClick={handleShutdown} ml={3}>
+                Shutdown
+              </Button>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogOverlay>
+      </AlertDialog>
+    </>
+  );
+}
+
+QuitIconBtn.propTypes = {
+  clickHandler: PropTypes.func,
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
+};

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

@@ -1,22 +0,0 @@
-import React from 'react';
-import { IconButton } from '@chakra-ui/button';
-import { IoArrowUndo } from '@react-icons/all-files/io5/IoArrowUndo';
-import { Tooltip } from '@chakra-ui/tooltip';
-
-export default function ReloadIconButton(props) {
-  const { clickhandler, disabled, ...rest } = props;
-  return (
-    <Tooltip label='Reload event' openDelay={500} shouldWrapChildren={disabled}>
-      <IconButton
-        icon={<IoArrowUndo size='22px' />}
-        colorScheme='whiteAlpha'
-        backgroundColor='#ffffff05'
-        variant='outline'
-        onClick={clickhandler}
-        width={90}
-        _focus={{ boxShadow: 'none' }}
-        {...rest}
-      />
-    </Tooltip>
-  );
-}

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { IconButton } from '@chakra-ui/button';
 import { IoTimeOutline } from '@react-icons/all-files/io5/IoTimeOutline';
 import { Tooltip } from '@chakra-ui/tooltip';
+import PropTypes from 'prop-types';
 
 export default function RollIconBtn(props) {
   const { clickhandler, active, disabled, ...rest } = props;
@@ -13,9 +14,15 @@ export default function RollIconBtn(props) {
         variant={active ? 'solid' : 'outline'}
         onClick={clickhandler}
         width={120}
-        _focus={{ boxShadow: 'none' }}
+        disabled={disabled}
         {...rest}
       />
     </Tooltip>
   );
 }
+
+RollIconBtn.propTypes = {
+  clickhandler: PropTypes.func,
+  active: PropTypes.bool,
+  disabled: PropTypes.bool
+}

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { IconButton } from '@chakra-ui/button';
 import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
 import { Tooltip } from '@chakra-ui/tooltip';
+import PropTypes from 'prop-types';
 
 export default function StartIconBtn(props) {
   const { clickhandler, active, disabled, ...rest } = props;
@@ -13,9 +14,15 @@ export default function StartIconBtn(props) {
         variant={active ? 'solid' : 'outline'}
         onClick={clickhandler}
         width={120}
-        _focus={{ boxShadow: 'none' }}
+        disabled={disabled}
         {...rest}
       />
     </Tooltip>
   );
 }
+
+StartIconBtn.propTypes = {
+  clickhandler: PropTypes.func,
+  active: PropTypes.bool,
+  disabled: PropTypes.bool
+}

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { IconButton } from '@chakra-ui/button';
+import { Tooltip } from '@chakra-ui/tooltip';
+import PropTypes from 'prop-types';
+
+export default function TooltipActionBtn(props) {
+  const { clickHandler, icon, color, size='xs', tooltip, ...rest } = props;
+  return (
+    <Tooltip label={tooltip}>
+      <IconButton
+        aria-label={tooltip}
+        size={size}
+        icon={icon}
+        onClick={clickHandler}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}
+
+TooltipActionBtn.propTypes = {
+  clickHandler: PropTypes.func,
+  icon: PropTypes.element,
+  color: PropTypes.string,
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
+  tooltip: PropTypes.string
+}

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

@@ -0,0 +1,36 @@
+import React, { useCallback, useState } from 'react';
+import { IconButton } from '@chakra-ui/button';
+import { Tooltip } from '@chakra-ui/tooltip';
+import PropTypes from 'prop-types';
+
+export default function TooltipLoadingActionBtn(props) {
+  const { clickHandler, icon, color, size = 'xs', tooltip, ...rest } = props;
+  const [loading, setLoading] = useState(false);
+
+  const handleClick = useCallback(() => {
+    setLoading(true);
+    clickHandler();
+  },[clickHandler, setLoading]);
+
+  return (
+    <Tooltip label={tooltip} shouldWrapChildren={loading}>
+      <IconButton
+        aria-label={tooltip}
+        size={size}
+        icon={icon}
+        onClick={handleClick}
+        disabled={loading}
+        isLoading={loading}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}
+
+TooltipLoadingActionBtn.propTypes = {
+  clickHandler: PropTypes.func,
+  icon: PropTypes.element,
+  color: PropTypes.string,
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
+  tooltip: PropTypes.string,
+};

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { IconButton } from '@chakra-ui/button';
+import { Tooltip } from '@chakra-ui/tooltip';
+import PropTypes from 'prop-types';
+
+export default function TransportIconBtn(props) {
+  const { clickHandler, icon, tooltip, disabled, ...rest } = props;
+  return (
+    <Tooltip label={tooltip} openDelay={500} shouldWrapChildren={disabled}>
+      <IconButton
+        icon={icon}
+        colorScheme='white'
+        variant='outline'
+        _hover={!disabled && { bg: '#ebedf0', color: '#333' }}
+        onClick={clickHandler}
+        width={90}
+        disabled={disabled}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}
+
+TransportIconBtn.propTypes = {
+  clickHandler: PropTypes.func,
+  icon: PropTypes.element,
+  tooltip: PropTypes.string,
+  disabled: PropTypes.bool,
+};

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

@@ -1,16 +0,0 @@
-import { IconButton } from '@chakra-ui/button';
-import { FiTrash2 } from '@react-icons/all-files/fi/FiTrash2';
-
-export default function TrashIconBtn(props) {
-  const { clickhandler, ...rest } = props;
-  return (
-    <IconButton
-      size={props.size || 'xs'}
-      icon={<FiTrash2 />}
-      colorScheme='red'
-      onClick={clickhandler}
-      _focus={{ boxShadow: 'none' }}
-      {...rest}
-    />
-  );
-}

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

@@ -2,20 +2,26 @@ import React from 'react';
 import { IconButton } from '@chakra-ui/button';
 import { IoStop } from '@react-icons/all-files/io5/IoStop';
 import { Tooltip } from '@chakra-ui/tooltip';
+import PropTypes from 'prop-types';
 
 export default function UnloadIconBtn(props) {
-  const { clickhandler, disabled, ...rest } = props;
+  const { clickHandler, disabled, ...rest } = props;
   return (
     <Tooltip label='Unload event' openDelay={500} shouldWrapChildren={disabled}>
       <IconButton
         icon={<IoStop size='22px' />}
         colorScheme='red'
         variant='outline'
-        onClick={clickhandler}
+        onClick={clickHandler}
         width={90}
-        _focus={{ boxShadow: 'none' }}
+        disabled={disabled}
         {...rest}
       />
     </Tooltip>
   );
 }
+
+UnloadIconBtn.propTypes = {
+  clickHandler: PropTypes.func,
+  disabled: PropTypes.bool,
+};

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

@@ -1,23 +0,0 @@
-import React from 'react';
-import { IconButton } from '@chakra-ui/button';
-import { IoSunny } from '@react-icons/all-files/io5/IoSunny';
-import { Tooltip } from '@chakra-ui/tooltip';
-
-export default function VisibleIconBtn(props) {
-  const { actionHandler, active, size, ...rest } = props;
-  return (
-    <Tooltip label={active ? 'Make invisible' : 'Make visible'} openDelay={500}>
-      <IconButton
-        size={size || 'xs'}
-        icon={<IoSunny size='18px' />}
-        colorScheme='blue'
-        variant={active ? 'solid' : 'outline'}
-        onClick={() =>
-          actionHandler('update', { field: 'isPublic', value: !active })
-        }
-        _focus={{ boxShadow: 'none' }}
-        {...rest}
-      />
-    </Tooltip>
-  );
-}