fix: placeholder styles

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

@@ -40,7 +40,8 @@
 }
 
 input::placeholder,
-textarea::placeholder {
+textarea::placeholder,
+.cm-placeholder {
   @apply text-secondary;
   @apply opacity-35;
 }

packages/hoppscotch-app/components/http/Headers.vue

@@ -49,6 +49,15 @@
           :spellcheck="false"
           :value="header.key"
           autofocus
+          styles="
+            bg-transparent
+            flex
+            flex-1
+            py-1
+            px-4
+            truncate
+          "
+          class="flex-1 !flex"
           @input="
             updateHeader(index, {
               key: $event,

packages/hoppscotch-app/components/smart/EnvInput.vue

@@ -28,7 +28,7 @@ import {
 } from "@codemirror/view"
 import { EditorState, Extension } from "@codemirror/state"
 import clone from "lodash/clone"
-import { baseTheme } from "~/helpers/editor/themes/baseTheme"
+import { inputTheme } from "~/helpers/editor/themes/baseTheme"
 import { HoppEnvironmentPlugin } from "~/helpers/editor/extensions/HoppEnvironment"
 import { useStreamSubscriber } from "~/helpers/utils/composables"
 
@@ -88,7 +88,7 @@ const envTooltipPlugin = new HoppEnvironmentPlugin(subscribeToStream, view)
 
 const initView = (el: any) => {
   const extensions: Extension = [
-    baseTheme,
+    inputTheme,
     envTooltipPlugin,
     placeholderExt(props.placeholder),
     ViewPlugin.fromClass(
@@ -158,6 +158,5 @@ watch(editor, () => {
 .env-input {
   @apply flex;
   @apply flex-1;
-  @apply px-2;
 }
 </style>

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

@@ -145,6 +145,126 @@ export const baseTheme = EditorView.theme({
   },
 })
 
+export const inputTheme = EditorView.theme({
+  "&": {
+    fontSize: "var(--font-size-body)",
+    height: "100%",
+    width: "100%",
+    flex: "1",
+  },
+  ".cm-content": {
+    caretColor: "var(--secondary-light-color)",
+    fontFamily: "var(--font-sans)",
+    backgroundColor: "var(--primary-color)",
+    borderRadius: "0.25rem",
+  },
+  ".cm-cursor": {
+    borderColor: "var(--secondary-color)",
+  },
+  ".cm-selectionBackground, .cm-content ::selection, .cm-line ::selection": {
+    backgroundColor: "var(--accent-color)",
+    color: "var(--accent-contrast-color)",
+  },
+  ".cm-panels": {
+    backgroundColor: "var(--primary-light-color)",
+    color: "var(--secondary-light-color)",
+  },
+  ".cm-panels.cm-panels-top": {
+    borderBottom: "1px solid var(--divider-light-color)",
+  },
+  ".cm-panels.cm-panels-bottom": {
+    borderTop: "1px solid var(--divider-light-color)",
+  },
+  ".cm-search": {
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "nowrap",
+    flexShrink: 0,
+    overflow: "auto",
+  },
+  ".cm-search label": {
+    display: "inline-flex",
+    alignItems: "center",
+  },
+  ".cm-textfield": {
+    backgroundColor: "var(--primary-dark-color)",
+    color: "var(--secondary-dark-color)",
+    borderColor: "var(--divider-light-color)",
+    borderRadius: "3px",
+  },
+  ".cm-button": {
+    backgroundColor: "var(--primary-dark-color)",
+    color: "var(--secondary-dark-color)",
+    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.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: "transparent" },
+  ".cm-searchMatch": {
+    outline: "1px solid var(--accent-dark-color)",
+    backgroundColor: "var(--divider-dark-color)",
+  },
+  ".cm-selectionMatch": {
+    outline: "1px solid var(--accent-dark-color)",
+    backgroundColor: "var(--divider-light-color)",
+  },
+  ".cm-matchingBracket, .cm-nonmatchingBracket": {
+    backgroundColor: "var(--divider-color)",
+    outline: "1px solid var(--accent-dark-color)",
+  },
+  ".cm-gutters": {
+    fontFamily: "var(--font-mono)",
+    backgroundColor: "var(--primary-color)",
+    borderColor: "var(--divider-light-color)",
+  },
+  ".cm-lineNumbers": {
+    minWidth: "3em",
+    color: "var(--secondary-light-color)",
+  },
+  ".cm-foldGutter": {
+    minWidth: "2em",
+    color: "var(--secondary-light-color)",
+  },
+  ".cm-foldGutter .cm-gutterElement": {
+    textAlign: "center",
+  },
+  ".cm-line": {
+    paddingLeft: "1rem",
+    paddingRight: "1rem",
+    paddingTop: "0.2rem",
+    paddingBottom: "0.2rem",
+  },
+  ".cm-activeLineGutter": {
+    backgroundColor: "transparent",
+  },
+  ".cm-scroller::-webkit-scrollbar": {
+    display: "none",
+  },
+  ".cm-foldPlaceholder": {
+    backgroundColor: "var(--divider-light-color)",
+    color: "var(--secondary-dark-color)",
+    borderColor: "var(--divider-dark-color)",
+  },
+})
+
 const editorTypeColor = "var(--editor-type-color)"
 const editorNameColor = "var(--editor-name-color)"
 const editorOperatorColor = "var(--editor-operator-color)"