styling

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>

Author: abbyhu2000

src/plugins/data/public/ui/query_editor/_language_selector.scss

@@ -2,13 +2,10 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-.osdQueryBar__languageSelector {
-  font-size: small;
-}
+.languageSelector {
+  height: 100%;
 
-.osdQueryBar__languageSelectorFooter {
-  font-size: smaller;
-  padding-left: 0;
-  padding-top: 2px;
-  color: $ouiTextSubduedColor;
+  * {
+    font-size: small;
+  }
 }

src/plugins/data/public/ui/query_editor/_query_editor.scss

@@ -20,29 +20,21 @@
 }
 
 .osdQueryEditorFooter {
-  color: $ouiTextSubduedColor; // Apply the subdued color to all text in this class
+  color: $euiTextSubduedColor; // Apply the subdued color to all text in this class
   height: 35px;
 
   * {
     color: inherit;
     font-size: medium;
     align-items: center;
   }
-
-  #languageSelector {
-    height: 100%;
-  }
 }
 
 .osdQueryEditor__languageWrapper {
   align-items: center;
   justify-content: center;
   height: 40px;
   border: $euiBorderThin;
-
-  #languageSelector {
-    height: 100%;
-  }
 }
 
 .osdQueryEditor__dataSourceWrapper {

src/plugins/data/public/ui/query_editor/language_selector.tsx

@@ -100,14 +100,11 @@ export const QueryLanguageSelector = (props: QueryLanguageSelectorProps) => {
   });
   return (
     <EuiPopover
-      id="languageSelector"
+      className="languageSelector"
       button={
         <EuiButtonEmpty
           iconSide="right"
           onClick={onButtonClick}
-          className={
-            props.isFooter ? 'osdQueryBar__languageSelectorFooter' : 'osdQueryBar__languageSelector'
-          }
           iconType={props.isFooter ? 'arrowDown' : undefined}
         >
           {selectedLanguage.label}