From b5e524e513b65d1bc12e8cdf06c240ad360e4d5c Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Mon, 12 Jul 2021 04:20:00 +0530
Subject: [PATCH] refactor: remaining sections stylings

---
 components/collections/graphql/index.vue      |   1 -
 components/http/CodegenModal.vue              |   2 +-
 components/http/RawBody.vue                   | 100 +++---
 components/http/ResponseMeta.vue              |   7 +-
 components/lenses/HeadersRenderer.vue         |  55 +++-
 .../lenses/renderers/HTMLLensRenderer.vue     |  24 +-
 .../lenses/renderers/ImageLensRenderer.vue    |  16 +-
 .../lenses/renderers/JSONLensRenderer.vue     |  38 +--
 .../lenses/renderers/RawLensRenderer.vue      |  38 +--
 .../lenses/renderers/XMLLensRenderer.vue      |  38 +--
 components/smart/AceEditor.vue                |   4 +-
 components/smart/Toggle.vue                   |   6 +-
 pages/doc.vue                                 |   2 +-
 pages/graphql.vue                             |  14 +-
 pages/index.vue                               | 287 +++++++++---------
 15 files changed, 316 insertions(+), 316 deletions(-)

diff --git a/components/collections/graphql/index.vue b/components/collections/graphql/index.vue
index 3ad73457d..8ac7bf0aa 100644
--- a/components/collections/graphql/index.vue
+++ b/components/collections/graphql/index.vue
@@ -1,7 +1,6 @@
 <template>
   <AppSection
     label="collections"
-    class=""
     :class="{ 'rounded-lg border-2 border-divider': savingMode }"
   >
     <div
diff --git a/components/http/CodegenModal.vue b/components/http/CodegenModal.vue
index 26d0656f5..1db3b2d02 100644
--- a/components/http/CodegenModal.vue
+++ b/components/http/CodegenModal.vue
@@ -73,7 +73,7 @@
           :options="{
             maxLines: '10',
             minLines: '10',
-            fontSize: '15px',
+            fontSize: '14px',
             autoScrollEditorIntoView: true,
             readOnly: true,
             showPrintMargin: false,
diff --git a/components/http/RawBody.vue b/components/http/RawBody.vue
index 738094e77..2e6d1a6f3 100644
--- a/components/http/RawBody.vue
+++ b/components/http/RawBody.vue
@@ -1,57 +1,55 @@
 <template>
   <div>
-    <ul>
-      <li>
-        <div class="flex flex-1">
-          <label for="rawBody">{{ $t("raw_request_body") }}</label>
-          <div>
-            <ButtonSecondary
-              v-if="rawInput && contentType.endsWith('json')"
-              ref="prettifyRequest"
-              v-tippy="{ theme: 'tooltip' }"
-              :title="$t('prettify_body')"
-              :icon="prettifyIcon"
-              @click.native="prettifyRequestBody"
-            />
-            <label for="payload" class="p-0">
-              <ButtonSecondary
-                v-tippy="{ theme: 'tooltip' }"
-                :title="$t('import_json')"
-                icon="post_add"
-                @click.native="$refs.payload.click()"
-              />
-            </label>
-            <input
-              ref="payload"
-              class="input"
-              name="payload"
-              type="file"
-              @change="uploadPayload"
-            />
-            <ButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="$t('clear')"
-              icon="clear_all"
-              @click.native="clearContent('rawParams', $event)"
-            />
-          </div>
-        </div>
-        <div class="relative">
-          <SmartAceEditor
-            v-model="rawParamsBody"
-            :lang="rawInputEditorLang"
-            :options="{
-              maxLines: '16',
-              minLines: '8',
-              fontSize: '15px',
-              autoScrollEditorIntoView: true,
-              showPrintMargin: false,
-              useWorker: false,
-            }"
+    <div class="flex flex-1 items-center justify-between pl-4">
+      <label for="rawBody" class="font-semibold text-xs">
+        {{ $t("raw_request_body") }}
+      </label>
+      <div>
+        <ButtonSecondary
+          v-if="rawInput && contentType.endsWith('json')"
+          ref="prettifyRequest"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('prettify_body')"
+          :icon="prettifyIcon"
+          @click.native="prettifyRequestBody"
+        />
+        <label for="payload">
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('import_json')"
+            icon="post_add"
+            @click.native="$refs.payload.click()"
           />
-        </div>
-      </li>
-    </ul>
+        </label>
+        <input
+          ref="payload"
+          class="input"
+          name="payload"
+          type="file"
+          @change="uploadPayload"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('clear')"
+          icon="clear_all"
+          @click.native="clearContent('rawParams', $event)"
+        />
+      </div>
+    </div>
+    <div class="relative">
+      <SmartAceEditor
+        v-model="rawParamsBody"
+        :lang="rawInputEditorLang"
+        :options="{
+          maxLines: '16',
+          minLines: '8',
+          fontSize: '14px',
+          autoScrollEditorIntoView: true,
+          showPrintMargin: false,
+          useWorker: false,
+        }"
+      />
+    </div>
   </div>
 </template>
 
diff --git a/components/http/ResponseMeta.vue b/components/http/ResponseMeta.vue
index 742d2771e..19b8e57fb 100644
--- a/components/http/ResponseMeta.vue
+++ b/components/http/ResponseMeta.vue
@@ -9,18 +9,21 @@
       items-center
       p-4
       font-mono font-semibold
-      space-x-4
+      space-x-8
     "
     :class="statusCategory ? statusCategory.className : ''"
   >
     <i v-if="active" class="animate-spin material-icons">refresh</i>
     <span v-else>
-      {{ response.status }}
+      <span class="text-secondaryDark"> Status: </span>
+      {{ response.status || $t("waiting_send_req") }}
     </span>
     <span v-if="response.duration" class="text-xs">
+      <span class="text-secondaryDark"> Time: </span>
       {{ `${response.duration} ms` }}
     </span>
     <span v-if="response.size" class="text-xs">
+      <span class="text-secondaryDark"> Size: </span>
       {{ `${response.size} B` }}
     </span>
   </div>
diff --git a/components/lenses/HeadersRenderer.vue b/components/lenses/HeadersRenderer.vue
index bb0c4f7d5..c9ad2d04d 100644
--- a/components/lenses/HeadersRenderer.vue
+++ b/components/lenses/HeadersRenderer.vue
@@ -1,13 +1,50 @@
 <template>
-  <div>
-    <p v-for="(value, key) in headers" :key="key">
-      <input
-        :value="`${key} → ${value}`"
-        :name="key"
-        class="input bg-transparent"
-        readonly
-      />
-    </p>
+  <div class="p-2 font-mono">
+    <div v-for="(value, key) in headers" :key="key" class="flex items-center">
+      <span
+        class="
+          p-2
+          flex
+          min-w-0
+          text-xs
+          group-hover:text-secondaryDark
+          transition
+          font-semibold
+        "
+      >
+        <span class="truncate">
+          {{ key }}
+        </span>
+      </span>
+      <span
+        class="
+          font-mono font-bold
+          flex
+          justify-center
+          items-center
+          text-xs
+          mx-2
+          truncate
+        "
+      >
+        →
+      </span>
+      <span
+        class="
+          p-2
+          flex flex-1
+          min-w-0
+          text-xs
+          group-hover:text-secondaryDark
+          transition
+          font-semibold
+        "
+      >
+        <span class="truncate">
+          {{ value }}
+        </span>
+      </span>
+    </div>
   </div>
 </template>
 
diff --git a/components/lenses/renderers/HTMLLensRenderer.vue b/components/lenses/renderers/HTMLLensRenderer.vue
index bf3bbcac5..dbe4627af 100644
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -1,18 +1,8 @@
 <template>
   <div>
-    <div class="flex flex-1">
+    <div class="flex flex-1 items-center justify-between">
       <label for="body">{{ $t("response_body") }}</label>
       <div>
-        <ButtonSecondary
-          v-if="response.body"
-          ref="ToggleExpandResponse"
-          v-tippy="{ theme: 'tooltip' }"
-          :title="
-            !expandResponse ? $t('expand_response') : $t('collapse_response')
-          "
-          :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
-          @click.native="ToggleExpandResponse"
-        />
         <ButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip' }"
@@ -43,15 +33,14 @@
         :value="responseBodyText"
         :lang="'html'"
         :options="{
-          maxLines: responseBodyMaxLines,
+          maxLines: Infinity,
           minLines: '16',
-          fontSize: '15px',
+          fontSize: '14px',
           autoScrollEditorIntoView: true,
           readOnly: true,
           showPrintMargin: false,
           useWorker: false,
         }"
-        styles="rounded-b-lg"
       />
       <iframe
         ref="previewFrame"
@@ -73,19 +62,12 @@ export default {
   },
   data() {
     return {
-      expandResponse: false,
-      responseBodyMaxLines: 16,
       downloadIcon: "save_alt",
       copyIcon: "content_copy",
       previewEnabled: false,
     }
   },
   methods: {
-    ToggleExpandResponse() {
-      this.expandResponse = !this.expandResponse
-      this.responseBodyMaxLines =
-        this.responseBodyMaxLines === Infinity ? 16 : Infinity
-    },
     downloadResponse() {
       const dataToWrite = this.responseBodyText
       const file = new Blob([dataToWrite], { type: "text/html" })
diff --git a/components/lenses/renderers/ImageLensRenderer.vue b/components/lenses/renderers/ImageLensRenderer.vue
index 1adfe6f40..4a3303def 100644
--- a/components/lenses/renderers/ImageLensRenderer.vue
+++ b/components/lenses/renderers/ImageLensRenderer.vue
@@ -1,7 +1,19 @@
 <template>
   <div>
-    <div class="flex flex-1">
-      <label for="body">{{ $t("response_body") }}</label>
+    <div
+      class="
+        flex flex-1
+        sticky
+        top-23
+        z-10
+        bg-primary
+        items-center
+        justify-between
+      "
+    >
+      <label for="body" class="px-4 font-semibold text-xs">
+        {{ $t("response_body") }}
+      </label>
       <div>
         <ButtonSecondary
           v-if="response.body"
diff --git a/components/lenses/renderers/JSONLensRenderer.vue b/components/lenses/renderers/JSONLensRenderer.vue
index 44eaa3b54..d9064f225 100644
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -1,18 +1,20 @@
 <template>
   <div>
-    <div class="flex flex-1">
-      <label for="body">{{ $t("response_body") }}</label>
+    <div
+      class="
+        flex flex-1
+        sticky
+        top-23
+        z-10
+        bg-primary
+        items-center
+        justify-between
+      "
+    >
+      <label for="body" class="px-4 font-semibold text-xs">
+        {{ $t("response_body") }}
+      </label>
       <div>
-        <ButtonSecondary
-          v-if="response.body"
-          ref="ToggleExpandResponse"
-          v-tippy="{ theme: 'tooltip' }"
-          :title="
-            !expandResponse ? $t('expand_response') : $t('collapse_response')
-          "
-          :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
-          @click.native="ToggleExpandResponse"
-        />
         <ButtonSecondary
           v-if="response.body && canDownloadResponse"
           ref="downloadResponse"
@@ -37,15 +39,14 @@
         :lang="'json'"
         :provide-j-s-o-n-outline="true"
         :options="{
-          maxLines: responseBodyMaxLines,
+          maxLines: Infinity,
           minLines: '16',
-          fontSize: '15px',
+          fontSize: '14px',
           autoScrollEditorIntoView: true,
           readOnly: true,
           showPrintMargin: false,
           useWorker: false,
         }"
-        styles="rounded-b-lg"
       />
     </div>
   </div>
@@ -62,8 +63,6 @@ export default {
   },
   data() {
     return {
-      expandResponse: false,
-      responseBodyMaxLines: 16,
       downloadIcon: "save_alt",
       copyIcon: "content_copy",
     }
@@ -92,11 +91,6 @@ export default {
     },
   },
   methods: {
-    ToggleExpandResponse() {
-      this.expandResponse = !this.expandResponse
-      this.responseBodyMaxLines =
-        this.responseBodyMaxLines === Infinity ? 16 : Infinity
-    },
     downloadResponse() {
       const dataToWrite = this.responseBodyText
       const file = new Blob([dataToWrite], { type: this.responseType })
diff --git a/components/lenses/renderers/RawLensRenderer.vue b/components/lenses/renderers/RawLensRenderer.vue
index 696a708d3..f9b827b9d 100644
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -1,18 +1,20 @@
 <template>
   <div>
-    <div class="flex flex-1">
-      <label for="body">{{ $t("response_body") }}</label>
+    <div
+      class="
+        flex flex-1
+        sticky
+        top-23
+        z-10
+        bg-primary
+        items-center
+        justify-between
+      "
+    >
+      <label for="body" class="px-4 font-semibold text-xs">
+        {{ $t("response_body") }}
+      </label>
       <div>
-        <ButtonSecondary
-          v-if="response.body"
-          ref="ToggleExpandResponse"
-          v-tippy="{ theme: 'tooltip' }"
-          :title="
-            !expandResponse ? $t('expand_response') : $t('collapse_response')
-          "
-          :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
-          @click.native="ToggleExpandResponse"
-        />
         <ButtonSecondary
           v-if="response.body && canDownloadResponse"
           ref="downloadResponse"
@@ -36,15 +38,14 @@
         :value="responseBodyText"
         :lang="'plain_text'"
         :options="{
-          maxLines: responseBodyMaxLines,
+          maxLines: Infinity,
           minLines: '16',
-          fontSize: '15px',
+          fontSize: '14px',
           autoScrollEditorIntoView: true,
           readOnly: true,
           showPrintMargin: false,
           useWorker: false,
         }"
-        styles="rounded-b-lg"
       />
     </div>
   </div>
@@ -61,8 +62,6 @@ export default {
   },
   data() {
     return {
-      expandResponse: false,
-      responseBodyMaxLines: 16,
       downloadIcon: "save_alt",
       copyIcon: "content_copy",
     }
@@ -83,11 +82,6 @@ export default {
     },
   },
   methods: {
-    ToggleExpandResponse() {
-      this.expandResponse = !this.expandResponse
-      this.responseBodyMaxLines =
-        this.responseBodyMaxLines === Infinity ? 16 : Infinity
-    },
     downloadResponse() {
       const dataToWrite = this.responseBodyText
       const file = new Blob([dataToWrite], { type: this.responseType })
diff --git a/components/lenses/renderers/XMLLensRenderer.vue b/components/lenses/renderers/XMLLensRenderer.vue
index 21591b802..31df07012 100644
--- a/components/lenses/renderers/XMLLensRenderer.vue
+++ b/components/lenses/renderers/XMLLensRenderer.vue
@@ -1,18 +1,20 @@
 <template>
   <div>
-    <div class="flex flex-1">
-      <label for="body">{{ $t("response_body") }}</label>
+    <div
+      class="
+        flex flex-1
+        sticky
+        top-23
+        z-10
+        bg-primary
+        items-center
+        justify-between
+      "
+    >
+      <label for="body" class="px-4 font-semibold text-xs">
+        {{ $t("response_body") }}
+      </label>
       <div>
-        <ButtonSecondary
-          v-if="response.body"
-          ref="ToggleExpandResponse"
-          v-tippy="{ theme: 'tooltip' }"
-          :title="
-            !expandResponse ? $t('expand_response') : $t('collapse_response')
-          "
-          :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
-          @click.native="ToggleExpandResponse"
-        />
         <ButtonSecondary
           v-if="response.body"
           ref="downloadResponse"
@@ -36,15 +38,14 @@
         :value="responseBodyText"
         :lang="'xml'"
         :options="{
-          maxLines: responseBodyMaxLines,
+          maxLines: Infinity,
           minLines: '16',
-          fontSize: '15px',
+          fontSize: '14px',
           autoScrollEditorIntoView: true,
           readOnly: true,
           showPrintMargin: false,
           useWorker: false,
         }"
-        styles="rounded-b-lg"
       />
     </div>
   </div>
@@ -60,8 +61,6 @@ export default {
   },
   data() {
     return {
-      expandResponse: false,
-      responseBodyMaxLines: 16,
       copyIcon: "content_copy",
       downloadIcon: "save_alt",
     }
@@ -74,11 +73,6 @@ export default {
     },
   },
   methods: {
-    ToggleExpandResponse() {
-      this.expandResponse = !this.expandResponse
-      this.responseBodyMaxLines =
-        this.responseBodyMaxLines === Infinity ? 16 : Infinity
-    },
     downloadResponse() {
       const dataToWrite = this.responseBodyText
       const file = new Blob([dataToWrite], { type: this.responseType })
diff --git a/components/smart/AceEditor.vue b/components/smart/AceEditor.vue
index 7edb9d190..8736b0da5 100644
--- a/components/smart/AceEditor.vue
+++ b/components/smart/AceEditor.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="show-if-initialized" :class="{ initialized }">
-    <div v-if="lang == 'json'" class="outline">
+    <div v-if="lang == 'json'" class="outline hide-scrollbar">
       <div v-for="(p, index) in currPath" :key="index" class="block">
         <div class="label" @click="onBlockClick(index)">
           {{ p }}
@@ -258,7 +258,7 @@ export default {
 
 .outline {
   @apply flex flex-nowrap;
-  @apply w-full;
+  @apply flex-1;
   @apply overflow-auto;
   @apply font-mono;
   @apply shadow-lg;
diff --git a/components/smart/Toggle.vue b/components/smart/Toggle.vue
index a8dfae2b7..c84be9611 100644
--- a/components/smart/Toggle.vue
+++ b/components/smart/Toggle.vue
@@ -1,9 +1,11 @@
 <template>
-  <div class="inline-block cursor-pointer" @click="$emit('change')">
+  <div class="inline-flex cursor-pointer flex-nowrap" @click="$emit('change')">
     <label ref="toggle" class="toggle" :class="{ on: on }">
       <span class="handle"></span>
     </label>
-    <label class="pl-0 align-middle cursor-pointer">
+    <label
+      class="pl-0 align-middle font-semibold truncate text-xs cursor-pointer"
+    >
       <slot></slot>
     </label>
   </div>
diff --git a/pages/doc.vue b/pages/doc.vue
index 0111ee163..500376e7a 100644
--- a/pages/doc.vue
+++ b/pages/doc.vue
@@ -43,7 +43,7 @@
                   :options="{
                     maxLines: '16',
                     minLines: '8',
-                    fontSize: '15px',
+                    fontSize: '14px',
                     autoScrollEditorIntoView: true,
                     showPrintMargin: false,
                     useWorker: false,
diff --git a/pages/graphql.vue b/pages/graphql.vue
index e7e6aa3f8..bc4445cb9 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -183,9 +183,9 @@
                 styles="rounded-b-lg"
                 :on-run-g-q-l-query="runQuery"
                 :options="{
-                  maxLines: responseBodyMaxLines,
+                  maxLines: Infinity,
                   minLines: 10,
-                  fontSize: '15px',
+                  fontSize: '14px',
                   autoScrollEditorIntoView: true,
                   showPrintMargin: false,
                   useWorker: false,
@@ -202,7 +202,7 @@
                   :options="{
                     maxLines: 10,
                     minLines: 5,
-                    fontSize: '15px',
+                    fontSize: '14px',
                     autoScrollEditorIntoView: true,
                     showPrintMargin: false,
                     useWorker: false,
@@ -249,9 +249,9 @@
                 :value="schema"
                 :lang="'graphqlschema'"
                 :options="{
-                  maxLines: responseBodyMaxLines,
+                  maxLines: Infinity,
                   minLines: 16,
-                  fontSize: '15px',
+                  fontSize: '14px',
                   autoScrollEditorIntoView: true,
                   readOnly: true,
                   showPrintMargin: false,
@@ -299,9 +299,9 @@
                   :lang="'json'"
                   :lint="false"
                   :options="{
-                    maxLines: responseBodyMaxLines,
+                    maxLines: Infinity,
                     minLines: 10,
-                    fontSize: '15px',
+                    fontSize: '14px',
                     autoScrollEditorIntoView: true,
                     readOnly: true,
                     showPrintMargin: false,
diff --git a/pages/index.vue b/pages/index.vue
index 7a3a226f7..eb3518cc1 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -278,64 +278,58 @@
                   }`
                 "
               >
-                <ul>
-                  <li>
-                    <label for="contentType" class="text-sm">{{
-                      $t("content_type")
-                    }}</label>
-                    <span class="select-wrapper">
-                      <tippy
-                        interactive
-                        ref="contentTypeOptions"
-                        tabindex="-1"
-                        trigger="click"
-                        theme="popover"
-                        arrow
-                      >
-                        <template #trigger>
+                <div class="flex flex-1 items-center justify-between py-2">
+                  <tippy
+                    interactive
+                    ref="contentTypeOptions"
+                    tabindex="-1"
+                    trigger="click"
+                    theme="popover"
+                    arrow
+                  >
+                    <template #trigger>
+                      <div class="flex">
+                        <span class="select-wrapper">
                           <input
                             id="contentType"
-                            class="input"
+                            class="
+                              flex
+                              w-full
+                              px-4
+                              py-2
+                              bg-primary
+                              truncate
+                              rounded-lg
+                              font-semibold font-mono
+                              text-xs
+                              transition
+                              focus:outline-none
+                            "
                             v-model="contentType"
                             readonly
                           />
-                        </template>
-                        <SmartItem
-                          v-for="(
-                            contentTypeMenuItem, index
-                          ) in validContentTypes"
-                          :key="`content-type-${index}`"
-                          @click.native="
-                            contentType = contentTypeMenuItem
-                            $refs.contentTypeOptions.tippy().hide()
-                          "
-                          :label="contentTypeMenuItem"
-                        />
-                      </tippy>
-                    </span>
-                    <!-- <SmartAutoComplete
-                  :source="validContentTypes"
-                  :spellcheck="false"
-                  v-model="contentType"
-                  styles="text-sm"
-                /> -->
-                  </li>
-                </ul>
-                <ul>
-                  <li>
-                    <div class="flex flex-1">
-                      <span>
-                        <SmartToggle
-                          v-if="canListParameters"
-                          :on="rawInput"
-                          @change="rawInput = !rawInput"
-                        >
-                          {{ $t("raw_input") }}
-                        </SmartToggle>
-                      </span>
-                    </div>
-                  </li>
-                </ul>
+                        </span>
+                      </div>
+                    </template>
+                    <SmartItem
+                      v-for="(contentTypeMenuItem, index) in validContentTypes"
+                      :key="`content-type-${index}`"
+                      @click.native="
+                        contentType = contentTypeMenuItem
+                        $refs.contentTypeOptions.tippy().hide()
+                      "
+                      :label="contentTypeMenuItem"
+                    />
+                  </tippy>
+                  <SmartToggle
+                    v-if="canListParameters"
+                    :on="rawInput"
+                    @change="rawInput = !rawInput"
+                    class="px-4"
+                  >
+                    {{ $t("raw_input") }}
+                  </SmartToggle>
+                </div>
                 <HttpBodyParameters
                   v-if="!rawInput"
                   :bodyParams="bodyParams"
@@ -597,111 +591,102 @@
                 :label="$t('pre_request_script')"
               >
                 <AppSection v-if="showPreRequestScript" label="preRequest">
-                  <ul>
-                    <li>
-                      <div class="flex flex-1">
-                        <label>{{ $t("javascript_code") }}</label>
-                        <div>
-                          <ButtonSecondary
-                            to="https://github.com/hoppscotch/hoppscotch/wiki/Pre-Request-Scripts"
-                            blank
-                            v-tippy="{ theme: 'tooltip' }"
-                            :title="$t('wiki')"
-                            icon="help_outline"
-                          />
-                        </div>
-                      </div>
-                      <SmartJsEditor
-                        v-model="preRequestScript"
-                        :options="{
-                          maxLines: '16',
-                          minLines: '8',
-                          fontSize: '15px',
-                          autoScrollEditorIntoView: true,
-                          showPrintMargin: false,
-                          useWorker: false,
-                        }"
-                        styles="rounded-b-lg"
-                        completeMode="pre"
-                      />
-                    </li>
-                  </ul>
+                  <div class="flex flex-1 items-center justify-between pl-4">
+                    <label class="font-semibold text-xs">
+                      {{ $t("javascript_code") }}
+                    </label>
+                    <ButtonSecondary
+                      to="https://github.com/hoppscotch/hoppscotch/wiki/Pre-Request-Scripts"
+                      blank
+                      v-tippy="{ theme: 'tooltip' }"
+                      :title="$t('wiki')"
+                      icon="help_outline"
+                    />
+                  </div>
+                  <SmartJsEditor
+                    v-model="preRequestScript"
+                    :options="{
+                      maxLines: '16',
+                      minLines: '8',
+                      fontSize: '14px',
+                      autoScrollEditorIntoView: true,
+                      showPrintMargin: false,
+                      useWorker: false,
+                    }"
+                    completeMode="pre"
+                  />
                 </AppSection>
               </SmartTab>
 
               <SmartTab :id="'tests'" :label="$t('tests')">
                 <AppSection v-if="testsEnabled" label="postRequestTests">
-                  <ul>
-                    <li>
-                      <div class="flex flex-1">
-                        <label>{{ $t("javascript_code") }}</label>
-                        <div>
-                          <ButtonSecondary
-                            to="https://github.com/hoppscotch/hoppscotch/wiki/Post-Request-Tests"
-                            blank
-                            v-tippy="{ theme: 'tooltip' }"
-                            :title="$t('wiki')"
-                            icon="help_outline"
-                          />
-                        </div>
-                      </div>
-                      <SmartJsEditor
-                        v-model="testScript"
-                        :options="{
-                          maxLines: '16',
-                          minLines: '8',
-                          fontSize: '15px',
-                          autoScrollEditorIntoView: true,
-                          showPrintMargin: false,
-                          useWorker: false,
-                        }"
-                        styles="rounded-b-lg"
-                        completeMode="test"
+                  <div class="flex flex-1 items-center justify-between pl-4">
+                    <label class="font-semibold text-xs">
+                      {{ $t("javascript_code") }}
+                    </label>
+                    <ButtonSecondary
+                      to="https://github.com/hoppscotch/hoppscotch/wiki/Post-Request-Tests"
+                      blank
+                      v-tippy="{ theme: 'tooltip' }"
+                      :title="$t('wiki')"
+                      icon="help_outline"
+                    />
+                  </div>
+                  <SmartJsEditor
+                    v-model="testScript"
+                    :options="{
+                      maxLines: '16',
+                      minLines: '8',
+                      fontSize: '14px',
+                      autoScrollEditorIntoView: true,
+                      showPrintMargin: false,
+                      useWorker: false,
+                    }"
+                    completeMode="test"
+                  />
+                  <div v-if="testReports.length !== 0">
+                    <div class="flex flex-1 items-center justify-between pl-4">
+                      <label class="font-semibold text-xs">
+                        Test Reports
+                      </label>
+                      <ButtonSecondary
+                        @click.native="clearContent('tests', $event)"
+                        v-tippy="{ theme: 'tooltip' }"
+                        :title="$t('clear')"
+                        icon="clear_all"
                       />
-                      <div v-if="testReports.length !== 0">
-                        <div class="flex flex-1">
-                          <label>Test Reports</label>
-                          <div>
-                            <ButtonSecondary
-                              @click.native="clearContent('tests', $event)"
-                              v-tippy="{ theme: 'tooltip' }"
-                              :title="$t('clear')"
-                              icon="clear_all"
-                            />
-                          </div>
-                        </div>
-                        <div
-                          v-for="(testReport, index) in testReports"
-                          :key="index"
-                        >
-                          <div v-if="testReport.startBlock">
-                            <hr />
-                            <h4 class="heading">
-                              {{ testReport.startBlock }}
-                            </h4>
-                          </div>
-                          <p
-                            v-else-if="testReport.result"
-                            class="flex flex-1 info"
-                          >
-                            <span :class="testReport.styles.class">
-                              <i class="material-icons">
-                                {{ testReport.styles.icon }}
-                              </i>
-                              <span>&nbsp; {{ testReport.result }}</span>
-                              <span v-if="testReport.message">
-                                <label
-                                  >&nbsp; • &nbsp;
-                                  {{ testReport.message }}</label
-                                >
-                              </span>
-                            </span>
-                          </p>
-                          <div v-else-if="testReport.endBlock"><hr /></div>
-                        </div>
+                    </div>
+                    <div
+                      v-for="(testReport, index) in testReports"
+                      :key="index"
+                      class="px-4"
+                    >
+                      <div v-if="testReport.startBlock">
+                        <hr />
+                        <h4 class="heading">
+                          {{ testReport.startBlock }}
+                        </h4>
                       </div>
-                    </li>
-                  </ul>
+                      <p
+                        v-else-if="testReport.result"
+                        class="flex flex-1 font-mono text-xs info"
+                      >
+                        <span
+                          :class="testReport.styles.class"
+                          class="flex items-center"
+                        >
+                          <i class="material-icons text-sm">
+                            {{ testReport.styles.icon }}
+                          </i>
+                          <span>&nbsp;{{ testReport.result }}</span>
+                          <span v-if="testReport.message">
+                            <label>: {{ testReport.message }}</label>
+                          </span>
+                        </span>
+                      </p>
+                      <div v-else-if="testReport.endBlock"><hr /></div>
+                    </div>
+                  </div>
                 </AppSection>
               </SmartTab>
             </SmartTabs>