[APM] Polish: Update header styles and layout (#91093) (#91304)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Casper Hübertz <casper@elastic.co> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Feb 13, 2021 · 1565a88 · 1565a88
1 parent 4280ef8
commit 1565a88
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 2 deletions.
diff --git a/x-pack/plugins/apm/public/components/shared/ApmHeader/index.tsx b/x-pack/plugins/apm/public/components/shared/ApmHeader/index.tsx
@@ -15,7 +15,7 @@ import { EnvironmentFilter } from '../EnvironmentFilter';
 
 const HeaderFlexGroup = euiStyled(EuiFlexGroup)`
   padding: ${({ theme }) => theme.eui.gutterTypes.gutterMedium};
-  border-bottom: ${({ theme }) => theme.eui.euiBorderThin};
+  background: ${({ theme }) => theme.eui.euiColorEmptyShade};
 `;
 
 export function ApmHeader({ children }: { children: ReactNode }) {

diff --git a/x-pack/plugins/apm/public/components/shared/main_tabs.tsx b/x-pack/plugins/apm/public/components/shared/main_tabs.tsx
@@ -15,6 +15,8 @@ import { euiStyled } from '../../../../../../src/plugins/kibana_react/common';
 const StyledTabs = euiStyled(EuiTabs)`
   padding: ${({ theme }) => `${theme.eui.gutterTypes.gutterMedium}`};
   border-bottom: ${({ theme }) => theme.eui.euiBorderThin};
+  border-top: ${({ theme }) => theme.eui.euiBorderThin};
+  background: ${({ theme }) => theme.eui.euiColorEmptyShade};
 `;
 
 export function MainTabs({ children }: { children: ReactNode }) {

diff --git a/x-pack/plugins/apm/public/components/shared/search_bar.tsx b/x-pack/plugins/apm/public/components/shared/search_bar.tsx
@@ -32,7 +32,7 @@ export function SearchBar({ prepend, showTimeComparison = false }: Props) {
   const { isMedium, isLarge } = useBreakPoints();
   const itemsStyle = { marginBottom: isLarge ? px(unit) : 0 };
   return (
-    <SearchBarFlexGroup gutterSize="s" direction={getRowDirection(isLarge)}>
+    <SearchBarFlexGroup gutterSize="m" direction={getRowDirection(isLarge)}>
       <EuiFlexItem>
         <KueryBar prepend={prepend} />
       </EuiFlexItem>