From 425c90b6eb5954ab8feb19024f2ff8c64a5f0abd Mon Sep 17 00:00:00 2001
From: lohxt1 <lohit.jiddimani@gmail.com>
Date: Wed, 30 Oct 2024 16:54:55 +0530
Subject: [PATCH] fix: code editor search box styling

---
 .../components/CodeEditor/StyledWrapper.js    |  4 +++
 .../src/components/CodeEditor/index.js        |  2 +-
 packages/bruno-app/src/styles/globals.css     | 35 ++++++++++---------
 3 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js b/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
index 4d47186c0..363ee43aa 100644
--- a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
@@ -75,6 +75,10 @@ const StyledWrapper = styled.div`
   .cm-variable-invalid {
     color: red;
   }
+
+  .graphiql-container .CodeMirror-search-hint {
+    display: block;
+  }
 `;
 
 export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/CodeEditor/index.js b/packages/bruno-app/src/components/CodeEditor/index.js
index 8b43c1db6..8ec68bdf8 100644
--- a/packages/bruno-app/src/components/CodeEditor/index.js
+++ b/packages/bruno-app/src/components/CodeEditor/index.js
@@ -339,7 +339,7 @@ export default class CodeEditor extends React.Component {
     }
     return (
       <StyledWrapper
-        className="h-full w-full flex flex-col relative"
+        className="h-full w-full flex flex-col relative graphiql-container"
         aria-label="Code Editor"
         font={this.props.font}
         fontSize={this.props.fontSize}
diff --git a/packages/bruno-app/src/styles/globals.css b/packages/bruno-app/src/styles/globals.css
index 95f8a5be4..4ced11676 100644
--- a/packages/bruno-app/src/styles/globals.css
+++ b/packages/bruno-app/src/styles/globals.css
@@ -23,23 +23,26 @@
   --color-method-options: rgb(52 52 52);
   --color-method-head: rgb(52 52 52);
 }
-
-*,.graphiql-container,.CodeMirror-info,.CodeMirror-lint-tooltip,reach-portal {
+:root,.graphiql-container,.CodeMirror-info,.CodeMirror-lint-tooltip,reach-portal {
   /* Required CSS variables after upgrading GraphiQL from v1.5.9 to v2.4.7 */
-  --color-primary: 0, 0%, 0% !important;
-  --color-secondary: 0, 0%, 0% !important;
-  --color-tertiary: 0, 0%, 0% !important;
-  --color-info: 0, 0%, 0% !important;
-  --color-success: 0, 0%, 0% !important;
-  --color-warning: 0, 0%, 0% !important;
-  --color-error: 0, 0%, 0% !important;
-  --color-neutral: 0, 0%, 0% !important;
-  --color-base: 0, 0%, 100% !important;
-  --alpha-secondary: .76;
-  --alpha-tertiary: .5;
-  --alpha-background-heavy: .15;
-  --alpha-background-medium: .1;
-  --alpha-background-light: .07;
+  /* Colors */
+  --color-primary: 320, 95%, 43%;
+  --color-secondary: 242, 51%, 61%;
+  --color-tertiary: 188, 100%, 36%;
+  --color-info: 208, 100%, 46%;
+  --color-success: 158, 60%, 42%;
+  --color-warning: 36, 100%, 41%;
+  --color-error: 13, 93%, 58%;
+  --color-neutral: 219, 28%, 32%;
+  --color-base: 219, 28%, 100%;
+
+  /* Color alpha values */
+  --alpha-secondary: 0.76;
+  --alpha-tertiary: 0.5;
+  --alpha-background-heavy: 0.15;
+  --alpha-background-medium: 0.1;
+  --alpha-background-light: 0.07;
+  
   --font-size-hint: .75rem;
   --font-size-inline-code: .8125rem;
   --font-size-body: .9375rem;