From 76acef0c2ceeeb38e76ac6979ee6bcbda099561c Mon Sep 17 00:00:00 2001
From: Caroline Horn <549577+cchaos@users.noreply.github.com>
Date: Mon, 5 Apr 2021 09:05:30 -0400
Subject: [PATCH] [KQL] Fixed styles of KQL textarea for the K8 theme (#96190)

* Fixed style of KQL textarea for K8 theme and some general heights and borders

* Fix popover paddings
---
 .../ui/filter_bar/filter_editor/index.tsx       |  2 +-
 .../public/ui/filter_bar/filter_options.tsx     |  2 +-
 .../ui/query_string_input/_query_bar.scss       | 17 +++++++++++++++--
 .../ui/query_string_input/language_switcher.tsx |  2 +-
 .../saved_query_management_component.tsx        |  4 ++--
 5 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/plugins/data/public/ui/filter_bar/filter_editor/index.tsx b/src/plugins/data/public/ui/filter_bar/filter_editor/index.tsx
index 5639229e1ff3..d2f04228ed39 100644
--- a/src/plugins/data/public/ui/filter_bar/filter_editor/index.tsx
+++ b/src/plugins/data/public/ui/filter_bar/filter_editor/index.tsx
@@ -85,7 +85,7 @@ class FilterEditorUI extends Component<Props, State> {
   public render() {
     return (
       <div>
-        <EuiPopoverTitle>
+        <EuiPopoverTitle paddingSize="m">
           <EuiFlexGroup alignItems="baseline" responsive={false}>
             <EuiFlexItem>
               <FormattedMessage
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 4065c3b8fe0d..4d80e505a55b 100644
--- a/src/plugins/data/public/ui/filter_bar/filter_options.tsx
+++ b/src/plugins/data/public/ui/filter_bar/filter_options.tsx
@@ -161,7 +161,7 @@ class FilterOptionsUI extends Component<Props, State> {
         panelPaddingSize="none"
         repositionOnScroll
       >
-        <EuiPopoverTitle>
+        <EuiPopoverTitle paddingSize="m">
           <FormattedMessage
             id="data.filter.searchBar.changeAllFiltersTitle"
             defaultMessage="Change all filters"
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 c758ace75bd6..466cc8c3de0b 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
@@ -6,6 +6,7 @@
 // Uses the append style, but no bordering
 .kqlQueryBar__languageSwitcherButton {
   border-right: none !important;
+  border-left: $euiFormInputGroupBorder;
 }
 
 .kbnQueryBar__textareaWrap {
@@ -13,19 +14,31 @@
   display: flex;
   flex: 1 1 100%;
   position: relative;
+
+  @include kbnThemeStyle('v8') {
+    background-color: $euiFormBackgroundColor;
+  }
 }
 
 .kbnQueryBar__textarea {
   z-index: $euiZContentMenu;
   resize: none !important; // When in the group, it will autosize
-  height: $euiFormControlHeight;
+  height: $euiFormControlHeight - 2px;
   // Unlike most inputs within layout control groups, the text area still needs a border
   // for multi-line content. These adjusts help it sit above the control groups
   // shadow to line up correctly.
   padding: $euiSizeS;
-  padding-top: $euiSizeS + 3px;
   box-shadow: 0 0 0 1px $euiFormBorderColor;
 
+  @include kbnThemeStyle('v7') {
+    padding-top: $euiSizeS + 2px;
+  }
+
+  @include kbnThemeStyle('v8') {
+    border-radius: 0;
+    padding-bottom: $euiSizeS + 1px;
+  }
+
   &:not(.kbnQueryBar__textarea--autoHeight):not(:invalid) {
     @include euiYScrollWithShadows;
   }
diff --git a/src/plugins/data/public/ui/query_string_input/language_switcher.tsx b/src/plugins/data/public/ui/query_string_input/language_switcher.tsx
index 65e84612bc50..9eed22477ae4 100644
--- a/src/plugins/data/public/ui/query_string_input/language_switcher.tsx
+++ b/src/plugins/data/public/ui/query_string_input/language_switcher.tsx
@@ -96,7 +96,7 @@ export function QueryLanguageSwitcher({
         />
       </EuiPopoverTitle>
       <div style={{ width: '350px' }}>
-        <EuiText>
+        <EuiText size="s">
           <p>
             <FormattedMessage
               id="data.query.queryBar.syntaxOptionsDescription"
diff --git a/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx b/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx
index 34e6c2c3452e..83e7c0a9cf4f 100644
--- a/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx
+++ b/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx
@@ -202,7 +202,7 @@ export function SavedQueryManagementComponent({
           className="kbnSavedQueryManagement__popover"
           data-test-subj="saved-query-management-popover"
         >
-          <EuiPopoverTitle id={'savedQueryManagementPopoverTitle'}>
+          <EuiPopoverTitle paddingSize="m" id={'savedQueryManagementPopoverTitle'}>
             {savedQueryPopoverTitleText}
           </EuiPopoverTitle>
           {savedQueries.length > 0 ? (
@@ -234,7 +234,7 @@ export function SavedQueryManagementComponent({
               <EuiSpacer size="s" />
             </Fragment>
           )}
-          <EuiPopoverFooter>
+          <EuiPopoverFooter paddingSize="m">
             <EuiFlexGroup
               direction="rowReverse"
               gutterSize="s"