From e9eee0703d5e14d5594970a15af0c733b0df13cf Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Fri, 13 Aug 2021 22:39:47 +0530
Subject: [PATCH] refactor: set placement as top by edfault for modals, better
 response header layout

---
 components/app/Search.vue                     |  2 +-
 components/app/Shortcuts.vue                  |  3 +-
 components/app/Sidenav.vue                    |  3 ++
 components/app/Support.vue                    |  1 -
 components/collections/ImportExport.vue       |  4 ++-
 .../collections/graphql/ImportExport.vue      |  1 +
 components/environments/ImportExport.vue      |  1 +
 components/http/PreRequestScript.vue          |  6 ++--
 components/http/TestResult.vue                | 18 +++++++++--
 components/http/Tests.vue                     |  6 ++--
 components/lenses/HeadersRenderer.vue         | 32 +++++++++++++------
 components/smart/Modal.vue                    |  2 +-
 lang/en-US.json                               | 11 ++++---
 13 files changed, 63 insertions(+), 27 deletions(-)

diff --git a/components/app/Search.vue b/components/app/Search.vue
index 754171724..4f57d3d38 100644
--- a/components/app/Search.vue
+++ b/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"
diff --git a/components/app/Shortcuts.vue b/components/app/Shortcuts.vue
index 78acbac43..028ef822b 100644
--- a/components/app/Shortcuts.vue
+++ b/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')"
           />
diff --git a/components/app/Sidenav.vue b/components/app/Sidenav.vue
index e59bc66f2..d7543d4c0 100644
--- a/components/app/Sidenav.vue
+++ b/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>
diff --git a/components/app/Support.vue b/components/app/Support.vue
index fe53b059a..53218fcae 100644
--- a/components/app/Support.vue
+++ b/components/app/Support.vue
@@ -2,7 +2,6 @@
   <SmartModal
     v-if="show"
     :title="$t('support.title')"
-    placement="top"
     @close="$emit('hide-modal')"
   >
     <template #body>
diff --git a/components/collections/ImportExport.vue b/components/collections/ImportExport.vue
index 5425fc9bd..7c2a457f4 100644
--- a/components/collections/ImportExport.vue
+++ b/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>
diff --git a/components/collections/graphql/ImportExport.vue b/components/collections/graphql/ImportExport.vue
index a296b8466..6026c5149 100644
--- a/components/collections/graphql/ImportExport.vue
+++ b/components/collections/graphql/ImportExport.vue
@@ -11,6 +11,7 @@
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('more')"
+              class="rounded"
               icon="more_vert"
             />
           </template>
diff --git a/components/environments/ImportExport.vue b/components/environments/ImportExport.vue
index 3ba142bfb..abe2e84c5 100644
--- a/components/environments/ImportExport.vue
+++ b/components/environments/ImportExport.vue
@@ -11,6 +11,7 @@
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('more')"
+              class="rounded"
               icon="more_vert"
             />
           </template>
diff --git a/components/http/PreRequestScript.vue b/components/http/PreRequestScript.vue
index 0356e94c1..a4e705ccd 100644
--- a/components/http/PreRequestScript.vue
+++ b/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
diff --git a/components/http/TestResult.vue b/components/http/TestResult.vue
index 0a865a74a..1a3db45fd 100644
--- a/components/http/TestResult.vue
+++ b/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>
diff --git a/components/http/Tests.vue b/components/http/Tests.vue
index f1cd772f5..a665e0c10 100644
--- a/components/http/Tests.vue
+++ b/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
diff --git a/components/lenses/HeadersRenderer.vue b/components/lenses/HeadersRenderer.vue
index 00b5a57ab..baf29280c 100644
--- a/components/lenses/HeadersRenderer.vue
+++ b/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
         "
diff --git a/components/smart/Modal.vue b/components/smart/Modal.vue
index 59a8717bb..e01e3934f 100644
--- a/components/smart/Modal.vue
+++ b/components/smart/Modal.vue
@@ -113,7 +113,7 @@ export default defineComponent({
     },
     placement: {
       type: String,
-      default: "center",
+      default: "top",
     },
   },
   setup() {
diff --git a/lang/en-US.json b/lang/en-US.json
index b597d6818..95f29caba 100644
--- a/lang/en-US.json
+++ b/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",