From 9111811faf847ef599242f506a85e48e1c402827 Mon Sep 17 00:00:00 2001
From: cauemarcondes <caue.marcondes@elastic.co>
Date: Wed, 3 Jun 2020 13:24:15 +0200
Subject: [PATCH] addressing PR comments

---
 ...verview.png => observability_overview.png} | Bin
 .../observability/public/pages/home/index.tsx |  39 ++++++++----------
 2 files changed, 17 insertions(+), 22 deletions(-)
 rename x-pack/plugins/observability/public/assets/{observability-overview.png => observability_overview.png} (100%)

diff --git a/x-pack/plugins/observability/public/assets/observability-overview.png b/x-pack/plugins/observability/public/assets/observability_overview.png
similarity index 100%
rename from x-pack/plugins/observability/public/assets/observability-overview.png
rename to x-pack/plugins/observability/public/assets/observability_overview.png
diff --git a/x-pack/plugins/observability/public/pages/home/index.tsx b/x-pack/plugins/observability/public/pages/home/index.tsx
index 7880a28076661..7c1e3a0962d5b 100644
--- a/x-pack/plugins/observability/public/pages/home/index.tsx
+++ b/x-pack/plugins/observability/public/pages/home/index.tsx
@@ -113,24 +113,20 @@ const Page = styled.div`
 export const Home = () => {
   const { core } = usePluginContext();
 
-  useEffect(
-    () => {
-      core.chrome.setBreadcrumbs([
-        {
-          text: i18n.translate('xpack.observability.home.breadcrumb.observability', {
-            defaultMessage: 'Observability',
-          }),
-        },
-        {
-          text: i18n.translate('xpack.observability.home.breadcrumb.gettingStarted', {
-            defaultMessage: 'Getting started',
-          }),
-        },
-      ]);
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
+  useEffect(() => {
+    core.chrome.setBreadcrumbs([
+      {
+        text: i18n.translate('xpack.observability.home.breadcrumb.observability', {
+          defaultMessage: 'Observability',
+        }),
+      },
+      {
+        text: i18n.translate('xpack.observability.home.breadcrumb.gettingStarted', {
+          defaultMessage: 'Getting started',
+        }),
+      },
+    ]);
+  }, [core]);
 
   return (
     <Container>
@@ -158,7 +154,7 @@ export const Home = () => {
         <EuiSpacer size="xxl" />
         <EuiFlexGroup direction="column">
           {/* title and description */}
-          <EuiFlexItem style={{ maxWidth: 567 }}>
+          <EuiFlexItem style={{ maxWidth: '50%' }}>
             <EuiTitle size="s">
               <h2>
                 {i18n.translate('xpack.observability.home.sectionTitle', {
@@ -191,7 +187,7 @@ export const Home = () => {
                   size="xl"
                   alt="observability overview image"
                   url={core.http.basePath.prepend(
-                    '/plugins/observability/assets/observability-overview.png'
+                    '/plugins/observability/assets/observability_overview.png'
                   )}
                 />
               </EuiFlexItem>
@@ -206,7 +202,6 @@ export const Home = () => {
                   fill
                   iconType="sortRight"
                   iconSide="right"
-                  style={{ width: 175 }}
                   href={core.http.basePath.prepend('/app/home#/tutorial_directory/logging')}
                 >
                   {i18n.translate('xpack.observability.home.getStatedButton', {
@@ -238,7 +233,7 @@ export const Home = () => {
           <EuiFlexItem>
             <EuiFlexGroup justifyContent="center">
               {tryItOutItemsSection.map((item) => (
-                <EuiFlexItem grow={false} key={item.id} style={{ width: 260 }}>
+                <EuiFlexItem grow={false} key={item.id}>
                   <EuiPanel
                     hasShadow
                     paddingSize="s"