style: improve readability of list

apps/client/src/features/operator/operator-event/OperatorEvent.module.scss

@@ -6,16 +6,19 @@
   @include block();
   background-color: $gray-1300;
   opacity: 1;
+  border-top: 1px solid $white-1;
 
   &.subscribed {
     background-color: $gray-1250;
   }
 
   &.running {
+    border-top: 1px solid $white-10;
     background-color: $red-700;
   }
 
   &.past {
+    border-top: 1px solid transparent;
     opacity: 0.2;
   }
 }
@@ -28,6 +31,7 @@
   .title {
     font-size: 1.5rem;
     letter-spacing: 0.5px;
+    color: $ui-white;
   }
 
   .cue {
@@ -44,6 +48,7 @@
   align-items: center;
   justify-content: space-between;
   font-size: calc(1rem - 1px);
+  color: $white-90;
 
   .runtime {
     display: flex;
@@ -54,8 +59,19 @@
 
 .fields {
   font-size: 1.25rem;
-  font-weight: 500;
-  color: $orange-500;
+  font-weight: 600;
+  color: $ui-black;
+  margin-top: 0.25rem;
+
+  .field {
+    padding: 0 0.25rem;
+    background-color: $orange-600;
+    margin-right: 0.5rem;
+  }
+
+  .value {
+    color: $orange-500
+  }
 
   letter-spacing: 0.5px;
   height: fit-content;

apps/client/src/features/operator/operator-event/OperatorEvent.tsx

@@ -64,8 +64,8 @@ export default function OperatorEvent(props: OperatorEventProps) {
 
       {subscribedData && (
         <div className={style.fields}>
-          {subscribedAlias && <span>{`${subscribedAlias} - `}</span>}
-          <span>{subscribedData}</span>
+          {subscribedAlias && <span className={style.field}>{`${subscribedAlias}`}</span>}
+          <span className={style.value}>{subscribedData}</span>
         </div>
       )}
     </div>

apps/client/src/theme/_ontimeColours.scss

@@ -8,6 +8,7 @@ $white-10: rgba(255, 255, 255, 0.10);
 $white-13: rgba(255, 255, 255, 0.13);
 $white-20: rgba(255, 255, 255, 0.20);
 $white-60: rgba(255, 255, 255, 0.60);
+$white-90: rgba(255, 255, 255, 0.90);
 
 $black-10: rgba(0, 0, 0, 0.10);