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

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). Co-authored-by: Dario Gieselaar <[email protected]>
elastic · Jun 28, 2021 · a8f3ef1 · a8f3ef1
1 parent 5703816
commit a8f3ef1
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 5 deletions.
diff --git a/...details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/DatabaseContext.tsx b/...details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/DatabaseContext.tsx
@@ -28,7 +28,7 @@ SyntaxHighlighter.registerLanguage('sql', sql);
 
 const DatabaseStatement = euiStyled.div`
  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: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
  font-family: ${fontFamilyCode};

diff --git a/x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestion.js b/x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestion.js
@@ -70,7 +70,7 @@ const ListItem = euiStyled.li`
 
 const Icon = euiStyled.div`
  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)};
  width: 100%;
  height: 100%;

diff --git a/x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestions.js b/x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestions.js
@@ -18,7 +18,7 @@ const List = euiStyled.ul`
  border: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
  border-radius: ${px(units.quarter)};
  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;
  background: ${({ theme }) => theme.eui.euiColorEmptyShade};
  z-index: 10;

diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/Context.tsx b/x-pack/plugins/apm/public/components/shared/Stacktrace/Context.tsx
@@ -33,7 +33,7 @@ const LineHighlight = euiStyled.div<{ lineNumber: number }>`
  height: ${px(units.eighth * 9)};
  top: ${(props) => px(props.lineNumber * LINE_HEIGHT)};
  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 }>`
@@ -57,7 +57,7 @@ const LineNumber = euiStyled.div<{ highlight: boolean }>`
  text-align: right;
  border-right: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
  background-color: ${({ highlight, theme }) =>
- highlight ? tint(0.1, theme.eui.euiColorWarning) : null};
+ highlight ? tint(0.9, theme.eui.euiColorWarning) : null};
 
  &:last-of-type {
  border-radius: 0 0 0 ${borderRadius};