cleanup + small style tweaks

client/src/App.jsx

@@ -1,8 +1,5 @@
 import { Route } from 'react-router';
 import './App.css';
-import { EventProvider } from './app/context/eventContext';
-import { EventListProvider } from './app/context/eventListContext';
-import { PresenterMessageProvider } from './app/context/presenterMessageContext';
 import Editor from './features/editors/Editor';
 import DefaultPresenter from './features/viewers/DefaultPresenter';
 import { QueryClient, QueryClientProvider } from 'react-query';
@@ -13,18 +10,12 @@ const queryClient = new QueryClient();
 function App() {
   return (
     <SocketProvider>
-      <QueryClientProvider client={queryClient}>
+      <div className='App'>
-        <PresenterMessageProvider>
+        <Route path='/' exact component={DefaultPresenter} />
-          <EventProvider>
+        <QueryClientProvider client={queryClient}>
-            <div className='App'>
+          <Route path='/editor' exact component={Editor} />
-              <Route path='/' exact component={DefaultPresenter} />
+        </QueryClientProvider>
-              <EventListProvider>
+      </div>
-                <Route path='/editor' exact component={Editor} />
-              </EventListProvider>
-            </div>
-          </EventProvider>
-        </PresenterMessageProvider>
-      </QueryClientProvider>
     </SocketProvider>
   );
 }

client/src/features/editors/Editor.jsx

@@ -1,5 +1,5 @@
 import { IconButton } from '@chakra-ui/button';
-import { SettingsIcon } from '@chakra-ui/icons';
+import { FiSettings } from "react-icons/fi";
 import { Grid, GridItem, Heading } from '@chakra-ui/layout';
 import { Box } from '@chakra-ui/layout';
 import NumberedText from '../../common/components/text/NumberedText';
@@ -80,7 +80,7 @@ export default function Editor() {
               paddingTop: '3em',
             }}
           >
-            <IconButton icon={<SettingsIcon />} isRound variant='outline' />
+            <IconButton icon={<FiSettings />} isRound variant='outline' />
             <div
               style={{
                 width: 35,

client/src/features/editors/Editor.module.css

@@ -9,7 +9,7 @@
   margin-top: 1.5vh;
   background-color: #fcfcfa;
   /* 011627 */
-  padding: 1em 1.5em;
+  padding: 0.8em 1.5em;
 
   display: flex;
   flex-direction: column;

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

@@ -10,12 +10,12 @@
   width: 100%;
   border-radius: 8px;
   font-size: 15px;
+  border: 1px solid #0001;
 }
 
 .block,
 .delay {
   padding: 0.2em 1em;
-  color: white;
   box-sizing: border-box;
   display: flex;
   margin: auto;
@@ -62,14 +62,17 @@
 
 .eventRow {
   background-color: #0001;
-  border-top: 2px solid #0001;
-  border-bottom: 2px solid #0001;
 }
 
 .eventRowActive {
   background-color: #b2f5eaaa;
-  border-top: 2px solid #b2f5ea;
+  background: linear-gradient(
-  border-bottom: 2px solid #b2f5ea;
+    0deg,
+    #7aadffaa 5%,
+    #7aadff55 6%,
+    #7aadff55 95%,
+    #7aadffaa 96%
+  );
 }
 
 .titleContainer,
@@ -99,22 +102,19 @@
 /* ============= BLOCK BLOCK ============= */
 .block {
   background-color: #805ad5aa;
-  height: 3em;
+  background: linear-gradient(0deg, #805ad5aa 20%, #805ad555 21%);
-  border: 1px solid #0001;
-  border-bottom: 8px solid #805ad5;
-
   flex-direction: row-reverse;
 }
 
 /* ============= DELAY BLOCK ============= */
 .delay {
   background-color: #ecc94baa;
-  border: 1px solid #0001;
+  background: linear-gradient(180deg, #ecc94baa 20%, #ecc94b55 21%);
-  border-top: 4px solid #ecc94b;
+  justify-content: space-between;
 }
 
 .delayValue {
-  color: #000;
+  color: #222;
   background-color: #fff5;
   border-radius: 4px;
   padding: 0.2em;

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

@@ -12,13 +12,16 @@ export default function BlockBlock(props) {
   const deleteHandler = () => {
     eventsHandler('delete', data.id);
   };
+  const delayHandler = () => {
+    eventsHandler('add', { type: 'delay', order: index + 1 });
+  };
 
   return (
     <div className={style.block}>
       <div className={style.actionOverlay}>
         <DeleteIconBtn clickHandler={deleteHandler} />
         <AddIconBtn clickHandler={addHandler} />
-        <DelayIconBtn />
+        <DelayIconBtn clickHandler={delayHandler} />
       </div>
     </div>
   );

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

@@ -1,4 +1,3 @@
-import { useEffect, useState } from 'react';
 import AddIconBtn from '../../../common/components/buttons/AddIconBtn';
 import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn';
 import { millisToMinutes } from '../../../common/dateConfig';