From fdf337dac1316b6a015fad531638dc8f72519dfb Mon Sep 17 00:00:00 2001
From: Miki <miki@amazon.com>
Date: Fri, 18 Oct 2024 10:31:27 -0700
Subject: [PATCH] Update Discover appearance (#8651)

* Update Discover appearance

Signed-off-by: Miki <miki@amazon.com>

* Changeset file for PR #8651 created/updated

---------

Signed-off-by: Miki <miki@amazon.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

(cherry picked from commit 17103ba86370456fa5df6ccc722a22bee8fe2d35)
Signed-off-by: Miki <miki@amazon.com>
---
 changelogs/fragments/8651.yml                 |  2 +
 .../header/collapsible_nav_group_enabled.scss |  2 +-
 src/plugins/data/public/index.ts              | 10 +++-
 .../dataset_selector/_dataset_selector.scss   |  4 +-
 .../ui/dataset_selector/dataset_selector.tsx  | 51 +++++++++++++++++--
 .../data/public/ui/dataset_selector/index.tsx | 16 ++++--
 .../ui/filter_bar/_global_filter_group.scss   |  4 ++
 .../public/ui/filter_bar/filter_options.tsx   |  3 +-
 src/plugins/data/public/ui/index.ts           |  1 +
 .../public/ui/query_editor/_query_editor.scss | 10 +++-
 .../default_editor/_default_editor.scss       | 33 +++++++++++-
 .../editors/default_editor/index.tsx          | 14 +++--
 .../ui/query_string_input/_query_bar.scss     |  4 ++
 .../query_string_input/query_bar_top_row.tsx  |  2 +-
 .../public/components/app_container.scss      | 10 ++++
 .../public/components/sidebar/index.scss      |  4 --
 .../public/components/sidebar/index.tsx       | 46 ++++++++++++-----
 .../components/chart/_histogram.scss          |  1 -
 .../timechart_header/timechart_header.tsx     |  2 +-
 .../default_discover_table/_table_cell.scss   |  2 +-
 .../default_discover_table/_table_header.scss |  2 +-
 .../sidebar/discover_field_search.tsx         |  1 +
 .../components/sidebar/discover_sidebar.scss  | 32 ++++++++++--
 .../components/sidebar/discover_sidebar.tsx   | 15 +++---
 .../canvas/discover_canvas.scss               |  2 +-
 .../view_components/canvas/index.tsx          |  6 +--
 .../public/top_nav_menu/_index.scss           |  2 +-
 27 files changed, 222 insertions(+), 59 deletions(-)
 create mode 100644 changelogs/fragments/8651.yml

diff --git a/changelogs/fragments/8651.yml b/changelogs/fragments/8651.yml
new file mode 100644
index 000000000000..0baf8f35105c
--- /dev/null
+++ b/changelogs/fragments/8651.yml
@@ -0,0 +1,2 @@
+feat:
+- Update the appearance of Discover ([#8651](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8651))
\ No newline at end of file
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
index de3a6021b47d..1310585eefea 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
+++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
@@ -1,9 +1,9 @@
 .context-nav-wrapper {
   border: none !important;
   border-top-right-radius: $euiSizeL;
-  border-bottom-right-radius: $euiSizeL;
   background-color: $euiSideNavBackgroundColor;
   overflow: hidden;
+  box-shadow: 1px 0 0 $euiBorderColor !important;
 
   .nav-link-item {
     padding: $euiSizeS;
diff --git a/src/plugins/data/public/index.ts b/src/plugins/data/public/index.ts
index fb0e36fa1f1d..f986cd59e0eb 100644
--- a/src/plugins/data/public/index.ts
+++ b/src/plugins/data/public/index.ts
@@ -62,7 +62,15 @@ import {
 } from '../common';
 
 import { FilterLabel } from './ui';
-export { createEditor, DefaultInput, DQLBody, SingleLineInput } from './ui';
+
+export {
+  createEditor,
+  DefaultInput,
+  DQLBody,
+  SingleLineInput,
+  DatasetSelector,
+  DatasetSelectorAppearance,
+} from './ui';
 
 import {
   generateFilters,
diff --git a/src/plugins/data/public/ui/dataset_selector/_dataset_selector.scss b/src/plugins/data/public/ui/dataset_selector/_dataset_selector.scss
index 0fd82fc1b9ca..2f92480a4413 100644
--- a/src/plugins/data/public/ui/dataset_selector/_dataset_selector.scss
+++ b/src/plugins/data/public/ui/dataset_selector/_dataset_selector.scss
@@ -19,7 +19,9 @@
   &__advancedModal {
     width: 1200px;
     height: 800px;
-    max-height: calc(100vh - $euiSizeS);
+
+    // euiOverlayMask pushes the modal up due to having padding-bottom: 10vh
+    max-height: calc(90vh - $euiSizeL);
 
     .euiModal__flex {
       max-height: none;
diff --git a/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx b/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx
index 76c9fbe74546..691f477a5818 100644
--- a/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx
+++ b/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx
@@ -11,6 +11,7 @@ import {
   EuiSelectable,
   EuiSelectableOption,
   EuiSmallButtonEmpty,
+  EuiSmallButton,
   EuiToolTip,
 } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
@@ -22,12 +23,41 @@ import { getQueryService } from '../../services';
 import { IDataPluginServices } from '../../types';
 import { AdvancedSelector } from './advanced_selector';
 
+export enum DatasetSelectorAppearance {
+  Button = 'button',
+  None = 'none',
+}
+
+type EuiSmallButtonProps = React.ComponentProps<typeof EuiSmallButton>;
+type EuiSmallButtonEmptyProps = React.ComponentProps<typeof EuiSmallButtonEmpty>;
+
 interface DatasetSelectorProps {
   selectedDataset?: Dataset;
   setSelectedDataset: (dataset: Dataset) => void;
   services: IDataPluginServices;
 }
 
+export interface DatasetSelectorUsingButtonProps {
+  appearance: DatasetSelectorAppearance.Button;
+  buttonProps?: EuiSmallButtonProps;
+}
+
+export interface DatasetSelectorUsingButtonEmptyProps {
+  appearance?: DatasetSelectorAppearance.None;
+  buttonProps?: EuiSmallButtonEmptyProps;
+}
+
+const RootComponent: React.FC<
+  (EuiSmallButtonEmptyProps | EuiSmallButtonProps) & { appearance?: DatasetSelectorAppearance }
+> = (props) => {
+  const { appearance, ...rest } = props;
+  if (appearance === DatasetSelectorAppearance.Button) {
+    return <EuiSmallButton {...(rest as EuiSmallButtonProps)} />;
+  } else {
+    return <EuiSmallButtonEmpty {...(rest as EuiSmallButtonEmptyProps)} />;
+  }
+};
+
 /**
  * This component provides a dropdown selector for datasets and an advanced selector modal.
  * It fetches datasets once on mount to populate the selector options.
@@ -42,7 +72,10 @@ export const DatasetSelector = ({
   selectedDataset,
   setSelectedDataset,
   services,
-}: DatasetSelectorProps) => {
+  appearance,
+  buttonProps,
+}: DatasetSelectorProps &
+  (DatasetSelectorUsingButtonProps | DatasetSelectorUsingButtonEmptyProps)) => {
   const isMounted = useRef(false);
   const [isOpen, setIsOpen] = useState(false);
   const [indexPatterns, setIndexPatterns] = useState<Dataset[]>([]);
@@ -168,8 +201,18 @@ export const DatasetSelector = ({
   return (
     <EuiPopover
       button={
-        <EuiToolTip content={`${selectedDataset?.title ?? 'Select data'}`}>
-          <EuiSmallButtonEmpty
+        <EuiToolTip
+          display="block"
+          content={`${
+            selectedDataset?.title ??
+            i18n.translate('data.dataSelector.defaultTitle', {
+              defaultMessage: 'Select data',
+            })
+          }`}
+        >
+          <RootComponent
+            appearance={appearance}
+            {...buttonProps}
             className="datasetSelector__button"
             iconType="arrowDown"
             iconSide="right"
@@ -177,7 +220,7 @@ export const DatasetSelector = ({
           >
             <EuiIcon type={datasetIcon} className="datasetSelector__icon" />
             {datasetTitle}
-          </EuiSmallButtonEmpty>
+          </RootComponent>
         </EuiToolTip>
       }
       isOpen={isOpen}
diff --git a/src/plugins/data/public/ui/dataset_selector/index.tsx b/src/plugins/data/public/ui/dataset_selector/index.tsx
index d89f92bc3ad7..8d34b60d36d5 100644
--- a/src/plugins/data/public/ui/dataset_selector/index.tsx
+++ b/src/plugins/data/public/ui/dataset_selector/index.tsx
@@ -6,7 +6,12 @@
 import { useCallback, useState } from 'react';
 import React from 'react';
 import { Dataset, Query, TimeRange } from '../../../common';
-import { DatasetSelector } from './dataset_selector';
+import {
+  DatasetSelector,
+  DatasetSelectorUsingButtonEmptyProps,
+  DatasetSelectorUsingButtonProps,
+  DatasetSelectorAppearance,
+} from './dataset_selector';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { IDataPluginServices } from '../../types';
 
@@ -14,7 +19,11 @@ interface ConnectedDatasetSelectorProps {
   onSubmit: ((query: Query, dateRange?: TimeRange | undefined) => void) | undefined;
 }
 
-const ConnectedDatasetSelector = ({ onSubmit }: ConnectedDatasetSelectorProps) => {
+const ConnectedDatasetSelector = ({
+  onSubmit,
+  ...datasetSelectorProps
+}: ConnectedDatasetSelectorProps &
+  (DatasetSelectorUsingButtonProps | DatasetSelectorUsingButtonEmptyProps)) => {
   const { services } = useOpenSearchDashboards<IDataPluginServices>();
   const queryString = services.data.query.queryString;
   const [selectedDataset, setSelectedDataset] = useState<Dataset | undefined>(
@@ -36,6 +45,7 @@ const ConnectedDatasetSelector = ({ onSubmit }: ConnectedDatasetSelectorProps) =
 
   return (
     <DatasetSelector
+      {...datasetSelectorProps}
       selectedDataset={selectedDataset}
       setSelectedDataset={handleDatasetChange}
       services={services}
@@ -43,4 +53,4 @@ const ConnectedDatasetSelector = ({ onSubmit }: ConnectedDatasetSelectorProps) =
   );
 };
 
-export { ConnectedDatasetSelector as DatasetSelector };
+export { ConnectedDatasetSelector as DatasetSelector, DatasetSelectorAppearance };
diff --git a/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss b/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss
index 2f347b6e2996..9cab10db15f7 100644
--- a/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss
+++ b/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss
@@ -81,4 +81,8 @@
   &--compressed {
     margin-top: -$euiSizeS;
   }
+
+  &__allFiltersPopover {
+    background-color: $euiFormInputGroupLabelBackground;
+  }
 }
diff --git a/src/plugins/data/public/ui/filter_bar/filter_options.tsx b/src/plugins/data/public/ui/filter_bar/filter_options.tsx
index 131d317ecbc5..26fcc9714212 100644
--- a/src/plugins/data/public/ui/filter_bar/filter_options.tsx
+++ b/src/plugins/data/public/ui/filter_bar/filter_options.tsx
@@ -407,7 +407,6 @@ const FilterOptionsUI = (props: Props) => {
     return (
       <EuiPopover
         id="popoverForAllFilters"
-        className="globalFilterGroup__allFiltersPopover"
         isOpen={isPopoverOpen}
         closePopover={closePopover}
         button={savedQueryPopoverButton}
@@ -425,7 +424,7 @@ const FilterOptionsUI = (props: Props) => {
   return (
     <EuiPopover
       id="popoverForAllFilters"
-      className="globalFilterGroup__allFiltersPopover"
+      className={useNewHeader ? 'globalFilterGroup__allFiltersPopover' : undefined}
       isOpen={isPopoverOpen}
       closePopover={closePopover}
       button={props.useSaveQueryMenu ? savedQueryPopoverButton : filterPopoverButton}
diff --git a/src/plugins/data/public/ui/index.ts b/src/plugins/data/public/ui/index.ts
index a5ee305d0b53..89bd87ae39f8 100644
--- a/src/plugins/data/public/ui/index.ts
+++ b/src/plugins/data/public/ui/index.ts
@@ -51,3 +51,4 @@ export {
   useQueryStringManager,
 } from './search_bar';
 export { SuggestionsComponent } from './typeahead';
+export { DatasetSelector, DatasetSelectorAppearance } from './dataset_selector';
diff --git a/src/plugins/data/public/ui/query_editor/_query_editor.scss b/src/plugins/data/public/ui/query_editor/_query_editor.scss
index a970a970853b..719cc65785c2 100644
--- a/src/plugins/data/public/ui/query_editor/_query_editor.scss
+++ b/src/plugins/data/public/ui/query_editor/_query_editor.scss
@@ -137,7 +137,7 @@
 .osdQueryEditor__header {
   display: flex;
   align-items: center;
-  padding: 0 $euiSizeXS $euiSizeXS;
+  padding: 0 $euiSizeXS $euiSizeS;
 }
 
 .osdQueryEditor__topBar {
@@ -187,13 +187,19 @@
 
 .osdQuerEditor__singleLine {
   padding: calc($euiSizeXS + 1px);
-  background-color: $euiColorEmptyShade;
   overflow: initial !important; // needed for suggestion window, otherwise will be hidden in child
   min-width: 0;
 
   .monaco-editor .view-overlays .current-line {
     border: none;
   }
+
+  &,
+  & .monaco-editor,
+  & .monaco-editor .inputarea.ime-input,
+  & .monaco-editor-background {
+    background-color: $euiFormBackgroundColor;
+  }
 }
 
 .suggest-widget {
diff --git a/src/plugins/data/public/ui/query_editor/editors/default_editor/_default_editor.scss b/src/plugins/data/public/ui/query_editor/editors/default_editor/_default_editor.scss
index ccebd35c4ead..2516c32ec27c 100644
--- a/src/plugins/data/public/ui/query_editor/editors/default_editor/_default_editor.scss
+++ b/src/plugins/data/public/ui/query_editor/editors/default_editor/_default_editor.scss
@@ -1,9 +1,38 @@
 .defaultEditor {
   border: $euiBorderThin;
   border-radius: $euiSizeXS;
-  margin: 0 $euiSizeXS $euiSizeXS;
 
   &__footer {
-    margin-left: $euiSizeXS;
+    padding-left: $euiSizeXS;
+    background-color: $euiColorLightestShade;
   }
+
+  .monaco-editor {
+    border-radius: $euiSizeXS $euiSizeXS 0 0;
+
+    .margin {
+      border-radius: $euiSizeXS 0 0 0;
+      background-color: $euiFormBackgroundColor;
+      padding: 0 $euiSizeXS;
+    }
+
+    .view-lines {
+      padding: 0 $euiSizeXS;
+    }
+
+    .monaco-scrollable-element {
+      border-radius: 0 $euiSizeXS 0 0;
+    }
+  }
+
+  .monaco-editor,
+  .monaco-editor-background,
+  .monaco-editor .inputarea.ime-input,
+  .monaco-editor .decorationsOverviewRuler {
+    background-color: $euiColorEmptyShade;
+  }
+}
+
+.defaultEditor__footerRow {
+  gap: $euiSizeM;
 }
diff --git a/src/plugins/data/public/ui/query_editor/editors/default_editor/index.tsx b/src/plugins/data/public/ui/query_editor/editors/default_editor/index.tsx
index 764b25d4b9ac..1134d104befd 100644
--- a/src/plugins/data/public/ui/query_editor/editors/default_editor/index.tsx
+++ b/src/plugins/data/public/ui/query_editor/editors/default_editor/index.tsx
@@ -43,14 +43,15 @@ export const DefaultInput: React.FC<DefaultInputProps> = ({
         options={{
           minimap: { enabled: false },
           scrollBeyondLastLine: false,
-          fontSize: 14,
-          fontFamily: 'Roboto Mono',
+          fontSize: 12,
+          lineHeight: 20,
+          fontFamily: 'var(--font-code)',
           lineNumbers: 'on',
           folding: true,
           wordWrap: 'on',
           wrappingIndent: 'same',
           lineDecorationsWidth: 0,
-          lineNumbersMinChars: 2,
+          lineNumbersMinChars: 1,
           wordBasedSuggestions: false,
         }}
         suggestionProvider={{
@@ -70,7 +71,12 @@ export const DefaultInput: React.FC<DefaultInputProps> = ({
       />
       <div className="defaultEditor__footer">
         {footerItems && (
-          <EuiFlexGroup direction="row" alignItems="center">
+          <EuiFlexGroup
+            direction="row"
+            alignItems="center"
+            gutterSize="none"
+            className="defaultEditor__footerRow"
+          >
             {footerItems.start?.map((item) => (
               <EuiFlexItem grow={false} className="defaultEditor__footerItem">
                 {item}
diff --git a/src/plugins/data/public/ui/query_string_input/_query_bar.scss b/src/plugins/data/public/ui/query_string_input/_query_bar.scss
index 3976a12d594d..e240d89281bf 100644
--- a/src/plugins/data/public/ui/query_string_input/_query_bar.scss
+++ b/src/plugins/data/public/ui/query_string_input/_query_bar.scss
@@ -91,3 +91,7 @@
     }
   }
 }
+
+.osdQueryBar--hideEmpty:empty {
+  display: none;
+}
diff --git a/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx b/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx
index 14b9ef6d8fd9..45e718fd52ba 100644
--- a/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx
+++ b/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx
@@ -402,7 +402,7 @@ export default function QueryBarTopRow(props: QueryBarTopRowProps) {
       >
         {renderQueryInput()}
         {renderSharingMetaFields()}
-        <EuiFlexItem grow={false}>
+        <EuiFlexItem grow={false} className="osdQueryBar--hideEmpty">
           {shouldUseDatePickerRef
             ? createPortal(renderUpdateButton(), props.datePickerRef!.current!)
             : renderUpdateButton()}
diff --git a/src/plugins/data_explorer/public/components/app_container.scss b/src/plugins/data_explorer/public/components/app_container.scss
index f0320d5d9b8e..0d9b66b8e471 100644
--- a/src/plugins/data_explorer/public/components/app_container.scss
+++ b/src/plugins/data_explorer/public/components/app_container.scss
@@ -11,6 +11,7 @@ $osdHeaderOffset: $euiHeaderHeightCompensation;
 
 .deLayout {
   height: calc(100vh - #{$osdHeaderOffset * 1});
+  padding: $euiSizeS;
 
   &.dsc--next {
     height: calc(100vh - #{$osdHeaderOffset * 2});
@@ -19,6 +20,15 @@ $osdHeaderOffset: $euiHeaderHeightCompensation;
   &__canvas {
     height: 100%;
   }
+
+  // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
+  & > .euiResizableContainer {
+    gap: $euiSizeXS;
+  }
+
+  .globalQueryBar {
+    padding: 0;
+  }
 }
 
 .headerIsExpanded .deLayout {
diff --git a/src/plugins/data_explorer/public/components/sidebar/index.scss b/src/plugins/data_explorer/public/components/sidebar/index.scss
index 1828568bc361..bdabfcdb5943 100644
--- a/src/plugins/data_explorer/public/components/sidebar/index.scss
+++ b/src/plugins/data_explorer/public/components/sidebar/index.scss
@@ -2,10 +2,6 @@
   &_panel {
     border-top: 0;
   }
-
-  &_dataSource {
-    border-bottom: $euiBorderThin !important;
-  }
 }
 
 .dataPanelTypeFilterPopover {
diff --git a/src/plugins/data_explorer/public/components/sidebar/index.tsx b/src/plugins/data_explorer/public/components/sidebar/index.tsx
index 430d70fa9180..56250228e559 100644
--- a/src/plugins/data_explorer/public/components/sidebar/index.tsx
+++ b/src/plugins/data_explorer/public/components/sidebar/index.tsx
@@ -12,7 +12,11 @@ import {
   DataSourceSelectable,
   UI_SETTINGS,
 } from '../../../../data/public';
-import { DataSourceOption } from '../../../../data/public/';
+import {
+  DataSourceOption,
+  DatasetSelector,
+  DatasetSelectorAppearance,
+} from '../../../../data/public/';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { DataExplorerServices } from '../../types';
 import { setIndexPattern, useTypedDispatch, useTypedSelector } from '../../utils/state_management';
@@ -34,6 +38,16 @@ export const Sidebar: FC = ({ children }) => {
     },
   } = useOpenSearchDashboards<DataExplorerServices>();
 
+  const handleDatasetSubmit = useCallback(
+    (query: any) => {
+      // Update the index pattern
+      if (query.dataset) {
+        dispatch(setIndexPattern(query.dataset.id));
+      }
+    },
+    [dispatch]
+  );
+
   const [isEnhancementEnabled, setIsEnhancementEnabled] = useState<boolean>(false);
 
   useEffect(() => {
@@ -119,16 +133,24 @@ export const Sidebar: FC = ({ children }) => {
       <EuiSplitPanel.Outer
         className="eui-yScroll deSidebar_panel"
         hasBorder={true}
-        borderRadius="none"
-        color="transparent"
+        borderRadius="l"
       >
-        {!isEnhancementEnabled && (
-          <EuiSplitPanel.Inner
-            paddingSize="s"
-            grow={false}
-            color="transparent"
-            className="deSidebar_dataSource"
-          >
+        <EuiSplitPanel.Inner
+          paddingSize="s"
+          grow={false}
+          color="transparent"
+          className="deSidebar_dataSource"
+        >
+          {isEnhancementEnabled ? (
+            <DatasetSelector
+              onSubmit={handleDatasetSubmit}
+              appearance={DatasetSelectorAppearance.Button}
+              buttonProps={{
+                color: 'text',
+                fullWidth: true,
+              }}
+            />
+          ) : (
             <DataSourceSelectable
               dataSources={activeDataSources}
               dataSourceOptionList={dataSourceOptionList}
@@ -139,8 +161,8 @@ export const Sidebar: FC = ({ children }) => {
               onRefresh={memorizedReload}
               fullWidth
             />
-          </EuiSplitPanel.Inner>
-        )}
+          )}
+        </EuiSplitPanel.Inner>
         <EuiSplitPanel.Inner paddingSize="none" color="transparent" className="eui-yScroll">
           {children}
         </EuiSplitPanel.Inner>
diff --git a/src/plugins/discover/public/application/components/chart/_histogram.scss b/src/plugins/discover/public/application/components/chart/_histogram.scss
index 3b1c1799e0f6..f30d24d0bb45 100644
--- a/src/plugins/discover/public/application/components/chart/_histogram.scss
+++ b/src/plugins/discover/public/application/components/chart/_histogram.scss
@@ -11,7 +11,6 @@
 }
 
 .dscChart__wrapper {
-  border-top: 1px solid $euiColorLightShade;
   border-bottom: 1px solid $euiColorLightShade;
   padding: 8px;
   gap: 8px;
diff --git a/src/plugins/discover/public/application/components/chart/timechart_header/timechart_header.tsx b/src/plugins/discover/public/application/components/chart/timechart_header/timechart_header.tsx
index a79876ccb455..a20f551d09fa 100644
--- a/src/plugins/discover/public/application/components/chart/timechart_header/timechart_header.tsx
+++ b/src/plugins/discover/public/application/components/chart/timechart_header/timechart_header.tsx
@@ -118,7 +118,7 @@ export function TimechartHeader({
 
   return (
     <I18nProvider>
-      <EuiFlexGroup gutterSize="s" responsive justifyContent="center" alignItems="center">
+      <EuiFlexGroup gutterSize="s" responsive alignItems="center">
         <EuiFlexItem grow={false}>
           <EuiToolTip
             content={i18n.translate('discover.howToChangeTheTimeTooltip', {
diff --git a/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss b/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss
index e5af22b21874..233b5d3f4959 100644
--- a/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss
+++ b/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss
@@ -88,7 +88,7 @@ $osdDocTableCellPadding: calc($euiSizeM / 2); // corresponds to DataGrid medium
 // nested for specificity
 .osd-table {
   .osdDocTableCell {
-    padding: $osdDocTableCellPadding;
+    padding: $euiSizeS;
   }
 }
 
diff --git a/src/plugins/discover/public/application/components/default_discover_table/_table_header.scss b/src/plugins/discover/public/application/components/default_discover_table/_table_header.scss
index 92c60f9eafe7..40040c46b6df 100644
--- a/src/plugins/discover/public/application/components/default_discover_table/_table_header.scss
+++ b/src/plugins/discover/public/application/components/default_discover_table/_table_header.scss
@@ -4,7 +4,7 @@
 
   // nested for specificity
   .docTableHeaderField {
-    padding: calc($euiSizeM / 2); // corresponds to DataGrid medium cellPadding
+    padding: $euiSizeS;
   }
 }
 
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field_search.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field_search.tsx
index 3469fd1d34dc..c93352d43589 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_field_search.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/discover_field_search.tsx
@@ -275,6 +275,7 @@ export function DiscoverFieldSearch({
         <EuiSmallFilterButton
           iconType="filter"
           iconSide="left"
+          iconGap="none"
           hasActiveFilters={activeFiltersCount > 0}
           aria-label={filterBtnAriaLabel}
           data-test-subj="toggleFieldFilterButton"
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss
index aaba1c5a42aa..07f9e7e4ed06 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss
+++ b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss
@@ -4,19 +4,40 @@
  */
 
 .deSidebar_panel {
-  border-left: 0;
-
   .dscSideBar_searchContainer {
-    padding: $euiSizeXS;
     border-bottom: $euiBorderThin;
 
     .toggleFieldFilterButton {
       border: none;
+      background-color: $euiFormInputGroupLabelBackground;
     }
 
     .dscSideBar_searchInput {
       box-shadow: none;
-      border-right: $euiBorderThin;
+      border: $euiBorderThin;
+      background-color: $euiFormBackgroundColor;
+    }
+  }
+
+  .dscSideBar_fieldListContainer {
+    padding-top: $euiSizeS;
+  }
+
+  .deSidebar_dataSource {
+    padding-bottom: 0;
+  }
+
+  .datasetSelector__button {
+    border-radius: $euiFormControlCompressedBorderRadius;
+    border-color: $euiFormBorderColor;
+    background-color: $euiFormBackgroundColor;
+
+    & > .euiButtonContent {
+      justify-content: space-between;
+
+      .euiIcon {
+        fill: $euiTextSubduedColor;
+      }
     }
   }
 }
@@ -27,7 +48,8 @@
   .euiButtonEmpty__content {
     font-size: $euiFontSizeXS;
     font-weight: $euiFontWeightSemiBold;
-    justify-content: flex-end;
+    justify-content: flex-start;
+    padding-left: $euiSizeM + 2px;
   }
 }
 
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx
index 0b0162159a38..12ba460bb5a1 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx
@@ -215,11 +215,7 @@ export function DiscoverSidebar(props: DiscoverSidebarProps) {
           color="transparent"
           hasBorder={false}
         >
-          <EuiSplitPanel.Inner
-            grow={false}
-            paddingSize="none"
-            className="dscSideBar_searchContainer"
-          >
+          <EuiSplitPanel.Inner grow={false} paddingSize="s" className="dscSideBar_searchContainer">
             <DiscoverFieldSearch
               onChange={onChangeFieldSearch}
               value={fieldFilterState.name}
@@ -235,7 +231,10 @@ export function DiscoverSidebar(props: DiscoverSidebarProps) {
               />
             </EuiSplitPanel.Inner>
           ) : null}
-          <EuiSplitPanel.Inner className="eui-yScroll" paddingSize="none">
+          <EuiSplitPanel.Inner
+            className="eui-yScroll dscSideBar_fieldListContainer"
+            paddingSize="none"
+          >
             {fields.length > 0 && (
               <>
                 <FieldList
@@ -306,7 +305,7 @@ const FieldList = ({
   return (
     <>
       <EuiButtonEmpty
-        iconSide="right"
+        iconSide="left"
         color="text"
         iconType={expanded ? 'arrowDown' : 'arrowRight'}
         onClick={() => setExpanded(!expanded)}
@@ -319,7 +318,7 @@ const FieldList = ({
       {expanded && (
         <EuiDroppable
           droppableId={`${category.toUpperCase()}_FIELDS`}
-          spacing="m"
+          spacing="l"
           data-test-subj={`fieldList-${category}`}
           cloneDraggables={category !== 'selected'}
         >
diff --git a/src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss b/src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss
index e0ab20a15296..beac224ec6ba 100644
--- a/src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss
+++ b/src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss
@@ -1,5 +1,5 @@
 .dscCanvas {
-  @include euiYScrollWithShadows;
+  @include euiYScroll;
 
   /* stylelint-disable-next-line */
   container-type: inline-size; // containment context
diff --git a/src/plugins/discover/public/application/view_components/canvas/index.tsx b/src/plugins/discover/public/application/view_components/canvas/index.tsx
index 2e956d6908e9..fcad13342e07 100644
--- a/src/plugins/discover/public/application/view_components/canvas/index.tsx
+++ b/src/plugins/discover/public/application/view_components/canvas/index.tsx
@@ -125,11 +125,11 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history, optionalR
   return (
     <EuiPanel
       panelRef={panelRef}
-      hasBorder={false}
+      hasBorder={true}
       hasShadow={false}
-      color="transparent"
-      paddingSize="none"
+      paddingSize="s"
       className="dscCanvas"
+      borderRadius="l"
     >
       <TopNav
         isEnhancementsEnabled={isEnhancementsEnabled}
diff --git a/src/plugins/navigation/public/top_nav_menu/_index.scss b/src/plugins/navigation/public/top_nav_menu/_index.scss
index da71d3047d06..68d2237a8522 100644
--- a/src/plugins/navigation/public/top_nav_menu/_index.scss
+++ b/src/plugins/navigation/public/top_nav_menu/_index.scss
@@ -9,7 +9,7 @@
 }
 
 .osdTopNavMenuGroupedActions {
-  background-color: $euiColorEmptyShade;
+  background-color: $euiPageBackgroundColor;
 
   .newTopNavHeader & {
     margin: 0;