From c2a459a5f42ef1fdbcffc2c57699cfb455d5dcd7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gerg=C5=91=20=C3=81brah=C3=A1m?= <gergo.abraham@elastic.co>
Date: Mon, 3 Oct 2022 16:15:15 +0200
Subject: [PATCH] use styled components instead of inline style

---
 ...dpoint_policy_create_multi_step_extension.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_policy_create_multi_step_extension.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_policy_create_multi_step_extension.tsx
index 152f913f28860..6962c8a02b6f0 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_policy_create_multi_step_extension.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_policy_create_multi_step_extension.tsx
@@ -22,9 +22,9 @@ export const EndpointPolicyCreateMultiStepExtension = memo(() => {
       <MediumCustomSpacer />
 
       <EuiFlexGroup>
-        <EuiFlexItem grow={false} style={{ alignItems: 'center' }}>
+        <CenteredEuiFlexItem grow={false}>
           <LargeSecurityLogo />
-        </EuiFlexItem>
+        </CenteredEuiFlexItem>
 
         <EuiFlexItem>
           <div>
@@ -70,10 +70,16 @@ const MediumCustomSpacer = () => (
   </>
 );
 
-const LargeSecurityLogo = () => (
-  <EuiIcon type="logoSecurity" style={{ width: '128px', height: '128px' }} />
-);
+const CenteredEuiFlexItem = styled(EuiFlexItem)`
+  align-items: center;
+`;
 
+const LargeSecurityLogo = () => <LargeLogo type="logoSecurity" />;
+
+const LargeLogo = styled(EuiIcon)`
+  width: 128px;
+  height: 128px;
+`;
 const Features = () => (
   <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
     <EuiFlexItem grow={false}>