refactor(ui): sort classes

2021-08-07 09:07:26 +05:30
parent d08f15430c
commit 8c60a4c032
45 changed files with 149 additions and 211 deletions
--- a/README.md
+++ b/README.md
@@ -105,7 +105,7 @@

 - Choose theme: System (default), Light, Dark and Black
 - Choose accent color: Green (default), Teal, Blue, Indigo, Purple, Yellow, Orange, Red and Pink
- Toggle auto-scroll to response
+- Distraction free Zen mode

 <p>
  <a href="https://hoppscotch.io"><img src="https://raw.githubusercontent.com/hoppscotch/hoppscotch/main/static/images/screenshots/banner_light.png" alt="Screenshot" width="100%"></a>
--- a/assets/geojson/ne_110m_admin_0_countries.geojson
+++ b/assets/geojson/ne_110m_admin_0_countries.geojson
--- a/assets/images/texture.png
+++ b/assets/images/texture.png
--- a/components/app/Shortcuts.vue
+++ b/components/app/Shortcuts.vue
@@ -15,7 +15,7 @@
        "
      >
        <h3 class="ml-4 heading">{{ $t("shortcuts") }}</h3>
-        <div>
+        <div class="flex">
          <ButtonSecondary to="/settings" icon="tune" />
          <ButtonSecondary icon="close" @click.native="close()" />
        </div>
@@ -24,7 +24,7 @@
        <input
          v-model="filterText"
          type="search"
-          class="bg-primaryLight border-b border-dividerLight flex font-semibold font-mono w-full py-2 pr-2 pl-8 focus:outline-none truncate"
+          class="bg-primaryLight border-b border-dividerLight flex font-semibold font-mono w-full py-2 pr-2 pl-8 truncate focus:outline-none"
          :placeholder="$t('search')"
        />
      </div> -->
--- a/components/app/SlideOver.vue
+++ b/components/app/SlideOver.vue
@@ -3,7 +3,7 @@
    <transition v-if="show" name="fade" appear>
      <div class="inset-0 transition-opacity z-20 fixed" @keydown.esc="close()">
        <div
-          class="bg-primaryDark opacity-75 inset-0 absolute"
+          class="bg-primaryDark opacity-90 inset-0 absolute"
          tabindex="0"
          @click="close()"
        ></div>
--- a/components/collections/AddFolder.vue
+++ b/components/collections/AddFolder.vue
@@ -1,10 +1,8 @@
 <template>
  <SmartModal v-if="show" @close="$emit('hide-modal')">
    <template #header>
-      <h3 class="heading">{{ $t("new_folder") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <h3 class="heading">{{ $t("folder.new") }}</h3>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
    </template>
    <template #body>
      <div class="flex flex-col px-2">
--- a/components/collections/Edit.vue
+++ b/components/collections/Edit.vue
@@ -2,9 +2,7 @@
  <SmartModal v-if="show" @close="hideModal">
    <template #header>
      <h3 class="heading">{{ $t("collection.edit") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
    </template>
    <template #body>
      <div class="flex flex-col px-2">
--- a/components/collections/EditFolder.vue
+++ b/components/collections/EditFolder.vue
@@ -2,9 +2,7 @@
  <SmartModal v-if="show" @close="$emit('hide-modal')">
    <template #header>
      <h3 class="heading">{{ $t("folder.edit") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
    </template>
    <template #body>
      <div class="flex flex-col px-2">
--- a/components/collections/EditRequest.vue
+++ b/components/collections/EditRequest.vue
@@ -2,9 +2,7 @@
  <SmartModal v-if="show" @close="hideModal">
    <template #header>
      <h3 class="heading">{{ $t("edit_request") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
    </template>
    <template #body>
      <div class="flex flex-col px-2">
--- a/components/collections/graphql/AddFolder.vue
+++ b/components/collections/graphql/AddFolder.vue
@@ -1,10 +1,8 @@
 <template>
  <SmartModal v-if="show" @close="$emit('hide-modal')">
    <template #header>
-      <h3 class="heading">{{ $t("new_folder") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <h3 class="heading">{{ $t("folder.new") }}</h3>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
    </template>
    <template #body>
      <div class="flex flex-col px-2">
--- a/components/collections/graphql/Collection.vue
+++ b/components/collections/graphql/Collection.vue
@@ -37,7 +37,7 @@
        v-tippy="{ theme: 'tooltip' }"
        icon="create_new_folder"
        :title="$t('folder.new')"
-        class="group-hover:inline-flex hidden"
+        class="hidden group-hover:inline-flex"
        @click.native="
          $emit('add-folder', {
            path: `${collectionIndex}`,
--- a/components/collections/graphql/Edit.vue
+++ b/components/collections/graphql/Edit.vue
@@ -2,9 +2,7 @@
  <SmartModal v-if="show" @close="hideModal">
    <template #header>
      <h3 class="heading">{{ $t("collection.edit") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
    </template>
    <template #body>
      <div class="flex flex-col px-2">
--- a/components/collections/graphql/EditFolder.vue
+++ b/components/collections/graphql/EditFolder.vue
@@ -2,9 +2,7 @@
  <SmartModal v-if="show" @close="$emit('hide-modal')">
    <template #header>
      <h3 class="heading">{{ $t("folder.edit") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
    </template>
    <template #body>
      <div class="flex flex-col px-2">
--- a/components/collections/graphql/EditRequest.vue
+++ b/components/collections/graphql/EditRequest.vue
@@ -2,9 +2,7 @@
  <SmartModal v-if="show" @close="hideModal">
    <template #header>
      <h3 class="heading">{{ $t("edit_request") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
    </template>
    <template #body>
      <div class="flex flex-col px-2">
--- a/components/collections/graphql/Folder.vue
+++ b/components/collections/graphql/Folder.vue
@@ -39,7 +39,7 @@
        v-tippy="{ theme: 'tooltip' }"
        icon="create_new_folder"
        :title="$t('folder.new')"
-        class="group-hover:inline-flex hidden"
+        class="hidden group-hover:inline-flex"
        @click.native="$emit('add-folder', { folder, path: folderPath })"
      />
      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
--- a/components/collections/graphql/Request.vue
+++ b/components/collections/graphql/Request.vue
@@ -46,7 +46,7 @@
        v-tippy="{ theme: 'tooltip' }"
        icon="replay"
        :title="$t('restore')"
-        class="group-hover:inline-flex hidden"
+        class="hidden group-hover:inline-flex"
        @click.native="!doc ? selectRequest() : {}"
      />
      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
--- a/components/collections/graphql/index.vue
+++ b/components/collections/graphql/index.vue
@@ -21,8 +21,8 @@
            py-2
            pr-2
            pl-9
-            focus:outline-none
            truncate
+            focus:outline-none
          "
        />
      </div>
--- a/components/collections/my/Collection.vue
+++ b/components/collections/my/Collection.vue
@@ -54,7 +54,7 @@
        v-tippy="{ theme: 'tooltip' }"
        icon="create_new_folder"
        :title="$t('folder.new')"
-        class="group-hover:inline-flex hidden"
+        class="hidden group-hover:inline-flex"
        @click.native="
          $emit('add-folder', {
            folder: collection,
--- a/components/collections/my/Folder.vue
+++ b/components/collections/my/Folder.vue
@@ -39,7 +39,7 @@
        v-tippy="{ theme: 'tooltip' }"
        icon="create_new_folder"
        :title="$t('folder.new')"
-        class="group-hover:inline-flex hidden"
+        class="hidden group-hover:inline-flex"
        @click.native="$emit('add-folder', { folder, path: folderPath })"
      />
      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
--- a/components/collections/my/Request.vue
+++ b/components/collections/my/Request.vue
@@ -54,7 +54,7 @@
        v-tippy="{ theme: 'tooltip' }"
        icon="replay"
        :title="$t('restore')"
-        class="group-hover:inline-flex hidden"
+        class="hidden group-hover:inline-flex"
        @click.native="!doc ? selectRequest() : {}"
      />
      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
--- a/components/environments/Add.vue
+++ b/components/environments/Add.vue
@@ -2,9 +2,7 @@
  <SmartModal v-if="show" @close="hideModal">
    <template #header>
      <h3 class="heading">{{ $t("new_environment") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
    </template>
    <template #body>
      <div class="flex flex-col px-2">
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -2,9 +2,7 @@
  <SmartModal v-if="show" @close="hideModal">
    <template #header>
      <h3 class="heading">{{ $t("edit_environment") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
    </template>
    <template #body>
      <div class="flex flex-col px-2">
@@ -23,7 +21,7 @@
          <label for="variableList" class="font-semibold px-4 pt-4 pb-4">
            {{ $t("env_variable_list") }}
          </label>
-          <div>
+          <div class="flex">
            <ButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
              :title="$t('clear')"
@@ -77,7 +75,7 @@
              :placeholder="$t('count.value', { count: index + 1 })"
              :name="'value' + index"
            />
-            <div>
+            <div class="flex">
              <ButtonSecondary
                id="variable"
                v-tippy="{ theme: 'tooltip' }"
--- a/components/firebase/Login.vue
+++ b/components/firebase/Login.vue
@@ -2,9 +2,7 @@
  <SmartModal v-if="show" dialog @close="hideModal">
    <template #header>
      <h3 class="heading">{{ $t("login_to_hoppscotch") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
    </template>
    <template #body>
      <div v-if="mode === 'sign-in'" class="flex flex-col space-y-2">
--- a/components/history/graphql/Card.vue
+++ b/components/history/graphql/Card.vue
@@ -26,7 +26,7 @@
        icon="delete"
        color="red"
        :title="$t('delete')"
-        class="group-hover:inline-flex hidden"
+        class="hidden group-hover:inline-flex"
        data-testid="delete_history_entry"
        @click.native="$emit('delete-entry')"
      />
@@ -34,7 +34,7 @@
        v-tippy="{ theme: 'tooltip' }"
        :title="expand ? $t('hide.more') : $t('show.more')"
        :icon="expand ? 'unfold_less' : 'unfold_more'"
-        class="group-hover:inline-flex hidden"
+        class="hidden group-hover:inline-flex"
        @click.native="expand = !expand"
      />
      <ButtonSecondary
@@ -51,12 +51,18 @@
      <span
        v-for="(line, index) in query"
        :key="`line-${index}`"
-        class="cursor-pointer font-mono text-secondaryLight px-4 truncate"
+        class="
+          cursor-pointer
+          font-mono
+          text-secondaryLight
+          px-4
+          whitespace-pre
+          truncate
+        "
        data-testid="restore_history_entry"
        @click="$emit('use-entry')"
+        >{{ line }}</span
      >
-        {{ line }}
-      </span>
    </div>
  </div>
 </template>
--- a/components/http/BodyParameters.vue
+++ b/components/http/BodyParameters.vue
@@ -5,8 +5,8 @@
        bg-primary
        border-b border-dividerLight
        flex flex-1
-        pl-4
        top-upperSecondaryStickyFold
+        pl-4
        z-10
        sticky
        items-center
--- a/components/http/Headers.vue
+++ b/components/http/Headers.vue
@@ -5,8 +5,8 @@
        bg-primary
        border-b border-dividerLight
        flex flex-1
-        pl-4
        top-upperSecondaryStickyFold
+        pl-4
        z-10
        sticky
        items-center
@@ -103,42 +103,38 @@
          })
        "
      />
-      <div>
-        <ButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
-          :title="
-            header.hasOwnProperty('active')
-              ? header.active
-                ? $t('action.turn_off')
-                : $t('action.turn_on')
-              : $t('action.turn_off')
-          "
-          :icon="
-            header.hasOwnProperty('active')
-              ? header.active
-                ? 'check_box'
-                : 'check_box_outline_blank'
-              : 'check_box'
-          "
-          color="green"
-          @click.native="
-            updateHeader(index, {
-              key: header.key,
-              value: header.value,
-              active: header.hasOwnProperty('active') ? !header.active : false,
-            })
-          "
-        />
-      </div>
-      <div>
-        <ButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('delete')"
-          icon="delete"
-          color="red"
-          @click.native="deleteHeader(index)"
-        />
-      </div>
+      <ButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        :title="
+          header.hasOwnProperty('active')
+            ? header.active
+              ? $t('action.turn_off')
+              : $t('action.turn_on')
+            : $t('action.turn_off')
+        "
+        :icon="
+          header.hasOwnProperty('active')
+            ? header.active
+              ? 'check_box'
+              : 'check_box_outline_blank'
+            : 'check_box'
+        "
+        color="green"
+        @click.native="
+          updateHeader(index, {
+            key: header.key,
+            value: header.value,
+            active: header.hasOwnProperty('active') ? !header.active : false,
+          })
+        "
+      />
+      <ButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        :title="$t('delete')"
+        icon="delete"
+        color="red"
+        @click.native="deleteHeader(index)"
+      />
    </div>
    <div
      v-if="headers$.length === 0"
--- a/components/http/ImportCurl.vue
+++ b/components/http/ImportCurl.vue
@@ -2,9 +2,7 @@
  <SmartModal v-if="show" @close="hideModal">
    <template #header>
      <h3 class="heading">{{ $t("import.curl") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
    </template>
    <template #body>
      <div class="flex flex-col px-2">
--- a/components/http/Parameters.vue
+++ b/components/http/Parameters.vue
@@ -124,42 +124,38 @@
          })
        "
      />
-      <div>
-        <ButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
-          :title="
-            param.hasOwnProperty('active')
-              ? param.active
-                ? $t('action.turn_off')
-                : $t('action.turn_on')
-              : $t('action.turn_off')
-          "
-          :icon="
-            param.hasOwnProperty('active')
-              ? param.active
-                ? 'check_box'
-                : 'check_box_outline_blank'
-              : 'check_box'
-          "
-          color="green"
-          @click.native="
-            updateParam(index, {
-              key: param.key,
-              value: param.value,
-              active: param.hasOwnProperty('active') ? !param.active : false,
-            })
-          "
-        />
-      </div>
-      <div>
-        <ButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('delete')"
-          icon="delete"
-          color="red"
-          @click.native="deleteParam(index)"
-        />
-      </div>
+      <ButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        :title="
+          param.hasOwnProperty('active')
+            ? param.active
+              ? $t('action.turn_off')
+              : $t('action.turn_on')
+            : $t('action.turn_off')
+        "
+        :icon="
+          param.hasOwnProperty('active')
+            ? param.active
+              ? 'check_box'
+              : 'check_box_outline_blank'
+            : 'check_box'
+        "
+        color="green"
+        @click.native="
+          updateParam(index, {
+            key: param.key,
+            value: param.value,
+            active: param.hasOwnProperty('active') ? !param.active : false,
+          })
+        "
+      />
+      <ButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        :title="$t('delete')"
+        icon="delete"
+        color="red"
+        @click.native="deleteParam(index)"
+      />
    </div>
    <div
      v-if="params$.length === 0"
--- a/components/http/TokenList.vue
+++ b/components/http/TokenList.vue
@@ -2,9 +2,7 @@
  <SmartModal v-if="show" @close="hideModal">
    <template #header>
      <h3 class="heading">{{ $t("manage_token") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
    </template>
    <template #body>
      <div class="flex flex-1">
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -15,7 +15,7 @@
      <label for="body" class="font-semibold px-4">
        {{ $t("response_body") }}
      </label>
-      <div>
+      <div class="flex">
        <ButtonSecondary
          v-if="response.body"
          v-tippy="{ theme: 'tooltip' }"
--- a/components/lenses/renderers/ImageLensRenderer.vue
+++ b/components/lenses/renderers/ImageLensRenderer.vue
@@ -15,7 +15,7 @@
      <label for="body" class="font-semibold px-4">
        {{ $t("response_body") }}
      </label>
-      <div>
+      <div class="flex">
        <ButtonSecondary
          v-if="response.body"
          ref="downloadResponse"
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -15,7 +15,7 @@
      <label for="body" class="font-semibold px-4">
        {{ $t("response_body") }}
      </label>
-      <div>
+      <div class="flex">
        <ButtonSecondary
          v-if="response.body"
          ref="downloadResponse"
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -15,7 +15,7 @@
      <label for="body" class="font-semibold px-4">
        {{ $t("response_body") }}
      </label>
-      <div>
+      <div class="flex">
        <ButtonSecondary
          v-if="response.body"
          ref="downloadResponse"
--- a/components/lenses/renderers/XMLLensRenderer.vue
+++ b/components/lenses/renderers/XMLLensRenderer.vue
@@ -15,7 +15,7 @@
      <label for="body" class="font-semibold px-4">
        {{ $t("response_body") }}
      </label>
-      <div>
+      <div class="flex">
        <ButtonSecondary
          v-if="response.body"
          ref="downloadResponse"
--- a/components/realtime/Websocket.vue
+++ b/components/realtime/Websocket.vue
@@ -96,7 +96,7 @@
                name="message"
                type="text"
              />
-              <div>
+              <div class="flex">
                <ButtonSecondary
                  v-tippy="{ theme: 'tooltip' }"
                  :title="
@@ -121,7 +121,7 @@
                  "
                />
              </div>
-              <div>
+              <div class="flex">
                <ButtonSecondary
                  v-tippy="{ theme: 'tooltip' }"
                  :title="$t('delete')"
--- a/components/smart/ConfirmModal.vue
+++ b/components/smart/ConfirmModal.vue
@@ -2,9 +2,7 @@
  <SmartModal v-if="show" @close="hideModal">
    <template #header>
      <h3 class="heading">{{ $t("modal.confirm") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
    </template>
    <template #body>
      <div class="flex flex-col px-2">
--- a/components/smart/Modal.vue
+++ b/components/smart/Modal.vue
@@ -9,7 +9,7 @@
      >
        <transition name="fade" appear>
          <div
-            class="bg-primaryDark opacity-100 inset-0 transition fixed"
+            class="bg-primaryDark opacity-90 inset-0 transition fixed"
            @touchstart="!dialog ? close() : null"
            @touchend="!dialog ? close() : null"
            @mouseup="!dialog ? close() : null"
@@ -17,7 +17,7 @@
          ></div>
        </transition>
        <span
-          class="hidden sm:inline-block sm:align-middle sm:h-screen"
+          class="hidden sm:h-screen sm:inline-block sm:align-middle"
          aria-hidden="true"
          >&#8203;</span
        >
@@ -44,7 +44,7 @@
              inline-block
              align-bottom
              overflow-hidden
-              sm:align-middle sm:max-w-md
+              sm:max-w-md sm:align-middle
            "
          >
            <div class="flex pl-2 items-center justify-between">
--- a/components/teams/Edit.vue
+++ b/components/teams/Edit.vue
@@ -21,13 +21,11 @@
          <label for="memberList" class="font-semibold px-4 pt-4 pb-4">
            {{ $t("team.members") }}
          </label>
-          <div>
-            <ButtonSecondary
-              icon="add"
-              :label="$t('add.new')"
-              @click.native="addTeamMember"
-            />
-          </div>
+          <ButtonSecondary
+            icon="add"
+            :label="$t('add.new')"
+            @click.native="addTeamMember"
+          />
        </div>
        <div class="border-divider border rounded">
          <div
@@ -106,16 +104,14 @@
                />
              </tippy>
            </span>
-            <div>
-              <ButtonSecondary
-                id="member"
-                v-tippy="{ theme: 'tooltip' }"
-                :title="$t('delete')"
-                icon="delete"
-                color="red"
-                @click.native="removeExistingTeamMember(member.user.uid)"
-              />
-            </div>
+            <ButtonSecondary
+              id="member"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('delete')"
+              icon="delete"
+              color="red"
+              @click.native="removeExistingTeamMember(member.user.uid)"
+            />
          </div>
          <div
            v-for="(member, index) in newMembers"
@@ -193,16 +189,14 @@
                />
              </tippy>
            </span>
-            <div>
-              <ButtonSecondary
-                id="member"
-                v-tippy="{ theme: 'tooltip' }"
-                :title="$t('delete')"
-                icon="delete"
-                color="red"
-                @click.native="removeTeamMember(index)"
-              />
-            </div>
+            <ButtonSecondary
+              id="member"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('delete')"
+              icon="delete"
+              color="red"
+              @click.native="removeTeamMember(index)"
+            />
          </div>
        </div>
      </div>
--- a/components/teams/index.vue
+++ b/components/teams/index.vue
@@ -17,9 +17,10 @@
      <p v-if="$apollo.queries.myTeams.loading">
        {{ $t("loading") }}
      </p>
-      <p v-if="myTeams.length === 0">
-        <i class="material-icons">help_outline</i> {{ $t("team.create_new") }}
-      </p>
+      <div v-if="myTeams.length === 0" class="flex items-center">
+        <i class="mr-4 material-icons">help_outline</i>
+        {{ $t("empty.teams") }}
+      </div>
      <div
        v-else
        class="
--- a/helpers/fb/analytics.ts
+++ b/helpers/fb/analytics.ts
@@ -12,7 +12,6 @@ let analytics: firebase.analytics.Analytics | null
 type SettingsCustomDimensions = {
  usesProxy: boolean
  usesExtension: boolean
-  usesScrollInto: boolean
  syncCollections: boolean
  syncEnvironments: boolean
  syncHistory: boolean
@@ -61,7 +60,6 @@ function initSettingsListeners() {
    const conf: SettingsCustomDimensions = {
      usesProxy: settings.PROXY_ENABLED,
      usesExtension: settings.EXTENSIONS_ENABLED,
-      usesScrollInto: settings.SCROLL_INTO_ENABLED,
      syncCollections: settings.syncCollections,
      syncEnvironments: settings.syncEnvironments,
      syncHistory: settings.syncHistory,
--- a/lang/en-US.json
+++ b/lang/en-US.json
@@ -36,7 +36,8 @@
    "history": "History is empty",
    "headers": "Headers are empty",
    "tests": "Tests are empty",
-    "schema": "Connect to a GraphQL endpoint"
+    "schema": "Connect to a GraphQL endpoint",
+    "teams": "Teams are empty"
  },
  "count": {
    "message": "Message {count}",
@@ -393,7 +394,6 @@
  "login_success": "Successfully logged in",
  "logout": "Logout",
  "account": "Account",
-  "scrollInto_use_toggle": "Auto scroll",
  "sync": "Sync",
  "syncHistory": "History",
  "syncCollections": "Collections",
--- a/newstore/settings.ts
+++ b/newstore/settings.ts
@@ -46,7 +46,6 @@ export type SettingsType = {
  syncHistory: boolean
  syncEnvironments: boolean

-  SCROLL_INTO_ENABLED: boolean
  PROXY_ENABLED: boolean
  PROXY_URL: string
  PROXY_KEY: string
@@ -73,7 +72,6 @@ export const defaultSettings: SettingsType = {
  syncHistory: true,
  syncEnvironments: true,

-  SCROLL_INTO_ENABLED: true,
  PROXY_ENABLED: false,
  PROXY_URL: "https://proxy.hoppscotch.io/",
  PROXY_KEY: "",
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -242,7 +242,7 @@
                        })
                      "
                    />
-                    <div>
+                    <span>
                      <ButtonSecondary
                        v-tippy="{ theme: 'tooltip' }"
                        :title="
@@ -269,8 +269,8 @@
                          })
                        "
                      />
-                    </div>
-                    <div>
+                    </span>
+                    <span>
                      <ButtonSecondary
                        v-tippy="{ theme: 'tooltip' }"
                        :title="$t('delete')"
@@ -278,7 +278,7 @@
                        color="red"
                        @click.native="removeRequestHeader(index)"
                      />
-                    </div>
+                    </span>
                  </div>
                  <div
                    v-if="headers.length === 0"
@@ -637,7 +637,7 @@ import * as gql from "graphql"
 import { commonHeaders } from "~/helpers/headers"
 import { getPlatformSpecialKey } from "~/helpers/platformutils"
 import { getCurrentStrategyID, sendNetworkRequest } from "~/helpers/network"
-import { getSettingSubject, useSetting } from "~/newstore/settings"
+import { useSetting } from "~/newstore/settings"
 import { addGraphqlHistoryEntry } from "~/newstore/history"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
@@ -676,11 +676,6 @@ export default defineComponent({
      showSaveRequestModal: false,
    }
  },
-  subscriptions() {
-    return {
-      SCROLL_INTO_ENABLED: getSettingSubject("SCROLL_INTO_ENABLED"),
-    }
-  },
  head() {
    return {
      title: `GraphQL • Hoppscotch`,
@@ -898,7 +893,7 @@ export default defineComponent({
      const rootTypeName = this.resolveRootType(type).name

      const target = document.getElementById(`type_${rootTypeName}`)
-      if (target && this.SCROLL_INTO_ENABLED) {
+      if (target) {
        this.$refs.gqlTabs.$el
          .querySelector(".gqlTabs")
          .scrollTo({ top: target.offsetTop, behavior: "smooth" })
@@ -943,7 +938,6 @@ export default defineComponent({
      this.$nuxt.$loading.start()

      this.response = this.$t("loading")
-      if (this.SCROLL_INTO_ENABLED) this.scrollInto("response")

      try {
        const headers = {}
@@ -1176,7 +1170,6 @@ export default defineComponent({
      this.$nuxt.$loading.start()

      this.schema = this.$t("loading")
-      if (this.SCROLL_INTO_ENABLED) this.scrollInto("schema")

      try {
        const query = JSON.stringify({
@@ -1308,11 +1301,6 @@ export default defineComponent({
        },
      })
    },
-    scrollInto(view) {
-      this.$refs[view].$el.scrollIntoView({
-        behavior: "smooth",
-      })
-    },
    updateQuery(updatedQuery) {
      this.gqlQueryString = updatedQuery
    },
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -190,7 +190,6 @@ export default defineComponent({
        null
      ),
      RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
-      SCROLL_INTO_ENABLED: useSetting("SCROLL_INTO_ENABLED"),
      PROXY_ENABLED: useSetting("PROXY_ENABLED"),
      URL_EXCLUDES: useSetting("URL_EXCLUDES"),
      EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -164,14 +164,6 @@
              >.
            </div>
            <div class="space-y-4 mt-4">
-              <div class="flex items-center">
-                <SmartToggle
-                  :on="SCROLL_INTO_ENABLED"
-                  @change="toggleSetting('SCROLL_INTO_ENABLED')"
-                >
-                  {{ $t("scrollInto_use_toggle") }}
-                </SmartToggle>
-              </div>
              <div class="flex items-center">
                <SmartToggle
                  :on="EXPERIMENTAL_URL_BAR_ENABLED"
@@ -382,7 +374,6 @@ type SettingsType = typeof defaultSettings
 export default defineComponent({
  setup() {
    return {
-      SCROLL_INTO_ENABLED: useSetting("SCROLL_INTO_ENABLED"),
      PROXY_ENABLED: useSetting("PROXY_ENABLED"),
      PROXY_URL: useSetting("PROXY_URL"),
      PROXY_KEY: useSetting("PROXY_KEY"),