From 68eb9687d4a69ec34fb3328c6d9482e2c136b0cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Casper=20H=C3=BCbertz?= <casper@elastic.co>
Date: Fri, 14 Jun 2019 11:23:37 +0200
Subject: [PATCH] [APM] UI Dark theme fixes (#38840)

* Removed hard-coded background color

* Updated x-axis ticks text color to match other charts

* Updated to match Eui border-radius

* Update snapshots
---
 .../__snapshots__/Stackframe.test.tsx.snap    | 14 ++--
 .../__snapshots__/CustomPlot.test.js.snap     |  4 +-
 .../__snapshots__/Histogram.test.js.snap      |  4 +-
 .../shared/charts/Timeline/TimelineAxis.js    |  3 +-
 .../__snapshots__/Timeline.test.js.snap       | 83 +++++++++----------
 x-pack/plugins/apm/public/style/variables.ts  |  2 +-
 6 files changed, 54 insertions(+), 56 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 7f0016210645..1b465db1c626 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 119f46f09d1e..7cc68fefb7ca 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 305acafcf559..dcbaeccf1450 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/TimelineAxis.js b/x-pack/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.js
index 10e523c38727..722dc8562327 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,
@@ -70,7 +69,7 @@ function TimelineAxis({ plotValues, agentMarks, traceRootDuration }) {
                 tickFormat={tickFormat}
                 tickPadding={20}
                 style={{
-                  text: { fill: theme.euiColorMediumShade }
+                  text: { fill: theme.euiColorDarkShade }
                 }}
               />
 
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 3d2c94ea8918..f87c799274e8 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",
                           },
                         }
                       }
diff --git a/x-pack/plugins/apm/public/style/variables.ts b/x-pack/plugins/apm/public/style/variables.ts
index 60cd8b0460e7..24ef60844132 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';