From 1d99b7992644c9ca8dd38c3dd49bad1216aada37 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Mon, 15 Nov 2021 07:49:07 +0530
Subject: [PATCH] feat: style autocomplete tooltips in codemirror

---
 .../helpers/editor/themes/baseTheme.ts        | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
index a52fa1f57..5ac29ed8a 100644
--- a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
+++ b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
@@ -52,6 +52,8 @@ export const baseTheme = EditorView.theme({
   ".cm-textfield": {
     backgroundColor: "var(--primary-dark-color)",
     color: "var(--secondary-light-color)",
+    borderColor: "var(--divider-light-color)",
+    borderRadius: "3px",
   },
   ".cm-button": {
     backgroundColor: "var(--primary-dark-color)",
@@ -59,6 +61,25 @@ export const baseTheme = EditorView.theme({
     backgroundImage: "none",
     border: "none",
   },
+  ".cm-tooltip": {
+    backgroundColor: "var(--primary-dark-color)",
+    color: "var(--secondary-light-color)",
+    border: "none",
+    borderRadius: "3px",
+  },
+  ".cm-completionLabel": {
+    color: "var(--secondary-color)",
+  },
+  ".cm-tooltip-autocomplete ul": {
+    fontFamily: "var(--font-mono)",
+  },
+  ".cm-tooltip-autocomplete ul li[aria-selected]": {
+    backgroundColor: "var(--accent-dark-color)",
+    color: "var(--accent-contrast-color)",
+  },
+  ".cm-tooltip-autocomplete ul li[aria-selected] .cm-completionLabel": {
+    color: "var(--accent-contrast-color)",
+  },
   ".cm-activeLine": { backgroundColor: "var(--primary-light-color)" },
   ".cm-searchMatch": {
     outline: "1px solid var(--accent-dark-color)",