fix: minor ui issues

packages/hoppscotch-common/src/components.d.ts

@@ -164,6 +164,12 @@ declare module 'vue' {
     IconLucideUsers: typeof import('~icons/lucide/users')['default']
     IconLucideVerified: typeof import('~icons/lucide/verified')['default']
     IconLucideX: typeof import('~icons/lucide/x')['default']
+    ImportExportBase: typeof import('./components/importExport/Base.vue')['default']
+    ImportExportImportExportList: typeof import('./components/importExport/ImportExportList.vue')['default']
+    ImportExportImportExportSourcesList: typeof import('./components/importExport/ImportExportSourcesList.vue')['default']
+    ImportExportImportExportStepsFileImport: typeof import('./components/importExport/ImportExportSteps/FileImport.vue')['default']
+    ImportExportImportExportStepsMyCollectionImport: typeof import('./components/importExport/ImportExportSteps/MyCollectionImport.vue')['default']
+    ImportExportImportExportStepsUrlImport: typeof import('./components/importExport/ImportExportSteps/UrlImport.vue')['default']
     InterceptorsErrorPlaceholder: typeof import('./components/interceptors/ErrorPlaceholder.vue')['default']
     InterceptorsExtensionSubtitle: typeof import('./components/interceptors/ExtensionSubtitle.vue')['default']
     LensesHeadersRenderer: typeof import('./components/lenses/HeadersRenderer.vue')['default']

packages/hoppscotch-common/src/components/app/Header.vue

@@ -305,11 +305,10 @@ watch(isOnline, () => {
   if (!isOnline.value) {
     bannerID = banner.showBanner(offlineBanner)
     return
-  } else {
+  }
   if (banner.content && bannerID) {
     banner.removeBanner(bannerID)
   }
-  }
 })
 
 const dismissOfflineBanner = () => banner.removeBanner(bannerID!)

packages/hoppscotch-common/src/components/embeds/index.vue

@@ -1,17 +1,17 @@
 <template>
-  <div class="flex flex-1 flex-col">
+  <div class="flex flex-col flex-1">
     <header
-      class="flex flex-1 flex-shrink-0 items-center justify-between space-x-2 overflow-x-auto overflow-y-hidden px-2 py-2"
+      class="flex items-center justify-between flex-1 flex-shrink-0 px-2 py-2 space-x-2 overflow-x-auto overflow-y-hidden"
     >
-      <div class="flex flex-1 items-center justify-between space-x-2">
+      <div class="flex items-center justify-between flex-1 space-x-2">
         <HoppButtonSecondary
           class="!font-bold uppercase tracking-wide !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark"
           :label="t('app.name')"
-          to="https://hoppscotch.io/"
+          to="https://hoppscotch.io"
           blank
         />
         <div class="flex">
-          <HoppSmartItem
+          <HoppButtonSecondary
             :label="t('app.open_in_hoppscotch')"
             :to="sharedRequestURL"
             blank
@@ -19,42 +19,36 @@
         </div>
       </div>
     </header>
-
+    <div class="sticky top-0 z-10 flex-1">
-    <div class="flex-1">
       <div
-        class="flex-none flex-shrink-0 bg-primary p-4 sm:flex sm:flex-shrink-0 sm:space-x-2"
+        class="flex-none flex-shrink-0 p-4 bg-primary sm:flex sm:flex-shrink-0 sm:space-x-2"
       >
         <div
-          class="min-w-52 flex flex-1 whitespace-nowrap rounded border border-divider"
+          class="flex flex-1 overflow-hidden border divide-x rounded text-secondaryDark divide-divider min-w-[12rem] overflow-x-auto border-divider"
         >
-          <div class="relative flex">
           <span
-              class="flex justify-center items-center w-26 cursor-pointer rounded-l bg-primaryLight px-4 py-2 font-semibold text-secondaryDark transition"
+            class="flex items-center justify-center px-4 py-2 font-semibold transition rounded-l"
           >
             {{ tab.document.request.method }}
           </span>
-          </div>
           <div
-            class="flex flex-1 whitespace-nowrap rounded-r border-l border-divider bg-primaryLight transition"
+            class="flex items-center flex-1 flex-shrink-0 min-w-0 px-4 py-2 truncate rounded-r"
           >
-            <input
+            {{ tab.document.request.endpoint }}
-              name="method"
-              :value="tab.document.request.endpoint"
-              class="flex-1 px-4 bg-primary"
-              disabled
-            />
           </div>
         </div>
-        <div class="mt-2 flex sm:mt-0">
+        <div class="flex mt-2 space-x-2 sm:mt-0">
           <HoppButtonPrimary
             id="send"
             :title="`${t(
               'action.send'
             )} <kbd>${getSpecialKey()}</kbd><kbd>↩</kbd>`"
             :label="`${!loading ? t('action.send') : t('action.cancel')}`"
-            class="min-w-20 flex-1"
+            class="flex-1 min-w-20"
+            outline
             @click="!loading ? newSendRequest() : cancelRequest()"
           />
+          <div class="flex">
             <HoppButtonSecondary
               :title="`${t(
                 'request.save'
@@ -62,20 +56,20 @@
               :label="t('request.save')"
               filled
               :icon="IconSave"
-            class="flex-1 rounded rounded-r-none"
+              class="flex-1 rounded"
               blank
+              outline
               :to="sharedRequestURL"
             />
           </div>
         </div>
       </div>
-
+    </div>
     <HttpRequestOptions
       v-model="tab.document.request"
       v-model:option-tab="selectedOptionTab"
       :properties="properties"
     />
-
     <HttpResponse :document="tab.document" :is-embed="true" />
   </div>
 </template>

packages/hoppscotch-common/src/components/share/CustomizeModal.vue

@@ -306,9 +306,8 @@ const embedThemeIcon = computed(() => {
     return IconMonitor
   } else if (embedOptions.value.theme === "light") {
     return IconSun
-  } else {
-    return IconMoon
   }
+  return IconMoon
 })
 
 const removeEmbedOption = (option: EmbedTabs) => {
@@ -392,9 +391,8 @@ const copyButton = (
 
   if (type === "markdown") {
     return `[![Run in Hoppscotch](${baseURL}/${badge})](${baseURL}/r/${props.request?.id})`
-  } else {
-    return `<a href="${baseURL}/r/${props.request?.id}"><img src="${baseURL}/${badge}" alt="Run in Hoppscotch" /></a>`
   }
+  return `<a href="${baseURL}/r/${props.request?.id}"><img src="${baseURL}/${badge}" alt="Run in Hoppscotch" /></a>`
 }
 
 const copyLink = (variationID: string) => {
@@ -402,9 +400,8 @@ const copyLink = (variationID: string) => {
     return `${baseURL}/r/${props.request?.id}`
   } else if (variationID === "link2") {
     return `<a href="${baseURL}/r/${props.request?.id}">Run in Hoppscotch</a>`
-  } else {
-    return `[Run in Hoppscotch](${baseURL}/r/${props.request?.id})`
   }
+  return `[Run in Hoppscotch](${baseURL}/r/${props.request?.id})`
 }
 
 const copyContent = ({

packages/hoppscotch-common/src/components/share/Modal.vue

@@ -29,17 +29,15 @@
         @copy-shared-request="copySharedRequest"
       />
     </template>
-
+    <template v-if="step === 1" #footer>
-    <template #footer>
       <div class="flex justify-start flex-1">
         <HoppButtonPrimary
-          v-if="step === 1"
           :label="t('action.create')"
           :loading="loading"
           @click="createSharedRequest"
         />
         <HoppButtonSecondary
-          :label="step === 1 ? t('action.cancel') : t('action.close')"
+          :label="t('action.cancel')"
           class="ml-2"
           filled
           outline

packages/hoppscotch-common/src/components/share/index.vue

@@ -446,7 +446,7 @@ const resolveConfirmModal = (title: string | null) => {
 const getErrorMessage = (err: GQLError<string>) => {
   if (err.type === "network_error") {
     return t("error.network_error")
-  } else {
+  }
   switch (err.error) {
     case "shortcode/not_found":
       return t("shared_request.not_found")
@@ -454,7 +454,6 @@ const getErrorMessage = (err: GQLError<string>) => {
       return t("error.something_went_wrong")
   }
 }
-}
 
 defineActionHandler("share.request", ({ request }) => {
   requestToShare.value = request

packages/hoppscotch-common/src/components/share/templates/Embeds.vue

@@ -11,7 +11,9 @@
         'bg-accentContrast': isEmbedThemeLight,
       }"
     >
-      <span class="flex items-center min-w-0 border rounded border-divider">
+      <span
+        class="flex items-center flex-1 min-w-0 border rounded border-divider"
+      >
         <span
           class="flex max-w-[4rem] rounded-l h-full items-center justify-center border-r border-divider text-tiny"
           :class="{

packages/hoppscotch-common/src/services/banner.service.ts

@@ -26,11 +26,10 @@ export type Banner = {
 const getBannerWithHighestScore = (list: Banner[]) => {
   if (list.length === 0) return null
   else if (list.length === 1) return list[0]
-  else {
+
   const highestScore = Math.max(...list.map((banner) => banner.content.score))
   return list.find((banner) => banner.content.score === highestScore)
 }
-}
 
 /**
  * This service is used to display a banner on the app.