From dec31c5b37e45898d155f430a8981765e10fc9a1 Mon Sep 17 00:00:00 2001 From: Miriam <31922082+MiriamAparicio@users.noreply.github.com> Date: Thu, 19 Dec 2024 12:39:12 +0000 Subject: [PATCH] [ObsUX] Use eui font size hook (#204903) ## Summary Some font-size were not using the correct hook `useEuiFontSize` --- .../components/shared/stacktrace/cause_stacktrace.tsx | 4 ++-- .../apm/public/components/shared/stacktrace/stackframe.tsx | 6 +++--- .../public/components/logging/log_minimap/time_ruler.tsx | 2 +- .../inventory_view/components/waffle/gradient_legend.tsx | 5 +++-- .../metrics/inventory_view/components/waffle/group_name.tsx | 6 +++--- .../inventory_view/components/waffle/steps_legend.tsx | 3 ++- 6 files changed, 14 insertions(+), 12 deletions(-) diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/stacktrace/cause_stacktrace.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/stacktrace/cause_stacktrace.tsx index d36a5bf422160..9db86f6147eb9 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/stacktrace/cause_stacktrace.tsx +++ b/x-pack/plugins/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 index 1180b1c9ed05c..8eb6138557d25 100644 --- 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/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/time_ruler.tsx b/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/time_ruler.tsx index 59e94333e94ee..93df67958144a 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/time_ruler.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/time_ruler.tsx @@ -60,7 +60,7 @@ export const TimeRuler: React.FC = ({ 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/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/gradient_legend.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/gradient_legend.tsx index d17cd89eaf067..f76f1af711970 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/gradient_legend.tsx +++ b/x-pack/plugins/observability_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/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_name.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_name.tsx index 6b93a205f6365..eeafce9a7ae49 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_name.tsx +++ b/x-pack/plugins/observability_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 { 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/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/steps_legend.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/steps_legend.tsx index 2cdb8ca7d2e2b..2c4ab09fa82d3 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/steps_legend.tsx +++ b/x-pack/plugins/observability_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}; `;