chore: minor ui improvements

2022-10-20 19:47:17 +05:30
parent a950e08ef1
commit 02d66ee9fd
18 changed files with 49 additions and 29 deletions
--- 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
--- 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')"
  >
--- 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">
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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)

--- 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)
--- 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
  }
--- 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",
--- 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"
--- a/packages/hoppscotch-app/src/components/smart/SlideOver.vue
+++ b/packages/hoppscotch-app/src/components/smart/SlideOver.vue