refactor: hightlight active only when editor is focused

packages/hoppscotch-app/assets/scss/styles.scss

@@ -35,13 +35,8 @@
   @apply bg-divider;
 }
 
-.cm-focused {
-  @apply !outline-none;
-}
-
 input::placeholder,
-textarea::placeholder,
-.CodeMirror-empty {
+textarea::placeholder {
   @apply text-secondary;
   @apply opacity-25;
 }
@@ -435,29 +430,15 @@ pre.ace_editor {
   @apply w-full;
 }
 
-.CodeMirror {
-  @apply !h-auto;
+.cm-focused {
+  @apply !outline-none;
 
-  font-size: var(--body-font-size);
-
-  &:not(.CodeMirror-focused) .CodeMirror-activeline-background {
-    background: transparent !important;
-  }
-
-  .CodeMirror-dialog-top {
+  .cm-activeLine {
     @apply bg-primaryLight;
-    @apply border-dividerLight;
-    @apply px-4;
-    @apply py-2;
-    @apply z-5;
   }
 
-  .CodeMirror-scroll {
-    @apply min-h-64;
-  }
-
-  * {
-    font-family: "Roboto Mono", monospace;
+  .cm-activeLineGutter {
+    @apply bg-primaryDark;
   }
 }
 

packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts

@@ -91,7 +91,7 @@ export const baseTheme = EditorView.theme({
   ".cm-tooltip-autocomplete ul li[aria-selected] .cm-completionLabel": {
     color: "var(--accent-contrast-color)",
   },
-  ".cm-activeLine": { backgroundColor: "var(--primary-light-color)" },
+  ".cm-activeLine": { backgroundColor: "transparent" },
   ".cm-searchMatch": {
     outline: "1px solid var(--accent-dark-color)",
   },
@@ -121,10 +121,9 @@ export const baseTheme = EditorView.theme({
   ".cm-line": {
     paddingLeft: "0.5em",
     paddingRight: "0.5em",
-    color: "var(--secondary-dark-color)",
   },
   ".cm-activeLineGutter": {
-    backgroundColor: "var(--primary-dark-color)",
+    backgroundColor: "transparent",
   },
   ".cm-scroller::-webkit-scrollbar": {
     display: "none",