From 094e4775757c1fd5e37c1566bea9cafa630558ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Casper=20Hu=CC=88bertz?= <casper@formgeist.com>
Date: Wed, 12 Jun 2019 22:32:25 +0200
Subject: [PATCH 1/4] Removed hard-coded background color

---
 .../apm/public/components/shared/charts/Timeline/TimelineAxis.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.js b/x-pack/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.js
index 10e523c387278..f59d2f5e84d79 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.js
+++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.js
@@ -43,7 +43,6 @@ function TimelineAxis({ plotValues, agentMarks, traceRootDuration }) {
           <div
             style={{
               position: 'absolute',
-              backgroundColor: theme.euiColorEmptyShade,
               borderBottom: `1px solid ${theme.euiColorMediumShade}`,
               height: px(margins.top),
               zIndex: 2,

From b7cc8f0414757a291dd49fa68499625490f10cf0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Casper=20Hu=CC=88bertz?= <casper@formgeist.com>
Date: Wed, 12 Jun 2019 22:32:48 +0200
Subject: [PATCH 2/4] Updated x-axis ticks text color to match other charts

---
 .../public/components/shared/charts/Timeline/TimelineAxis.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.js b/x-pack/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.js
index f59d2f5e84d79..722dc85623273 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.js
+++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.js
@@ -69,7 +69,7 @@ function TimelineAxis({ plotValues, agentMarks, traceRootDuration }) {
                 tickFormat={tickFormat}
                 tickPadding={20}
                 style={{
-                  text: { fill: theme.euiColorMediumShade }
+                  text: { fill: theme.euiColorDarkShade }
                 }}
               />
 

From 79ba228ba8e4d4f011cf6f510ffdc356577e09b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Casper=20Hu=CC=88bertz?= <casper@formgeist.com>
Date: Wed, 12 Jun 2019 22:33:24 +0200
Subject: [PATCH 3/4] Updated to match Eui border-radius

---
 x-pack/plugins/apm/public/style/variables.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/apm/public/style/variables.ts b/x-pack/plugins/apm/public/style/variables.ts
index 60cd8b0460e7d..24ef608441324 100644
--- a/x-pack/plugins/apm/public/style/variables.ts
+++ b/x-pack/plugins/apm/public/style/variables.ts
@@ -28,7 +28,7 @@ export function pct(value: number): string {
 }
 
 // Styling
-export const borderRadius = '5px';
+export const borderRadius = '4px';
 
 // Fonts
 export const fontFamily = '"Open Sans", Helvetica, Arial, sans-serif';

From 760e38f15de3d4e3cecd838d4a7783b53429d19a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Casper=20Hu=CC=88bertz?= <casper@formgeist.com>
Date: Wed, 12 Jun 2019 22:48:20 +0200
Subject: [PATCH 4/4] Update snapshots

---
 .../__snapshots__/Stackframe.test.tsx.snap    | 14 ++--
 .../__snapshots__/CustomPlot.test.js.snap     |  4 +-
 .../__snapshots__/Histogram.test.js.snap      |  4 +-
 .../__snapshots__/Timeline.test.js.snap       | 83 +++++++++----------
 4 files changed, 52 insertions(+), 53 deletions(-)

diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/__snapshots__/Stackframe.test.tsx.snap b/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/__snapshots__/Stackframe.test.tsx.snap
index 7f00162106454..1b465db1c6263 100644
--- a/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/__snapshots__/Stackframe.test.tsx.snap
+++ b/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/__snapshots__/Stackframe.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
 
 .c4 {
   position: relative;
-  border-radius: 0 0 5px 5px;
+  border-radius: 0 0 4px 4px;
 }
 
 .c5 {
@@ -31,7 +31,7 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
   position: absolute;
   top: 0;
   left: 0;
-  border-radius: 0 0 0 5px;
+  border-radius: 0 0 0 4px;
   background: #f5f7fa;
 }
 
@@ -47,7 +47,7 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
 }
 
 .c7:last-of-type {
-  border-radius: 0 0 0 5px;
+  border-radius: 0 0 0 4px;
 }
 
 .c8 {
@@ -63,7 +63,7 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
 }
 
 .c8:last-of-type {
-  border-radius: 0 0 0 5px;
+  border-radius: 0 0 0 4px;
 }
 
 .c9 {
@@ -74,7 +74,7 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
 }
 
 .c9:last-of-type {
-  border-radius: 0 0 5px 0;
+  border-radius: 0 0 4px 0;
 }
 
 .c10 {
@@ -98,7 +98,7 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
 
 .c1 {
   border-bottom: 1px solid #d3dae6;
-  border-radius: 5px 5px 0 0;
+  border-radius: 4px 4px 0 0;
 }
 
 .c0 {
@@ -106,7 +106,7 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
   font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
   font-size: 14px;
   border: 1px solid #d3dae6;
-  border-radius: 5px;
+  border-radius: 4px;
   background: #f5f7fa;
 }
 
diff --git a/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/test/__snapshots__/CustomPlot.test.js.snap b/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/test/__snapshots__/CustomPlot.test.js.snap
index 119f46f09d1ea..7cc68fefb7cac 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/test/__snapshots__/CustomPlot.test.js.snap
+++ b/x-pack/plugins/apm/public/components/shared/charts/CustomPlot/test/__snapshots__/CustomPlot.test.js.snap
@@ -2859,7 +2859,7 @@ Array [
   transform: translateY(-50%);
   border: 1px solid #d3dae6;
   background: #ffffff;
-  border-radius: 5px;
+  border-radius: 4px;
   font-size: 14px;
   color: #000000;
 }
@@ -2867,7 +2867,7 @@ Array [
 .c1 {
   background: #f5f7fa;
   border-bottom: 1px solid #d3dae6;
-  border-radius: 5px 5px 0 0;
+  border-radius: 4px 4px 0 0;
   padding: 8px;
   color: #98a2b3;
 }
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Histogram/__test__/__snapshots__/Histogram.test.js.snap b/x-pack/plugins/apm/public/components/shared/charts/Histogram/__test__/__snapshots__/Histogram.test.js.snap
index 305acafcf5597..dcbaeccf14506 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Histogram/__test__/__snapshots__/Histogram.test.js.snap
+++ b/x-pack/plugins/apm/public/components/shared/charts/Histogram/__test__/__snapshots__/Histogram.test.js.snap
@@ -1412,7 +1412,7 @@ exports[`Histogram when hovering over a non-empty bucket should have correct mar
   transform: translateY(-50%);
   border: 1px solid #d3dae6;
   background: #ffffff;
-  border-radius: 5px;
+  border-radius: 4px;
   font-size: 14px;
   color: #000000;
 }
@@ -1420,7 +1420,7 @@ exports[`Histogram when hovering over a non-empty bucket should have correct mar
 .c1 {
   background: #f5f7fa;
   border-bottom: 1px solid #d3dae6;
-  border-radius: 5px 5px 0 0;
+  border-radius: 4px 4px 0 0;
   padding: 8px;
   color: #98a2b3;
 }
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/__test__/__snapshots__/Timeline.test.js.snap b/x-pack/plugins/apm/public/components/shared/charts/Timeline/__test__/__snapshots__/Timeline.test.js.snap
index 3d2c94ea89183..f87c799274e8f 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/__test__/__snapshots__/Timeline.test.js.snap
+++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/__test__/__snapshots__/Timeline.test.js.snap
@@ -48,7 +48,6 @@ exports[`Timeline should render with data 1`] = `
         <div
           style={
             Object {
-              "backgroundColor": "#ffffff",
               "borderBottom": "1px solid #98a2b3",
               "height": "100px",
               "position": "absolute",
@@ -83,7 +82,7 @@ exports[`Timeline should render with data 1`] = `
                 style={
                   Object {
                     "text": Object {
-                      "fill": "#98a2b3",
+                      "fill": "#69707d",
                     },
                   }
                 }
@@ -98,7 +97,7 @@ exports[`Timeline should render with data 1`] = `
                     style={
                       Object {
                         "text": Object {
-                          "fill": "#98a2b3",
+                          "fill": "#69707d",
                         },
                       }
                     }
@@ -109,7 +108,7 @@ exports[`Timeline should render with data 1`] = `
                       style={
                         Object {
                           "text": Object {
-                            "fill": "#98a2b3",
+                            "fill": "#69707d",
                           },
                         }
                       }
@@ -123,9 +122,9 @@ exports[`Timeline should render with data 1`] = `
                       dy="0"
                       style={
                         Object {
-                          "fill": "#98a2b3",
+                          "fill": "#69707d",
                           "text": Object {
-                            "fill": "#98a2b3",
+                            "fill": "#69707d",
                           },
                         }
                       }
@@ -140,7 +139,7 @@ exports[`Timeline should render with data 1`] = `
                     style={
                       Object {
                         "text": Object {
-                          "fill": "#98a2b3",
+                          "fill": "#69707d",
                         },
                       }
                     }
@@ -151,7 +150,7 @@ exports[`Timeline should render with data 1`] = `
                       style={
                         Object {
                           "text": Object {
-                            "fill": "#98a2b3",
+                            "fill": "#69707d",
                           },
                         }
                       }
@@ -165,9 +164,9 @@ exports[`Timeline should render with data 1`] = `
                       dy="0"
                       style={
                         Object {
-                          "fill": "#98a2b3",
+                          "fill": "#69707d",
                           "text": Object {
-                            "fill": "#98a2b3",
+                            "fill": "#69707d",
                           },
                         }
                       }
@@ -182,7 +181,7 @@ exports[`Timeline should render with data 1`] = `
                     style={
                       Object {
                         "text": Object {
-                          "fill": "#98a2b3",
+                          "fill": "#69707d",
                         },
                       }
                     }
@@ -193,7 +192,7 @@ exports[`Timeline should render with data 1`] = `
                       style={
                         Object {
                           "text": Object {
-                            "fill": "#98a2b3",
+                            "fill": "#69707d",
                           },
                         }
                       }
@@ -207,9 +206,9 @@ exports[`Timeline should render with data 1`] = `
                       dy="0"
                       style={
                         Object {
-                          "fill": "#98a2b3",
+                          "fill": "#69707d",
                           "text": Object {
-                            "fill": "#98a2b3",
+                            "fill": "#69707d",
                           },
                         }
                       }
@@ -224,7 +223,7 @@ exports[`Timeline should render with data 1`] = `
                     style={
                       Object {
                         "text": Object {
-                          "fill": "#98a2b3",
+                          "fill": "#69707d",
                         },
                       }
                     }
@@ -235,7 +234,7 @@ exports[`Timeline should render with data 1`] = `
                       style={
                         Object {
                           "text": Object {
-                            "fill": "#98a2b3",
+                            "fill": "#69707d",
                           },
                         }
                       }
@@ -249,9 +248,9 @@ exports[`Timeline should render with data 1`] = `
                       dy="0"
                       style={
                         Object {
-                          "fill": "#98a2b3",
+                          "fill": "#69707d",
                           "text": Object {
-                            "fill": "#98a2b3",
+                            "fill": "#69707d",
                           },
                         }
                       }
@@ -266,7 +265,7 @@ exports[`Timeline should render with data 1`] = `
                     style={
                       Object {
                         "text": Object {
-                          "fill": "#98a2b3",
+                          "fill": "#69707d",
                         },
                       }
                     }
@@ -277,7 +276,7 @@ exports[`Timeline should render with data 1`] = `
                       style={
                         Object {
                           "text": Object {
-                            "fill": "#98a2b3",
+                            "fill": "#69707d",
                           },
                         }
                       }
@@ -291,9 +290,9 @@ exports[`Timeline should render with data 1`] = `
                       dy="0"
                       style={
                         Object {
-                          "fill": "#98a2b3",
+                          "fill": "#69707d",
                           "text": Object {
-                            "fill": "#98a2b3",
+                            "fill": "#69707d",
                           },
                         }
                       }
@@ -308,7 +307,7 @@ exports[`Timeline should render with data 1`] = `
                     style={
                       Object {
                         "text": Object {
-                          "fill": "#98a2b3",
+                          "fill": "#69707d",
                         },
                       }
                     }
@@ -319,7 +318,7 @@ exports[`Timeline should render with data 1`] = `
                       style={
                         Object {
                           "text": Object {
-                            "fill": "#98a2b3",
+                            "fill": "#69707d",
                           },
                         }
                       }
@@ -333,9 +332,9 @@ exports[`Timeline should render with data 1`] = `
                       dy="0"
                       style={
                         Object {
-                          "fill": "#98a2b3",
+                          "fill": "#69707d",
                           "text": Object {
-                            "fill": "#98a2b3",
+                            "fill": "#69707d",
                           },
                         }
                       }
@@ -350,7 +349,7 @@ exports[`Timeline should render with data 1`] = `
                     style={
                       Object {
                         "text": Object {
-                          "fill": "#98a2b3",
+                          "fill": "#69707d",
                         },
                       }
                     }
@@ -361,7 +360,7 @@ exports[`Timeline should render with data 1`] = `
                       style={
                         Object {
                           "text": Object {
-                            "fill": "#98a2b3",
+                            "fill": "#69707d",
                           },
                         }
                       }
@@ -375,9 +374,9 @@ exports[`Timeline should render with data 1`] = `
                       dy="0"
                       style={
                         Object {
-                          "fill": "#98a2b3",
+                          "fill": "#69707d",
                           "text": Object {
-                            "fill": "#98a2b3",
+                            "fill": "#69707d",
                           },
                         }
                       }
@@ -392,7 +391,7 @@ exports[`Timeline should render with data 1`] = `
                     style={
                       Object {
                         "text": Object {
-                          "fill": "#98a2b3",
+                          "fill": "#69707d",
                         },
                       }
                     }
@@ -403,7 +402,7 @@ exports[`Timeline should render with data 1`] = `
                       style={
                         Object {
                           "text": Object {
-                            "fill": "#98a2b3",
+                            "fill": "#69707d",
                           },
                         }
                       }
@@ -417,9 +416,9 @@ exports[`Timeline should render with data 1`] = `
                       dy="0"
                       style={
                         Object {
-                          "fill": "#98a2b3",
+                          "fill": "#69707d",
                           "text": Object {
-                            "fill": "#98a2b3",
+                            "fill": "#69707d",
                           },
                         }
                       }
@@ -434,7 +433,7 @@ exports[`Timeline should render with data 1`] = `
                     style={
                       Object {
                         "text": Object {
-                          "fill": "#98a2b3",
+                          "fill": "#69707d",
                         },
                       }
                     }
@@ -445,7 +444,7 @@ exports[`Timeline should render with data 1`] = `
                       style={
                         Object {
                           "text": Object {
-                            "fill": "#98a2b3",
+                            "fill": "#69707d",
                           },
                         }
                       }
@@ -459,9 +458,9 @@ exports[`Timeline should render with data 1`] = `
                       dy="0"
                       style={
                         Object {
-                          "fill": "#98a2b3",
+                          "fill": "#69707d",
                           "text": Object {
-                            "fill": "#98a2b3",
+                            "fill": "#69707d",
                           },
                         }
                       }
@@ -476,7 +475,7 @@ exports[`Timeline should render with data 1`] = `
                     style={
                       Object {
                         "text": Object {
-                          "fill": "#98a2b3",
+                          "fill": "#69707d",
                         },
                       }
                     }
@@ -487,7 +486,7 @@ exports[`Timeline should render with data 1`] = `
                       style={
                         Object {
                           "text": Object {
-                            "fill": "#98a2b3",
+                            "fill": "#69707d",
                           },
                         }
                       }
@@ -501,9 +500,9 @@ exports[`Timeline should render with data 1`] = `
                       dy="0"
                       style={
                         Object {
-                          "fill": "#98a2b3",
+                          "fill": "#69707d",
                           "text": Object {
-                            "fill": "#98a2b3",
+                            "fill": "#69707d",
                           },
                         }
                       }