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,10 +305,9 @@ watch(isOnline, () => {
   if (!isOnline.value) {
     bannerID = banner.showBanner(offlineBanner)
     return
-  } else {
+  }
-    if (banner.content && bannerID) {
+  if (banner.content && bannerID) {
-      banner.removeBanner(bannerID)
+    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,63 +19,57 @@
         </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
-            <span
+            class="flex items-center justify-center px-4 py-2 font-semibold transition rounded-l"
-              class="flex justify-center items-center w-26 cursor-pointer rounded-l bg-primaryLight px-4 py-2 font-semibold text-secondaryDark transition"
-            >
-              {{ tab.document.request.method }}
-            </span>
-          </div>
-          <div
-            class="flex flex-1 whitespace-nowrap rounded-r border-l border-divider bg-primaryLight transition"
           >
-            <input
+            {{ tab.document.request.method }}
-              name="method"
+          </span>
-              :value="tab.document.request.endpoint"
+          <div
-              class="flex-1 px-4 bg-primary"
+            class="flex items-center flex-1 flex-shrink-0 min-w-0 px-4 py-2 truncate rounded-r"
-              disabled
+          >
-            />
+            {{ tab.document.request.endpoint }}
           </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()"
           />
-          <HoppButtonSecondary
+          <div class="flex">
-            :title="`${t(
+            <HoppButtonSecondary
-              'request.save'
+              :title="`${t(
-            )} <kbd>${getSpecialKey()}</kbd><kbd>S</kbd>`"
+                'request.save'
-            :label="t('request.save')"
+              )} <kbd>${getSpecialKey()}</kbd><kbd>S</kbd>`"
-            filled
+              :label="t('request.save')"
-            :icon="IconSave"
+              filled
-            class="flex-1 rounded rounded-r-none"
+              :icon="IconSave"
-            blank
+              class="flex-1 rounded"
-            :to="sharedRequestURL"
+              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,13 +446,12 @@ const resolveConfirmModal = (title: string | null) => {
 const getErrorMessage = (err: GQLError<string>) => {
   if (err.type === "network_error") {
     return t("error.network_error")
-  } else {
+  }
-    switch (err.error) {
+  switch (err.error) {
-      case "shortcode/not_found":
+    case "shortcode/not_found":
-        return t("shared_request.not_found")
+      return t("shared_request.not_found")
-      default:
+    default:
-        return t("error.something_went_wrong")
+      return t("error.something_went_wrong")
-    }
   }
 }
 

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,10 +26,9 @@ 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))
+  const highestScore = Math.max(...list.map((banner) => banner.content.score))
-    return list.find((banner) => banner.content.score === highestScore)
+  return list.find((banner) => banner.content.score === highestScore)
-  }
 }
 
 /**