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

[APM] Invert tint fraction after polished upgrade (#103439)

Browse source 
Closes #103061. We use polished.tint() in several places to have a subdued highlight for an element. With the polished upgrade to 3.x from several weeks ago came a bug fix for tint() that applied the tint fraction in a different way. The fix for us to invert those fractions (eg 0.1 becomes 0.9).
This commit is contained in:
Dario Gieselaar 2021-06-28 20:02:44 +02:00 • committed by GitHub
parent 706298d2bb
commit 0f9b715dff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 5 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

2
x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/DatabaseContext.tsx
View file

@ -28,7 +28,7 @@ SyntaxHighlighter.registerLanguage('sql', sql);
const DatabaseStatement = euiStyled.div` const DatabaseStatement = euiStyled.div`
padding: ${px(units.half)} ${px(unit)}; padding: ${px(units.half)} ${px(unit)};
background: ${({ theme }) => tint(0.1, theme.eui.euiColorWarning)}; background: ${({ theme }) => tint(0.9, theme.eui.euiColorWarning)};
border-radius: ${borderRadius}; border-radius: ${borderRadius};
border: 1px solid ${({ theme }) => theme.eui.euiColorLightShade}; border: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
font-family: ${fontFamilyCode}; font-family: ${fontFamilyCode};

2
x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestion.js
View file

@ -70,7 +70,7 @@ const ListItem = euiStyled.li`
const Icon = euiStyled.div` const Icon = euiStyled.div`
flex: 0 0 ${px(units.double)}; flex: 0 0 ${px(units.double)};
background: ${({ type, theme }) => tint(0.1, getIconColor(type, theme))}; background: ${({ type, theme }) => tint(0.9, getIconColor(type, theme))};
color: ${({ type, theme }) => getIconColor(type, theme)}; color: ${({ type, theme }) => getIconColor(type, theme)};
width: 100%; width: 100%;
height: 100%; height: 100%;

2
x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestions.js
View file

@ -18,7 +18,7 @@ const List = euiStyled.ul`
border: 1px solid ${({ theme }) => theme.eui.euiColorLightShade}; border: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
border-radius: ${px(units.quarter)}; border-radius: ${px(units.quarter)};
box-shadow: 0px ${px(units.quarter)} ${px(units.double)} box-shadow: 0px ${px(units.quarter)} ${px(units.double)}
${({ theme }) => tint(0.1, theme.eui.euiColorFullShade)}; ${({ theme }) => tint(0.9, theme.eui.euiColorFullShade)};
position: absolute; position: absolute;
background: ${({ theme }) => theme.eui.euiColorEmptyShade}; background: ${({ theme }) => theme.eui.euiColorEmptyShade};
z-index: 10; z-index: 10;

4
x-pack/plugins/apm/public/components/shared/Stacktrace/Context.tsx
View file

@ -33,7 +33,7 @@ const LineHighlight = euiStyled.div<{ lineNumber: number }>`
height: ${px(units.eighth * 9)}; height: ${px(units.eighth * 9)};
top: ${(props) => px(props.lineNumber * LINE_HEIGHT)}; top: ${(props) => px(props.lineNumber * LINE_HEIGHT)};
pointer-events: none; pointer-events: none;
background-color: ${({ theme }) => tint(0.1, theme.eui.euiColorWarning)}; background-color: ${({ theme }) => tint(0.9, theme.eui.euiColorWarning)};
`; `;
const LineNumberContainer = euiStyled.div<{ isLibraryFrame: boolean }>` const LineNumberContainer = euiStyled.div<{ isLibraryFrame: boolean }>`
@ -57,7 +57,7 @@ const LineNumber = euiStyled.div<{ highlight: boolean }>`
text-align: right; text-align: right;
border-right: 1px solid ${({ theme }) => theme.eui.euiColorLightShade}; border-right: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
background-color: ${({ highlight, theme }) => background-color: ${({ highlight, theme }) =>
highlight ? tint(0.1, theme.eui.euiColorWarning) : null}; highlight ? tint(0.9, theme.eui.euiColorWarning) : null};
&:last-of-type { &:last-of-type {
border-radius: 0 0 0 ${borderRadius}; border-radius: 0 0 0 ${borderRadius};