Merge pull request #318 from FormidableLabs/issue/239-timeline-pane-indicators

Add pane titles to Timeline events, closes #239

Author: bkonkle

src/panel/__image_snapshots__/TimelinePane - event (without metadata)-landscape-snap.png

@@ -60,6 +60,7 @@ const EventSection: FC<{ event: DebugEvent }> = ({ event }) => {
 
   return (
     <PaneSection>
+      <Title>Event</Title>
       <Heading>Event</Heading>
       <p>{event.type}</p>
       <Heading>Message</Heading>
@@ -85,6 +86,7 @@ const EventSection: FC<{ event: DebugEvent }> = ({ event }) => {
 /** Info about the source operation for the given event. */
 const SourceSection: FC<{ operation: Operation }> = ({ operation }) => (
   <PaneSection>
+    <Title>Operation</Title>
     <Heading>Key</Heading>
     <p>{operation.key}</p>
     <Heading>Operation type</Heading>
@@ -119,6 +121,14 @@ const Body = styled(Pane.Body)`
   }
 `;
 
+const Title = styled.h2`
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  font-size: 12px;
+  font-weight: normal;
+`;
+
 const Heading = styled.h3`
   color: #fff;
   font-size: 13px;