[8.x] [Security Assistant] Fix animation border color of security AI …

…assistant (#202319) (#203583) # Backport This will backport the following commits from `main` to `8.x`: - [[Security Assistant] Fix animation border color of security AI assistant (#202319)](#202319)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Kenneth Kreindler <42113355+KDKHD@users.noreply.github.com>
elastic · Dec 18, 2024 · 7bcc2ae · 7bcc2ae
1 parent 1c7e662
commit 7bcc2ae
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 9 deletions.
diff --git a/...platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_animated_icon.tsx b/...platform/packages/shared/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.border.color};
     border-radius: inherit;
     animation: 4s cubic-bezier(0.42, 0, 0.37, 1) 0.5s infinite normal none running pulsing;
   }

diff --git a/...form/packages/shared/kbn-elastic-assistant/impl/data_anonymization_editor/stats/index.tsx b/...form/packages/shared/kbn-elastic-assistant/impl/data_anonymization_editor/stats/index.tsx
@@ -10,15 +10,15 @@ import { AnonymizationFieldResponse } from '@kbn/elastic-assistant-common/impl/s
 import { Replacements } from '@kbn/elastic-assistant-common';
 import React, { useMemo } from 'react';
 
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import { AllowedStat } from './allowed_stat';
 import { AnonymizedStat } from './anonymized_stat';
 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/...latform/packages/shared/kbn-elastic-assistant/impl/mock/test_providers/test_providers.tsx b/...latform/packages/shared/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';
 
-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<Props> = ({
 
   return (
     <I18nProvider>
-      <ThemeProvider theme={() => ({ eui: euiDarkVars, darkMode: true })}>
+      <ThemeProvider>
         <QueryClientProvider client={queryClient}>
           <AssistantProvider
             actionTypeRegistry={actionTypeRegistry}

diff --git a/x-pack/platform/packages/shared/kbn-elastic-assistant/tsconfig.json b/x-pack/platform/packages/shared/kbn-elastic-assistant/tsconfig.json
@@ -12,6 +12,7 @@
   "include": [
     "**/*.ts",
     "**/*.tsx",
+    "../../../../../typings/emotion.d.ts"
   ],
   "exclude": [
     "target/**/*"