From e8a5d8415fc723db92ec123d25383145eb352a7f Mon Sep 17 00:00:00 2001 From: "miriam.aparicio" Date: Thu, 19 Dec 2024 10:14:04 +0000 Subject: [PATCH 1/3] use eui font size hook --- .../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..a51d43aa30ae9 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: ${({ theme }) => useEuiFontSize('s').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..88d285b8d8428 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: ${({ theme }) => 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..5141ddf695845 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: ${(props) => 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..1a72e948d098d 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: ${(props) => 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..e5fb109686053 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: ${(props) => 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}; `; From 3faa1157fad28d73653937cbf8e5194f8290da3b Mon Sep 17 00:00:00 2001 From: "miriam.aparicio" Date: Thu, 19 Dec 2024 10:19:22 +0000 Subject: [PATCH 2/3] change to correct size --- .../public/components/shared/stacktrace/cause_stacktrace.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 a51d43aa30ae9..8637eb433f0d8 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 @@ -24,7 +24,7 @@ const CausedByContainer = styled('h5')` const CausedByHeading = styled('span')` color: ${({ theme }) => theme.euiTheme.colors.textSubdued}; display: block; - font-size: ${({ theme }) => useEuiFontSize('s').fontSize}; + font-size: ${({ theme }) => useEuiFontSize('xs').fontSize}; font-weight: ${({ theme }) => theme.euiTheme.font.weight.bold}; text-transform: uppercase; `; From dc6c9b540699ab38230c5af591b5e3c2579df427 Mon Sep 17 00:00:00 2001 From: "miriam.aparicio" Date: Thu, 19 Dec 2024 10:32:03 +0000 Subject: [PATCH 3/3] remove params --- .../public/components/shared/stacktrace/cause_stacktrace.tsx | 2 +- .../apm/public/components/shared/stacktrace/stackframe.tsx | 2 +- .../infra/public/components/logging/log_minimap/time_ruler.tsx | 2 +- .../inventory_view/components/waffle/gradient_legend.tsx | 2 +- .../metrics/inventory_view/components/waffle/group_name.tsx | 2 +- 5 files changed, 5 insertions(+), 5 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 8637eb433f0d8..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 @@ -24,7 +24,7 @@ const CausedByContainer = styled('h5')` const CausedByHeading = styled('span')` color: ${({ theme }) => theme.euiTheme.colors.textSubdued}; display: block; - font-size: ${({ theme }) => useEuiFontSize('xs').fontSize}; + 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 88d285b8d8428..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 @@ -19,7 +19,7 @@ import { Variables } from './variables'; const ContextContainer = styled.div<{ isLibraryFrame: boolean }>` position: relative; font-family: ${({ theme }) => theme.euiTheme.font.familyCode}; - font-size: ${({ theme }) => useEuiFontSize('s').fontSize}; + font-size: ${() => useEuiFontSize('s').fontSize}; border: ${({ theme }) => theme.euiTheme.border.thin}; border-radius: ${({ theme }) => theme.euiTheme.border.radius.small}; background: ${({ isLibraryFrame, theme }) => 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 5141ddf695845..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: ${(props) => useEuiFontSize('xxxs').fontSize}; + 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 1a72e948d098d..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 @@ -84,7 +84,7 @@ const GradientLegendTickLine = styled.div` const GradientLegendTickLabel = styled.div` position: absolute; - font-size: ${(props) => useEuiFontSize('xxs').fontSize}; + 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 e5fb109686053..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 @@ -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: ${(props) => useEuiFontSize('xs').fontSize}; + font-size: ${() => useEuiFontSize('xs').fontSize}; font-weight: normal; `;