From f49dd57e084c8e5f7ad0af8b7d2dcd2a1f7bd399 Mon Sep 17 00:00:00 2001 From: Kenneth Kreindler <42113355+KDKHD@users.noreply.github.com> Date: Tue, 10 Dec 2024 13:43:13 +0000 Subject: [PATCH] [Security Assistant] Fix animation border color of security AI assistant (#202319) ## Summary **Resolves: https://github.com/elastic/kibana/issues/186135** Changes: - Update border color of animated border of the security AI assistance icon from `euiColorPrimary` to `euiBorderColor`. Old border color: image New border color: image image New animated: ![Nov-29-2024 13-58-11](https://github.com/user-attachments/assets/2eaaf5a0-9bc2-4d84-9625-11ed7902c2c8) ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) ### Identify risks Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss. No Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging. - [X] [See some risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Elastic Machine (cherry picked from commit 2818a7cc5a94880964017e9ff80dcd546f5357f7) --- .../impl/assistant/assistant_animated_icon.tsx | 7 +++---- .../impl/data_anonymization_editor/stats/index.tsx | 6 +++--- .../impl/mock/test_providers/test_providers.tsx | 7 +++---- x-pack/packages/kbn-elastic-assistant/tsconfig.json | 1 + 4 files changed, 10 insertions(+), 11 deletions(-) diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_animated_icon.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_animated_icon.tsx index eeb6e83368acd..f569ca1450caf 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_animated_icon.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_animated_icon.tsx @@ -7,7 +7,6 @@ import React from 'react'; import styled from '@emotion/styled'; -import { euiThemeVars } from '@kbn/ui-theme'; import { AssistantAvatar } from './assistant_avatar/assistant_avatar'; const Container = styled.div` @@ -18,8 +17,8 @@ const Container = styled.div` display: flex; justify-content: center; align-items: center; - margin-top: ${euiThemeVars.euiSizeXXL}; - margin-bottom: ${euiThemeVars.euiSizeL}; + margin-top: ${({ theme }) => theme.euiTheme.size.xxl}; + margin-bottom: ${({ theme }) => theme.euiTheme.size.l}; :before, :after { @@ -45,7 +44,7 @@ const Animation = styled.div` top: 0; left: 0; z-index: 0; - border: 1px solid ${euiThemeVars.euiColorPrimary}; + border: 1px solid ${(props) => props.theme.euiTheme.colors.borderBasePlain}; border-radius: inherit; animation: 4s cubic-bezier(0.42, 0, 0.37, 1) 0.5s infinite normal none running pulsing; } diff --git a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/stats/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/stats/index.tsx index b628119032d1a..180933409aafd 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/stats/index.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/stats/index.tsx @@ -9,8 +9,8 @@ import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { AnonymizationFieldResponse } from '@kbn/elastic-assistant-common/impl/schemas/anonymization_fields/bulk_crud_anonymization_fields_route.gen'; import { Replacements } from '@kbn/elastic-assistant-common'; import React, { useMemo } from 'react'; -// eslint-disable-next-line @kbn/eslint/module_migration -import styled from 'styled-components'; + +import styled from '@emotion/styled'; import { AllowedStat } from './allowed_stat'; import { AnonymizedStat } from './anonymized_stat'; @@ -18,7 +18,7 @@ import { getStats } from '../get_stats'; import { AvailableStat } from './available_stat'; const StatFlexItem = styled(EuiFlexItem)` - margin-right: ${({ theme }) => theme.eui.euiSizeL}; + margin-right: ${({ theme }) => theme.euiTheme.size.l}; `; interface Props { diff --git a/x-pack/packages/kbn-elastic-assistant/impl/mock/test_providers/test_providers.tsx b/x-pack/packages/kbn-elastic-assistant/impl/mock/test_providers/test_providers.tsx index 763085cca2688..d19dd7ff70890 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/mock/test_providers/test_providers.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/mock/test_providers/test_providers.tsx @@ -8,10 +8,9 @@ import { httpServiceMock } from '@kbn/core-http-browser-mocks'; import { I18nProvider } from '@kbn/i18n-react'; import { actionTypeRegistryMock } from '@kbn/triggers-actions-ui-plugin/public/application/action_type_registry.mock'; -import { euiDarkVars } from '@kbn/ui-theme'; import React from 'react'; -// eslint-disable-next-line @kbn/eslint/module_migration -import { ThemeProvider } from 'styled-components'; + +import { EuiThemeProvider as ThemeProvider } from '@elastic/eui'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { UserProfileService } from '@kbn/core/public'; @@ -67,7 +66,7 @@ export const TestProvidersComponent: React.FC = ({ return ( - ({ eui: euiDarkVars, darkMode: true })}> +