From 008eb6b77b180f7b9bcbcc778ba43afa2f85ecf8 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Tue, 22 Aug 2023 22:22:43 +0530
Subject: [PATCH] chore: minor ui improvements (#3274)

---
 .../src/components/app/PaneLayout.vue         | 17 +++++++++-----
 .../src/components/app/ShortcutsPrompt.vue    |  2 +-
 .../components/environments/my/Details.vue    |  1 -
 .../src/components/environments/my/index.vue  |  1 -
 .../components/environments/teams/Details.vue |  2 --
 .../components/environments/teams/index.vue   |  2 --
 .../src/components/graphql/Authorization.vue  |  1 -
 .../src/components/graphql/Headers.vue        |  1 -
 .../src/components/http/Authorization.vue     |  1 -
 .../src/components/http/Body.vue              |  1 -
 .../src/components/http/BodyParameters.vue    |  1 -
 .../src/components/http/Headers.vue           |  1 -
 .../src/components/http/Parameters.vue        |  1 -
 .../src/components/http/URLEncodedParams.vue  |  1 -
 .../editor/extensions/HoppEnvironment.ts      |  4 ++--
 .../hoppscotch-common/src/pages/profile.vue   |  1 -
 .../src/pages/realtime/socketio.vue           |  1 -
 .../src/components/smart/Modal.vue            | 20 ++++++++--------
 .../src/components/smart/Placeholder.vue      |  2 +-
 .../src/components/smart/SlideOver.vue        | 23 ++++++++++++++-----
 20 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/packages/hoppscotch-common/src/components/app/PaneLayout.vue b/packages/hoppscotch-common/src/components/app/PaneLayout.vue
index 486a58cd6..837220f8f 100644
--- a/packages/hoppscotch-common/src/components/app/PaneLayout.vue
+++ b/packages/hoppscotch-common/src/components/app/PaneLayout.vue
@@ -18,13 +18,18 @@
         :horizontal="COLUMN_LAYOUT"
         @resize="setPaneEvent($event, 'horizontal')"
       >
-        <Pane :size="PANE_MAIN_TOP_SIZE" class="flex flex-col !overflow-auto">
+        <Pane
+          :size="PANE_MAIN_TOP_SIZE"
+          class="flex flex-col !overflow-auto"
+          min-size="25"
+        >
           <slot name="primary" />
         </Pane>
         <Pane
           v-if="hasSecondary"
           :size="PANE_MAIN_BOTTOM_SIZE"
           class="flex flex-col !overflow-auto"
+          min-size="25"
         >
           <slot name="secondary" />
         </Pane>
@@ -33,7 +38,7 @@
     <Pane
       v-if="SIDEBAR && hasSidebar"
       :size="PANE_SIDEBAR_SIZE"
-      min-size="20"
+      min-size="25"
       class="flex flex-col !overflow-auto bg-primaryContrast"
     >
       <slot name="sidebar" />
@@ -78,10 +83,10 @@ type PaneEvent = {
   size: number
 }
 
-const PANE_MAIN_SIZE = ref(74)
-const PANE_SIDEBAR_SIZE = ref(26)
-const PANE_MAIN_TOP_SIZE = ref(42)
-const PANE_MAIN_BOTTOM_SIZE = ref(58)
+const PANE_MAIN_SIZE = ref(70)
+const PANE_SIDEBAR_SIZE = ref(30)
+const PANE_MAIN_TOP_SIZE = ref(35)
+const PANE_MAIN_BOTTOM_SIZE = ref(65)
 
 if (!COLUMN_LAYOUT.value) {
   PANE_MAIN_TOP_SIZE.value = 50
diff --git a/packages/hoppscotch-common/src/components/app/ShortcutsPrompt.vue b/packages/hoppscotch-common/src/components/app/ShortcutsPrompt.vue
index 001b4b98d..5a5fb602e 100644
--- a/packages/hoppscotch-common/src/components/app/ShortcutsPrompt.vue
+++ b/packages/hoppscotch-common/src/components/app/ShortcutsPrompt.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col items-center justify-center text-secondaryLight">
-    <div class="flex pb-4 my-4 space-x-2">
+    <div class="flex mb-4 space-x-2">
       <div class="flex flex-col items-end space-y-4 text-right">
         <span class="flex items-center flex-1">
           {{ t("shortcut.request.send_request") }}
diff --git a/packages/hoppscotch-common/src/components/environments/my/Details.vue b/packages/hoppscotch-common/src/components/environments/my/Details.vue
index 7a2a72624..371c50837 100644
--- a/packages/hoppscotch-common/src/components/environments/my/Details.vue
+++ b/packages/hoppscotch-common/src/components/environments/my/Details.vue
@@ -81,7 +81,6 @@
             <HoppButtonSecondary
               :label="`${t('add.new')}`"
               filled
-              class="mb-4"
               @click="addEnvironmentVariable"
             />
           </HoppSmartPlaceholder>
diff --git a/packages/hoppscotch-common/src/components/environments/my/index.vue b/packages/hoppscotch-common/src/components/environments/my/index.vue
index 4b89d8401..41ea857bb 100644
--- a/packages/hoppscotch-common/src/components/environments/my/index.vue
+++ b/packages/hoppscotch-common/src/components/environments/my/index.vue
@@ -42,7 +42,6 @@
         :label="`${t('add.new')}`"
         filled
         outline
-        class="mb-4"
         @click="displayModalAdd(true)"
       />
     </HoppSmartPlaceholder>
diff --git a/packages/hoppscotch-common/src/components/environments/teams/Details.vue b/packages/hoppscotch-common/src/components/environments/teams/Details.vue
index 8170a42e6..5844d5e7b 100644
--- a/packages/hoppscotch-common/src/components/environments/teams/Details.vue
+++ b/packages/hoppscotch-common/src/components/environments/teams/Details.vue
@@ -86,13 +86,11 @@
               disabled
               :label="`${t('add.new')}`"
               filled
-              class="mb-4"
             />
             <HoppButtonSecondary
               v-else
               :label="`${t('add.new')}`"
               filled
-              class="mb-4"
               @click="addEnvironmentVariable"
             />
           </HoppSmartPlaceholder>
diff --git a/packages/hoppscotch-common/src/components/environments/teams/index.vue b/packages/hoppscotch-common/src/components/environments/teams/index.vue
index 8e1bd7330..42f224af3 100644
--- a/packages/hoppscotch-common/src/components/environments/teams/index.vue
+++ b/packages/hoppscotch-common/src/components/environments/teams/index.vue
@@ -54,7 +54,6 @@
         v-tippy="{ theme: 'tooltip' }"
         disabled
         filled
-        class="mb-4"
         :icon="IconPlus"
         :title="t('team.no_access')"
         :label="t('action.new')"
@@ -64,7 +63,6 @@
         :label="`${t('add.new')}`"
         filled
         outline
-        class="mb-4"
         @click="displayModalAdd(true)"
       />
     </HoppSmartPlaceholder>
diff --git a/packages/hoppscotch-common/src/components/graphql/Authorization.vue b/packages/hoppscotch-common/src/components/graphql/Authorization.vue
index b32384e87..626e5c93f 100644
--- a/packages/hoppscotch-common/src/components/graphql/Authorization.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Authorization.vue
@@ -127,7 +127,6 @@
         blank
         :icon="IconExternalLink"
         reverse
-        class="mb-4"
       />
     </HoppSmartPlaceholder>
     <div v-else class="flex flex-1 border-b border-dividerLight">
diff --git a/packages/hoppscotch-common/src/components/graphql/Headers.vue b/packages/hoppscotch-common/src/components/graphql/Headers.vue
index e54411f09..d21740f4c 100644
--- a/packages/hoppscotch-common/src/components/graphql/Headers.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Headers.vue
@@ -166,7 +166,6 @@
         :label="`${t('add.new')}`"
         filled
         :icon="IconPlus"
-        class="mb-4"
         @click="addHeader"
       />
     </HoppSmartPlaceholder>
diff --git a/packages/hoppscotch-common/src/components/http/Authorization.vue b/packages/hoppscotch-common/src/components/http/Authorization.vue
index 40af1b884..729177d16 100644
--- a/packages/hoppscotch-common/src/components/http/Authorization.vue
+++ b/packages/hoppscotch-common/src/components/http/Authorization.vue
@@ -126,7 +126,6 @@
         blank
         :icon="IconExternalLink"
         reverse
-        class="mb-4"
       />
     </HoppSmartPlaceholder>
     <div v-else class="flex flex-1 border-b border-dividerLight">
diff --git a/packages/hoppscotch-common/src/components/http/Body.vue b/packages/hoppscotch-common/src/components/http/Body.vue
index bcc656dc9..cf4ad36e7 100644
--- a/packages/hoppscotch-common/src/components/http/Body.vue
+++ b/packages/hoppscotch-common/src/components/http/Body.vue
@@ -117,7 +117,6 @@
         blank
         :icon="IconExternalLink"
         reverse
-        class="mb-4"
       />
     </HoppSmartPlaceholder>
   </div>
diff --git a/packages/hoppscotch-common/src/components/http/BodyParameters.vue b/packages/hoppscotch-common/src/components/http/BodyParameters.vue
index 14e74b5ef..3a02c0dcf 100644
--- a/packages/hoppscotch-common/src/components/http/BodyParameters.vue
+++ b/packages/hoppscotch-common/src/components/http/BodyParameters.vue
@@ -162,7 +162,6 @@
         :label="`${t('add.new')}`"
         filled
         :icon="IconPlus"
-        class="mb-4"
         @click="addBodyParam"
       />
     </HoppSmartPlaceholder>
diff --git a/packages/hoppscotch-common/src/components/http/Headers.vue b/packages/hoppscotch-common/src/components/http/Headers.vue
index dffaabb3a..be2bba1c5 100644
--- a/packages/hoppscotch-common/src/components/http/Headers.vue
+++ b/packages/hoppscotch-common/src/components/http/Headers.vue
@@ -213,7 +213,6 @@
           filled
           :label="`${t('add.new')}`"
           :icon="IconPlus"
-          class="mb-4"
           @click="addHeader"
         />
       </HoppSmartPlaceholder>
diff --git a/packages/hoppscotch-common/src/components/http/Parameters.vue b/packages/hoppscotch-common/src/components/http/Parameters.vue
index 286422079..9088f8d31 100644
--- a/packages/hoppscotch-common/src/components/http/Parameters.vue
+++ b/packages/hoppscotch-common/src/components/http/Parameters.vue
@@ -161,7 +161,6 @@
           :label="`${t('add.new')}`"
           :icon="IconPlus"
           filled
-          class="mb-4"
           @click="addParam"
         />
       </HoppSmartPlaceholder>
diff --git a/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue b/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
index 53e354338..4800834ed 100644
--- a/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
+++ b/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
@@ -153,7 +153,6 @@
           filled
           :label="`${t('add.new')}`"
           :icon="IconPlus"
-          class="mb-4"
           @click="addUrlEncodedParam"
         />
       </HoppSmartPlaceholder>
diff --git a/packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts b/packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts
index 7d422f06b..5fc57d9bf 100644
--- a/packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts
+++ b/packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts
@@ -71,7 +71,7 @@ const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
 
       const selectedEnvType = getSelectedEnvironmentType()
 
-      const envTypeIcon = `<span class="inline-flex -my-2 -mx-0.5 opacity-65 items-center text-base font-icon">${
+      const envTypeIcon = `<span class="inline-flex items-center opacity-65 -mx-0.5 text-base font-icon">${
         selectedEnvType === "TEAM_ENV" ? "group" : "person"
       }</span>`
 
@@ -88,7 +88,7 @@ const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
             variableName: parsedEnvKey,
           })
         })
-        editIcon.innerHTML = `<span class="inline-flex items-center px-1 -mx-1 -my-2 text-base font-icon">edit</span>`
+        editIcon.innerHTML = `<span class="inline-flex items-center px-1 -mx-1 text-base font-icon">edit</span>`
         tooltip.appendChild(editIcon)
       }
 
diff --git a/packages/hoppscotch-common/src/pages/profile.vue b/packages/hoppscotch-common/src/pages/profile.vue
index 6bd7b334a..ae0f47da2 100644
--- a/packages/hoppscotch-common/src/pages/profile.vue
+++ b/packages/hoppscotch-common/src/pages/profile.vue
@@ -16,7 +16,6 @@
         >
           <HoppButtonPrimary
             :label="t('auth.login')"
-            class="mb-4"
             @click="invokeAction('modals.login.toggle')"
           />
         </HoppSmartPlaceholder>
diff --git a/packages/hoppscotch-common/src/pages/realtime/socketio.vue b/packages/hoppscotch-common/src/pages/realtime/socketio.vue
index a4b5db3ff..45309422d 100644
--- a/packages/hoppscotch-common/src/pages/realtime/socketio.vue
+++ b/packages/hoppscotch-common/src/pages/realtime/socketio.vue
@@ -203,7 +203,6 @@
               blank
               :icon="IconExternalLink"
               reverse
-              class="mb-4"
             />
           </HoppSmartPlaceholder>
           <div
diff --git a/packages/hoppscotch-ui/src/components/smart/Modal.vue b/packages/hoppscotch-ui/src/components/smart/Modal.vue
index 12c5eef1f..7c9bca3e1 100644
--- a/packages/hoppscotch-ui/src/components/smart/Modal.vue
+++ b/packages/hoppscotch-ui/src/components/smart/Modal.vue
@@ -44,7 +44,6 @@
               </h3>
               <span class="flex items-center">
                 <slot name="actions"></slot>
-                <kbd class="mr-2 shortcut-key">ESC</kbd>
                 <HoppButtonSecondary
                   v-if="dimissible"
                   v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
@@ -109,21 +108,22 @@ const { t, onModalOpen, onModalClose } =
 
 withDefaults(
   defineProps<{
-    dialog: boolean,
-    title: string,
-    dimissible: boolean,
-    placement: string,
-    fullWidth: boolean,
-    styles: string,
-    closeText: string | null,
-  }>(), {
+    dialog: boolean
+    title: string
+    dimissible: boolean
+    placement: string
+    fullWidth: boolean
+    styles: string
+    closeText: string | null
+  }>(),
+  {
     dialog: false,
     title: "",
     dimissible: true,
     placement: "top",
     fullWidth: false,
     styles: "sm:max-w-lg",
-    closeText: null
+    closeText: null,
   }
 )
 
diff --git a/packages/hoppscotch-ui/src/components/smart/Placeholder.vue b/packages/hoppscotch-ui/src/components/smart/Placeholder.vue
index 7ceae796b..20a14d0b4 100644
--- a/packages/hoppscotch-ui/src/components/smart/Placeholder.vue
+++ b/packages/hoppscotch-ui/src/components/smart/Placeholder.vue
@@ -4,7 +4,7 @@
       v-if="src"
       :src="src"
       loading="lazy"
-      class="inline-flex flex-col object-contain object-center my-4"
+      class="inline-flex flex-col object-contain object-center mb-4"
       :class="large ? 'w-32 h-32' : 'w-16 h-16'"
       :alt="alt"
     />
diff --git a/packages/hoppscotch-ui/src/components/smart/SlideOver.vue b/packages/hoppscotch-ui/src/components/smart/SlideOver.vue
index 5685b488c..96ff64522 100644
--- a/packages/hoppscotch-ui/src/components/smart/SlideOver.vue
+++ b/packages/hoppscotch-ui/src/components/smart/SlideOver.vue
@@ -1,17 +1,28 @@
 <template>
   <div>
     <Transition name="fade" appear>
-      <div v-if="show" class="fixed inset-0 z-20 transition-opacity" @keydown.esc="close()">
-        <div class="absolute inset-0 bg-primaryLight opacity-90 focus:outline-none" tabindex="0" @click="close()"></div>
+      <div
+        v-if="show"
+        class="fixed inset-0 z-20 transition-opacity"
+        @keydown.esc="close()"
+      >
+        <div
+          class="absolute inset-0 bg-primaryLight opacity-90 focus:outline-none"
+          tabindex="0"
+          @click="close()"
+        ></div>
       </div>
     </Transition>
     <Transition name="slide" appear>
-      <aside v-if="show"
-        class="fixed top-0 right-0 z-30 flex flex-col h-full max-w-full overflow-auto border-l shadow-xl border-dividerDark bg-primary w-96">
-        <div class="flex items-center justify-between p-2 border-b border-dividerLight">
+      <aside
+        v-if="show"
+        class="fixed top-0 right-0 z-30 flex flex-col h-full max-w-full overflow-auto border-l shadow-xl border-dividerDark bg-primary w-96"
+      >
+        <div
+          class="flex items-center justify-between p-2 border-b border-dividerLight"
+        >
           <h3 class="ml-4 heading">{{ title }}</h3>
           <span class="flex items-center">
-            <kbd class="mr-2 shortcut-key">ESC</kbd>
             <HoppButtonSecondary :icon="IconX" @click="close()" />
           </span>
         </div>