Fix (styles): Update border color of Search Relevance to be compliant…

… with Dark Mode (#315) (#328) * Update horizontal and vertical rules to comply with * Update test snapshots * Update horizontal and vertical rules to comply with * Update test snapshots * Update class name for border * Update test snapshots --------- (cherry picked from commit acb3dd8) Signed-off-by: Nicholas Ung <[email protected]> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
opensearch-project · Oct 11, 2023 · 1a5d8b7 · 1a5d8b7
1 parent 767b6bc
commit 1a5d8b7
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 42 deletions.
diff --git 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/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/__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/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;
   }
 }
 
diff --git a/...mpare/search_result/search_components/__tests__/__snapshots__/search_config.test.tsx.snap b/...mpare/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/...pare/search_result/search_components/__tests__/__snapshots__/search_configs.test.tsx.snap b/...pare/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="left-right-borders"
       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 left-right-borders"
       >
         <EuiFlexGroup>
           <div

diff --git a/...mponents/query_compare/search_result/search_components/search_configs/search_configs.scss b/...mponents/query_compare/search_result/search_components/search_configs/search_configs.scss
@@ -6,6 +6,10 @@
 .search-relevance-config:nth-child(1) {
   margin: 0;
   padding: 12px;
-  border-right: 1px solid #D3DAE6;
+  border-right: 1px solid $euiBorderColor;
 }
-
+
+.left-right-borders {
+  border-left: 0;
+  border-right: 0;
+}
diff --git a/...omponents/query_compare/search_result/search_components/search_configs/search_configs.tsx b/...omponents/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="left-right-borders"
     >
       <EuiFlexGroup>
         <EuiFlexItem className="search-relevance-config">