From 948cf9dae32d4e3fbcdea505b0930f399b556b2f Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sat, 11 Sep 2021 10:34:06 +0530
Subject: [PATCH] perf: cleanup

---
 components/graphql/RequestOptions.vue         |  6 +-
 components/graphql/Response.vue               |  2 +-
 components/graphql/Sidebar.vue                |  6 +-
 components/http/CodegenModal.vue              |  2 +-
 components/http/Headers.vue                   |  2 +-
 components/http/ImportCurl.vue                |  5 +-
 components/http/Parameters.vue                |  2 +-
 components/http/PreRequestScript.vue          |  2 +-
 components/http/RawBody.vue                   |  4 +-
 components/http/Tests.vue                     |  2 +-
 .../lenses/renderers/HTMLLensRenderer.vue     | 20 +++----
 .../lenses/renderers/ImageLensRenderer.vue    | 10 ++--
 .../lenses/renderers/JSONLensRenderer.vue     |  4 +-
 .../lenses/renderers/RawLensRenderer.vue      |  4 +-
 .../lenses/renderers/XMLLensRenderer.vue      |  4 +-
 helpers/editor/codemirror.ts                  |  4 +-
 pages/graphql.vue                             | 56 +++++++++----------
 17 files changed, 53 insertions(+), 82 deletions(-)

diff --git a/components/graphql/RequestOptions.vue b/components/graphql/RequestOptions.vue
index f97926338..048dad9ec 100644
--- a/components/graphql/RequestOptions.vue
+++ b/components/graphql/RequestOptions.vue
@@ -55,7 +55,7 @@
               />
             </div>
           </div>
-          <div ref="queryEditor" class="w-full block"></div>
+          <div ref="queryEditor"></div>
         </AppSection>
       </SmartTab>
 
@@ -93,7 +93,7 @@
               />
             </div>
           </div>
-          <div ref="variableEditor" class="w-full block"></div>
+          <div ref="variableEditor"></div>
         </AppSection>
       </SmartTab>
 
@@ -147,7 +147,7 @@
             </div>
           </div>
           <div v-if="bulkMode" class="flex">
-            <div ref="bulkEditor" class="w-full block"></div>
+            <div ref="bulkEditor"></div>
           </div>
           <div v-else>
             <div
diff --git a/components/graphql/Response.vue b/components/graphql/Response.vue
index 953bb8cc0..90a1f01ae 100644
--- a/components/graphql/Response.vue
+++ b/components/graphql/Response.vue
@@ -41,7 +41,7 @@
         />
       </div>
     </div>
-    <div v-if="responseString" ref="schemaEditor" class="w-full block"></div>
+    <div v-if="responseString" ref="schemaEditor"></div>
     <div
       v-else
       class="
diff --git a/components/graphql/Sidebar.vue b/components/graphql/Sidebar.vue
index 680f1acba..b5746843c 100644
--- a/components/graphql/Sidebar.vue
+++ b/components/graphql/Sidebar.vue
@@ -172,11 +172,7 @@
               />
             </div>
           </div>
-          <div
-            v-if="schemaString"
-            ref="schemaEditor"
-            class="w-full block"
-          ></div>
+          <div v-if="schemaString" ref="schemaEditor"></div>
           <div
             v-else
             class="
diff --git a/components/http/CodegenModal.vue b/components/http/CodegenModal.vue
index 161ef7033..7a0949757 100644
--- a/components/http/CodegenModal.vue
+++ b/components/http/CodegenModal.vue
@@ -41,7 +41,7 @@
         <div
           v-if="codegenType"
           ref="generatedCode"
-          class="w-full border border-dividerLight rounded block"
+          class="border border-dividerLight rounded"
         ></div>
       </div>
     </template>
diff --git a/components/http/Headers.vue b/components/http/Headers.vue
index 5fff7dbf9..14d39646a 100644
--- a/components/http/Headers.vue
+++ b/components/http/Headers.vue
@@ -48,7 +48,7 @@
       </div>
     </div>
     <div v-if="bulkMode" class="flex">
-      <div ref="bulkEditor" class="w-full block"></div>
+      <div ref="bulkEditor"></div>
     </div>
     <div v-else>
       <div
diff --git a/components/http/ImportCurl.vue b/components/http/ImportCurl.vue
index 671541597..1701da26c 100644
--- a/components/http/ImportCurl.vue
+++ b/components/http/ImportCurl.vue
@@ -6,10 +6,7 @@
   >
     <template #body>
       <div class="flex flex-col px-2">
-        <div
-          ref="curlEditor"
-          class="w-full border border-dividerLight rounded block"
-        ></div>
+        <div ref="curlEditor" class="border border-dividerLight rounded"></div>
       </div>
     </template>
     <template #footer>
diff --git a/components/http/Parameters.vue b/components/http/Parameters.vue
index 1b24cb6d1..eb91835db 100644
--- a/components/http/Parameters.vue
+++ b/components/http/Parameters.vue
@@ -48,7 +48,7 @@
       </div>
     </div>
     <div v-if="bulkMode" class="flex">
-      <div ref="bulkEditor" class="w-full block"></div>
+      <div ref="bulkEditor"></div>
     </div>
     <div v-else>
       <div
diff --git a/components/http/PreRequestScript.vue b/components/http/PreRequestScript.vue
index 86364130c..563fcc9e2 100644
--- a/components/http/PreRequestScript.vue
+++ b/components/http/PreRequestScript.vue
@@ -41,7 +41,7 @@
     </div>
     <div class="border-b border-dividerLight flex">
       <div class="border-r border-dividerLight w-2/3">
-        <div ref="preRrequestEditor" class="w-full block"></div>
+        <div ref="preRrequestEditor"></div>
       </div>
       <div
         class="
diff --git a/components/http/RawBody.vue b/components/http/RawBody.vue
index 1bd202953..2c6ff4a7d 100644
--- a/components/http/RawBody.vue
+++ b/components/http/RawBody.vue
@@ -62,9 +62,7 @@
         />
       </div>
     </div>
-    <div class="relative">
-      <div ref="rawBodyParameters" class="w-full block"></div>
-    </div>
+    <div ref="rawBodyParameters"></div>
   </div>
 </template>
 
diff --git a/components/http/Tests.vue b/components/http/Tests.vue
index 788200f3c..949296215 100644
--- a/components/http/Tests.vue
+++ b/components/http/Tests.vue
@@ -41,7 +41,7 @@
     </div>
     <div class="border-b border-dividerLight flex">
       <div class="border-r border-dividerLight w-2/3">
-        <div ref="testScriptEditor" class="w-full block"></div>
+        <div ref="testScriptEditor"></div>
       </div>
       <div
         class="
diff --git a/components/lenses/renderers/HTMLLensRenderer.vue b/components/lenses/renderers/HTMLLensRenderer.vue
index 8522976ef..928b82204 100644
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -52,19 +52,13 @@
         />
       </div>
     </div>
-    <div class="relative">
-      <div
-        v-show="!previewEnabled"
-        ref="htmlResponse"
-        class="w-full block"
-      ></div>
-      <iframe
-        v-show="previewEnabled"
-        ref="previewFrame"
-        class="covers-response"
-        src="about:blank"
-      ></iframe>
-    </div>
+    <div v-show="!previewEnabled" ref="htmlResponse"></div>
+    <iframe
+      v-show="previewEnabled"
+      ref="previewFrame"
+      class="covers-response"
+      src="about:blank"
+    ></iframe>
   </div>
 </template>
 
diff --git a/components/lenses/renderers/ImageLensRenderer.vue b/components/lenses/renderers/ImageLensRenderer.vue
index a2ee88044..230406d0b 100644
--- a/components/lenses/renderers/ImageLensRenderer.vue
+++ b/components/lenses/renderers/ImageLensRenderer.vue
@@ -27,12 +27,10 @@
         />
       </div>
     </div>
-    <div class="flex relative">
-      <img
-        class="border-b border-dividerLight flex max-w-full flex-1"
-        :src="imageSource"
-      />
-    </div>
+    <img
+      class="border-b border-dividerLight flex max-w-full flex-1"
+      :src="imageSource"
+    />
   </div>
 </template>
 
diff --git a/components/lenses/renderers/JSONLensRenderer.vue b/components/lenses/renderers/JSONLensRenderer.vue
index 88be7d265..1f27bff1c 100644
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -43,9 +43,7 @@
         />
       </div>
     </div>
-    <div class="relative">
-      <div ref="jsonResponse" class="w-full block"></div>
-    </div>
+    <div ref="jsonResponse"></div>
   </div>
 </template>
 
diff --git a/components/lenses/renderers/RawLensRenderer.vue b/components/lenses/renderers/RawLensRenderer.vue
index c8b37dd85..9203bddc2 100644
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -43,9 +43,7 @@
         />
       </div>
     </div>
-    <div class="relative">
-      <div ref="rawResponse" class="w-full block"></div>
-    </div>
+    <div ref="rawResponse"></div>
   </div>
 </template>
 
diff --git a/components/lenses/renderers/XMLLensRenderer.vue b/components/lenses/renderers/XMLLensRenderer.vue
index 9bcd53d07..25d173c91 100644
--- a/components/lenses/renderers/XMLLensRenderer.vue
+++ b/components/lenses/renderers/XMLLensRenderer.vue
@@ -43,9 +43,7 @@
         />
       </div>
     </div>
-    <div class="relative">
-      <div ref="xmlResponse" class="w-full block"></div>
-    </div>
+    <div ref="xmlResponse"></div>
   </div>
 </template>
 
diff --git a/helpers/editor/codemirror.ts b/helpers/editor/codemirror.ts
index b54c755d9..c42d26cfa 100644
--- a/helpers/editor/codemirror.ts
+++ b/helpers/editor/codemirror.ts
@@ -2,7 +2,7 @@ import CodeMirror from "codemirror"
 
 import "codemirror-theme-github/theme/github.css"
 import "codemirror/theme/base16-dark.css"
-import "codemirror/theme/3024-night.css"
+import "codemirror/theme/tomorrow-night-bright.css"
 
 import "codemirror/lib/codemirror.css"
 import "codemirror/addon/lint/lint.css"
@@ -168,7 +168,7 @@ export function useCodemirror(
       case "dark":
         return "base16-dark"
       case "black":
-        return "3024-night"
+        return "tomorrow-night-bright"
       default:
         return "default"
     }
diff --git a/pages/graphql.vue b/pages/graphql.vue
index 449bc91a2..5a7a4ce20 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -1,36 +1,30 @@
 <template>
-  <div>
-    <Splitpanes
-      class="smart-splitter"
-      :dbl-click-splitter="false"
-      :horizontal="!(windowInnerWidth.x.value >= 768)"
+  <Splitpanes
+    class="smart-splitter"
+    :dbl-click-splitter="false"
+    :horizontal="!(windowInnerWidth.x.value >= 768)"
+  >
+    <Pane class="hide-scrollbar !overflow-auto">
+      <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
+        <Pane class="hide-scrollbar !overflow-auto">
+          <GraphqlRequest :conn="gqlConn" />
+          <GraphqlRequestOptions :conn="gqlConn" />
+        </Pane>
+        <Pane class="hide-scrollbar !overflow-auto">
+          <GraphqlResponse :conn="gqlConn" />
+        </Pane>
+      </Splitpanes>
+    </Pane>
+    <Pane
+      v-if="RIGHT_SIDEBAR"
+      max-size="35"
+      size="25"
+      min-size="20"
+      class="hide-scrollbar !overflow-auto"
     >
-      <Pane class="hide-scrollbar !overflow-auto">
-        <Splitpanes
-          class="smart-splitter"
-          :dbl-click-splitter="false"
-          horizontal
-        >
-          <Pane class="hide-scrollbar !overflow-auto">
-            <GraphqlRequest :conn="gqlConn" />
-            <GraphqlRequestOptions :conn="gqlConn" />
-          </Pane>
-          <Pane class="hide-scrollbar !overflow-auto">
-            <GraphqlResponse :conn="gqlConn" />
-          </Pane>
-        </Splitpanes>
-      </Pane>
-      <Pane
-        v-if="RIGHT_SIDEBAR"
-        max-size="35"
-        size="25"
-        min-size="20"
-        class="hide-scrollbar !overflow-auto"
-      >
-        <GraphqlSidebar :conn="gqlConn" />
-      </Pane>
-    </Splitpanes>
-  </div>
+      <GraphqlSidebar :conn="gqlConn" />
+    </Pane>
+  </Splitpanes>
 </template>
 
 <script lang="ts">