From 02d66ee9fd80e341fe53756598c2e80753c6d5e3 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Thu, 20 Oct 2022 19:47:17 +0530
Subject: [PATCH] chore: minor ui improvements

---
 packages/hoppscotch-app/assets/scss/styles.scss     | 11 +++++++++++
 packages/hoppscotch-app/locales/en.json             |  2 +-
 packages/hoppscotch-app/src/components.d.ts         | 13 ++++++++++++-
 .../hoppscotch-app/src/components/app/Options.vue   |  9 ++++-----
 .../src/components/app/PowerSearch.vue              |  2 +-
 .../hoppscotch-app/src/components/app/Shortcuts.vue |  4 ++--
 .../hoppscotch-app/src/components/app/Support.vue   |  2 +-
 .../src/components/collections/ImportExport.vue     |  2 +-
 .../components/collections/graphql/ImportExport.vue |  2 +-
 .../src/components/environments/ImportExport.vue    |  2 +-
 .../src/components/firebase/Login.vue               |  2 +-
 .../src/components/graphql/RequestOptions.vue       | 10 +++++-----
 .../hoppscotch-app/src/components/http/RawBody.vue  |  6 +++---
 .../src/components/http/TestResultEnv.vue           |  4 ++--
 .../src/components/realtime/Communication.vue       |  4 ++--
 .../hoppscotch-app/src/components/smart/Modal.vue   |  1 -
 .../src/components/{app => smart}/SlideOver.vue     |  0
 packages/hoppscotch-app/src/pages/realtime/sse.vue  |  2 +-
 18 files changed, 49 insertions(+), 29 deletions(-)
 rename packages/hoppscotch-app/src/components/{app => smart}/SlideOver.vue (100%)

diff --git a/packages/hoppscotch-app/assets/scss/styles.scss b/packages/hoppscotch-app/assets/scss/styles.scss
index 47d63df6..1a3a9c8b 100644
--- a/packages/hoppscotch-app/assets/scss/styles.scss
+++ b/packages/hoppscotch-app/assets/scss/styles.scss
@@ -91,6 +91,17 @@ body {
   @apply translate-x-full;
 }
 
+.bounce-enter-active,
+.bounce-leave-active {
+  @apply transition;
+}
+
+.bounce-enter-from,
+.bounce-leave-to {
+  @apply transform;
+  @apply scale-95;
+}
+
 .svg-icons {
   @apply flex-shrink-0;
   @apply overflow-hidden;
diff --git a/packages/hoppscotch-app/locales/en.json b/packages/hoppscotch-app/locales/en.json
index 561c7f29..deaeb454 100644
--- a/packages/hoppscotch-app/locales/en.json
+++ b/packages/hoppscotch-app/locales/en.json
@@ -423,7 +423,7 @@
     "extension_version": "Extension Version",
     "extensions": "Browser extension",
     "extensions_use_toggle": "Use the browser extension to send requests (if present)",
-    "follow": "Follow Us",
+    "follow": "Follow us",
     "font_size": "Font size",
     "font_size_large": "Large",
     "font_size_medium": "Medium",
diff --git a/packages/hoppscotch-app/src/components.d.ts b/packages/hoppscotch-app/src/components.d.ts
index 47f267da..6a018ad3 100644
--- a/packages/hoppscotch-app/src/components.d.ts
+++ b/packages/hoppscotch-app/src/components.d.ts
@@ -23,7 +23,6 @@ declare module '@vue/runtime-core' {
     AppShortcuts: typeof import('./components/app/Shortcuts.vue')['default']
     AppShortcutsEntry: typeof import('./components/app/ShortcutsEntry.vue')['default']
     AppSidenav: typeof import('./components/app/Sidenav.vue')['default']
-    AppSlideOver: typeof import('./components/app/SlideOver.vue')['default']
     AppSupport: typeof import('./components/app/Support.vue')['default']
     ButtonPrimary: typeof import('./components/button/Primary.vue')['default']
     ButtonSecondary: typeof import('./components/button/Secondary.vue')['default']
@@ -98,6 +97,17 @@ declare module '@vue/runtime-core' {
     HttpTestResultReport: typeof import('./components/http/TestResultReport.vue')['default']
     HttpTests: typeof import('./components/http/Tests.vue')['default']
     HttpURLEncodedParams: typeof import('./components/http/URLEncodedParams.vue')['default']
+    IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
+    IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
+    IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
+    IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
+    IconLucideInfo: typeof import('~icons/lucide/info')['default']
+    IconLucideLayers: typeof import('~icons/lucide/layers')['default']
+    IconLucideLoader: typeof import('~icons/lucide/loader')['default']
+    IconLucideMinus: typeof import('~icons/lucide/minus')['default']
+    IconLucideSearch: typeof import('~icons/lucide/search')['default']
+    IconLucideUser: typeof import('~icons/lucide/user')['default']
+    IconLucideUsers: typeof import('~icons/lucide/users')['default']
     LensesHeadersRenderer: typeof import('./components/lenses/HeadersRenderer.vue')['default']
     LensesHeadersRendererEntry: typeof import('./components/lenses/HeadersRendererEntry.vue')['default']
     LensesRenderersHTMLLensRenderer: typeof import('./components/lenses/renderers/HTMLLensRenderer.vue')['default']
@@ -130,6 +140,7 @@ declare module '@vue/runtime-core' {
     SmartProgressRing: typeof import('./components/smart/ProgressRing.vue')['default']
     SmartRadio: typeof import('./components/smart/Radio.vue')['default']
     SmartRadioGroup: typeof import('./components/smart/RadioGroup.vue')['default']
+    SmartSlideOver: typeof import('./components/smart/SlideOver.vue')['default']
     SmartSpinner: typeof import('./components/smart/Spinner.vue')['default']
     SmartTab: typeof import('./components/smart/Tab.vue')['default']
     SmartTabs: typeof import('./components/smart/Tabs.vue')['default']
diff --git a/packages/hoppscotch-app/src/components/app/Options.vue b/packages/hoppscotch-app/src/components/app/Options.vue
index f7f1d187..33413c58 100644
--- a/packages/hoppscotch-app/src/components/app/Options.vue
+++ b/packages/hoppscotch-app/src/components/app/Options.vue
@@ -3,13 +3,12 @@
     v-if="show"
     dialog
     :title="t('app.options')"
-    max-width="sm:max-w-md"
-    class="text-sm"
+    styles="sm:max-w-md"
     @close="emit('hide-modal')"
   >
     <template #body>
       <div class="flex flex-col space-y-2">
-        <h2 class="p-2 font-semibold font-bold text-secondaryDark">
+        <h2 class="p-4 font-semibold font-bold text-secondaryDark">
           {{ t("layout.name") }}
         </h2>
         <SmartItem
@@ -28,7 +27,7 @@
           active
           @click="expandCollection"
         />
-        <h2 class="p-2 font-semibold font-bold text-secondaryDark">
+        <h2 class="p-4 font-semibold font-bold text-secondaryDark">
           {{ t("support.title") }}
         </h2>
         <SmartItem
@@ -71,7 +70,7 @@
           active
           @click="hideModal()"
         />
-        <h2 class="p-2 font-semibold font-bold text-secondaryDark">
+        <h2 class="p-4 font-semibold font-bold text-secondaryDark">
           {{ t("settings.follow") }}
         </h2>
         <SmartItem
diff --git a/packages/hoppscotch-app/src/components/app/PowerSearch.vue b/packages/hoppscotch-app/src/components/app/PowerSearch.vue
index e9437339..88873710 100644
--- a/packages/hoppscotch-app/src/components/app/PowerSearch.vue
+++ b/packages/hoppscotch-app/src/components/app/PowerSearch.vue
@@ -1,7 +1,7 @@
 <template>
   <SmartModal
     v-if="show"
-    max-width="sm:max-w-lg"
+    styles="sm:max-w-lg"
     full-width
     @close="emit('hide-modal')"
   >
diff --git a/packages/hoppscotch-app/src/components/app/Shortcuts.vue b/packages/hoppscotch-app/src/components/app/Shortcuts.vue
index 10a237e9..d79c6d9a 100644
--- a/packages/hoppscotch-app/src/components/app/Shortcuts.vue
+++ b/packages/hoppscotch-app/src/components/app/Shortcuts.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppSlideOver :show="show" :title="t('app.shortcuts')" @close="close()">
+  <SmartSlideOver :show="show" :title="t('app.shortcuts')" @close="close()">
     <template #content>
       <div class="sticky top-0 z-10 flex flex-col bg-primary">
         <div class="flex flex-col px-6 py-4 border-b border-dividerLight">
@@ -74,7 +74,7 @@
         </details>
       </div>
     </template>
-  </AppSlideOver>
+  </SmartSlideOver>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-app/src/components/app/Support.vue b/packages/hoppscotch-app/src/components/app/Support.vue
index 9527b5bb..82e2aa8c 100644
--- a/packages/hoppscotch-app/src/components/app/Support.vue
+++ b/packages/hoppscotch-app/src/components/app/Support.vue
@@ -3,7 +3,7 @@
     v-if="show"
     dialog
     :title="t('support.title')"
-    max-width="sm:max-w-md"
+    styles="sm:max-w-md"
     @close="emit('hide-modal')"
   >
     <template #body>
diff --git a/packages/hoppscotch-app/src/components/collections/ImportExport.vue b/packages/hoppscotch-app/src/components/collections/ImportExport.vue
index 7efbd287..44a883db 100644
--- a/packages/hoppscotch-app/src/components/collections/ImportExport.vue
+++ b/packages/hoppscotch-app/src/components/collections/ImportExport.vue
@@ -3,7 +3,7 @@
     v-if="show"
     dialog
     :title="`${t('modal.collections')}`"
-    max-width="sm:max-w-md"
+    styles="sm:max-w-md"
     @close="hideModal"
   >
     <template #actions>
diff --git a/packages/hoppscotch-app/src/components/collections/graphql/ImportExport.vue b/packages/hoppscotch-app/src/components/collections/graphql/ImportExport.vue
index da531806..4a93ee24 100644
--- a/packages/hoppscotch-app/src/components/collections/graphql/ImportExport.vue
+++ b/packages/hoppscotch-app/src/components/collections/graphql/ImportExport.vue
@@ -3,7 +3,7 @@
     v-if="show"
     dialog
     :title="`${t('modal.collections')}`"
-    max-width="sm:max-w-md"
+    styles="sm:max-w-md"
     @close="hideModal"
   >
     <template #actions>
diff --git a/packages/hoppscotch-app/src/components/environments/ImportExport.vue b/packages/hoppscotch-app/src/components/environments/ImportExport.vue
index f64bca67..4f4142ce 100644
--- a/packages/hoppscotch-app/src/components/environments/ImportExport.vue
+++ b/packages/hoppscotch-app/src/components/environments/ImportExport.vue
@@ -3,7 +3,7 @@
     v-if="show"
     dialog
     :title="`${t('environment.title')}`"
-    max-width="sm:max-w-md"
+    styles="sm:max-w-md"
     @close="hideModal"
   >
     <template #actions>
diff --git a/packages/hoppscotch-app/src/components/firebase/Login.vue b/packages/hoppscotch-app/src/components/firebase/Login.vue
index 8bcb6d92..e1987428 100644
--- a/packages/hoppscotch-app/src/components/firebase/Login.vue
+++ b/packages/hoppscotch-app/src/components/firebase/Login.vue
@@ -3,7 +3,7 @@
     v-if="show"
     dialog
     :title="`${t('auth.login_to_hoppscotch')}`"
-    max-width="sm:max-w-md"
+    styles="sm:max-w-md"
     @close="hideModal"
   >
     <template #body>
diff --git a/packages/hoppscotch-app/src/components/graphql/RequestOptions.vue b/packages/hoppscotch-app/src/components/graphql/RequestOptions.vue
index a00becb4..e24280d7 100644
--- a/packages/hoppscotch-app/src/components/graphql/RequestOptions.vue
+++ b/packages/hoppscotch-app/src/components/graphql/RequestOptions.vue
@@ -315,7 +315,7 @@ import IconCircle from "~icons/lucide/circle"
 import IconCopy from "~icons/lucide/copy"
 import IconCheck from "~icons/lucide/check"
 import IconInfo from "~icons/lucide/info"
-import IconWand from "~icons/lucide/wand"
+import IconWand2 from "~icons/lucide/wand-2"
 import { Ref, computed, reactive, ref, watch } from "vue"
 import * as gql from "graphql"
 import * as E from "fp-ts/Either"
@@ -641,11 +641,11 @@ const copyVariablesIcon = refAutoReset<typeof IconCopy | typeof IconCheck>(
   1000
 )
 const prettifyQueryIcon = refAutoReset<
-  typeof IconWand | typeof IconCheck | typeof IconInfo
->(IconWand, 1000)
+  typeof IconWand2 | typeof IconCheck | typeof IconInfo
+>(IconWand2, 1000)
 const prettifyVariablesIcon = refAutoReset<
-  typeof IconWand | typeof IconCheck | typeof IconInfo
->(IconWand, 1000)
+  typeof IconWand2 | typeof IconCheck | typeof IconInfo
+>(IconWand2, 1000)
 
 const showSaveRequestModal = ref(false)
 
diff --git a/packages/hoppscotch-app/src/components/http/RawBody.vue b/packages/hoppscotch-app/src/components/http/RawBody.vue
index 7d271a56..550b1dcf 100644
--- a/packages/hoppscotch-app/src/components/http/RawBody.vue
+++ b/packages/hoppscotch-app/src/components/http/RawBody.vue
@@ -60,7 +60,7 @@ import IconHelpCircle from "~icons/lucide/help-circle"
 import IconWrapText from "~icons/lucide/wrap-text"
 import IconTrash2 from "~icons/lucide/trash-2"
 import IconFilePlus from "~icons/lucide/file-plus"
-import IconWand from "~icons/lucide/wand"
+import IconWand2 from "~icons/lucide/wand-2"
 import IconCheck from "~icons/lucide/check"
 import IconInfo from "~icons/lucide/info"
 import { computed, reactive, Ref, ref } from "vue"
@@ -102,8 +102,8 @@ const rawParamsBody = pluckRef(
 )
 
 const prettifyIcon = refAutoReset<
-  typeof IconWand | typeof IconCheck | typeof IconInfo
->(IconWand, 1000)
+  typeof IconWand2 | typeof IconCheck | typeof IconInfo
+>(IconWand2, 1000)
 
 const rawInputEditorLang = computed(() =>
   getEditorLangForMimeType(props.contentType)
diff --git a/packages/hoppscotch-app/src/components/http/TestResultEnv.vue b/packages/hoppscotch-app/src/components/http/TestResultEnv.vue
index 4ae104fd..fb90d474 100644
--- a/packages/hoppscotch-app/src/components/http/TestResultEnv.vue
+++ b/packages/hoppscotch-app/src/components/http/TestResultEnv.vue
@@ -38,7 +38,7 @@
 import { useI18n } from "@composables/i18n"
 
 import IconPlusCircle from "~icons/lucide/plus-circle"
-import IconCheckCircle from "~icons/lucide/check-circle-2"
+import IconCheckCircle2 from "~icons/lucide/check-circle-2"
 import IconMinusCircle from "~icons/lucide/minus-circle"
 
 type Status = "updations" | "additions" | "deletions"
@@ -63,7 +63,7 @@ const getIcon = (status: Status) => {
     case "additions":
       return IconPlusCircle
     case "updations":
-      return IconCheckCircle
+      return IconCheckCircle2
     case "deletions":
       return IconMinusCircle
   }
diff --git a/packages/hoppscotch-app/src/components/realtime/Communication.vue b/packages/hoppscotch-app/src/components/realtime/Communication.vue
index 3c7172ac..7857807a 100644
--- a/packages/hoppscotch-app/src/components/realtime/Communication.vue
+++ b/packages/hoppscotch-app/src/components/realtime/Communication.vue
@@ -117,7 +117,7 @@ import IconSend from "~icons/lucide/send"
 import IconHelpCircle from "~icons/lucide/help-circle"
 import IconWrapText from "~icons/lucide/wrap-text"
 import IconTrash2 from "~icons/lucide/trash-2"
-import IconWand from "~icons/lucide/wand"
+import IconWand2 from "~icons/lucide/wand-2"
 import IconCheck from "~icons/lucide/check"
 import IconInfo from "~icons/lucide/info"
 import IconDone from "~icons/lucide/check"
@@ -163,7 +163,7 @@ const linewrapEnabled = ref(true)
 const wsCommunicationBody = ref<HTMLElement>()
 const payload = ref<HTMLInputElement>()
 
-const prettifyIcon = refAutoReset<Component>(IconWand, 1000)
+const prettifyIcon = refAutoReset<Component>(IconWand2, 1000)
 
 const knownContentTypes = {
   JSON: "application/ld+json",
diff --git a/packages/hoppscotch-app/src/components/smart/Modal.vue b/packages/hoppscotch-app/src/components/smart/Modal.vue
index deae76e2..52370f9d 100644
--- a/packages/hoppscotch-app/src/components/smart/Modal.vue
+++ b/packages/hoppscotch-app/src/components/smart/Modal.vue
@@ -4,7 +4,6 @@
       ref="modal"
       class="fixed inset-0 z-50 overflow-y-auto transition"
       role="dialog"
-      aria-modal="true"
     >
       <div
         class="flex items-end justify-center min-h-screen text-center sm:block"
diff --git a/packages/hoppscotch-app/src/components/app/SlideOver.vue b/packages/hoppscotch-app/src/components/smart/SlideOver.vue
similarity index 100%
rename from packages/hoppscotch-app/src/components/app/SlideOver.vue
rename to packages/hoppscotch-app/src/components/smart/SlideOver.vue
diff --git a/packages/hoppscotch-app/src/pages/realtime/sse.vue b/packages/hoppscotch-app/src/pages/realtime/sse.vue
index ed506b4e..a1de215e 100644
--- a/packages/hoppscotch-app/src/pages/realtime/sse.vue
+++ b/packages/hoppscotch-app/src/pages/realtime/sse.vue
@@ -2,7 +2,7 @@
   <AppPaneLayout layout-id="sse">
     <template #primary>
       <div
-        class="sticky top-0 z-10 flex flex-shrink-0 p-4 space-x-2 overflow-x-auto bg-primary"
+        class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary"
       >
         <div class="inline-flex flex-1 space-x-2">
           <div class="flex flex-1">