From 698ebe10635dfd5de38276cf222fa9b36500e5d1 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Fri, 11 Feb 2022 10:50:24 +0530
Subject: [PATCH] fix: foreground, background styles

---
 packages/hoppscotch-app/components/http/Request.vue       | 8 +++++---
 .../hoppscotch-app/helpers/editor/themes/baseTheme.ts     | 3 ++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/hoppscotch-app/components/http/Request.vue b/packages/hoppscotch-app/components/http/Request.vue
index bc855ef04..444e40f71 100644
--- a/packages/hoppscotch-app/components/http/Request.vue
+++ b/packages/hoppscotch-app/components/http/Request.vue
@@ -2,7 +2,7 @@
   <div
     class="sticky top-0 z-10 flex flex-shrink-0 p-4 space-x-2 overflow-x-auto bg-primary hide-scrollbar"
   >
-    <div class="flex flex-1">
+    <div class="flex flex-1 border border-divider rounded">
       <div class="relative flex">
         <label for="method">
           <tippy
@@ -16,7 +16,7 @@
               <span class="select-wrapper">
                 <input
                   id="method"
-                  class="flex px-4 py-2 font-semibold border rounded-l cursor-pointer bg-primaryLight border-divider text-secondaryDark w-26 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
+                  class="flex px-4 py-2 transition font-semibold rounded-l cursor-pointer text-secondaryDark w-26 bg-primaryLight"
                   :value="newMethod"
                   :readonly="!isCustomMethod"
                   :placeholder="`${t('request.method')}`"
@@ -33,7 +33,9 @@
           </tippy>
         </label>
       </div>
-      <div class="flex flex-1 border rounded-r border-divider">
+      <div
+        class="flex flex-1 border-l border-divider transition rounded-r bg-primaryLight"
+      >
         <SmartEnvInput
           v-model="newEndpoint"
           :placeholder="`${t('request.url')}`"
diff --git a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
index 40d3f4159..6765b5364 100644
--- a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
+++ b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
@@ -155,7 +155,8 @@ export const inputTheme = EditorView.theme({
   ".cm-content": {
     caretColor: "var(--secondary-light-color)",
     fontFamily: "var(--font-sans)",
-    backgroundColor: "var(--primary-color)",
+    color: "var(--secondary-dark-color)",
+    backgroundColor: "transparent",
     borderRadius: "0.25rem",
   },
   ".cm-cursor": {