use styled components instead of inline style

elastic · Oct 3, 2022 · c2a459a · c2a459a
1 parent 209dde3
commit c2a459a
Showing 1 changed file with 11 additions and 5 deletions.
diff --git a/...es/policy/view/ingest_manager_integration/endpoint_policy_create_multi_step_extension.tsx b/...es/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}>