use Eui sizing tokens for logo size

elastic · Oct 4, 2022 · aa93233 · aa93233
1 parent 54fc2b6
commit aa93233
Showing 1 changed file with 12 additions and 8 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
@@ -25,11 +25,6 @@ const CenteredEuiFlexItem = styled(EuiFlexItem)`
   align-items: center;
 `;
 
-const LargeLogo = styled(EuiIcon)`
-  width: 128px;
-  height: 128px;
-`;
-
 /**
  * A component to be displayed in multi step onboarding process.
  */
@@ -48,6 +43,17 @@ export const EndpointPolicyCreateMultiStepExtension = memo(() => {
     </EuiText>
   );
 
+  const logoSize = `calc(2 * ${size.xxxxl})`;
+  const securityLogo = (
+    <EuiIcon
+      type="logoSecurity"
+      css={css`
+        width: ${logoSize};
+        height: ${logoSize};
+      `}
+    />
+  );
+
   const features = (
     <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
       <EuiFlexItem grow={false}>
@@ -103,9 +109,7 @@ export const EndpointPolicyCreateMultiStepExtension = memo(() => {
           margin-top: ${marginSize};
         `}
       >
-        <CenteredEuiFlexItem grow={false}>
-          <LargeLogo type="logoSecurity" />
-        </CenteredEuiFlexItem>
+        <CenteredEuiFlexItem grow={false}>{securityLogo}</CenteredEuiFlexItem>
 
         <EuiFlexItem>
           <div>{features}</div>