From 87395a4553e22843f96ffcac16c9052ca246e845 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Thu, 7 Dec 2023 17:12:33 +0530
Subject: [PATCH] fix: minor ui issues

---
 .../hoppscotch-common/src/components.d.ts     |  6 ++
 .../src/components/app/Header.vue             |  7 +-
 .../src/components/embeds/index.vue           | 72 +++++++++----------
 .../src/components/share/CustomizeModal.vue   |  9 +--
 .../src/components/share/Modal.vue            |  6 +-
 .../src/components/share/index.vue            | 13 ++--
 .../src/components/share/templates/Embeds.vue |  4 +-
 .../src/services/banner.service.ts            |  7 +-
 8 files changed, 59 insertions(+), 65 deletions(-)

diff --git a/packages/hoppscotch-common/src/components.d.ts b/packages/hoppscotch-common/src/components.d.ts
index 0a3ab3fa..38218176 100644
--- a/packages/hoppscotch-common/src/components.d.ts
+++ b/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']
diff --git a/packages/hoppscotch-common/src/components/app/Header.vue b/packages/hoppscotch-common/src/components/app/Header.vue
index 28491f44..dcb7c927 100644
--- a/packages/hoppscotch-common/src/components/app/Header.vue
+++ b/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) {
-      banner.removeBanner(bannerID)
-    }
+  }
+  if (banner.content && bannerID) {
+    banner.removeBanner(bannerID)
   }
 })
 
diff --git a/packages/hoppscotch-common/src/components/embeds/index.vue b/packages/hoppscotch-common/src/components/embeds/index.vue
index ce7c8ebb..345f76af 100644
--- a/packages/hoppscotch-common/src/components/embeds/index.vue
+++ b/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="flex-1">
+    <div class="sticky top-0 z-10 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"
-            >
-              {{ tab.document.request.method }}
-            </span>
-          </div>
-          <div
-            class="flex flex-1 whitespace-nowrap rounded-r border-l border-divider bg-primaryLight transition"
+          <span
+            class="flex items-center justify-center px-4 py-2 font-semibold transition rounded-l"
           >
-            <input
-              name="method"
-              :value="tab.document.request.endpoint"
-              class="flex-1 px-4 bg-primary"
-              disabled
-            />
+            {{ tab.document.request.method }}
+          </span>
+          <div
+            class="flex items-center flex-1 flex-shrink-0 min-w-0 px-4 py-2 truncate rounded-r"
+          >
+            {{ 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
-            :title="`${t(
-              'request.save'
-            )} <kbd>${getSpecialKey()}</kbd><kbd>S</kbd>`"
-            :label="t('request.save')"
-            filled
-            :icon="IconSave"
-            class="flex-1 rounded rounded-r-none"
-            blank
-            :to="sharedRequestURL"
-          />
+          <div class="flex">
+            <HoppButtonSecondary
+              :title="`${t(
+                'request.save'
+              )} <kbd>${getSpecialKey()}</kbd><kbd>S</kbd>`"
+              :label="t('request.save')"
+              filled
+              :icon="IconSave"
+              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>
diff --git a/packages/hoppscotch-common/src/components/share/CustomizeModal.vue b/packages/hoppscotch-common/src/components/share/CustomizeModal.vue
index 7131315a..c5abdd00 100644
--- a/packages/hoppscotch-common/src/components/share/CustomizeModal.vue
+++ b/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 = ({
diff --git a/packages/hoppscotch-common/src/components/share/Modal.vue b/packages/hoppscotch-common/src/components/share/Modal.vue
index 05c9845e..ff99e673 100644
--- a/packages/hoppscotch-common/src/components/share/Modal.vue
+++ b/packages/hoppscotch-common/src/components/share/Modal.vue
@@ -29,17 +29,15 @@
         @copy-shared-request="copySharedRequest"
       />
     </template>
-
-    <template #footer>
+    <template v-if="step === 1" #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
diff --git a/packages/hoppscotch-common/src/components/share/index.vue b/packages/hoppscotch-common/src/components/share/index.vue
index a1455d7d..49681749 100644
--- a/packages/hoppscotch-common/src/components/share/index.vue
+++ b/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) {
-      case "shortcode/not_found":
-        return t("shared_request.not_found")
-      default:
-        return t("error.something_went_wrong")
-    }
+  }
+  switch (err.error) {
+    case "shortcode/not_found":
+      return t("shared_request.not_found")
+    default:
+      return t("error.something_went_wrong")
   }
 }
 
diff --git a/packages/hoppscotch-common/src/components/share/templates/Embeds.vue b/packages/hoppscotch-common/src/components/share/templates/Embeds.vue
index a6b4f5a6..ca03179e 100644
--- a/packages/hoppscotch-common/src/components/share/templates/Embeds.vue
+++ b/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="{
diff --git a/packages/hoppscotch-common/src/services/banner.service.ts b/packages/hoppscotch-common/src/services/banner.service.ts
index c0e13f97..644288ea 100644
--- a/packages/hoppscotch-common/src/services/banner.service.ts
+++ b/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))
-    return list.find((banner) => banner.content.score === highestScore)
-  }
+
+  const highestScore = Math.max(...list.map((banner) => banner.content.score))
+  return list.find((banner) => banner.content.score === highestScore)
 }
 
 /**