Fix milisecond diffs

Author: radenkovic

src/components/Waterfall/Waterfall.jsx

@@ -32,13 +32,16 @@ const PortInput = styled.input`
   font-weight: normal;
   height: 30px;
   border: 1px solid ${p => p.theme.border};
-  background: rgba(0, 0, 0, 0.03);
   border-radius: 3px;
   margin: 0;
   padding: 0 10px;
   width: 80px;
   outline: 0;
   font-weight: bold;
+  &:hover,
+  &:focus {
+    border-color: ${p => p.theme.primary};
+  }
 `;
 
 const BtnGroup = styled.div`

src/components/Waterfall/WaterfallItem.jsx

@@ -72,25 +72,32 @@ export default function WaterfallItem({
   condensed,
   index,
 }) {
-  const prevOffset = previousItem ? item.ts - previousItem.ts : 0;
+  let prevOffset = 0;
+  if (previousItem && previousItem.end <= item.ts) {
+    prevOffset = item.ts - previousItem.end;
+  } else if (previousItem && previousItem.end > item.ts) {
+    prevOffset = item.ts - previousItem.ts;
+  }
+
   let gapWidth = (item.ts - start) * zoomFactor;
   if (condensed) {
     gapWidth = index * 10;
   }
 
+  const color = stc(item.path);
   return (
     <Root>
       <Gap style={{ width: gapWidth }} />
       <Item>
         <DurationBar
           style={{
             width: item.duration * zoomFactor,
-            background: stc(item.path),
+            background: color,
           }}
         />
         <Method method={item.method}>{item.method}</Method>
         {item.path}
-        <Duration>{item.duration}ms</Duration>
+        <Duration style={{ color }}>{item.duration}ms</Duration>
         {previousItem && <small>+{prevOffset}ms</small>}
       </Item>
     </Root>

src/globalStyles.js

@@ -10,7 +10,7 @@ const GlobalStyle = createGlobalStyle`
   body {
     margin: 0;
     padding: 0;
-    font-family: sans-serif;
+    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
     line-height: 1.5;
     color: ${theme.text};
     font-size: 16px;