From ddc88b3b05907eee8c01947157314ebdf968f8aa Mon Sep 17 00:00:00 2001
From: Abhishek S Lal <abhishek@usebruno.com>
Date: Wed, 31 Dec 2025 15:10:16 +0530
Subject: [PATCH] style: enhance CodeMirror dropdown styles with theme
 integration  (#6577)

* style: enhance CodeMirror dropdown styles with theme integration for improved consistency

* style: refine dropdown and CodeMirror hint styles for improved consistency and usability

* style: clean up scrollbar and CodeMirror hint styles for improved readability
---
 packages/bruno-app/src/globalStyles.js | 38 +++++++++++++++++++++-----
 1 file changed, 31 insertions(+), 7 deletions(-)

diff --git a/packages/bruno-app/src/globalStyles.js b/packages/bruno-app/src/globalStyles.js
index 57bf22345..31421964e 100644
--- a/packages/bruno-app/src/globalStyles.js
+++ b/packages/bruno-app/src/globalStyles.js
@@ -181,16 +181,16 @@ const GlobalStyle = createGlobalStyle`
     * {
       scrollbar-color: ${(props) => props.theme.scrollbar.color};
     }
-    
+
     *::-webkit-scrollbar {
       width: 5px;
     }
-    
+
     *::-webkit-scrollbar-track {
       background: transparent;
       border-radius: 5px;
     }
-    
+
     *::-webkit-scrollbar-thumb {
       background-color: ${(props) => props.theme.scrollbar.color};
       border-radius: 14px;
@@ -222,7 +222,7 @@ const GlobalStyle = createGlobalStyle`
 
     &:hover {
       scrollbar-color: ${(props) => props.theme.scrollbar.color} transparent;
-      
+
       &::-webkit-scrollbar-thumb {
         background-color: ${(props) => props.theme.scrollbar.color};
       }
@@ -273,8 +273,31 @@ const GlobalStyle = createGlobalStyle`
     z-index: 10;
   }
 
+  // Autocomplete hints dropdown container
   .CodeMirror-hints {
     z-index: 50 !important;
+    background: ${(props) => props.theme.dropdown.bg};
+    ${(props) =>
+      props.theme.dropdown.border !== 'none'
+        ? `border: 1px solid ${props.theme.dropdown.border};`
+        : ''}
+    ${(props) =>
+      props.theme.dropdown.shadow !== 'none'
+        ? `box-shadow: ${props.theme.dropdown.shadow};`
+        : ''}
+    border-radius: ${(props) => props.theme.border.radius.base};
+    padding: 0.25rem;
+    font-size: ${(props) => props.theme.font.size.sm};
+    font-family: inherit;
+  }
+
+  // Individual hint items
+  .CodeMirror-hint {
+    color: ${(props) => props.theme.dropdown.color};
+    border-radius: ${(props) => props.theme.border.radius.base};
+    line-height: 1.5rem;
+    font-size: ${(props) => props.theme.font.size.sm};
+    cursor: pointer;
   }
 
   .CodeMirror-brunoVarInfo :first-child {
@@ -492,11 +515,12 @@ const GlobalStyle = createGlobalStyle`
     line-height: 1.25rem;
   }
 
+  // Active/selected hint - using theme colors instead of hardcoded blue
   .CodeMirror-hint-active {
-    background: #08f !important;
-    color: #fff !important;
+    background: ${(props) => props.theme.dropdown.hoverBg} !important;
+    color: ${(props) => props.theme.dropdown.color} !important;
   }
-  
+
   .hovered-link.CodeMirror-link {
     text-decoration: underline !important;
   }