From 1cc845e17d42081e898bfa62b13806f994dd5f2f Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Wed, 29 Nov 2023 22:45:40 +0530
Subject: [PATCH] fix: minor ui improvements (#3603)

---
 packages/hoppscotch-common/locales/en.json    |  3 ++-
 .../src/components/graphql/Headers.vue        |  4 ++--
 .../src/components/graphql/Response.vue       |  4 ++--
 .../src/components/http/BodyParameters.vue    |  6 ++---
 .../src/components/http/Headers.vue           | 23 +++++++++++--------
 .../src/components/http/Parameters.vue        |  4 ++--
 .../src/components/http/URLEncodedParams.vue  |  4 ++--
 .../src/pages/realtime/websocket.vue          |  4 ++--
 .../src/components/smart/FileChip.vue         | 12 +++++++---
 9 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/packages/hoppscotch-common/locales/en.json b/packages/hoppscotch-common/locales/en.json
index 8fa7c3812..2f8a779fb 100644
--- a/packages/hoppscotch-common/locales/en.json
+++ b/packages/hoppscotch-common/locales/en.json
@@ -497,7 +497,8 @@
     "enter_curl": "Enter cURL command",
     "generate_code": "Generate code",
     "generated_code": "Generated code",
-    "go_to_authorization_tab": "Go to Authorization",
+    "go_to_authorization_tab": "Go to Authorization tab",
+    "go_to_body_tab": "Go to Body tab",
     "header_list": "Header List",
     "invalid_name": "Please provide a name for the request",
     "method": "Method",
diff --git a/packages/hoppscotch-common/src/components/graphql/Headers.vue b/packages/hoppscotch-common/src/components/graphql/Headers.vue
index 92da574f3..8be85436e 100644
--- a/packages/hoppscotch-common/src/components/graphql/Headers.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Headers.vue
@@ -69,9 +69,9 @@
                     : null,
               }"
               :icon="IconGripVertical"
-              class="cursor-auto text-primary hover:text-primary"
+              class="opacity-0"
               :class="{
-                'draggable-handle !cursor-grab group-hover:text-secondaryLight':
+                'draggable-handle cursor-grab group-hover:opacity-100':
                   index !== workingHeaders?.length - 1,
               }"
               tabindex="-1"
diff --git a/packages/hoppscotch-common/src/components/graphql/Response.vue b/packages/hoppscotch-common/src/components/graphql/Response.vue
index d830fd0b7..979503773 100644
--- a/packages/hoppscotch-common/src/components/graphql/Response.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Response.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="flex flex-col flex-1 overflow-auto whitespace-nowrap">
+  <div class="flex flex-1 flex-col overflow-auto whitespace-nowrap">
     <div
       v-if="
         response && response.length === 1 && response[0].type === 'response'
       "
-      class="flex flex-col flex-1"
+      class="flex flex-1 flex-col"
     >
       <div
         class="sticky top-0 z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
diff --git a/packages/hoppscotch-common/src/components/http/BodyParameters.vue b/packages/hoppscotch-common/src/components/http/BodyParameters.vue
index 860c3bdbf..b4e4d6de7 100644
--- a/packages/hoppscotch-common/src/components/http/BodyParameters.vue
+++ b/packages/hoppscotch-common/src/components/http/BodyParameters.vue
@@ -54,9 +54,9 @@
                     : null,
               }"
               :icon="IconGripVertical"
-              class="cursor-auto text-primary hover:text-primary"
+              class="opacity-0"
               :class="{
-                'draggable-handle !cursor-grab group-hover:text-secondaryLight':
+                'draggable-handle cursor-grab group-hover:opacity-100':
                   index !== workingParams?.length - 1,
               }"
               tabindex="-1"
@@ -75,7 +75,7 @@
             "
           />
           <div v-if="entry.isFile" class="file-chips-container">
-            <div class="file-chips-wrapper space-x-2">
+            <div class="file-chips-wrapper space-x-1">
               <HoppSmartFileChip
                 v-for="(file, fileIndex) in entry.value"
                 :key="`param-${index}-file-${fileIndex}`"
diff --git a/packages/hoppscotch-common/src/components/http/Headers.vue b/packages/hoppscotch-common/src/components/http/Headers.vue
index dbc065963..6b92a2ea1 100644
--- a/packages/hoppscotch-common/src/components/http/Headers.vue
+++ b/packages/hoppscotch-common/src/components/http/Headers.vue
@@ -71,9 +71,9 @@
                       : null,
                 }"
                 :icon="IconGripVertical"
-                class="cursor-auto text-primary hover:text-primary"
+                class="opacity-0"
                 :class="{
-                  'draggable-handle !cursor-grab group-hover:text-secondaryLight':
+                  'draggable-handle cursor-grab group-hover:opacity-100':
                     index !== workingHeaders?.length - 1,
                 }"
                 tabindex="-1"
@@ -190,19 +190,13 @@
                 :icon="masking ? IconEye : IconEyeOff"
                 @click="toggleMask()"
               />
-              <HoppButtonSecondary
-                v-else
-                v-tippy="{ theme: 'tooltip' }"
-                :icon="IconArrowUpRight"
-                :title="t('request.go_to_authorization_tab')"
-                class="cursor-auto text-primary hover:text-primary"
-              />
+              <div v-else class="aspect-square w-8"></div>
             </span>
             <span>
               <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :icon="IconArrowUpRight"
-                :title="t('request.go_to_authorization_tab')"
+                :title="changeTabTooltip(header.source)"
                 @click="changeTab(header.source)"
               />
             </span>
@@ -510,6 +504,15 @@ const mask = (header: ComputedHeader) => {
   return header.header.value
 }
 
+const changeTabTooltip = (tab: ComputedHeader["source"]) => {
+  switch (tab) {
+    case "auth":
+      return t("request.go_to_authorization_tab")
+    case "body":
+      return t("request.go_to_body_tab")
+  }
+}
+
 const changeTab = (tab: ComputedHeader["source"]) => {
   if (tab === "auth") emit("change-tab", "authorization")
   else emit("change-tab", "bodyParams")
diff --git a/packages/hoppscotch-common/src/components/http/Parameters.vue b/packages/hoppscotch-common/src/components/http/Parameters.vue
index aaa55e298..6f7dab60e 100644
--- a/packages/hoppscotch-common/src/components/http/Parameters.vue
+++ b/packages/hoppscotch-common/src/components/http/Parameters.vue
@@ -71,9 +71,9 @@
                       : null,
                 }"
                 :icon="IconGripVertical"
-                class="cursor-auto text-primary hover:text-primary"
+                class="opacity-0"
                 :class="{
-                  'draggable-handle !cursor-grab group-hover:text-secondaryLight':
+                  'draggable-handle cursor-grab group-hover:opacity-100':
                     index !== workingParams?.length - 1,
                 }"
                 tabindex="-1"
diff --git a/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue b/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
index f1c582d7f..2d36f565e 100644
--- a/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
+++ b/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
@@ -71,9 +71,9 @@
                       : null,
                 }"
                 :icon="IconGripVertical"
-                class="cursor-auto text-primary hover:text-primary"
+                class="opacity-0"
                 :class="{
-                  'draggable-handle !cursor-grab group-hover:text-secondaryLight':
+                  'draggable-handle cursor-grab group-hover:opacity-100':
                     index !== workingUrlEncodedParams?.length - 1,
                 }"
                 tabindex="-1"
diff --git a/packages/hoppscotch-common/src/pages/realtime/websocket.vue b/packages/hoppscotch-common/src/pages/realtime/websocket.vue
index 3714296f5..8affba8ef 100644
--- a/packages/hoppscotch-common/src/pages/realtime/websocket.vue
+++ b/packages/hoppscotch-common/src/pages/realtime/websocket.vue
@@ -98,9 +98,9 @@
                           : null,
                     }"
                     :icon="IconGripVertical"
-                    class="cursor-auto text-primary hover:text-primary"
+                    class="opacity-0"
                     :class="{
-                      'draggable-handle !cursor-grab group-hover:text-secondaryLight':
+                      'draggable-handle cursor-grab group-hover:opacity-100':
                         index !== protocols?.length - 1,
                     }"
                     tabindex="-1"
diff --git a/packages/hoppscotch-ui/src/components/smart/FileChip.vue b/packages/hoppscotch-ui/src/components/smart/FileChip.vue
index 484ca229a..c835ced58 100644
--- a/packages/hoppscotch-ui/src/components/smart/FileChip.vue
+++ b/packages/hoppscotch-ui/src/components/smart/FileChip.vue
@@ -1,6 +1,12 @@
 <template>
-  <span class="inline-flex items-center justify-center rounded pl-2 pr-0.5 bg-primaryDark">
-    <icon-lucide-file class="opacity-75 svg-icons" />
-    <span class="px-2 truncate max-w-54"><slot></slot></span>
+  <span
+    class="inline-flex items-center space-x-1 justify-center rounded px-2 bg-primaryDark"
+  >
+    <IconLucideFile class="opacity-75 svg-icons" />
+    <span class="truncate max-w-54"><slot></slot></span>
   </span>
 </template>
+
+<script setup lang="ts">
+import IconLucideFile from "~icons/lucide/file"
+</script>