From d715233e2be1cb6f796fdea2de9a7d46e253cbf6 Mon Sep 17 00:00:00 2001
From: Nicholas Ung <nicholasung22@gmail.com>
Date: Thu, 5 Oct 2023 18:32:56 -0700
Subject: [PATCH 1/6] Update horizontal and vertical rules to comply with

Signed-off-by: Nicholas Ung <nicholasung22@gmail.com>
---
 public/components/common/header.tsx                   |  2 +-
 .../result_components/result_components.scss          |  2 +-
 .../search_configs/search_configs.scss                | 11 +++++++++--
 .../search_configs/search_configs.tsx                 |  3 +--
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/public/components/common/header.tsx b/public/components/common/header.tsx
index fe4633c..6fd9503 100644
--- a/public/components/common/header.tsx
+++ b/public/components/common/header.tsx
@@ -15,9 +15,9 @@ export const Header = ({ children }: HeaderProps) => {
     <EuiPanel
       hasBorder={false}
       hasShadow={false}
+      color="transparent"
       grow={false}
       borderRadius="none"
-      style={{ borderBottom: '1px solid #D3DAE6' }}
     >
       <EuiTitle>
         <h1>Compare search results</h1>
diff --git a/public/components/query_compare/search_result/result_components/result_components.scss b/public/components/query_compare/search_result/result_components/result_components.scss
index 36fb13a..564cfcd 100644
--- a/public/components/query_compare/search_result/result_components/result_components.scss
+++ b/public/components/query_compare/search_result/result_components/result_components.scss
@@ -7,7 +7,7 @@
   min-height: 500px;
 
   &:nth-child(1) {
-    border-right: 1px solid #D3DAE6;
+    border-right: 1px solid $euiBorderColor;
   }
 }
   
\ No newline at end of file
diff --git a/public/components/query_compare/search_result/search_components/search_configs/search_configs.scss b/public/components/query_compare/search_result/search_components/search_configs/search_configs.scss
index 65ce294..dbdbdfe 100644
--- a/public/components/query_compare/search_result/search_components/search_configs/search_configs.scss
+++ b/public/components/query_compare/search_result/search_components/search_configs/search_configs.scss
@@ -6,6 +6,13 @@
 .search-relevance-config:nth-child(1) {
   margin: 0;
   padding: 12px;
-  border-right: 1px solid #D3DAE6;
+  border-right: 1px solid $euiBorderColor;
 }
-  
\ No newline at end of file
+
+.right-border {
+  border-right: 0;
+}
+
+.left-border {
+  border-left: 0;
+}
\ No newline at end of file
diff --git a/public/components/query_compare/search_result/search_components/search_configs/search_configs.tsx b/public/components/query_compare/search_result/search_components/search_configs/search_configs.tsx
index 09d2800..2421898 100644
--- a/public/components/query_compare/search_result/search_components/search_configs/search_configs.tsx
+++ b/public/components/query_compare/search_result/search_components/search_configs/search_configs.tsx
@@ -44,11 +44,10 @@ export const SearchConfigsPanel = ({
   return (
     <EuiPanel
       hasShadow={false}
-      hasBorder={false}
       color="transparent"
       grow={false}
       borderRadius="none"
-      style={{ borderBottom: '1px solid #D3DAE6' }}
+      className="right-border left-border"
     >
       <EuiFlexGroup>
         <EuiFlexItem className="search-relevance-config">

From 27b976dd614bd04b2506c72be13dec544918e2ea Mon Sep 17 00:00:00 2001
From: Nicholas Ung <nicholasung22@gmail.com>
Date: Fri, 6 Oct 2023 00:00:54 -0700
Subject: [PATCH 2/6] Update test snapshots

Signed-off-by: Nicholas Ung <nicholasung22@gmail.com>
---
 .../__snapshots__/header.test.tsx.snap        | 13 ++---------
 .../__snapshots__/create_index.test.tsx.snap  | 13 ++---------
 .../search_configs.test.tsx.snap              | 22 +++++--------------
 3 files changed, 10 insertions(+), 38 deletions(-)

diff --git a/public/components/common/__test__/__snapshots__/header.test.tsx.snap b/public/components/common/__test__/__snapshots__/header.test.tsx.snap
index e24d651..c1dfee0 100644
--- a/public/components/common/__test__/__snapshots__/header.test.tsx.snap
+++ b/public/components/common/__test__/__snapshots__/header.test.tsx.snap
@@ -4,22 +4,13 @@ exports[`Header component Renders header component 1`] = `
 <Header>
   <EuiPanel
     borderRadius="none"
+    color="transparent"
     grow={false}
     hasBorder={false}
     hasShadow={false}
-    style={
-      Object {
-        "borderBottom": "1px solid #D3DAE6",
-      }
-    }
   >
     <div
-      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--plain euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero"
-      style={
-        Object {
-          "borderBottom": "1px solid #D3DAE6",
-        }
-      }
+      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero"
     >
       <EuiTitle>
         <h1
diff --git a/public/components/query_compare/__test__/__snapshots__/create_index.test.tsx.snap b/public/components/query_compare/__test__/__snapshots__/create_index.test.tsx.snap
index 0db4cbd..c24021e 100644
--- a/public/components/query_compare/__test__/__snapshots__/create_index.test.tsx.snap
+++ b/public/components/query_compare/__test__/__snapshots__/create_index.test.tsx.snap
@@ -5,22 +5,13 @@ exports[`Create index component Renders create index component 1`] = `
   <Header>
     <EuiPanel
       borderRadius="none"
+      color="transparent"
       grow={false}
       hasBorder={false}
       hasShadow={false}
-      style={
-        Object {
-          "borderBottom": "1px solid #D3DAE6",
-        }
-      }
     >
       <div
-        className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--plain euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero"
-        style={
-          Object {
-            "borderBottom": "1px solid #D3DAE6",
-          }
-        }
+        className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero"
       >
         <EuiTitle>
           <h1
diff --git a/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_configs.test.tsx.snap b/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_configs.test.tsx.snap
index c52cfa8..f537dc4 100644
--- a/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_configs.test.tsx.snap
+++ b/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_configs.test.tsx.snap
@@ -32,23 +32,13 @@ exports[`Flyout component Renders flyout component 1`] = `
   >
     <EuiPanel
       borderRadius="none"
+      className="right-border left-border"
       color="transparent"
       grow={false}
-      hasBorder={false}
       hasShadow={false}
-      style={
-        Object {
-          "borderBottom": "1px solid #D3DAE6",
-        }
-      }
     >
       <div
-        className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero"
-        style={
-          Object {
-            "borderBottom": "1px solid #D3DAE6",
-          }
-        }
+        className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--flexGrowZero right-border left-border"
       >
         <EuiFlexGroup>
           <div
@@ -372,7 +362,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                           }
                           showPrintMargin={false}
                           tabSize={2}
-                          theme="sql_console"
+                          theme="textmate"
                           value="{}"
                           width="100%"
                         >
@@ -474,7 +464,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                               showPrintMargin={false}
                               style={Object {}}
                               tabSize={2}
-                              theme="sql_console"
+                              theme="textmate"
                               value="{}"
                               width="100%"
                               wrapEnabled={false}
@@ -836,7 +826,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                           }
                           showPrintMargin={false}
                           tabSize={2}
-                          theme="sql_console"
+                          theme="textmate"
                           value="{}"
                           width="100%"
                         >
@@ -938,7 +928,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                               showPrintMargin={false}
                               style={Object {}}
                               tabSize={2}
-                              theme="sql_console"
+                              theme="textmate"
                               value="{}"
                               width="100%"
                               wrapEnabled={false}

From ef502cb2d7917661bb0b1d83c8adbf2d2501c60c Mon Sep 17 00:00:00 2001
From: Nicholas Ung <nicholasung22@gmail.com>
Date: Thu, 5 Oct 2023 18:32:56 -0700
Subject: [PATCH 3/6] Update horizontal and vertical rules to comply with

Signed-off-by: Nicholas Ung <nicholasung22@gmail.com>
---
 public/components/common/header.tsx                   |  2 +-
 .../result_components/result_components.scss          |  2 +-
 .../search_configs/search_configs.scss                | 11 +++++++++--
 .../search_configs/search_configs.tsx                 |  3 +--
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/public/components/common/header.tsx b/public/components/common/header.tsx
index fe4633c..6fd9503 100644
--- a/public/components/common/header.tsx
+++ b/public/components/common/header.tsx
@@ -15,9 +15,9 @@ export const Header = ({ children }: HeaderProps) => {
     <EuiPanel
       hasBorder={false}
       hasShadow={false}
+      color="transparent"
       grow={false}
       borderRadius="none"
-      style={{ borderBottom: '1px solid #D3DAE6' }}
     >
       <EuiTitle>
         <h1>Compare search results</h1>
diff --git a/public/components/query_compare/search_result/result_components/result_components.scss b/public/components/query_compare/search_result/result_components/result_components.scss
index 36fb13a..564cfcd 100644
--- a/public/components/query_compare/search_result/result_components/result_components.scss
+++ b/public/components/query_compare/search_result/result_components/result_components.scss
@@ -7,7 +7,7 @@
   min-height: 500px;
 
   &:nth-child(1) {
-    border-right: 1px solid #D3DAE6;
+    border-right: 1px solid $euiBorderColor;
   }
 }
   
\ No newline at end of file
diff --git a/public/components/query_compare/search_result/search_components/search_configs/search_configs.scss b/public/components/query_compare/search_result/search_components/search_configs/search_configs.scss
index 65ce294..dbdbdfe 100644
--- a/public/components/query_compare/search_result/search_components/search_configs/search_configs.scss
+++ b/public/components/query_compare/search_result/search_components/search_configs/search_configs.scss
@@ -6,6 +6,13 @@
 .search-relevance-config:nth-child(1) {
   margin: 0;
   padding: 12px;
-  border-right: 1px solid #D3DAE6;
+  border-right: 1px solid $euiBorderColor;
 }
-  
\ No newline at end of file
+
+.right-border {
+  border-right: 0;
+}
+
+.left-border {
+  border-left: 0;
+}
\ No newline at end of file
diff --git a/public/components/query_compare/search_result/search_components/search_configs/search_configs.tsx b/public/components/query_compare/search_result/search_components/search_configs/search_configs.tsx
index 09d2800..2421898 100644
--- a/public/components/query_compare/search_result/search_components/search_configs/search_configs.tsx
+++ b/public/components/query_compare/search_result/search_components/search_configs/search_configs.tsx
@@ -44,11 +44,10 @@ export const SearchConfigsPanel = ({
   return (
     <EuiPanel
       hasShadow={false}
-      hasBorder={false}
       color="transparent"
       grow={false}
       borderRadius="none"
-      style={{ borderBottom: '1px solid #D3DAE6' }}
+      className="right-border left-border"
     >
       <EuiFlexGroup>
         <EuiFlexItem className="search-relevance-config">

From cbb5893235665eab8c974ea43d120eaf6c66d407 Mon Sep 17 00:00:00 2001
From: Nicholas Ung <nicholasung22@gmail.com>
Date: Fri, 6 Oct 2023 00:00:54 -0700
Subject: [PATCH 4/6] Update test snapshots

Signed-off-by: Nicholas Ung <nicholasung22@gmail.com>
---
 .../__test__/__snapshots__/header.test.tsx.snap    | 13 ++-----------
 .../__snapshots__/create_index.test.tsx.snap       | 13 ++-----------
 .../__snapshots__/search_configs.test.tsx.snap     | 14 ++------------
 3 files changed, 6 insertions(+), 34 deletions(-)

diff --git a/public/components/common/__test__/__snapshots__/header.test.tsx.snap b/public/components/common/__test__/__snapshots__/header.test.tsx.snap
index e24d651..c1dfee0 100644
--- a/public/components/common/__test__/__snapshots__/header.test.tsx.snap
+++ b/public/components/common/__test__/__snapshots__/header.test.tsx.snap
@@ -4,22 +4,13 @@ exports[`Header component Renders header component 1`] = `
 <Header>
   <EuiPanel
     borderRadius="none"
+    color="transparent"
     grow={false}
     hasBorder={false}
     hasShadow={false}
-    style={
-      Object {
-        "borderBottom": "1px solid #D3DAE6",
-      }
-    }
   >
     <div
-      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--plain euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero"
-      style={
-        Object {
-          "borderBottom": "1px solid #D3DAE6",
-        }
-      }
+      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero"
     >
       <EuiTitle>
         <h1
diff --git a/public/components/query_compare/__test__/__snapshots__/create_index.test.tsx.snap b/public/components/query_compare/__test__/__snapshots__/create_index.test.tsx.snap
index 0db4cbd..c24021e 100644
--- a/public/components/query_compare/__test__/__snapshots__/create_index.test.tsx.snap
+++ b/public/components/query_compare/__test__/__snapshots__/create_index.test.tsx.snap
@@ -5,22 +5,13 @@ exports[`Create index component Renders create index component 1`] = `
   <Header>
     <EuiPanel
       borderRadius="none"
+      color="transparent"
       grow={false}
       hasBorder={false}
       hasShadow={false}
-      style={
-        Object {
-          "borderBottom": "1px solid #D3DAE6",
-        }
-      }
     >
       <div
-        className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--plain euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero"
-        style={
-          Object {
-            "borderBottom": "1px solid #D3DAE6",
-          }
-        }
+        className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero"
       >
         <EuiTitle>
           <h1
diff --git a/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_configs.test.tsx.snap b/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_configs.test.tsx.snap
index 84c7825..f537dc4 100644
--- a/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_configs.test.tsx.snap
+++ b/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_configs.test.tsx.snap
@@ -32,23 +32,13 @@ exports[`Flyout component Renders flyout component 1`] = `
   >
     <EuiPanel
       borderRadius="none"
+      className="right-border left-border"
       color="transparent"
       grow={false}
-      hasBorder={false}
       hasShadow={false}
-      style={
-        Object {
-          "borderBottom": "1px solid #D3DAE6",
-        }
-      }
     >
       <div
-        className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero"
-        style={
-          Object {
-            "borderBottom": "1px solid #D3DAE6",
-          }
-        }
+        className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--flexGrowZero right-border left-border"
       >
         <EuiFlexGroup>
           <div

From cebba096677f2a1839815442406f6e5d0dc94b05 Mon Sep 17 00:00:00 2001
From: Nicholas Ung <nicholasung22@gmail.com>
Date: Fri, 6 Oct 2023 09:31:18 -0700
Subject: [PATCH 5/6] Update class name for border

Signed-off-by: Nicholas Ung <nicholasung22@gmail.com>
---
 .../search_components/search_configs/search_configs.scss   | 7 ++-----
 .../search_components/search_configs/search_configs.tsx    | 2 +-
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/public/components/query_compare/search_result/search_components/search_configs/search_configs.scss b/public/components/query_compare/search_result/search_components/search_configs/search_configs.scss
index dbdbdfe..4896324 100644
--- a/public/components/query_compare/search_result/search_components/search_configs/search_configs.scss
+++ b/public/components/query_compare/search_result/search_components/search_configs/search_configs.scss
@@ -9,10 +9,7 @@
   border-right: 1px solid $euiBorderColor;
 }
 
-.right-border {
-  border-right: 0;
-}
-
-.left-border {
+.left-right-borders {
   border-left: 0;
+  border-right: 0;
 }
\ No newline at end of file
diff --git a/public/components/query_compare/search_result/search_components/search_configs/search_configs.tsx b/public/components/query_compare/search_result/search_components/search_configs/search_configs.tsx
index 2421898..2ed9af5 100644
--- a/public/components/query_compare/search_result/search_components/search_configs/search_configs.tsx
+++ b/public/components/query_compare/search_result/search_components/search_configs/search_configs.tsx
@@ -47,7 +47,7 @@ export const SearchConfigsPanel = ({
       color="transparent"
       grow={false}
       borderRadius="none"
-      className="right-border left-border"
+      className="left-right-borders"
     >
       <EuiFlexGroup>
         <EuiFlexItem className="search-relevance-config">

From 4a35b0babedd92dbf0c0d823954090a6c39daf66 Mon Sep 17 00:00:00 2001
From: Nicholas Ung <nicholasung22@gmail.com>
Date: Fri, 6 Oct 2023 09:31:39 -0700
Subject: [PATCH 6/6] Update test snapshots

Signed-off-by: Nicholas Ung <nicholasung22@gmail.com>
---
 .../__tests__/__snapshots__/search_config.test.tsx.snap       | 4 ++--
 .../__tests__/__snapshots__/search_configs.test.tsx.snap      | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_config.test.tsx.snap b/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_config.test.tsx.snap
index 3068541..36d1e46 100644
--- a/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_config.test.tsx.snap
+++ b/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_config.test.tsx.snap
@@ -314,7 +314,7 @@ exports[`Flyout component Renders flyout component 1`] = `
             }
             showPrintMargin={false}
             tabSize={2}
-            theme="sql_console"
+            theme="textmate"
             value="{}"
             width="100%"
           >
@@ -416,7 +416,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                 showPrintMargin={false}
                 style={Object {}}
                 tabSize={2}
-                theme="sql_console"
+                theme="textmate"
                 value="{}"
                 width="100%"
                 wrapEnabled={false}
diff --git a/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_configs.test.tsx.snap b/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_configs.test.tsx.snap
index f537dc4..163ffbb 100644
--- a/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_configs.test.tsx.snap
+++ b/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_configs.test.tsx.snap
@@ -32,13 +32,13 @@ exports[`Flyout component Renders flyout component 1`] = `
   >
     <EuiPanel
       borderRadius="none"
-      className="right-border left-border"
+      className="left-right-borders"
       color="transparent"
       grow={false}
       hasShadow={false}
     >
       <div
-        className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--flexGrowZero right-border left-border"
+        className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--flexGrowZero left-right-borders"
       >
         <EuiFlexGroup>
           <div