styling adjustments

elastic · Jul 13, 2020 · 9793123 · 9793123
1 parent 3642880
commit 9793123
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 12 deletions.
diff --git a/x-pack/plugins/security_solution/public/management/components/management_empty_state.tsx b/x-pack/plugins/security_solution/public/management/components/management_empty_state.tsx
@@ -27,6 +27,11 @@ const TEXT_ALIGN_CENTER: CSSProperties = Object.freeze({
   textAlign: 'center',
 });
 
+const MAX_SIZE_ONBOARDING_LOGO: CSSProperties = Object.freeze({
+  maxWidth: 550,
+  maxHeight: 420,
+});
+
 interface ManagementStep {
   title: string;
   children: JSX.Element;
@@ -46,7 +51,7 @@ const PolicyEmptyState = React.memo<{
           </EuiFlexItem>
         </EuiFlexGroup>
       ) : (
-        <EuiFlexGroup data-test-subj="policyOnboardingInstructions">
+        <EuiFlexGroup data-test-subj="policyOnboardingInstructions" alignItems="center">
           <EuiFlexItem>
             <EuiText>
               <h3>
@@ -56,22 +61,22 @@ const PolicyEmptyState = React.memo<{
                 />
               </h3>
             </EuiText>
-            <EuiSpacer size="xl" />
+            <EuiSpacer size="m" />
             <EuiText size="s" color="subdued">
               <FormattedMessage
                 id="xpack.securitySolution.endpoint.policyList.onboardingSectionOne"
                 defaultMessage="Elastic Endpoint Security protects your hosts with threat prevention, detection, and deep security data visibility."
               />
             </EuiText>
-            <EuiSpacer size="xl" />
+            <EuiSpacer size="m" />
             <EuiText size="s" color="subdued">
               <FormattedMessage
                 id="xpack.securitySolution.endpoint.policyList.onboardingSectionTwo"
-                defaultMessage="You’ll be able to view and manage hosts in your environment running the Elastic Endpoint from this page."
+                defaultMessage="From this page, you’ll be able to view and manage the hosts in your environment running Elastic Endpoint Security."
               />
             </EuiText>
-            <EuiSpacer size="xl" />
-            <EuiFlexGroup alignItems="center">
+            <EuiSpacer size="m" />
+            <EuiFlexGroup alignItems="center" style={{ maxWidth: '90%' }}>
               <EuiFlexItem>
                 <EuiFlexGroup>
                   <EuiFlexItem grow={false} style={{ marginRight: '10px' }}>
@@ -92,7 +97,7 @@ const PolicyEmptyState = React.memo<{
                 <EuiText size="xs" color="subdued">
                   <FormattedMessage
                     id="xpack.securitySolution.endpoint.policyList.onboardingHostInfo"
-                    defaultMessage="Hosts running the Elastic Endpoint"
+                    defaultMessage="Hosts running Elastic Endpoint Security"
                   />
                 </EuiText>
               </EuiFlexItem>
@@ -121,14 +126,14 @@ const PolicyEmptyState = React.memo<{
                 </EuiText>
               </EuiFlexItem>
             </EuiFlexGroup>
-            <EuiSpacer size="xl" />
+            <EuiSpacer size="m" />
             <EuiText size="s" color="subdued">
               <FormattedMessage
                 id="xpack.securitySolution.endpoint.policyList.onboardingSectionThree"
-                defaultMessage="To get started, you’ll have to add the Elastic Endpoint integration to your Agents. Let’s do that now!"
+                defaultMessage="To get started, add the Elastic Endpoint Security integration to your Agents."
               />
             </EuiText>
-            <EuiSpacer size="xl" />
+            <EuiSpacer size="l" />
             <EuiFlexGroup>
               <EuiFlexItem grow={false}>
                 <EuiButton
@@ -147,7 +152,7 @@ const PolicyEmptyState = React.memo<{
             </EuiFlexGroup>
           </EuiFlexItem>
           <EuiFlexItem>
-            <EuiIcon type={onboardingLogo} size="original" />
+            <EuiIcon type={onboardingLogo} size="original" style={MAX_SIZE_ONBOARDING_LOGO} />
           </EuiFlexItem>
         </EuiFlexGroup>
       )}

diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx
@@ -401,7 +401,7 @@ export const HostList = () => {
             <p>
               <FormattedMessage
                 id="xpack.securitySolution.hostList.pageSubTitle"
-                defaultMessage="Hosts running the Elastic Endpoint"
+                defaultMessage="Hosts running Elastic Endpoint Security"
               />
             </p>
           </EuiText>