bugfix: event order

+ bug caused by earlier commit making function async
+ small style changes
+ bug on prev - next

client/src/features/editors/list/ActionButtons.jsx

@@ -17,10 +17,10 @@ export default function ActionButtons(props) {
         aria-label='Options'
         size='xs'
         icon={<FiZap />}
-        _hover={{ bg: 'pink.500' }}
-        _expanded={{ bg: 'pink.300' }}
+        _expanded={{ bg: 'pink.300', color: 'white' }}
         _focus={{ boxShadow: 'none' }}
-        colorScheme='pink'
+        backgroundColor={'orange.200'}
+        color={'orange.500'}
       />
       <MenuList style={menuStyle}>
         {showDel && (

client/src/features/editors/list/Block.module.css

@@ -6,6 +6,8 @@
 .delay {
   position: relative;
   margin: 0.2em 0;
+  padding: 0.2em 0.5em;
+
   width: 100%;
   border-radius: 8px;
   font-size: 15px;
@@ -14,7 +16,6 @@
 
 .block,
 .delay {
-  padding: 0.2em 1em;
   box-sizing: border-box;
   display: flex;
   gap: 1em;
@@ -27,6 +28,7 @@
   gap: 0.5em;
   align-content: center;
   align-self: flex-start;
+
   opacity: 0.8;
   transition: linear 0.1s;
 }
@@ -47,7 +49,6 @@
 
 .eventRow,
 .eventRowActive {
-  padding: 0.2em 0.5em;
   padding-left: 1em;
 
   display: grid;

client/src/features/editors/list/BlockBlock.jsx

@@ -1,3 +1,4 @@
+import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn';
 import ActionButtons from './ActionButtons';
 import style from './Block.module.css';
 
@@ -17,14 +18,12 @@ export default function BlockBlock(props) {
   return (
     <div className={style.block}>
       <div className={style.actionOverlay}>
+        <DeleteIconBtn clickHandler={deleteHandler} />
         <ActionButtons
-          showDel
-          deleteHandler={deleteHandler}
           showAdd
           addHandler={addHandler}
           showDelay
           delayHandler={delayHandler}
-          showBlock
         />
       </div>
     </div>

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

@@ -2,6 +2,7 @@ import { millisToMinutes } from '../../../common/dateConfig';
 import TimeInput from '../../../common/input/TimeInput';
 import style from './Block.module.css';
 import ActionButtons from './ActionButtons';
+import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn';
 
 export default function DelayBlock(props) {
   const { data, eventsHandler, index } = props;
@@ -12,7 +13,6 @@ export default function DelayBlock(props) {
 
   const submitHandler = (value) => {
     // convert to ms and patch
-    console.log('debug adding', { id: data.id, duration: value * 1000 * 60 });
     eventsHandler('patch', { id: data.id, duration: value * 1000 * 60 });
   };
 
@@ -27,12 +27,8 @@ export default function DelayBlock(props) {
         submitHandler={submitHandler}
       />
       <div className={style.actionOverlay}>
-        <ActionButtons
-          showDel
-          deleteHandler={deleteHandler}
-          showAdd
-          addHandler={addHandler}
-        />
+        <DeleteIconBtn clickHandler={deleteHandler} />
+        <ActionButtons showAdd addHandler={addHandler} />
       </div>
     </div>
   );

client/src/features/editors/list/EventBlock.jsx

@@ -7,6 +7,7 @@ import EditableText from '../../../common/input/EditableText';
 import DelayValue from '../../../common/input/DelayValue';
 import ActionButtons from './ActionButtons';
 import VisibleIconBtn from '../../../common/components/buttons/VisibleIconBtn';
+import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn';
 
 export default function EventBlock(props) {
   const { data, selected, delay, index, eventsHandler } = props;
@@ -115,16 +116,14 @@ export default function EventBlock(props) {
           clickHandler={() => setVisible(!visible)}
           active={visible}
         />
+        <DeleteIconBtn clickHandler={deleteHandler} />
         <ActionButtons
-          showDel
-          deleteHandler={deleteHandler}
           showAdd
           addHandler={addHandler}
           showDelay
           delayHandler={delayHandler}
           showBlock
           blockHandler={blockHandler}
-          showPublic
         />
       </div>
     </div>