[Discover] Design changes to main panels

packages/kbn-unified-data-table/src/components/data_table.scss

@@ -57,6 +57,10 @@
   flex-direction: column;
   flex-wrap: nowrap;
   height: 100%;
+
+  .euiDataGrid__content {
+    background: transparent;
+  }
 }
 
 .unifiedDataTable__table {

packages/kbn-unified-field-list/src/components/field_list_filters/field_name_search.tsx

@@ -52,6 +52,7 @@ export const FieldNameSearch: React.FC<FieldNameSearchProps> = ({
       placeholder={searchPlaceholder}
       value={nameFilter}
       append={append}
+      compressed
     />
   );
 };

packages/kbn-unified-field-list/src/containers/unified_field_list_sidebar/field_list_sidebar.tsx

@@ -9,7 +9,8 @@
 import './field_list_sidebar.scss';
 import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiPageSidebar } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiPageSidebar } from '@elastic/eui';
+import { ToolbarButton } from '@kbn/shared-ux-button-toolbar';
 import { type DataViewField } from '@kbn/data-views-plugin/public';
 import { getDataViewFieldSubtypeMulti } from '@kbn/es-query/src/utils';
 import { FIELDS_LIMIT_SETTING, SEARCH_FIELDS_FROM_SOURCE } from '@kbn/discover-utils';
@@ -295,19 +296,18 @@ export const UnifiedFieldListSidebarComponent: React.FC<UnifiedFieldListSidebarP
             )}
             {!!onEditField && (
               <EuiFlexItem grow={false}>
-                <EuiButton
+                <ToolbarButton
                   iconType="indexOpen"
+                  label={i18n.translate('unifiedFieldList.fieldListSidebar.addFieldButtonLabel', {
+                    defaultMessage: 'Add a field',
+                  })}
                   data-test-subj={
                     stateService.creationOptions.dataTestSubj?.fieldListAddFieldButtonTestSubj ??
                     'unifiedFieldListAddField'
                   }
                   onClick={() => onEditField()}
                   size="s"
-                >
-                  {i18n.translate('unifiedFieldList.fieldListSidebar.addFieldButtonLabel', {
-                    defaultMessage: 'Add a field',
-                  })}
-                </EuiButton>
+                />
               </EuiFlexItem>
             )}
           </FieldList>

packages/kbn-unified-field-list/tsconfig.json

@@ -29,6 +29,7 @@
     "@kbn/shared-ux-utility",
     "@kbn/discover-utils",
     "@kbn/ebt-tools",
+    "@kbn/shared-ux-button-toolbar",
   ],
   "exclude": ["target/**/*"]
 }

src/plugins/discover/public/application/main/components/layout/discover_layout.scss

@@ -31,19 +31,19 @@ discover-app {
   overflow: hidden;
 }
 
+.dscPageBody__sidebar {
+  .unifiedFieldListItemButton.domDragDrop-isDraggable {
+    box-shadow: none;
+  }
+}
+
 .dscPageContent__wrapper {
-  padding: $euiSizeS $euiSizeS $euiSizeS 0;
   overflow: hidden; // Ensures horizontal scroll of table
-
-  @include euiBreakpoint('xs', 's') {
-    padding: 0 $euiSizeS $euiSizeS;
-  }
 }
 
 .dscPageContent {
   position: relative;
   overflow: hidden;
-  border: $euiBorderThin;
   height: 100%;
 }
 

src/plugins/discover/public/application/main/components/layout/discover_layout.tsx

@@ -15,8 +15,10 @@ import {
   EuiPage,
   EuiPageBody,
   EuiPanel,
-  EuiSpacer,
+  useEuiBackgroundColor,
+  useEuiTheme,
 } from '@elastic/eui';
+import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
 import { METRIC_TYPE } from '@kbn/analytics';
 import classNames from 'classnames';
@@ -77,6 +79,8 @@ export function DiscoverLayout({ stateContainer }: DiscoverLayoutProps) {
     spaces,
     inspector,
   } = useDiscoverServices();
+  const { euiTheme } = useEuiTheme();
+  const pageBackgroundColor = useEuiBackgroundColor('plain');
   const globalQueryState = data.query.getState();
   const { main$ } = stateContainer.dataState.data$;
   const [query, savedQuery, columns, sort] = useAppStateSelector((state) => [
@@ -240,7 +244,13 @@ export function DiscoverLayout({ stateContainer }: DiscoverLayoutProps) {
   ]);
 
   return (
-    <EuiPage className="dscPage" data-fetch-counter={fetchCounter.current}>
+    <EuiPage
+      className="dscPage"
+      data-fetch-counter={fetchCounter.current}
+      css={css`
+        background-color: ${pageBackgroundColor};
+      `}
+    >
       <h1
         id="savedSearchTitle"
         className="euiScreenReaderOnly"
@@ -274,8 +284,8 @@ export function DiscoverLayout({ stateContainer }: DiscoverLayoutProps) {
           spaces={spaces}
           history={history}
         />
-        <EuiFlexGroup className="dscPageBody__contents" gutterSize="s">
-          <EuiFlexItem grow={false}>
+        <EuiFlexGroup className="dscPageBody__contents" gutterSize="none">
+          <EuiFlexItem grow={false} className="dscPageBody__sidebar">
             <SidebarMemoized
               documents$={stateContainer.dataState.data$.documents$}
               onAddField={onAddColumn}
@@ -292,9 +302,14 @@ export function DiscoverLayout({ stateContainer }: DiscoverLayoutProps) {
             />
           </EuiFlexItem>
           <EuiHideFor sizes={['xs', 's']}>
-            <EuiFlexItem grow={false}>
+            <EuiFlexItem
+              grow={false}
+              css={css`
+                padding: ${euiTheme.size.m} ${euiTheme.size.s} 0;
+                border-right: ${euiTheme.border.thin};
+              `}
+            >
               <div>
-                <EuiSpacer size="s" />
                 <EuiButtonIcon
                   iconType={isSidebarClosed ? 'menuRight' : 'menuLeft'}
                   iconSize="m"
@@ -335,7 +350,10 @@ export function DiscoverLayout({ stateContainer }: DiscoverLayoutProps) {
                 role="main"
                 panelRef={resizeRef}
                 paddingSize="none"
+                borderRadius="none"
                 hasShadow={false}
+                hasBorder={false}
+                color="transparent"
                 className={classNames('dscPageContent', {
                   'dscPageContent--centered': contentCentered,
                 })}

src/plugins/discover/public/application/main/components/no_results/no_results_suggestions/no_results_suggestions.tsx

@@ -119,9 +119,9 @@ export const NoResultsSuggestions: React.FC<NoResultsSuggestionProps> = ({
   return (
     <EuiEmptyPrompt
       layout="horizontal"
-      color="plain"
+      color="transparent"
       icon={<NoResultsIllustration />}
-      hasBorder
+      hasBorder={false}
       title={
         <h2 data-test-subj="discoverNoResults">
           <FormattedMessage

src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.tsx

@@ -10,7 +10,6 @@ import { EuiTabs, EuiTab, useEuiPaddingSize } from '@elastic/eui';
 import React from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { SHOW_FIELD_STATISTICS } from '@kbn/discover-utils';
 import { VIEW_MODE } from '../../../common/constants';
 import { useDiscoverServices } from '../../hooks/use_discover_services';
@@ -26,7 +25,6 @@ export const DocumentViewModeToggle = ({
 
   const tabsCss = css`
     padding: 0 ${useEuiPaddingSize('s')};
-    background-color: ${euiThemeVars.euiPageBackgroundColor};
   `;
 
   const showViewModeToggle = uiSettings.get(SHOW_FIELD_STATISTICS) ?? false;