chore: minor ui improvements

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;

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",

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']

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"
+    styles="sm:max-w-md"
-    class="text-sm"
     @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

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')"
   >

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">

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>

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>

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>

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>

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>

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
+  typeof IconWand2 | typeof IconCheck | typeof IconInfo
->(IconWand, 1000)
+>(IconWand2, 1000)
 const prettifyVariablesIcon = refAutoReset<
-  typeof IconWand | typeof IconCheck | typeof IconInfo
+  typeof IconWand2 | typeof IconCheck | typeof IconInfo
->(IconWand, 1000)
+>(IconWand2, 1000)
 
 const showSaveRequestModal = ref(false)
 

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
+  typeof IconWand2 | typeof IconCheck | typeof IconInfo
->(IconWand, 1000)
+>(IconWand2, 1000)
 
 const rawInputEditorLang = computed(() =>
   getEditorLangForMimeType(props.contentType)

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
   }

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",

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"

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">