refactor: remove absolute classes

2021-08-17 12:56:36 +05:30
parent 3534e133af
commit 956ca44ef0
55 changed files with 269 additions and 404 deletions
--- a/components/app/Footer.vue
+++ b/components/app/Footer.vue
@@ -16,7 +16,8 @@
          } ${$t('layout.zen_mode')}`"
          :icon="ZEN_MODE ? 'fullscreen_exit' : 'fullscreen'"
          :class="{
-            '!text-accent focus:text-accent hover:text-accent': ZEN_MODE,
+            '!text-accent !focus-visible:text-accentDark !hover:text-accentDark':
+              ZEN_MODE,
          }"
          @click.native="ZEN_MODE = !ZEN_MODE"
        />
--- a/components/app/Search.vue
+++ b/components/app/Search.vue
@@ -16,8 +16,6 @@
          px-4
          pt-2
          pb-6
-          truncate
-          focus:outline-none
        "
      />
      <div
--- a/components/app/Share.vue
+++ b/components/app/Share.vue
@@ -104,11 +104,11 @@ export default {
  @apply rounded;
  @apply flex-col flex;
  @apply p-4;
-  @apply transition;
  @apply items-center;
  @apply justify-center;
  @apply hover:(bg-primaryLight text-secondaryDark);
-  @apply focus:(border-divider outline-none);
+  @apply focus:outline-none;
+  @apply focus-visible:border-divider;

  svg {
    @apply opacity-80;
--- a/components/app/Shortcuts.vue
+++ b/components/app/Shortcuts.vue
@@ -36,10 +36,7 @@
              py-2
              pr-2
              pl-8
-              transition
-              truncate
-              focus:(border-divider
-              outline-none)
+              focus-visible:border-divider
            "
            :placeholder="$t('search')"
          />
--- a/components/app/Sidenav.vue
+++ b/components/app/Sidenav.vue
@@ -123,9 +123,8 @@ export default defineComponent({
  @apply flex flex-col flex-1;
  @apply items-center;
  @apply justify-center;
-  @apply transition;
  @apply hover:(bg-primaryDark text-secondaryDark);
-  @apply focus:text-secondaryDark;
+  @apply focus-visible:text-secondaryDark;

  &::after {
    @apply absolute;
--- a/components/button/Primary.vue
+++ b/components/button/Primary.vue
@@ -6,7 +6,6 @@
    class="
      font-bold
      py-2
-      transition
      inline-flex
      items-center
      justify-center
@@ -15,8 +14,8 @@
    "
    :class="[
      color
-        ? `text-${color}-800 bg-${color}-200 hover:(text-${color}-900 bg-${color}-300) focus:(text-${color}-900 bg-${color}-300)`
-        : `text-accentContrast bg-accent hover:bg-accentDark focus:bg-accentDark`,
+        ? `text-${color}-800 bg-${color}-200 hover:(text-${color}-900 bg-${color}-300) focus-visible:(text-${color}-900 bg-${color}-300)`
+        : `text-accentContrast bg-accent hover:bg-accentDark focus-visible:bg-accentDark`,
      label ? 'px-4' : 'px-2',
      rounded ? 'rounded-full' : 'rounded',
      { 'opacity-75 cursor-not-allowed': disabled },
@@ -28,7 +27,7 @@
          gradient,
      },
      {
-        'border border-accent hover:border-accentDark focus:border-accentDark':
+        'border border-accent hover:border-accentDark focus-visible:border-accentDark':
          outline,
      },
    ]"
--- a/components/button/Secondary.vue
+++ b/components/button/Secondary.vue
@@ -6,7 +6,6 @@
    class="
      font-medium
      py-2
-      transition
      inline-flex
      items-center
      justify-center
@@ -18,14 +17,14 @@
    :class="[
      color
        ? `text-${color}-500 hover:(text-${color}-600 text-${color}-600)`
-        : 'text-secondary hover:text-secondaryDark focus:text-secondaryDark',
+        : 'text-secondary hover:text-secondaryDark focus-visible:text-secondaryDark',
      label ? 'rounded px-4' : 'px-2',
      { 'rounded-full': rounded },
      { 'opacity-75 cursor-not-allowed': disabled },
      { 'flex-row-reverse': reverse },
      { 'px-6 py-4 text-lg': large },
      {
-        'border border-divider hover:border-dividerDark focus:border-dividerDark':
+        'border border-divider hover:border-dividerDark focus-visible:border-dividerDark':
          outline,
      },
    ]"
--- a/components/collections/ChooseType.vue
+++ b/components/collections/ChooseType.vue
@@ -25,7 +25,6 @@
                py-2
                px-4
                appearance-none
-                focus:outline-none
              "
              @change="updateSelectedTeam(myTeams[$event.target.value])"
            >
--- a/components/collections/graphql/Collection.vue
+++ b/components/collections/graphql/Collection.vue
@@ -77,7 +77,7 @@
              "
            />
            <SmartItem
-              icon="delete"
+              icon="remove_circle_outline"
              color="red"
              :label="$t('delete')"
              @click.native="
@@ -186,7 +186,7 @@ export default Vue.extend({
      )
    },
    getCollectionIcon() {
-      if (this.isSelected) return "check_circle"
+      if (this.isSelected) return "check_circle_outline"
      else if (!this.showChildren && !this.isFiltered) return "arrow_right"
      else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
      else return "folder"
--- a/components/collections/graphql/Folder.vue
+++ b/components/collections/graphql/Folder.vue
@@ -73,7 +73,7 @@
              "
            />
            <SmartItem
-              icon="delete"
+              icon="remove_circle_outline"
              color="red"
              :label="$t('delete')"
              @click.native="
@@ -184,7 +184,7 @@ export default Vue.extend({
      )
    },
    getCollectionIcon() {
-      if (this.isSelected) return "check_circle"
+      if (this.isSelected) return "check_circle_outline"
      else if (!this.showChildren && !this.isFiltered) return "arrow_right"
      else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
      else return "folder"
--- a/components/collections/graphql/Request.vue
+++ b/components/collections/graphql/Request.vue
@@ -21,7 +21,7 @@
        @click="!doc ? selectRequest() : {}"
      >
        <i class="material-icons" :class="{ 'text-green-500': isSelected }">
-          {{ isSelected ? "check_circle" : "description" }}
+          {{ isSelected ? "check_circle_outline" : "description" }}
        </i>
      </span>
      <span
@@ -75,7 +75,7 @@
              "
            />
            <SmartItem
-              icon="delete"
+              icon="remove_circle_outline"
              color="red"
              :label="$t('delete')"
              @click.native="
--- a/components/collections/graphql/index.vue
+++ b/components/collections/graphql/index.vue
@@ -20,8 +20,6 @@
            py-2
            pr-2
            pl-9
-            truncate
-            focus:outline-none
          "
        />
      </div>
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -20,8 +20,6 @@
            py-2
            pr-2
            pl-9
-            truncate
-            focus:outline-none
          "
        />
      </div>
--- a/components/collections/my/Collection.vue
+++ b/components/collections/my/Collection.vue
@@ -36,7 +36,7 @@
          v-if="doc && !selected"
          v-tippy="{ theme: 'tooltip' }"
          :title="$t('import.title')"
-          icon="check_box_outline_blank"
+          icon="radio_button_unchecked"
          color="green"
          @click.native="$emit('select-collection')"
        />
@@ -44,7 +44,7 @@
          v-if="doc && selected"
          v-tippy="{ theme: 'tooltip' }"
          :title="$t('delete')"
-          icon="check_box"
+          icon="check_circle_outline"
          color="green"
          @click.native="$emit('unselect-collection')"
        />
@@ -96,7 +96,7 @@
              "
            />
            <SmartItem
-              icon="delete"
+              icon="remove_circle_outline"
              color="red"
              :label="$t('delete')"
              @click.native="
@@ -211,7 +211,7 @@ export default {
      )
    },
    getCollectionIcon() {
-      if (this.isSelected) return "check_circle"
+      if (this.isSelected) return "check_circle_outline"
      else if (!this.showChildren && !this.isFiltered) return "arrow_right"
      else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
      else return "folder"
--- a/components/collections/my/Folder.vue
+++ b/components/collections/my/Folder.vue
@@ -78,7 +78,7 @@
              "
            />
            <SmartItem
-              icon="delete"
+              icon="remove_circle_outline"
              color="red"
              :label="$t('delete')"
              @click.native="
@@ -198,7 +198,7 @@ export default {
      )
    },
    getCollectionIcon() {
-      if (this.isSelected) return "check_circle"
+      if (this.isSelected) return "check_circle_outline"
      else if (!this.showChildren && !this.isFiltered) return "arrow_right"
      else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
      else return "folder"
--- a/components/collections/my/Request.vue
+++ b/components/collections/my/Request.vue
@@ -26,7 +26,7 @@
          class="material-icons"
          :class="{ 'text-green-500': isSelected }"
        >
-          check_circle
+          check_circle_outline
        </i>
        <span v-else>
          {{ request.method }}
@@ -86,7 +86,7 @@
              "
            />
            <SmartItem
-              icon="delete"
+              icon="remove_circle_outline"
              color="red"
              :label="$t('delete')"
              @click.native="
--- a/components/collections/teams/Collection.vue
+++ b/components/collections/teams/Collection.vue
@@ -28,7 +28,7 @@
          v-if="doc && !selected"
          v-tippy="{ theme: 'tooltip' }"
          :title="$t('import.title')"
-          icon="check_box_outline_blank"
+          icon="radio_button_unchecked"
          color="green"
          @click.native="$emit('select-collection')"
        />
@@ -36,7 +36,7 @@
          v-if="doc && selected"
          v-tippy="{ theme: 'tooltip' }"
          :title="$t('delete')"
-          icon="check_box"
+          icon="check_circle_outline"
          color="green"
          @click.native="$emit('unselect-collection')"
        />
@@ -92,7 +92,7 @@
            />
            <SmartItem
              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-              icon="delete"
+              icon="remove_circle_outline"
              color="red"
              :label="$t('delete')"
              @click.native="
@@ -204,7 +204,7 @@ export default {
      )
    },
    getCollectionIcon() {
-      if (this.isSelected) return "check_circle"
+      if (this.isSelected) return "check_circle_outline"
      else if (!this.showChildren && !this.isFiltered) return "arrow_right"
      else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
      else return "folder"
--- a/components/collections/teams/Folder.vue
+++ b/components/collections/teams/Folder.vue
@@ -75,7 +75,7 @@
            />
            <SmartItem
              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-              icon="delete"
+              icon="remove_circle_outline"
              color="red"
              :label="$t('delete')"
              @click.native="
@@ -188,7 +188,7 @@ export default {
      )
    },
    getCollectionIcon() {
-      if (this.isSelected) return "check_circle"
+      if (this.isSelected) return "check_circle_outline"
      else if (!this.showChildren && !this.isFiltered) return "arrow_right"
      else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
      else return "folder"
--- a/components/collections/teams/Request.vue
+++ b/components/collections/teams/Request.vue
@@ -19,7 +19,7 @@
          class="material-icons"
          :class="{ 'text-green-500': isSelected }"
        >
-          check_circle
+          check_circle_outline
        </i>
        <span v-else>
          {{ request.method }}
@@ -79,7 +79,7 @@
              "
            />
            <SmartItem
-              icon="delete"
+              icon="remove_circle_outline"
              color="red"
              :label="$t('delete')"
              @click.native="
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -45,27 +45,13 @@
          >
            <input
              v-model="variable.key"
-              class="
-                bg-primaryLight
-                flex flex-1
-                py-2
-                px-4
-                truncate
-                focus:outline-none
-              "
+              class="bg-primaryLight flex flex-1 py-2 px-4"
              :placeholder="$t('count.variable', { count: index + 1 })"
              :name="'param' + index"
            />
            <input
              v-model="variable.value"
-              class="
-                bg-primaryLight
-                flex flex-1
-                py-2
-                px-4
-                truncate
-                focus:outline-none
-              "
+              class="bg-primaryLight flex flex-1 py-2 px-4"
              :placeholder="$t('count.value', { count: index + 1 })"
              :name="'value' + index"
            />
@@ -74,7 +60,7 @@
                id="variable"
                v-tippy="{ theme: 'tooltip' }"
                :title="$t('delete')"
-                icon="delete"
+                icon="remove_circle_outline"
                color="red"
                @click.native="removeEnvironmentVariable(index)"
              />
--- a/components/environments/Environment.vue
+++ b/components/environments/Environment.vue
@@ -40,7 +40,7 @@
          "
        />
        <SmartItem
-          icon="delete"
+          icon="remove_circle_outline"
          color="red"
          :label="$t('delete')"
          @click.native="
--- a/components/environments/index.vue
+++ b/components/environments/index.vue
@@ -22,7 +22,6 @@
            py-2
            px-4
            appearance-none
-            focus:outline-none
          "
        >
          <option :value="-1">{{ $t("environment.no_environment") }}</option>
--- a/components/graphql/Request.vue
+++ b/components/graphql/Request.vue
@@ -15,10 +15,7 @@
          w-full
          py-2
          px-4
-          transition
-          truncate
-          focus:(border-accent
-          outline-none)
+          focus-visible:border-accent
        "
        :placeholder="$t('url')"
        @keyup.enter="onConnectClick"
--- a/components/graphql/RequestOptions.vue
+++ b/components/graphql/RequestOptions.vue
@@ -163,7 +163,7 @@
                bg-primaryLight
                flex
                flex-1
-          py-1
+                py-1
                px-4
                truncate
                focus:outline-none
@@ -177,14 +177,7 @@
              "
            />
            <input
-              class="
-                bg-primaryLight
-                flex flex-1
-                py-2
-                px-4
-                truncate
-                focus:outline-none
-              "
+              class="bg-primaryLight flex flex-1 py-2 px-4"
              :placeholder="$t('count.value', { count: index + 1 })"
              :name="`value ${index}`"
              :value="header.value"
@@ -210,9 +203,9 @@
                :icon="
                  header.hasOwnProperty('active')
                    ? header.active
-                      ? 'check_box'
-                      : 'check_box_outline_blank'
-                    : 'check_box'
+                      ? 'check_circle_outline'
+                      : 'radio_button_unchecked'
+                    : 'check_circle_outline'
                "
                color="green"
                @click.native="
@@ -228,7 +221,7 @@
              <ButtonSecondary
                v-tippy="{ theme: 'tooltip' }"
                :title="$t('delete')"
-                icon="delete"
+                icon="remove_circle_outline"
                color="red"
                @click.native="removeRequestHeader(index)"
              />
--- a/components/graphql/Sidebar.vue
+++ b/components/graphql/Sidebar.vue
@@ -17,16 +17,7 @@
                v-model="graphqlFieldsFilterText"
                type="search"
                :placeholder="$t('search')"
-                class="
-                  bg-primaryLight
-                  flex
-                  w-full
-                  py-2
-                  pr-2
-                  pl-9
-                  truncate
-                  focus:outline-none
-                "
+                class="bg-primaryLight flex w-full py-2 pr-2 pl-9"
              />
            </div>
            <div class="flex">
--- a/components/history/graphql/Card.vue
+++ b/components/history/graphql/Card.vue
@@ -21,7 +21,7 @@
      </span>
      <ButtonSecondary
        v-tippy="{ theme: 'tooltip' }"
-        icon="delete"
+        icon="remove_circle_outline"
        color="red"
        :title="$t('delete')"
        class="hidden group-hover:inline-flex"
--- a/components/history/index.vue
+++ b/components/history/index.vue
@@ -14,16 +14,7 @@
        <input
          v-model="filterText"
          type="search"
-          class="
-            bg-primaryLight
-            flex
-            w-full
-            py-2
-            pr-2
-            pl-9
-            truncate
-            focus:outline-none
-          "
+          class="bg-primaryLight flex w-full py-2 pr-2 pl-9"
          :placeholder="$t('search')"
        />
      </div>
--- a/components/history/rest/Card.vue
+++ b/components/history/rest/Card.vue
@@ -29,7 +29,7 @@
    </span>
    <ButtonSecondary
      v-tippy="{ theme: 'tooltip' }"
-      icon="delete"
+      icon="remove_circle_outline"
      color="red"
      :title="$t('delete')"
      class="group-hover:inline-flex hidden"
--- a/components/http/Authorization.vue
+++ b/components/http/Authorization.vue
@@ -25,14 +25,12 @@
          arrow
        >
          <template #trigger>
-            <div class="flex">
-              <span class="select-wrapper">
-                <ButtonSecondary
-                  class="rounded-none ml-2 pr-8"
-                  :label="authName"
-                />
-              </span>
-            </div>
+            <span class="select-wrapper">
+              <ButtonSecondary
+                class="rounded-none ml-2 pr-8"
+                :label="authName"
+              />
+            </span>
          </template>
          <SmartItem
            label="None"
--- a/components/http/Body.vue
+++ b/components/http/Body.vue
@@ -22,14 +22,12 @@
          arrow
        >
          <template #trigger>
-            <div class="flex">
-              <span class="select-wrapper">
-                <ButtonSecondary
-                  :label="contentType"
-                  class="rounded-none ml-2 pr-8"
-                />
-              </span>
-            </div>
+            <span class="select-wrapper">
+              <ButtonSecondary
+                :label="contentType"
+                class="rounded-none ml-2 pr-8"
+              />
+            </span>
          </template>
          <SmartItem
            v-for="(contentTypeItem, index) in validContentTypes"
--- a/components/http/BodyParameters.vue
+++ b/components/http/BodyParameters.vue
@@ -53,7 +53,6 @@
          flex-1
          py-1
          px-4
-          focus:outline-none
        "
        @change="
          updateBodyParam(index, {
@@ -66,14 +65,7 @@
      />
      <input
        v-else
-        class="
-          bg-primaryLight
-          flex flex-1
-          py-2
-          px-4
-          truncate
-          focus:outline-none
-        "
+        class="bg-primaryLight flex flex-1 py-2 px-4"
        :placeholder="$t('count.parameter', { count: index + 1 })"
        :name="'param' + index"
        :value="param.key"
@@ -109,7 +101,6 @@
          flex-1
          py-1
          px-4
-          focus:outline-none
        "
          @change="
            updateBodyParam(index, {
@@ -122,14 +113,7 @@
        />
        <input
          v-else
-          class="
-            bg-primaryLight
-            flex flex-1
-            py-2
-            px-4
-            truncate
-            focus:outline-none
-          "
+          class="bg-primaryLight flex flex-1 py-2 px-4"
          :placeholder="$t('count.value', { count: index + 1 })"
          :name="'value' + index"
          :value="param.value"
@@ -173,9 +157,9 @@
          :icon="
            param.hasOwnProperty('active')
              ? param.active
-                ? 'check_box'
-                : 'check_box_outline_blank'
-              : 'check_box'
+                ? 'check_circle_outline'
+                : 'radio_button_unchecked'
+              : 'check_circle_outline'
          "
          color="green"
          @click.native="
@@ -192,7 +176,7 @@
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
          :title="$t('delete')"
-          icon="delete"
+          icon="remove_circle_outline"
          color="red"
          @click.native="deleteBodyParam(index)"
        />
--- a/components/http/Headers.vue
+++ b/components/http/Headers.vue
@@ -56,7 +56,6 @@
          py-1
          px-4
          truncate
-          focus:outline-none
        "
        :class="{ '!flex flex-1': EXPERIMENTAL_URL_BAR_ENABLED }"
        @input="
@@ -77,7 +76,6 @@
          flex-1
          py-1
          px-4
-          focus:outline-none
        "
        @change="
          updateHeader(index, {
@@ -89,14 +87,7 @@
      />
      <input
        v-else
-        class="
-          bg-primaryLight
-          flex flex-1
-          py-2
-          px-4
-          truncate
-          focus:outline-none
-        "
+        class="bg-primaryLight flex flex-1 py-2 px-4"
        :placeholder="$t('count.value', { count: index + 1 })"
        :name="'value' + index"
        :value="header.value"
@@ -121,9 +112,9 @@
          :icon="
            header.hasOwnProperty('active')
              ? header.active
-                ? 'check_box'
-                : 'check_box_outline_blank'
-              : 'check_box'
+                ? 'check_circle_outline'
+                : 'radio_button_unchecked'
+              : 'check_circle_outline'
          "
          color="green"
          @click.native="
@@ -139,7 +130,7 @@
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
          :title="$t('delete')"
-          icon="delete"
+          icon="remove_circle_outline"
          color="red"
          @click.native="deleteHeader(index)"
        />
--- a/components/http/Parameters.vue
+++ b/components/http/Parameters.vue
@@ -53,7 +53,6 @@
          flex-1
          py-1
          px-4
-          focus:outline-none
        "
        @change="
          updateParam(index, {
@@ -65,14 +64,7 @@
      />
      <input
        v-else
-        class="
-          bg-primaryLight
-          flex flex-1
-          py-2
-          px-4
-          truncate
-          focus:outline-none
-        "
+        class="bg-primaryLight flex flex-1 py-2 px-4"
        :placeholder="$t('count.parameter', { count: index + 1 })"
        :name="'param' + index"
        :value="param.key"
@@ -95,7 +87,6 @@
          flex-1
          py-1
          px-4
-          focus:outline-none
        "
        @change="
          updateParam(index, {
@@ -107,14 +98,7 @@
      />
      <input
        v-else
-        class="
-          bg-primaryLight
-          flex flex-1
-          py-2
-          px-4
-          truncate
-          focus:outline-none
-        "
+        class="bg-primaryLight flex flex-1 py-2 px-4"
        :placeholder="$t('count.value', { count: index + 1 })"
        :name="'value' + index"
        :value="param.value"
@@ -139,9 +123,9 @@
          :icon="
            param.hasOwnProperty('active')
              ? param.active
-                ? 'check_box'
-                : 'check_box_outline_blank'
-              : 'check_box'
+                ? 'check_circle_outline'
+                : 'radio_button_unchecked'
+              : 'check_circle_outline'
          "
          color="green"
          @click.native="
@@ -157,7 +141,7 @@
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
          :title="$t('delete')"
-          icon="delete"
+          icon="remove_circle_outline"
          color="red"
          @click.native="deleteParam(index)"
        />
--- a/components/http/PreRequestScript.vue
+++ b/components/http/PreRequestScript.vue
@@ -16,13 +16,21 @@
      <label class="font-semibold text-secondaryLight">
        {{ $t("javascript_code") }}
      </label>
-      <ButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        to="https://github.com/hoppscotch/hoppscotch/wiki/Pre-Request-Scripts"
-        blank
-        :title="$t('wiki')"
-        icon="help_outline"
-      />
+      <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          to="https://github.com/hoppscotch/hoppscotch/wiki/Pre-Request-Scripts"
+          blank
+          :title="$t('wiki')"
+          icon="help_outline"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('clear')"
+          icon="clear_all"
+          @click.native="clearContent"
+        />
+      </div>
    </div>
    <div class="border-b border-dividerLight flex">
      <div class="border-r border-dividerLight w-2/3">
@@ -63,10 +71,11 @@
          {{ $t("preRequest.snippets") }}
        </h4>
        <div class="flex flex-col pt-4">
-          <SmartItem
+          <TabSecondary
            v-for="(snippet, index) in snippets"
            :key="`snippet-${index}`"
            :label="snippet.name"
+            active
            @click.native="useSnippet(snippet.script)"
          />
        </div>
@@ -82,19 +91,22 @@ import preRequestScriptSnippets from "~/helpers/preRequestScriptSnippets"

 export default defineComponent({
  setup() {
-    return {
-      preRequestScript: usePreRequestScript(),
+    const preRequestScript = usePreRequestScript()
+
+    const useSnippet = (script: string) => {
+      preRequestScript.value += script
    }
-  },
-  data() {
+
+    const clearContent = () => {
+      preRequestScript.value = ""
+    }
+
    return {
+      preRequestScript,
      snippets: preRequestScriptSnippets,
+      useSnippet,
+      clearContent,
    }
  },
-  methods: {
-    useSnippet(script: string) {
-      this.preRequestScript += script
-    },
-  },
 })
 </script>
--- a/components/http/Request.vue
+++ b/components/http/Request.vue
@@ -1,15 +1,15 @@
 <template>
  <div class="bg-primary flex p-4 top-0 z-10 sticky">
    <div class="relative inline-flex">
-      <span class="select-wrapper">
-        <tippy
-          ref="methodOptions"
-          interactive
-          trigger="click"
-          theme="popover"
-          arrow
-        >
-          <template #trigger>
+      <tippy
+        ref="methodOptions"
+        interactive
+        trigger="click"
+        theme="popover"
+        arrow
+      >
+        <template #trigger>
+          <span class="select-wrapper">
            <input
              id="method"
              class="
@@ -22,25 +22,23 @@
                text-secondaryDark
                py-2
                px-4
-                transition
                w-28
-                truncate
                hover:border-dividerDark
-                focus:border-accent focus:outline-none
+                focus-visible:border-accent
              "
              :value="newMethod"
              :readonly="!isCustomMethod"
              @input="onSelectMethod($event.target.value)"
            />
-          </template>
-          <SmartItem
-            v-for="(method, index) in methods"
-            :key="`method-${index}`"
-            :label="method"
-            @click.native="onSelectMethod(method)"
-          />
-        </tippy>
-      </span>
+          </span>
+        </template>
+        <SmartItem
+          v-for="(method, index) in methods"
+          :key="`method-${index}`"
+          :label="method"
+          @click.native="onSelectMethod(method)"
+        />
+      </tippy>
    </div>
    <div class="flex-1 inline-flex">
      <SmartEnvInput
@@ -55,10 +53,8 @@
          text-secondaryDark
          py-1
          px-4
-          transition
-          truncate
          hover:border-dividerDark
-          focus:outline-none focus:border-accent
+          focus-visible:border-accent
        "
        @enter="newSendRequest()"
      />
@@ -74,9 +70,7 @@
          text-secondaryDark
          py-2
          px-4
-          transition
-          truncate
-          focus:border-accent focus:outline-none
+          focus-visible:border-accent
        "
        name="url"
        type="text"
--- a/components/http/Tests.vue
+++ b/components/http/Tests.vue
@@ -16,13 +16,21 @@
      <label class="font-semibold text-secondaryLight">
        {{ $t("javascript_code") }}
      </label>
-      <ButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        to="https://github.com/hoppscotch/hoppscotch/wiki/Post-Request-Tests"
-        blank
-        :title="$t('wiki')"
-        icon="help_outline"
-      />
+      <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          to="https://github.com/hoppscotch/hoppscotch/wiki/Post-Request-Tests"
+          blank
+          :title="$t('wiki')"
+          icon="help_outline"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('clear')"
+          icon="clear_all"
+          @click.native="clearContent"
+        />
+      </div>
    </div>
    <div class="border-b border-dividerLight flex">
      <div class="border-r border-dividerLight w-2/3">
@@ -63,10 +71,11 @@
          {{ $t("test.snippets") }}
        </h4>
        <div class="flex flex-col pt-4">
-          <SmartItem
+          <TabSecondary
            v-for="(snippet, index) in snippets"
            :key="`snippet-${index}`"
            :label="snippet.name"
+            active
            @click.native="useSnippet(snippet.script)"
          />
        </div>
@@ -82,19 +91,22 @@ import testSnippets from "~/helpers/testSnippets"

 export default defineComponent({
  setup() {
-    return {
-      testScript: useTestScript(),
+    const testScript = useTestScript()
+
+    const useSnippet = (script: string) => {
+      testScript.value += script
    }
-  },
-  data() {
+
+    const clearContent = () => {
+      testScript.value = ""
+    }
+
    return {
+      testScript,
      snippets: testSnippets,
+      useSnippet,
+      clearContent,
    }
  },
-  methods: {
-    useSnippet(script: string) {
-      this.testScript += script
-    },
-  },
 })
 </script>
--- a/components/http/TokenList.vue
+++ b/components/http/TokenList.vue
@@ -42,7 +42,7 @@
            <ButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
              :title="$t('delete')"
-              icon="delete"
+              icon="remove_circle_outline"
              color="red"
              @click.native="removeOAuthToken(index)"
            />
--- a/components/landing/Footer.vue
+++ b/components/landing/Footer.vue
@@ -159,6 +159,6 @@ export default {
  @apply px-2 py-1;
  @apply -mx-2 -my-1;
  @apply hover:text-secondaryDark;
-  @apply focus:text-secondaryDark;
+  @apply focus-visible:text-secondaryDark;
 }
 </style>
--- a/components/realtime/Mqtt.vue
+++ b/components/realtime/Mqtt.vue
@@ -20,10 +20,7 @@
                    w-full
                    py-2
                    px-4
-                    transition
-                    truncate
-                    focus:(border-accent
-                    outline-none)
+                    focus-visible:border-accent
                  "
                  :placeholder="$t('url')"
                />
--- a/components/realtime/Socketio.vue
+++ b/components/realtime/Socketio.vue
@@ -22,10 +22,7 @@
                    w-full
                    py-2
                    px-4
-                    transition
-                    truncate
-                    focus:(border-accent
-                    outline-none)
+                    focus-visible:border-accent
                  "
                  :placeholder="$t('url')"
                  @keyup.enter="urlValid ? toggleConnection() : null"
@@ -41,10 +38,7 @@
                    w-full
                    py-2
                    px-4
-                    transition
-                    truncate
-                    focus:(border-accent
-                    outline-none)
+                    focus-visible:border-accent
                  "
                  spellcheck="false"
                />
@@ -124,7 +118,7 @@
                v-if="index + 1 !== communication.inputs.length"
                v-tippy="{ theme: 'tooltip' }"
                :title="$t('delete')"
-                icon="delete"
+                icon="remove_circle_outline"
                class="rounded-l-none"
                color="red"
                outline
--- a/components/realtime/Sse.vue
+++ b/components/realtime/Sse.vue
@@ -18,10 +18,7 @@
              w-full
              py-2
              px-4
-              transition
-              truncate
-              focus:(border-accent
-              outline-none)
+              focus-visible:border-accent
            "
            :placeholder="$t('url')"
            @keyup.enter="serverValid ? toggleSSEConnection() : null"
@@ -51,10 +48,7 @@
              w-full
              py-2
              px-4
-              transition
-              truncate
-              focus:(border-accent
-              outline-none)
+              focus-visible:border-accent
            "
            spellcheck="false"
          />
--- a/components/realtime/Websocket.vue
+++ b/components/realtime/Websocket.vue
@@ -18,10 +18,7 @@
                    w-full
                    py-2
                    px-4
-                    transition
-                    truncate
-                    focus:(border-accent
-                    outline-none)
+                    focus-visible:border-accent
                  "
                  type="url"
                  spellcheck="false"
@@ -82,14 +79,7 @@
            >
              <input
                v-model="protocol.value"
-                class="
-                  bg-primaryLight
-                  flex flex-1
-                  py-2
-                  px-4
-                  truncate
-                  focus:outline-none
-                "
+                class="bg-primaryLight flex flex-1 py-2 px-4"
                :placeholder="$t('count.protocol', { count: index + 1 })"
                name="message"
                type="text"
@@ -107,9 +97,9 @@
                  :icon="
                    protocol.hasOwnProperty('active')
                      ? protocol.active
-                        ? 'check_box'
-                        : 'check_box_outline_blank'
-                      : 'check_box'
+                        ? 'check_circle_outline'
+                        : 'radio_button_unchecked'
+                      : 'check_circle_outline'
                  "
                  color="green"
                  @click.native="
@@ -123,7 +113,7 @@
                <ButtonSecondary
                  v-tippy="{ theme: 'tooltip' }"
                  :title="$t('delete')"
-                  icon="delete"
+                  icon="remove_circle_outline"
                  color="red"
                  @click.native="deleteProtocol({ index })"
                />
--- a/components/smart/Anchor.vue
+++ b/components/smart/Anchor.vue
@@ -6,8 +6,8 @@
    class="inline-flex items-center justify-center focus:outline-none"
    :class="[
      color
-        ? `text-${color}-500 hover:text-${color}-600 focus:text-${color}-600`
-        : 'hover:text-secondaryDark focus:text-secondaryDark',
+        ? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
+        : 'hover:text-secondaryDark focus-visible:text-secondaryDark',
      { 'opacity-75 cursor-not-allowed': disabled },
      { 'flex-row-reverse': reverse },
    ]"
--- a/components/smart/ChangeLanguage.vue
+++ b/components/smart/ChangeLanguage.vue
@@ -1,8 +1,8 @@
 <template>
  <span class="inline-flex">
-    <span class="select-wrapper">
-      <tippy ref="language" interactive trigger="click" theme="popover" arrow>
-        <template #trigger>
+    <tippy ref="language" interactive trigger="click" theme="popover" arrow>
+      <template #trigger>
+        <span class="select-wrapper">
          <ButtonSecondary
            v-tippy="{ theme: 'tooltip' }"
            :title="$t('settings.choose_language')"
@@ -13,18 +13,18 @@
              $i18n.locales.find(({ code }) => code == $i18n.locale).name
            }`"
          />
-        </template>
-        <NuxtLink
-          v-for="(locale, index) in $i18n.locales.filter(
-            ({ code }) => code !== $i18n.locale
-          )"
-          :key="`locale-${index}`"
-          :to="switchLocalePath(locale.code)"
-          @click="$refs.language.tippy().hide()"
-        >
-          <SmartItem :label="locale.name" />
-        </NuxtLink>
-      </tippy>
-    </span>
+        </span>
+      </template>
+      <NuxtLink
+        v-for="(locale, index) in $i18n.locales.filter(
+          ({ code }) => code !== $i18n.locale
+        )"
+        :key="`locale-${index}`"
+        :to="switchLocalePath(locale.code)"
+        @click="$refs.language.tippy().hide()"
+      >
+        <SmartItem :label="locale.name" />
+      </NuxtLink>
+    </tippy>
  </span>
 </template>
--- a/components/smart/EnvInput.vue
+++ b/components/smart/EnvInput.vue
@@ -496,6 +496,8 @@ export default defineComponent({
  @apply overflow-x-auto;
  @apply overflow-y-hidden;
  @apply resize-none;
+  @apply focus:outline-none;
+  @apply transition;
 }

 .env-input::-webkit-scrollbar {
--- a/components/smart/FontSizePicker.vue
+++ b/components/smart/FontSizePicker.vue
@@ -1,8 +1,8 @@
 <template>
  <span class="inline-flex">
-    <span class="select-wrapper">
-      <tippy ref="fontSize" interactive trigger="click" theme="popover" arrow>
-        <template #trigger>
+    <tippy ref="fontSize" interactive trigger="click" theme="popover" arrow>
+      <template #trigger>
+        <span class="select-wrapper">
          <ButtonSecondary
            v-tippy="{ theme: 'tooltip' }"
            :title="$t('settings.change_font_size')"
@@ -11,20 +11,20 @@
            outline
            :label="getFontSizeName(fontSizes.find((size) => size == active))"
          />
-        </template>
-        <SmartItem
-          v-for="(size, index) in fontSizes"
-          :key="`size-${index}`"
-          :label="getFontSizeName(size)"
-          :info-icon="size === active ? 'done' : ''"
-          :active-info-icon="size === active"
-          @click.native="
-            setActiveFont(size)
-            $refs.fontSize.tippy().hide()
-          "
-        />
-      </tippy>
-    </span>
+        </span>
+      </template>
+      <SmartItem
+        v-for="(size, index) in fontSizes"
+        :key="`size-${index}`"
+        :label="getFontSizeName(size)"
+        :info-icon="size === active ? 'done' : ''"
+        :active-info-icon="size === active"
+        @click.native="
+          setActiveFont(size)
+          $refs.fontSize.tippy().hide()
+        "
+      />
+    </tippy>
  </span>
 </template>

--- a/components/smart/Item.vue
+++ b/components/smart/Item.vue
@@ -6,16 +6,14 @@
    class="
      rounded
      font-medium
+      flex-shrink-0
      py-2
      px-4
-      transition
      inline-flex
      items-center
-      hover:(bg-primaryDark
-      text-secondaryDark)
-      focus:(bg-primaryDark
-      outline-none
-      text-secondaryDark)
+      hover:bg-primaryDark hover:text-secondaryDark
+      focus:outline-none
+      focus-visible:bg-primaryDark focus-visible:text-secondaryDark
    "
    :class="[
      { 'opacity-75 cursor-not-allowed': disabled },
@@ -23,7 +21,7 @@
      { 'flex-1': label },
      { 'flex-row-reverse justify-end': reverse },
      {
-        'border border-divider hover:border-dividerDark focus:border-dividerDark':
+        'border border-divider hover:border-dividerDark focus-visible:border-dividerDark':
          outline,
      },
    ]"
--- a/components/smart/Tabs.vue
+++ b/components/smart/Tabs.vue
@@ -84,9 +84,9 @@ export default {
    @apply text-secondary;
    @apply font-semibold;
    @apply cursor-pointer;
-    @apply transition;
    @apply hover:text-secondaryDark;
-    @apply focus:(text-secondaryDark outline-none);
+    @apply focus:outline-none;
+    @apply focus-visible:text-secondaryDark;

    .tab-info {
      @apply inline-flex;
--- a/components/tab/Primary.vue
+++ b/components/tab/Primary.vue
@@ -7,7 +7,6 @@
      rounded
      py-2
      px-4
-      transition
      inline-flex
      items-center
      truncate
@@ -15,8 +14,8 @@
    "
    :class="[
      color
-        ? `text-${color}-500 hover:text-${color}-600 focus:text-${color}-600`
-        : 'hover:text-secondaryDark focus:text-accent',
+        ? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
+        : 'hover:text-secondaryDark focus-visible:text-accent',
      { 'opacity-75 cursor-not-allowed': disabled },
      { 'flex-row-reverse': reverse },
    ]"
--- a/components/tab/Secondary.vue
+++ b/components/tab/Secondary.vue
@@ -4,27 +4,27 @@
    :exact="exact"
    :blank="blank"
    class="
+      font-medium
      flex-1
      py-2
      transform
-      transition
      inline-flex
      items-center
+      truncate
      hover:translate-x-2
-      focus:(outline-none
-      translate-x-2)
+      focus:outline-none
+      focus-visible:translate-x-2
    "
    :class="[
      label ? 'px-3' : 'px-2',
      active
        ? color
-          ? `text-${color}-500 hover:text-${color}-600 focus:text-${color}-600`
-          : 'text-accent'
-        : 'hover:text-secondaryDark focus:text-secondaryDark',
+          ? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
+          : 'text-accent hover:text-accentDark focus-visible:text-accentDark'
+        : 'hover:text-secondaryDark focus-visible:text-secondaryDark',
      color
-        ? `text-${color}-500 hover:text-${color}-600 focus:text-${color}-600`
+        ? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
        : '',
-      { 'translate-x-2': active },
      { 'opacity-75 cursor-not-allowed': disabled },
    ]"
    :disabled="disabled"
--- a/components/teams/Edit.vue
+++ b/components/teams/Edit.vue
@@ -35,20 +35,13 @@
            class="divide-x divide-dividerLight flex"
          >
            <input
-              class="
-                bg-primaryLight
-                flex flex-1
-                py-2
-                px-4
-                truncate
-                focus:outline-none
-              "
+              class="bg-primaryLight flex flex-1 py-2 px-4"
              :placeholder="$t('team.email')"
              :name="'param' + index"
              :value="member.user.email"
              readonly
            />
-            <span class="select-wrapper">
+            <span>
              <tippy
                :ref="`memberOptions-${index}`"
                interactive
@@ -57,24 +50,19 @@
                arrow
              >
                <template #trigger>
-                  <input
-                    class="
-                      bg-primaryLight
-                      flex flex-1
-                      py-2
-                      px-4
-                      truncate
-                      focus:outline-none
-                    "
-                    :placeholder="$t('team.permissions')"
-                    :name="'value' + index"
-                    :value="
-                      typeof member.role === 'string'
-                        ? member.role
-                        : JSON.stringify(member.role)
-                    "
-                    readonly
-                  />
+                  <span class="select-wrapper">
+                    <input
+                      class="bg-primaryLight flex flex-1 py-2 px-4"
+                      :placeholder="$t('team.permissions')"
+                      :name="'value' + index"
+                      :value="
+                        typeof member.role === 'string'
+                          ? member.role
+                          : JSON.stringify(member.role)
+                      "
+                      readonly
+                    />
+                  </span>
                </template>
                <SmartItem
                  label="OWNER"
@@ -95,7 +83,7 @@
                id="member"
                v-tippy="{ theme: 'tooltip' }"
                :title="$t('delete')"
-                icon="delete"
+                icon="remove_circle_outline"
                color="red"
                @click.native="removeExistingTeamMember(member.user.uid)"
              />
@@ -108,19 +96,12 @@
          >
            <input
              v-model="member.key"
-              class="
-                bg-primaryLight
-                flex flex-1
-                py-2
-                px-4
-                truncate
-                focus:outline-none
-              "
+              class="bg-primaryLight flex flex-1 py-2 px-4"
              :placeholder="$t('team.email')"
              :name="'member' + index"
              autofocus
            />
-            <span class="select-wrapper">
+            <span>
              <tippy
                :ref="`newMemberOptions-${index}`"
                interactive
@@ -129,24 +110,19 @@
                arrow
              >
                <template #trigger>
-                  <input
-                    class="
-                      bg-primaryLight
-                      flex flex-1
-                      py-2
-                      px-4
-                      truncate
-                      focus:outline-none
-                    "
-                    :placeholder="$t('team.permissions')"
-                    :name="'value' + index"
-                    :value="
-                      typeof member.value === 'string'
-                        ? member.value
-                        : JSON.stringify(member.value)
-                    "
-                    readonly
-                  />
+                  <span class="select-wrapper">
+                    <input
+                      class="bg-primaryLight flex flex-1 py-2 px-4"
+                      :placeholder="$t('team.permissions')"
+                      :name="'value' + index"
+                      :value="
+                        typeof member.value === 'string'
+                          ? member.value
+                          : JSON.stringify(member.value)
+                      "
+                      readonly
+                    />
+                  </span>
                </template>
                <SmartItem
                  label="OWNER"
@@ -167,7 +143,7 @@
                id="member"
                v-tippy="{ theme: 'tooltip' }"
                :title="$t('delete')"
-                icon="delete"
+                icon="remove_circle_outline"
                color="red"
                @click.native="removeTeamMember(index)"
              />
--- a/components/teams/Team.vue
+++ b/components/teams/Team.vue
@@ -39,7 +39,7 @@
        />
        <SmartItem
          v-if="team.myRole === 'OWNER'"
-          icon="delete"
+          icon="remove_circle_outline"
          color="red"
          :label="$t('delete')"
          @click.native="