From 17103ba86370456fa5df6ccc722a22bee8fe2d35 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>
---
 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  | 41 +++++++++++++++++--
 .../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           |  2 +-
 .../public/ui/query_editor/_query_editor.scss | 12 ++++--
 .../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       | 18 ++++++--
 .../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, 193 insertions(+), 53 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 b290aa510437..e040b5433a37 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, DatasetSelector } 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 c5c8077fddf5..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[]>([]);
@@ -177,7 +210,9 @@ export const DatasetSelector = ({
             })
           }`}
         >
-          <EuiSmallButtonEmpty
+          <RootComponent
+            appearance={appearance}
+            {...buttonProps}
             className="datasetSelector__button"
             iconType="arrowDown"
             iconSide="right"
@@ -185,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 a9d7f2d87232..405e4a672a4d 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, useEffect } 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>(
@@ -46,6 +55,7 @@ const ConnectedDatasetSelector = ({ onSubmit }: ConnectedDatasetSelectorProps) =
 
   return (
     <DatasetSelector
+      {...datasetSelectorProps}
       selectedDataset={selectedDataset}
       setSelectedDataset={handleDatasetChange}
       services={services}
@@ -53,4 +63,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 7cf5406b46c0..89bd87ae39f8 100644
--- a/src/plugins/data/public/ui/index.ts
+++ b/src/plugins/data/public/ui/index.ts
@@ -51,4 +51,4 @@ export {
   useQueryStringManager,
 } from './search_bar';
 export { SuggestionsComponent } from './typeahead';
-export { DatasetSelector } from './dataset_selector';
+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 5ca8b548c27a..cf2321cf3d4e 100644
--- a/src/plugins/data/public/ui/query_editor/_query_editor.scss
+++ b/src/plugins/data/public/ui/query_editor/_query_editor.scss
@@ -137,14 +137,12 @@
 .osdQueryEditor__header {
   display: flex;
   align-items: center;
-  padding: 0 $euiSizeXS $euiSizeXS;
+  padding: 0 $euiSizeXS $euiSizeS;
 }
 
 .osdQueryEditor__topBar {
   display: flex;
   align-items: center;
-  padding: $euiSizeS;
-  gap: $euiSizeXS;
 
   > * {
     flex: 0 1 auto;
@@ -186,13 +184,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 6bbd6af42663..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, DatasetSelector } 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';
@@ -129,8 +133,7 @@ export const Sidebar: FC = ({ children }) => {
       <EuiSplitPanel.Outer
         className="eui-yScroll deSidebar_panel"
         hasBorder={true}
-        borderRadius="none"
-        color="transparent"
+        borderRadius="l"
       >
         <EuiSplitPanel.Inner
           paddingSize="s"
@@ -139,7 +142,14 @@ export const Sidebar: FC = ({ children }) => {
           className="deSidebar_dataSource"
         >
           {isEnhancementEnabled ? (
-            <DatasetSelector onSubmit={handleDatasetSubmit} />
+            <DatasetSelector
+              onSubmit={handleDatasetSubmit}
+              appearance={DatasetSelectorAppearance.Button}
+              buttonProps={{
+                color: 'text',
+                fullWidth: true,
+              }}
+            />
           ) : (
             <DataSourceSelectable
               dataSources={activeDataSources}
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;