refactor: set placement as top by edfault for modals, better response header layout

components/http/PreRequestScript.vue

@@ -5,15 +5,15 @@
         bg-primary
         border-b border-dividerLight
         flex flex-1
-        pl-4
         top-upperSecondaryStickyFold
+        pl-4
         z-10
         sticky
         items-center
         justify-between
       "
     >
-      <label>
+      <label class="font-semibold text-secondaryLight">
         {{ $t("javascript_code") }}
       </label>
       <ButtonSecondary
@@ -42,9 +42,9 @@
       <div
         class="
           h-full
-          max-w-1/3
           top-upperTertiaryStickyFold
           min-w-46
+          max-w-1/3
           p-4
           z-9
           sticky

components/http/TestResult.vue

@@ -19,7 +19,9 @@
           justify-between
         "
       >
-        <label> Test Report </label>
+        <label class="font-semibold text-secondaryLight">
+          {{ $t("test.report") }}
+        </label>
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('clear')"
@@ -100,10 +102,20 @@
       v-else
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
-      <i class="opacity-75 pb-2 material-icons">bug_report</i>
-      <span class="text-center">
+      <span class="text-center pb-2">
         {{ $t("empty.tests") }}
       </span>
+      <span class="text-center pb-4">
+        {{ $t("helpers.tests") }}
+      </span>
+      <ButtonSecondary
+        outline
+        :label="$t('action.learn_more')"
+        to="https://docs.hoppscotch.io"
+        blank
+        icon="open_in_new"
+        reverse
+      />
     </div>
   </AppSection>
 </template>

components/http/Tests.vue

@@ -5,15 +5,15 @@
         bg-primary
         border-b border-dividerLight
         flex flex-1
-        pl-4
         top-upperSecondaryStickyFold
+        pl-4
         z-10
         sticky
         items-center
         justify-between
       "
     >
-      <label>
+      <label class="font-semibold text-secondaryLight">
         {{ $t("javascript_code") }}
       </label>
       <ButtonSecondary
@@ -42,9 +42,9 @@
       <div
         class="
           h-full
-          max-w-1/3
           top-upperTertiaryStickyFold
           min-w-46
+          max-w-1/3
           p-4
           z-9
           sticky