chore: minor ui improvements

packages/hoppscotch-app/assets/icons/align-left.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-left"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></svg>

packages/hoppscotch-app/components/app/Footer.vue

@@ -35,59 +35,65 @@
               <ButtonSecondary
                 svg="help-circle"
                 class="!rounded-none"
-                :label="$t('app.help')"
+                :label="`${$t('app.help')}`"
               />
             </template>
             <div class="flex flex-col">
               <SmartItem
                 svg="book"
-                :label="$t('app.documentation')"
+                :label="`${$t('app.documentation')}`"
                 to="https://docs.hoppscotch.io"
                 blank
                 @click.native="$refs.options.tippy().hide()"
               />
               <SmartItem
                 svg="zap"
-                :label="$t('app.keyboard_shortcuts')"
+                :label="`${$t('app.keyboard_shortcuts')}`"
                 @click.native="
-                  showShortcuts = true
+                  () => {
-                  $refs.options.tippy().hide()
+                    showShortcuts = true
+                    $refs.options.tippy().hide()
+                  }
                 "
               />
               <SmartItem
                 svg="gift"
-                :label="$t('app.whats_new')"
+                :label="`${$t('app.whats_new')}`"
                 to="https://docs.hoppscotch.io/changelog"
                 blank
                 @click.native="$refs.options.tippy().hide()"
               />
               <SmartItem
                 svg="message-circle"
-                :label="$t('app.chat_with_us')"
+                :label="`${$t('app.chat_with_us')}`"
                 @click.native="
-                  chatWithUs()
+                  () => {
-                  $refs.options.tippy().hide()
+                    chatWithUs()
+                    $refs.options.tippy().hide()
+                  }
                 "
               />
               <hr />
               <SmartItem
                 svg="twitter"
-                :label="$t('app.twitter')"
+                :label="`${$t('app.twitter')}`"
                 to="https://hoppscotch.io/twitter"
                 blank
                 @click.native="$refs.options.tippy().hide()"
               />
               <SmartItem
                 svg="user-plus"
-                :label="$t('app.invite')"
+                :label="`${$t('app.invite')}`"
                 @click.native="
-                  showShare = true
+                  () => {
-                  $refs.options.tippy().hide()
+                    showShare = true
+                    $refs.options.tippy().hide()
+                  }
                 "
               />
               <SmartItem
                 svg="lock"
-                :label="$t('app.terms_and_privacy')"
+                :label="`${$t('app.terms_and_privacy')}`"
                 to="https://docs.hoppscotch.io/privacy"
                 blank
                 @click.native="$refs.options.tippy().hide()"

packages/hoppscotch-app/components/graphql/RequestOptions.vue

@@ -1,6 +1,21 @@
 <template>
   <div>
     <SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
+      <template #actions>
+        <ButtonSecondary
+          :label="`${$t('request.run')}`"
+          svg="play"
+          class="rounded-none !text-accent"
+          @click.native="runQuery()"
+        />
+        <ButtonSecondary
+          ref="saveRequest"
+          :label="`${$t('request.save')}`"
+          class="rounded-none"
+          @click.native="saveRequest"
+        />
+      </template>
+
       <SmartTab :id="'query'" :label="`${$t('tab.query')}`" :selected="true">
         <AppSection label="query">
           <div
@@ -21,12 +36,6 @@
               {{ $t("request.query") }}
             </label>
             <div class="flex">
-              <ButtonSecondary
-                :label="`${$t('request.run')}`"
-                svg="play"
-                class="rounded-none !text-accent"
-                @click.native="runQuery()"
-              />
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 to="https://docs.hoppscotch.io"
@@ -37,22 +46,15 @@
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.copy')"
-                :svg="copyQueryIcon"
+                :svg="`${copyQueryIcon}`"
                 @click.native="copyQuery"
               />
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.prettify')"
-                :svg="prettifyQueryIcon"
+                :svg="`${prettifyQueryIcon}`"
                 @click.native="prettifyQuery"
               />
-              <ButtonSecondary
-                ref="saveRequest"
-                v-tippy="{ theme: 'tooltip' }"
-                :title="$t('request.save')"
-                svg="folder-plus"
-                @click.native="saveRequest"
-              />
             </div>
           </div>
           <div ref="queryEditor"></div>
@@ -88,7 +90,7 @@
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.copy')"
-                :svg="copyVariablesIcon"
+                :svg="`${copyVariablesIcon}`"
                 @click.native="copyVariables"
               />
             </div>
@@ -127,7 +129,7 @@
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.clear_all')"
                 svg="trash-2"
-                :disabled="bulkMode"
+                :disabled="Boolean(bulkMode)"
                 @click.native="headers = []"
               />
               <ButtonSecondary
@@ -141,7 +143,7 @@
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('add.new')"
                 svg="plus"
-                :disabled="bulkMode"
+                :disabled="Boolean(bulkMode)"
                 @click.native="addRequestHeader"
               />
             </div>
@@ -150,7 +152,7 @@
           <div v-else>
             <div
               v-for="(header, index) in headers"
-              :key="`header-${index}`"
+              :key="`header-${String(index)}`"
               class="
                 divide-x divide-dividerLight
                 border-b border-dividerLight
@@ -183,7 +185,7 @@
               <input
                 class="bg-transparent flex flex-1 py-2 px-4"
                 :placeholder="`${$t('count.value', { count: index + 1 })}`"
-                :name="`value ${index}`"
+                :name="`value ${String(index)}`"
                 :value="header.value"
                 autofocus
                 @change="
@@ -258,7 +260,7 @@
 
     <CollectionsSaveRequest
       mode="graphql"
-      :show="showSaveRequestModal"
+      :show="Boolean(showSaveRequestModal)"
       @hide-modal="hideRequestModal"
     />
   </div>
@@ -407,7 +409,7 @@ const runQuery = async () => {
   const startTime = Date.now()
 
   nuxt.value.$loading.start()
-  response.value = `${t("state.loading")}`
+  response.value = "loading"
 
   try {
     const runURL = clone(url.value)

packages/hoppscotch-app/components/graphql/Response.vue

@@ -1,47 +1,55 @@
 <template>
   <AppSection ref="response" label="response">
     <div
-      v-if="responseString"
+      v-if="responseString === 'loading'"
-      class="
+      class="flex flex-col p-4 items-center justify-center"
-        bg-primary
-        border-b border-dividerLight
-        flex flex-1
-        pl-4
-        top-0
-        z-10
-        sticky
-        items-center
-        justify-between
-      "
     >
-      <label class="font-semibold text-secondaryLight">
+      <SmartSpinner class="mb-4" />
-        {{ $t("response.title") }}
+      <span class="text-secondaryLight">{{ $t("state.loading") }}</span>
-      </label>
+    </div>
-      <div class="flex">
+    <div v-else-if="responseString">
-        <ButtonSecondary
+      <div
-          v-tippy="{ theme: 'tooltip' }"
+        class="
-          :title="$t('state.linewrap')"
+          bg-primary
-          :class="{ '!text-accent': linewrapEnabled }"
+          border-b border-dividerLight
-          svg="corner-down-left"
+          flex flex-1
-          @click.native.prevent="linewrapEnabled = !linewrapEnabled"
+          pl-4
-        />
+          top-0
-        <ButtonSecondary
+          z-10
-          ref="downloadResponse"
+          sticky
-          v-tippy="{ theme: 'tooltip' }"
+          items-center
-          :title="$t('action.download_file')"
+          justify-between
-          :svg="downloadResponseIcon"
+        "
-          @click.native="downloadResponse"
+      >
-        />
+        <label class="font-semibold text-secondaryLight">
-        <ButtonSecondary
+          {{ $t("response.title") }}
-          ref="copyResponseButton"
+        </label>
-          v-tippy="{ theme: 'tooltip' }"
+        <div class="flex">
-          :title="$t('action.copy')"
+          <ButtonSecondary
-          :svg="copyResponseIcon"
+            v-tippy="{ theme: 'tooltip' }"
-          @click.native="copyResponse"
+            :title="$t('state.linewrap')"
-        />
+            :class="{ '!text-accent': linewrapEnabled }"
-      </div>
+            svg="corner-down-left"
+            @click.native.prevent="linewrapEnabled = !linewrapEnabled"
+          />
+          <ButtonSecondary
+            ref="downloadResponse"
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('action.download_file')"
+            :svg="downloadResponseIcon"
+            @click.native="downloadResponse"
+          />
+          <ButtonSecondary
+            ref="copyResponseButton"
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('action.copy')"
+            :svg="copyResponseIcon"
+            @click.native="copyResponse"
+          />
+        </div>
+      </div>
+      <div ref="schemaEditor"></div>
     </div>
-    <div v-if="responseString" ref="schemaEditor"></div>
     <div
       v-else
       class="

packages/hoppscotch-app/components/http/ResponseMeta.vue

@@ -51,8 +51,12 @@
       />
     </div>
     <div v-else class="flex flex-col flex-1">
-      <div v-if="response.type === 'loading'">
+      <div
-        <i class="animate-spin material-icons"> refresh </i>
+        v-if="response.type === 'loading'"
+        class="flex flex-col items-center justify-center"
+      >
+        <SmartSpinner class="mb-4" />
+        <span class="text-secondaryLight">{{ $t("state.loading") }}</span>
       </div>
       <div
         v-if="response.type === 'network_fail'"

packages/hoppscotch-app/components/realtime/Socketio.vue

@@ -117,7 +117,7 @@
             />
           </div>
         </div>
-        <div class="flex flex-col space-y-2 px-4">
+        <div class="flex flex-col space-y-2 px-4 pb-4">
           <div
             v-for="(input, index) of communication.inputs"
             :key="`input-${index}`"

packages/hoppscotch-app/components/smart/Link.js

@@ -27,6 +27,8 @@ const SmartLink = {
     let on = {}
     switch (tag) {
       case ANCHOR_TAG:
+        attrs["aria-label"] = "Link"
+
         // Map `to` prop to the correct attribute
         attrs.href = context.props.to
 
@@ -53,6 +55,7 @@ const SmartLink = {
         break
 
       default:
+        attrs["aria-label"] = "Button"
         break
     }
 

packages/hoppscotch-app/components/smart/Spinner.vue

@@ -1,22 +1,3 @@
 <template>
-  <svg
+  <SmartIcon class="animate-spin svg-icons" name="loader" />
-    class="h-4 animate-spin w-4"
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-  >
-    <circle
-      class="opacity-25"
-      cx="12"
-      cy="12"
-      r="10"
-      stroke="currentColor"
-      stroke-width="4"
-    />
-    <path
-      class="opacity-75"
-      fill="currentColor"
-      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-    />
-  </svg>
 </template>

packages/hoppscotch-app/components/smart/Tabs.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="flex flex-nowrap flex-1 h-full"
-    :class="{ 'flex-col': !vertical }"
+    :class="{ 'flex-col h-auto': !vertical }"
   >
     <div
       class="tabs hide-scrollbar relative"
@@ -19,6 +19,7 @@
               class="tab"
               :class="[{ active: tab.active }, { vertical: vertical }]"
               tabindex="0"
+              :aria-label="tab.label"
               @keyup.enter="selectTab(tab)"
               @click="selectTab(tab)"
             >
@@ -42,8 +43,9 @@
       </div>
     </div>
     <div
+      class="contents h-full w-full"
       :class="{
-        'flex flex-col flex-1 overflow-y-auto hide-scrollbar': vertical,
+        '!flex flex-col flex-1 overflow-y-auto hide-scrollbar': vertical,
       }"
     >
       <slot></slot>

packages/hoppscotch-app/components/teams/index.vue

@@ -17,13 +17,13 @@
         outline
         @click.native="displayModalAdd(true)"
       />
-      <p
+      <div
         v-if="myTeamsLoading"
         class="flex flex-col items-center justify-center"
       >
         <SmartSpinner class="mb-4" />
         <span class="text-secondaryLight">{{ $t("state.loading") }}</span>
-      </p>
+      </div>
       <div
         v-if="!myTeamsLoading && myTeams.myTeams.length === 0"
         class="flex items-center"

packages/hoppscotch-app/helpers/apollo.ts

@@ -6,7 +6,7 @@ import {
   OperationVariables,
   split,
   ApolloError,
-  isApolloError as _isApolloError
+  isApolloError as _isApolloError,
 } from "@apollo/client/core"
 import { WebSocketLink } from "@apollo/client/link/ws"
 import { setContext } from "@apollo/client/link/context"

packages/hoppscotch-app/layouts/default.vue

@@ -177,6 +177,7 @@ export default defineComponent({
             action: [
               {
                 text: `${this.$t("app.reload")}`,
+                class: "!ml-auto",
                 onClick: (_, toastObject) => {
                   toastObject.goAway(0)
                   window.location.reload()

packages/hoppscotch-app/pages/realtime.vue

@@ -1,6 +1,6 @@
 <template>
   <SmartTabs
-    class="h-full overflow-hidden"
+    class="h-full !overflow-hidden"
     styles="sticky bg-primary top-0 z-10 border-b border-dividerLight !overflow-visible"
   >
     <SmartTab