Added a blue timeline line

Summary:
I've added in a timeline line. Getting the CSS for this to work perfectly was tricky, but in the end this result looks pretty good. I've opted for the unknown events to have a smaller circle.

Edit:

I have fixed the border radius issue with the img element:

{F206482232}

And Unknown events are better aligned:

{F206482255}

Reviewed By: jknoxville

Differential Revision: D17180819

fbshipit-source-id: c318d2721adde758494267095524961c796f7a54

src/plugins/navigation/components/NavigationInfoBox.tsx

@@ -36,6 +36,8 @@ const ScreenshotContainer = styled('div')({
   overflow: 'hidden',
   borderLeft: `1px ${colors.blueGreyTint90} solid`,
   position: 'relative',
+  height: '100%',
+  borderRadius: 10,
   img: {
     width: '100%',
   },
@@ -44,6 +46,7 @@ const ScreenshotContainer = styled('div')({
 const NoData = styled('div')({
   color: colors.light30,
   fontSize: 14,
+  position: 'relative',
 });
 
 const NavigationDataContainer = styled('div')({
@@ -74,7 +77,7 @@ const NavigationInfoBoxContainer = styled('div')({
   height: BOX_HEIGHT,
   borderRadius: 10,
   flexGrow: 1,
-  overflow: 'hidden',
+  position: 'relative',
   marginBottom: 10,
   backgroundColor: colors.white,
   boxShadow: '1px 1px 5px rgba(0,0,0,0.1)',
@@ -107,6 +110,27 @@ const NoParamters = styled(FlexCenter)({
   color: colors.light10,
 });
 
+const TimelineCircle = styled('div')({
+  width: 18,
+  height: 18,
+  top: 11,
+  left: -33,
+  backgroundColor: colors.light02,
+  border: `4px solid ${colors.highlight}`,
+  borderRadius: '50%',
+  position: 'absolute',
+});
+
+const TimelineMiniCircle = styled('div')({
+  width: 12,
+  height: 12,
+  top: 1,
+  left: -30,
+  borderRadius: '50%',
+  backgroundColor: colors.highlight,
+  position: 'absolute',
+});
+
 const buildParameterTable = (parameters: Map<string, string>) => {
   const tableRows: Array<TableBodyRow> = [];
   let idx = 0;
@@ -144,11 +168,19 @@ export default (props: Props) => {
     date,
   } = props;
   if (uri == null && className == null) {
-    return <NoData>Unknown Navigation Event</NoData>;
+    return (
+      <>
+        <NoData>
+          <TimelineMiniCircle />
+          Unknown Navigation Event
+        </NoData>
+      </>
+    );
   } else {
     const parameters = uri != null ? parseURIParameters(uri) : null;
     return (
       <NavigationInfoBoxContainer>
+        <TimelineCircle />
         <NavigationDataContainer>
           <Header>
             {uri != null ? stripQueryParameters(uri) : ''}

src/plugins/navigation/components/Timeline.tsx

@@ -17,16 +17,35 @@ type Props = {
   onFavorite: (uri: URI) => void;
 };
 
+const TimelineLine = styled('div')({
+  width: 2,
+  backgroundColor: colors.highlight,
+  position: 'absolute',
+  top: 38,
+  bottom: 0,
+});
+
 const TimelineContainer = styled('div')({
+  position: 'relative',
+  paddingLeft: 25,
   overflowY: 'scroll',
   flexGrow: 1,
   backgroundColor: colors.light02,
   scrollBehavior: 'smooth',
+  '&>div': {
+    position: 'relative',
+    minHeight: '100%',
+    '&:last-child': {
+      paddingBottom: 25,
+    },
+  },
 });
 
 const NavigationEventContainer = styled('div')({
   display: 'flex',
-  margin: 20,
+  paddingTop: 25,
+  paddingLeft: 25,
+  marginRight: 25,
 });
 
 const NoData = styled(FlexCenter)({
@@ -43,6 +62,8 @@ export default (props: Props) => {
     <NoData>No Navigation Events to Show</NoData>
   ) : (
     <TimelineContainer innerRef={timelineRef}>
+      <div>
+        <TimelineLine />
         {events.map((event: NavigationEvent, idx: number) => {
           return (
             <NavigationEventContainer>
@@ -66,6 +87,7 @@ export default (props: Props) => {
             </NavigationEventContainer>
           );
         })}
+      </div>
     </TimelineContainer>
   );
 };