style: small tweaks on blocks

apps/client/src/features/rundown/event-block/EventBlock.module.scss

@@ -2,8 +2,11 @@
 @use '../../../theme/ontimeColours' as *;
 @use '../blockMixins' as *;
 
+$skip-opacity: 0.1;
+
 .eventBlock {
   @include block-styling;
+  background-color: $block-bg;
 
   display: grid;
   grid-template-areas:
@@ -29,7 +32,6 @@
 
   &.skip {
     border: 1px solid $white-3;
-    box-shadow: none;
 
     .delayNote,
     .eventTitle,
@@ -37,7 +39,7 @@
     .binder,
     .eventTimers,
     .eventStatus {
-      opacity: $opacity-disabled;
+      opacity: $skip-opacity;
     }
   }
 }

apps/client/src/features/rundown/event-block/EventBlockInner.tsx

@@ -1,13 +1,13 @@
 import { memo, useCallback, useEffect, useState } from 'react';
 import { Tooltip } from '@chakra-ui/react';
-import { IoCaretDownCircle } from '@react-icons/all-files/io5/IoCaretDownCircle';
-import { IoCaretUpCircle } from '@react-icons/all-files/io5/IoCaretUpCircle';
+import { IoCaretDown } from '@react-icons/all-files/io5/IoCaretDown';
+import { IoCaretUp } from '@react-icons/all-files/io5/IoCaretUp';
 import { IoOptions } from '@react-icons/all-files/io5/IoOptions';
 import { IoPeople } from '@react-icons/all-files/io5/IoPeople';
-import { IoPlayCircle } from '@react-icons/all-files/io5/IoPlayCircle';
-import { IoPlayForwardCircle } from '@react-icons/all-files/io5/IoPlayForwardCircle';
-import { IoPlaySkipForwardCircle } from '@react-icons/all-files/io5/IoPlaySkipForwardCircle';
-import { IoStopCircle } from '@react-icons/all-files/io5/IoStopCircle';
+import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
+import { IoPlayForward } from '@react-icons/all-files/io5/IoPlayForward';
+import { IoPlaySkipForward } from '@react-icons/all-files/io5/IoPlaySkipForward';
+import { IoStop } from '@react-icons/all-files/io5/IoStop';
 import { IoTime } from '@react-icons/all-files/io5/IoTime';
 import { EndAction, Playback, TimerType } from 'ontime-types';
 
@@ -120,16 +120,16 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
               <span className={style.tag}>NEXT</span>
             </Tooltip>
           )}
-          <Tooltip label={`End action: ${endAction}`} {...tooltipProps}>
-            <span>
-              <EndActionIcon action={endAction} className={style.statusIcon} />
-            </span>
-          </Tooltip>
           <Tooltip label={`Time type: ${timerType}`} {...tooltipProps}>
             <span>
               <TimerIcon type={timerType} className={style.statusIcon} />
             </span>
           </Tooltip>
+          <Tooltip label={`End action: ${endAction}`} {...tooltipProps}>
+            <span>
+              <EndActionIcon action={endAction} className={style.statusIcon} />
+            </span>
+          </Tooltip>
           <Tooltip label={`${isPublic ? 'Event is public' : 'Event is private'}`} {...tooltipProps}>
             <span>
               <IoPeople className={`${style.statusIcon} ${isPublic ? style.active : style.disabled}`} />
@@ -161,24 +161,24 @@ export default memo(EventBlockInner);
 function EndActionIcon(props: { action: EndAction; className: string }) {
   const { action, className } = props;
   if (action === EndAction.LoadNext) {
-    return <IoPlaySkipForwardCircle className={className} />;
+    return <IoPlaySkipForward className={className} />;
   }
   if (action === EndAction.PlayNext) {
-    return <IoPlayForwardCircle className={className} />;
+    return <IoPlayForward className={className} />;
   }
   if (action === EndAction.Stop) {
-    return <IoStopCircle className={className} />;
+    return <IoStop className={className} />;
   }
-  return <IoPlayCircle className={className} />;
+  return <IoPlay className={className} />;
 }
 
 function TimerIcon(props: { type: TimerType; className: string }) {
   const { type, className } = props;
   if (type === TimerType.CountUp) {
-    return <IoCaretUpCircle className={className} />;
+    return <IoCaretUp className={className} />;
   }
   if (type === TimerType.Clock) {
     return <IoTime className={className} />;
   }
-  return <IoCaretDownCircle className={className} />;
+  return <IoCaretDown className={className} />;
 }

apps/client/src/features/rundown/event-block/composite/BlockActionMenu.tsx

@@ -1,13 +1,5 @@
 import { useCallback } from 'react';
-import {
-  IconButton,
-  Menu,
-  MenuButton,
-  MenuDivider,
-  MenuItem,
-  MenuList,
-  Tooltip,
-} from '@chakra-ui/react';
+import { IconButton, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Tooltip } from '@chakra-ui/react';
 import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
 import { IoDuplicateOutline } from '@react-icons/all-files/io5/IoDuplicateOutline';
 import { IoEllipsisHorizontal } from '@react-icons/all-files/io5/IoEllipsisHorizontal';
@@ -27,14 +19,15 @@ interface BlockActionMenuProps {
   actionHandler: (action: EventItemActions, payload?: any) => void;
   className?: string;
 }
+
 export default function BlockActionMenu(props: BlockActionMenuProps) {
   const { showAdd, showDelay, showBlock, enableDelete, showClone, actionHandler, className } = props;
 
-  const handleAddEvent = useCallback(() => actionHandler("event"), [actionHandler])
-  const handleAddDelay = useCallback(() => actionHandler("delay"), [actionHandler])
-  const handleAddBlock = useCallback(() => actionHandler("block"), [actionHandler])
-  const handleClone = useCallback(() => actionHandler("clone"), [actionHandler])
-  const handleDelete = useCallback(() => actionHandler("delete"), [actionHandler])
+  const handleAddEvent = useCallback(() => actionHandler('event'), [actionHandler]);
+  const handleAddDelay = useCallback(() => actionHandler('delay'), [actionHandler]);
+  const handleAddBlock = useCallback(() => actionHandler('block'), [actionHandler]);
+  const handleClone = useCallback(() => actionHandler('clone'), [actionHandler]);
+  const handleDelete = useCallback(() => actionHandler('delete'), [actionHandler]);
 
   return (
     <Menu isLazy lazyBehavior='unmount' variant='ontime-on-dark'>
@@ -44,8 +37,7 @@ export default function BlockActionMenu(props: BlockActionMenuProps) {
           aria-label='Event options'
           icon={<IoEllipsisHorizontal />}
           tabIndex={-1}
-          variant='ontime-subtle'
-          color='#f6f6f6'
+          variant='ontime-subtle-white'
           size='sm'
           className={className}
         />
@@ -54,36 +46,19 @@ export default function BlockActionMenu(props: BlockActionMenuProps) {
         <MenuItem icon={<IoAdd />} onClick={handleAddEvent} isDisabled={!showAdd}>
           Add Event after
         </MenuItem>
-        <MenuItem
-          icon={<IoTimerOutline />}
-          onClick={handleAddDelay}
-          isDisabled={!showDelay}
-        >
+        <MenuItem icon={<IoTimerOutline />} onClick={handleAddDelay} isDisabled={!showDelay}>
           Add Delay after
         </MenuItem>
-        <MenuItem
-          icon={<IoRemoveCircleOutline />}
-          onClick={handleAddBlock}
-          isDisabled={!showBlock}
-        >
+        <MenuItem icon={<IoRemoveCircleOutline />} onClick={handleAddBlock} isDisabled={!showBlock}>
           Add Block after
         </MenuItem>
         {showClone && (
-          <MenuItem
-            icon={<IoDuplicateOutline />}
-            onClick={handleClone}
-            isDisabled={!showBlock}
-          >
+          <MenuItem icon={<IoDuplicateOutline />} onClick={handleClone} isDisabled={!showBlock}>
             Clone event
           </MenuItem>
         )}
         <MenuDivider />
-        <MenuItem
-          icon={<IoTrashBinSharp />}
-          onClick={handleDelete}
-          isDisabled={!enableDelete}
-          color='#D20300'
-        >
+        <MenuItem icon={<IoTrashBinSharp />} onClick={handleDelete} isDisabled={!enableDelete} color='#D20300'>
           Delete event
         </MenuItem>
       </MenuList>

apps/client/src/features/rundown/event-block/composite/EventBlockPlayback.tsx

@@ -42,6 +42,8 @@ const EventBlockPlayback = (props: EventBlockPlaybackProps) => {
         aria-label='Skip event'
         tooltip='Skip event'
         icon={skip ? <IoRemoveCircle /> : <IoRemoveCircleOutline />}
+        backgroundColor={skip ? '#FA5656' : undefined}
+        _hover={{ backgroundColor: skip ? '#FF7878' : '#404040' }}
         {...tooltipProps}
         {...blockBtnStyle}
         clickHandler={toggleSkip}