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

components/app/Search.vue

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal v-if="show" placement="top" @close="$emit('hide-modal')">
+  <SmartModal v-if="show" @close="$emit('hide-modal')">
     <template #body>
       <input
         id="command"

components/app/Shortcuts.vue

@@ -38,7 +38,8 @@
               pl-8
               transition
               truncate
-              focus:border-divider focus:outline-none
+              focus:(border-divider
+              outline-none)
             "
             :placeholder="$t('search')"
           />

components/app/Sidenav.vue

@@ -30,18 +30,21 @@
         v-tippy="{ theme: 'tooltip', placement: 'top' }"
         :title="`${$t('app.search')} <kbd>/</kbd>`"
         icon="search"
+        class="rounded"
         @click.native="showSearch = true"
       />
       <ButtonSecondary
         v-tippy="{ theme: 'tooltip', placement: 'top' }"
         :title="$t('app.invite')"
         icon="person_add_alt"
+        class="rounded"
         @click.native="showShare = true"
       />
       <ButtonSecondary
         v-tippy="{ theme: 'tooltip', placement: 'top' }"
         :title="`${$t('support.title')} <kbd>?</kbd>`"
         icon="support"
+        class="rounded"
         @click.native="showSupport = true"
       />
     </nav>

components/app/Support.vue

@@ -2,7 +2,6 @@
   <SmartModal
     v-if="show"
     :title="$t('support.title')"
-    placement="top"
     @close="$emit('hide-modal')"
   >
     <template #body>

components/collections/ImportExport.vue

@@ -8,7 +8,8 @@
       <ButtonSecondary
         v-if="mode == 'import_from_my_collections'"
         v-tippy="{ theme: 'tooltip' }"
-        title="Back"
+        :title="$t('action.go_back')"
+        class="rounded"
         icon="arrow_back"
         @click.native="
           mode = 'import_export'
@@ -30,6 +31,7 @@
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('more')"
+              class="rounded"
               icon="more_vert"
             />
           </template>

components/collections/graphql/ImportExport.vue

@@ -11,6 +11,7 @@
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('more')"
+              class="rounded"
               icon="more_vert"
             />
           </template>

components/environments/ImportExport.vue

@@ -11,6 +11,7 @@
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('more')"
+              class="rounded"
               icon="more_vert"
             />
           </template>

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

components/lenses/HeadersRenderer.vue

@@ -1,21 +1,35 @@
 <template>
-  <div class="p-2">
+  <div>
     <div
       v-for="(header, index) in headers"
       :key="`header-${index}`"
-      class="flex items-center"
+      class="
+        divide-x divide-dividerLight
+        border-b border-dividerLight
+        flex
+        group
+      "
     >
-      <span class="flex min-w-0 p-2 transition group-hover:text-secondaryDark">
-        <span class="rounded select-all truncate">
-          {{ header.key }}
-        </span>
-      </span>
-      <span class="flex mx-2 justify-center items-center truncate"> → </span>
       <span
         class="
           flex flex-1
           min-w-0
-          p-2
+          py-2
+          px-4
+          transition
+          group-hover:text-secondaryDark
+        "
+      >
+        <span class="rounded select-all truncate">
+          {{ header.key }}
+        </span>
+      </span>
+      <span
+        class="
+          flex flex-1
+          min-w-0
+          py-2
+          px-4
           transition
           group-hover:text-secondaryDark
         "

components/smart/Modal.vue

@@ -113,7 +113,7 @@ export default defineComponent({
     },
     placement: {
       type: String,
-      default: "center",
+      default: "top",
     },
   },
   setup() {

lang/en-US.json

@@ -14,7 +14,8 @@
     "turn_off": "Turn off",
     "dismiss": "Dismiss",
     "copy": "Copy",
-    "learn_more": "Learn more"
+    "learn_more": "Learn more",
+    "go_back": "Go back"
   },
   "confirm": {
     "logout": "Are you sure you want to logout?",
@@ -36,7 +37,7 @@
     "parameters": "This request does not have any parameters",
     "history": "History is empty",
     "headers": "This request does not have any headers",
-    "tests": "Tests are empty",
+    "tests": "There are no tests for this request",
     "schema": "Connect to a GraphQL endpoint",
     "teams": "Teams are empty",
     "members": "Team is empty",
@@ -210,7 +211,8 @@
   },
   "test": {
     "script": "Script",
-    "results": "Test Results"
+    "results": "Test Results",
+    "report": "Test Report"
   },
   "shortcut": {
     "general": {
@@ -252,7 +254,8 @@
     "pre_request_script": "Pre-request scripts are written in JavaScript, and are run before the request is sent.",
     "post_request_tests": "Test scripts are written in JavaScript, and are run after the response is received.",
     "offline_short": "You seem to be offline.",
-    "offline": "You seem to be offline. Data in this workspace might not be up to date."
+    "offline": "You seem to be offline. Data in this workspace might not be up to date.",
+    "tests": "Write a test script to automate debugging"
   },
   "options": "Options",
   "communication": "Communication",