style improvements

- added empty state to list
- styled scrollbars
- progressbar shows time elapsed
- timers are monospace
- prevent overflow in titles

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

@@ -17,7 +17,6 @@
   padding: 0.2em 1em;
   box-sizing: border-box;
   display: flex;
-  margin: auto;
   gap: 1em;
 }
 
@@ -68,10 +67,8 @@
   background-color: rgba(255, 255, 255, 0.36);
   background: linear-gradient(
     180deg,
-    #4bffabcc 0%,
-    #227c52aa 09%,
-    #4bffab11 10%,
-    #4bffab11 89%,
+    #00000000 10%,
+    #4bffab10 89%,
     #227c52aa 90%,
     #4bffabcc 100%
   );

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

@@ -4,6 +4,8 @@ import BlockBlock from './BlockBlock';
 import EventBlock from './EventBlock';
 import { useEffect, useState } from 'react';
 import { useSocket } from '../../../app/context/socketContext';
+import Empty from '../../../common/state/Empty';
+
 
 export default function EventList(props) {
   const { events, eventsHandler } = props;
@@ -28,6 +30,12 @@ export default function EventList(props) {
     };
   }, [socket]);
 
+  if (events.length < 1) {
+    return (
+        <Empty text='No Events' />
+    );
+  }
+
   console.log('EventList: events in event list', events);
   let cumulativeDelay = 0;
   let eventCount = -1;

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

@@ -7,4 +7,11 @@
   border: 1px solid rgba(0, 0, 0, 0.05);
   border-radius: 4px;
   padding: 8px;
+  overflow-y: scroll;
+  height: 71vh;
+}
+
+.empty {
+  opacity: 0.3;
+  align-self: center;
 }