github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 09:19:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

[APM] UI Dark theme fixes (#38840) (#38968)

Browse source 
* Removed hard-coded background color

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

* Updated to match Eui border-radius

* Update snapshots
This commit is contained in:
Casper Hübertz 2019-06-14 14:09:09 +02:00 • committed by GitHub
parent 0b00499311
commit 6bbe81fd58
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 54 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

14
x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/__snapshots__/Stackframe.test.tsx.snap generated
View file

@ -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;
}

4
x-pack/plugins/apm/public/components/shared/charts/CustomPlot/test/__snapshots__/CustomPlot.test.js.snap generated
View file

@ -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;
}

4
x-pack/plugins/apm/public/components/shared/charts/Histogram/__test__/__snapshots__/Histogram.test.js.snap generated
View file

@ -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;
}

3
x-pack/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.js
View file

@ -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 }
}}
/>

83
x-pack/plugins/apm/public/components/shared/charts/Timeline/__test__/__snapshots__/Timeline.test.js.snap generated
View file

@ -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",
},
}
}

2
x-pack/plugins/apm/public/style/variables.ts
View file

@ -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';