From ba3d3430c02eb9238c4bb71accd3d7162004de04 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Tue, 21 Dec 2021 07:45:14 +0530
Subject: [PATCH] chore(ui): improve ui consistency

---
 .../components/collections/ImportExport.vue   | 33 ++++++++++---------
 .../collections/graphql/ImportExport.vue      | 31 ++++++++---------
 .../components/environments/ImportExport.vue  | 31 ++++++++---------
 .../helpers/utils/parseInsomniaCollection.ts  |  2 +-
 4 files changed, 50 insertions(+), 47 deletions(-)

diff --git a/packages/hoppscotch-app/components/collections/ImportExport.vue b/packages/hoppscotch-app/components/collections/ImportExport.vue
index de9fa1e57..42dcb1235 100644
--- a/packages/hoppscotch-app/components/collections/ImportExport.vue
+++ b/packages/hoppscotch-app/components/collections/ImportExport.vue
@@ -78,22 +78,7 @@
       </span>
     </template>
     <template #body>
-      <div v-if="mode == 'import_export'" class="flex flex-col space-y-2">
-        <SmartItem
-          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('action.replace_current')"
-          svg="file"
-          :label="$t('action.replace_json')"
-          @click.native="openDialogChooseFileToReplaceWith"
-        />
-        <input
-          ref="inputChooseFileToReplaceWith"
-          class="input"
-          type="file"
-          style="display: none"
-          accept="application/json"
-          @change="replaceWithJSON"
-        />
+      <div v-if="mode == 'import_export'" class="flex flex-col space-y-2 px-2">
         <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.preserve_current')"
@@ -117,6 +102,22 @@
           :label="$t('import.from_my_collections')"
           @click.native="mode = 'import_from_my_collections'"
         />
+        <SmartItem
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.replace_current')"
+          svg="file"
+          :label="$t('action.replace_json')"
+          @click.native="openDialogChooseFileToReplaceWith"
+        />
+        <input
+          ref="inputChooseFileToReplaceWith"
+          class="input"
+          type="file"
+          style="display: none"
+          accept="application/json"
+          @change="replaceWithJSON"
+        />
+        <hr />
         <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.download_file')"
diff --git a/packages/hoppscotch-app/components/collections/graphql/ImportExport.vue b/packages/hoppscotch-app/components/collections/graphql/ImportExport.vue
index 47fc42daf..0dcd087cd 100644
--- a/packages/hoppscotch-app/components/collections/graphql/ImportExport.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/ImportExport.vue
@@ -57,21 +57,7 @@
       </span>
     </template>
     <template #body>
-      <div class="flex flex-col space-y-2">
-        <SmartItem
-          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('action.replace_current')"
-          svg="file"
-          :label="$t('action.replace_json')"
-          @click.native="openDialogChooseFileToReplaceWith"
-        />
-        <input
-          ref="inputChooseFileToReplaceWith"
-          class="input"
-          type="file"
-          accept="application/json"
-          @change="replaceWithJSON"
-        />
+      <div class="flex flex-col space-y-2 px-2">
         <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.preserve_current')"
@@ -86,6 +72,21 @@
           accept="application/json"
           @change="importFromJSON"
         />
+        <SmartItem
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.replace_current')"
+          svg="file"
+          :label="$t('action.replace_json')"
+          @click.native="openDialogChooseFileToReplaceWith"
+        />
+        <input
+          ref="inputChooseFileToReplaceWith"
+          class="input"
+          type="file"
+          accept="application/json"
+          @change="replaceWithJSON"
+        />
+        <hr />
         <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.download_file')"
diff --git a/packages/hoppscotch-app/components/environments/ImportExport.vue b/packages/hoppscotch-app/components/environments/ImportExport.vue
index 79177067a..48dbcb7e8 100644
--- a/packages/hoppscotch-app/components/environments/ImportExport.vue
+++ b/packages/hoppscotch-app/components/environments/ImportExport.vue
@@ -57,21 +57,7 @@
       </span>
     </template>
     <template #body>
-      <div class="flex flex-col space-y-2">
-        <SmartItem
-          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('action.replace_current')"
-          svg="file"
-          :label="$t('action.replace_json')"
-          @click.native="openDialogChooseFileToReplaceWith"
-        />
-        <input
-          ref="inputChooseFileToReplaceWith"
-          class="input"
-          type="file"
-          accept="application/json"
-          @change="replaceWithJSON"
-        />
+      <div class="flex flex-col space-y-2 px-2">
         <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.preserve_current')"
@@ -86,6 +72,21 @@
           accept="application/json"
           @change="importFromJSON"
         />
+        <SmartItem
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.replace_current')"
+          svg="file"
+          :label="$t('action.replace_json')"
+          @click.native="openDialogChooseFileToReplaceWith"
+        />
+        <input
+          ref="inputChooseFileToReplaceWith"
+          class="input"
+          type="file"
+          accept="application/json"
+          @change="replaceWithJSON"
+        />
+        <hr />
         <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.download_file')"
diff --git a/packages/hoppscotch-app/helpers/utils/parseInsomniaCollection.ts b/packages/hoppscotch-app/helpers/utils/parseInsomniaCollection.ts
index 59572fc1f..5d445984b 100644
--- a/packages/hoppscotch-app/helpers/utils/parseInsomniaCollection.ts
+++ b/packages/hoppscotch-app/helpers/utils/parseInsomniaCollection.ts
@@ -68,7 +68,7 @@ function transformBody(insomniaBody: any) {
     default:
       console.warn(
         "Warning: Body type unsupported; skipped!!! ... " +
-        insomniaBody.mimeType
+          insomniaBody.mimeType
       )
       body.mode = "raw"
       body.raw =