chore: minor ui improvements (#3274)

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,
   }
 )
 

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"
     />

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>