[ObsUX] Use eui font size hook (elastic#204903)

## Summary Some font-size were not using the correct hook `useEuiFontSize`
JoseLuisGJ · Dec 19, 2024 · 9b20917 · 9b20917
1 parent 05f21ea
commit 9b20917
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 12 deletions.
diff --git a/...ugins/observability_solution/apm/public/components/shared/stacktrace/cause_stacktrace.tsx b/...ugins/observability_solution/apm/public/components/shared/stacktrace/cause_stacktrace.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiAccordion, EuiTitle } from '@elastic/eui';
+import { EuiAccordion, EuiTitle, useEuiFontSize } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import styled from '@emotion/styled';
@@ -24,7 +24,7 @@ const CausedByContainer = styled('h5')`
 const CausedByHeading = styled('span')`
   color: ${({ theme }) => theme.euiTheme.colors.textSubdued};
   display: block;
-  font-size: ${({ theme }) => theme.euiTheme.size.xs};
+  font-size: ${() => useEuiFontSize('xs').fontSize};
   font-weight: ${({ theme }) => theme.euiTheme.font.weight.bold};
   text-transform: uppercase;
 `;

diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/stacktrace/stackframe.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/stacktrace/stackframe.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiAccordion } from '@elastic/eui';
+import { EuiAccordion, useEuiFontSize } from '@elastic/eui';
 import React from 'react';
 import styled from '@emotion/styled';
 import {
@@ -19,8 +19,8 @@ import { Variables } from './variables';
 const ContextContainer = styled.div<{ isLibraryFrame: boolean }>`
   position: relative;
   font-family: ${({ theme }) => theme.euiTheme.font.familyCode};
-  font-size: ${({ theme }) => theme.euiTheme.size.s};
-  border: 1px solid ${({ theme }) => theme.euiTheme.colors.lightShade};
+  font-size: ${() => useEuiFontSize('s').fontSize};
+  border: ${({ theme }) => theme.euiTheme.border.thin};
   border-radius: ${({ theme }) => theme.euiTheme.border.radius.small};
   background: ${({ isLibraryFrame, theme }) =>
     isLibraryFrame ? theme.euiTheme.colors.emptyShade : theme.euiTheme.colors.lightestShade};

diff --git a/...plugins/observability_solution/infra/public/components/logging/log_minimap/time_ruler.tsx b/...plugins/observability_solution/infra/public/components/logging/log_minimap/time_ruler.tsx
@@ -60,7 +60,7 @@ export const TimeRuler: React.FC<TimeRulerProps> = ({ end, height, start, tickCo
 TimeRuler.displayName = 'TimeRuler';
 
 const TimeRulerTickLabel = styled.text`
-  font-size: 9px;
+  font-size: ${() => useEuiFontSize('xxxs').fontSize};
   line-height: ${() => useEuiFontSize('s').lineHeight};
   fill: ${(props) => props.theme.euiTheme.colors.textSubdued};
   user-select: none;

diff --git a/..._solution/infra/public/pages/metrics/inventory_view/components/waffle/gradient_legend.tsx b/..._solution/infra/public/pages/metrics/inventory_view/components/waffle/gradient_legend.tsx
@@ -7,6 +7,7 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
+import { useEuiFontSize } from '@elastic/eui';
 import {
   InfraFormatter,
   InfraWaffleMapBounds,
@@ -68,7 +69,7 @@ const GradientLegendTick = styled.div`
 
 const GradientLegendTickLine = styled.div`
   position: absolute;
-  background-color: ${(props) => props.theme.euiTheme.border.color};
+  background-color: ${(props) => props.theme.euiTheme.colors.backgroundBaseSubdued};
   width: 1px;
   left: 0;
   top: 15px;
@@ -83,7 +84,7 @@ const GradientLegendTickLine = styled.div`
 
 const GradientLegendTickLabel = styled.div`
   position: absolute;
-  font-size: 11px;
+  font-size: ${() => useEuiFontSize('xxs').fontSize};
   text-align: center;
   top: 0;
   left: 0;

diff --git a/...ility_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_name.tsx b/...ility_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_name.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiLink, EuiToolTip } from '@elastic/eui';
+import { EuiLink, EuiToolTip, useEuiFontSize } from '@elastic/eui';
 import React from 'react';
 import styled from '@emotion/styled';
 import { InfraWaffleMapGroup, InfraWaffleMapOptions } from '../../../../../common/inventory/types';
@@ -58,7 +58,7 @@ export class GroupName extends React.PureComponent<Props, {}> {
 const GroupNameContainer = styled.div`
   position: relative;
   text-align: center;
-  font-size: 16px;
+  font-size: ${(props) => useEuiFontSize('m').fontSize};
   margin-bottom: 5px;
   top: 20px;
   display: flex;
@@ -96,6 +96,6 @@ const Count = styled.div`
   flex: 0 0 auto;
   border-left: ${(props) => props.theme.euiTheme.border.thin};
   padding: 6px 10px;
-  font-size: 0.85em;
+  font-size: ${() => useEuiFontSize('xs').fontSize};
   font-weight: normal;
 `;
diff --git a/...ity_solution/infra/public/pages/metrics/inventory_view/components/waffle/steps_legend.tsx b/...ity_solution/infra/public/pages/metrics/inventory_view/components/waffle/steps_legend.tsx
@@ -8,6 +8,7 @@
 import { darken } from 'polished';
 import React from 'react';
 import styled from '@emotion/styled';
+import { useEuiFontSize } from '@elastic/eui';
 import {
   InfraFormatter,
   InfraWaffleMapRuleOperator,
@@ -78,5 +79,5 @@ const StepSquareInner = styled.div`
 `;
 
 const StepLabel = styled.div`
-  font-size: 12px;
+  font-size: ${() => useEuiFontSize('xs').fontSize};
 `;