From 92b6535df26066515b5c83fddcb524eb23f547af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Casper=20H=C3=BCbertz?= <casper@elastic.co>
Date: Tue, 15 Jun 2021 10:12:45 +0200
Subject: [PATCH] [Observability] Fixes border shadow and other enhancements
 (#102072)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* [Observability] Fixes border shadow and other enhancements

* Update x-pack/plugins/observability/public/components/app/section/index.tsx

Co-authored-by: Cauê Marcondes <55978943+cauemarcondes@users.noreply.github.com>

* [Observability] Remove unused import and formatting

Co-authored-by: Cauê Marcondes <55978943+cauemarcondes@users.noreply.github.com>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../public/components/app/section/index.tsx   | 57 ++++++++-----------
 1 file changed, 25 insertions(+), 32 deletions(-)

diff --git a/x-pack/plugins/observability/public/components/app/section/index.tsx b/x-pack/plugins/observability/public/components/app/section/index.tsx
index ddfd8ebed4f8..191a1b2890ad 100644
--- a/x-pack/plugins/observability/public/components/app/section/index.tsx
+++ b/x-pack/plugins/observability/public/components/app/section/index.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiAccordion, EuiLink, EuiPanel, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
+import { EuiAccordion, EuiPanel, EuiSpacer, EuiTitle, EuiButton } from '@elastic/eui';
 import React from 'react';
 import { ErrorPanel } from './error_panel';
 import { usePluginContext } from '../../../hooks/use_plugin_context';
@@ -25,36 +25,29 @@ interface Props {
 export function SectionContainer({ title, appLink, children, hasError }: Props) {
   const { core } = usePluginContext();
   return (
-    <EuiAccordion
-      initialIsOpen
-      id={title}
-      buttonContentClassName="accordion-button"
-      buttonContent={
-        <EuiTitle size="s">
-          <h5>{title}</h5>
-        </EuiTitle>
-      }
-      extraAction={
-        appLink?.href && (
-          <EuiLink href={core.http.basePath.prepend(appLink.href)}>
-            <EuiText size="s">{appLink.label}</EuiText>
-          </EuiLink>
-        )
-      }
-    >
-      <>
-        <EuiSpacer size="s" />
-        <EuiPanel hasShadow>
-          {hasError ? (
-            <ErrorPanel />
-          ) : (
-            <>
-              <EuiSpacer size="s" />
-              {children}
-            </>
-          )}
-        </EuiPanel>
-      </>
-    </EuiAccordion>
+    <EuiPanel>
+      <EuiAccordion
+        initialIsOpen
+        id={title}
+        buttonContentClassName="accordion-button"
+        buttonContent={
+          <EuiTitle size="s">
+            <h5>{title}</h5>
+          </EuiTitle>
+        }
+        extraAction={
+          appLink?.href && (
+            <EuiButton href={core.http.basePath.prepend(appLink.href)}>{appLink.label}</EuiButton>
+          )
+        }
+      >
+        <>
+          <EuiSpacer size="s" />
+          <EuiPanel hasShadow={false} paddingSize="s">
+            {hasError ? <ErrorPanel /> : <>{children}</>}
+          </EuiPanel>
+        </>
+      </EuiAccordion>
+    </EuiPanel>
   );
 }