fix: theme within grpc timeline (#6581)

* fix: theme within grpc timeline

* fix: use font from the theme

* remove y padding to make timeline item more compact

* fix: font

* fix: padding

* fix: use fira code

* fix: icon spacing

* add border to the method  search

* show bg for message section within request

packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/MethodDropdown/StyledWrapper.js

@@ -41,6 +41,16 @@ const StyledWrapper = styled.div`
     min-width: 15rem;
   }
 
+  input#search-input {
+    border: 1px solid ${(props) => props.theme.input.border};
+    color: ${(props) => props.theme.text};
+
+    &:focus {
+      outline: none;
+      border-color: ${(props) => props.theme.input.focusBorder};
+    }
+  }
+
   .method-dropdown-service-group {
     margin-bottom: 0.5rem;
   }

packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/MethodDropdown/index.js

@@ -153,7 +153,7 @@ const MethodDropdown = ({
             onKeyDown={handleKeyDown}
             onBlur={focusSearchInput}
             onChange={handleSearchChange}
-            className="mt-2 mb-3 "
+            className="mt-2 mb-3"
             data-testid="grpc-methods-search-input"
           />
           <div ref={listRef} className="method-dropdown-list" data-testid="grpc-methods-list">