refactor: remove absolute classes

assets/scss/styles.scss

@@ -183,19 +183,21 @@ hr {
   @apply w-full;
   @apply px-4 py-2;
   @apply bg-primary;
-  @apply truncate;
   @apply rounded;
   @apply text-secondaryDark;
   @apply border border-divider;
-  @apply transition;
+  @apply focus-visible:border-accent;
-  @apply focus:(outline-none border-accent);
-  @apply disabled:cursor-not-allowed;
 }
 
 input,
 select,
 textarea,
 button {
+  @apply focus:outline-none;
+  @apply truncate;
+  @apply transition;
+  @apply disabled:cursor-not-allowed;
+
   font-size: var(--body-font-size);
   line-height: var(--body-line-height);
 }
@@ -358,6 +360,7 @@ input[type="checkbox"] {
         @apply ml-auto;
         @apply sm:ml-8;
         @apply transition;
+        @apply rounded;
         @apply text-current;
         @apply normal-case;
         @apply hover:(bg-opacity-20 no-underline);

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

components/app/Search.vue

@@ -16,8 +16,6 @@
           px-4
           pt-2
           pb-6
-          truncate
-          focus:outline-none
         "
       />
       <div

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;

components/app/Shortcuts.vue

@@ -36,10 +36,7 @@
               py-2
               pr-2
               pl-8
-              transition
+              focus-visible:border-divider
-              truncate
-              focus:(border-divider
-              outline-none)
             "
             :placeholder="$t('search')"
           />

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;

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-${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:bg-accentDark`,
+        : `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,
       },
     ]"

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

components/collections/ChooseType.vue

@@ -25,7 +25,6 @@
                 py-2
                 px-4
                 appearance-none
-                focus:outline-none
               "
               @change="updateSelectedTeam(myTeams[$event.target.value])"
             >

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"

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"

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

components/collections/graphql/index.vue

@@ -20,8 +20,6 @@
             py-2
             pr-2
             pl-9
-            truncate
-            focus:outline-none
           "
         />
       </div>

components/collections/index.vue

@@ -20,8 +20,6 @@
             py-2
             pr-2
             pl-9
-            truncate
-            focus:outline-none
           "
         />
       </div>

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"

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"

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

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"

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"

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

components/environments/Edit.vue

@@ -45,27 +45,13 @@
           >
             <input
               v-model="variable.key"
-              class="
+              class="bg-primaryLight flex flex-1 py-2 px-4"
-                bg-primaryLight
-                flex flex-1
-                py-2
-                px-4
-                truncate
-                focus:outline-none
-              "
               :placeholder="$t('count.variable', { count: index + 1 })"
               :name="'param' + index"
             />
             <input
               v-model="variable.value"
-              class="
+              class="bg-primaryLight flex flex-1 py-2 px-4"
-                bg-primaryLight
-                flex flex-1
-                py-2
-                px-4
-                truncate
-                focus:outline-none
-              "
               :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)"
               />

components/environments/Environment.vue

@@ -40,7 +40,7 @@
           "
         />
         <SmartItem
-          icon="delete"
+          icon="remove_circle_outline"
           color="red"
           :label="$t('delete')"
           @click.native="

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>

components/graphql/Request.vue

@@ -15,10 +15,7 @@
           w-full
           py-2
           px-4
-          transition
+          focus-visible:border-accent
-          truncate
-          focus:(border-accent
-          outline-none)
         "
         :placeholder="$t('url')"
         @keyup.enter="onConnectClick"

components/graphql/RequestOptions.vue

@@ -177,14 +177,7 @@
               "
             />
             <input
-              class="
+              class="bg-primaryLight flex flex-1 py-2 px-4"
-                bg-primaryLight
-                flex flex-1
-                py-2
-                px-4
-                truncate
-                focus:outline-none
-              "
               :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_circle_outline'
-                      : 'check_box_outline_blank'
+                      : 'radio_button_unchecked'
-                    : 'check_box'
+                    : '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)"
               />

components/graphql/Sidebar.vue

@@ -17,16 +17,7 @@
                 v-model="graphqlFieldsFilterText"
                 type="search"
                 :placeholder="$t('search')"
-                class="
+                class="bg-primaryLight flex w-full py-2 pr-2 pl-9"
-                  bg-primaryLight
-                  flex
-                  w-full
-                  py-2
-                  pr-2
-                  pl-9
-                  truncate
-                  focus:outline-none
-                "
               />
             </div>
             <div class="flex">

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"

components/history/index.vue

@@ -14,16 +14,7 @@
         <input
           v-model="filterText"
           type="search"
-          class="
+          class="bg-primaryLight flex w-full py-2 pr-2 pl-9"
-            bg-primaryLight
-            flex
-            w-full
-            py-2
-            pr-2
-            pl-9
-            truncate
-            focus:outline-none
-          "
           :placeholder="$t('search')"
         />
       </div>

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"

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>
           </template>
           <SmartItem
             label="None"

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>
           </template>
           <SmartItem
             v-for="(contentTypeItem, index) in validContentTypes"

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="
+        class="bg-primaryLight flex flex-1 py-2 px-4"
-          bg-primaryLight
-          flex flex-1
-          py-2
-          px-4
-          truncate
-          focus:outline-none
-        "
         :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="
+          class="bg-primaryLight flex flex-1 py-2 px-4"
-            bg-primaryLight
-            flex flex-1
-            py-2
-            px-4
-            truncate
-            focus:outline-none
-          "
           :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_circle_outline'
-                : 'check_box_outline_blank'
+                : 'radio_button_unchecked'
-              : 'check_box'
+              : '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)"
         />

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="
+        class="bg-primaryLight flex flex-1 py-2 px-4"
-          bg-primaryLight
-          flex flex-1
-          py-2
-          px-4
-          truncate
-          focus:outline-none
-        "
         :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_circle_outline'
-                : 'check_box_outline_blank'
+                : 'radio_button_unchecked'
-              : 'check_box'
+              : '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)"
         />

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="
+        class="bg-primaryLight flex flex-1 py-2 px-4"
-          bg-primaryLight
-          flex flex-1
-          py-2
-          px-4
-          truncate
-          focus:outline-none
-        "
         :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="
+        class="bg-primaryLight flex flex-1 py-2 px-4"
-          bg-primaryLight
-          flex flex-1
-          py-2
-          px-4
-          truncate
-          focus:outline-none
-        "
         :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_circle_outline'
-                : 'check_box_outline_blank'
+                : 'radio_button_unchecked'
-              : 'check_box'
+              : '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)"
         />

components/http/PreRequestScript.vue

@@ -16,6 +16,7 @@
       <label class="font-semibold text-secondaryLight">
         {{ $t("javascript_code") }}
       </label>
+      <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://github.com/hoppscotch/hoppscotch/wiki/Pre-Request-Scripts"
@@ -23,6 +24,13 @@
           :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 {
+    const preRequestScript = usePreRequestScript()
-      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>

components/http/Request.vue

@@ -1,7 +1,6 @@
 <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
@@ -10,6 +9,7 @@
         arrow
       >
         <template #trigger>
+          <span class="select-wrapper">
             <input
               id="method"
               class="
@@ -22,16 +22,15 @@
                 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)"
             />
+          </span>
         </template>
         <SmartItem
           v-for="(method, index) in methods"
@@ -40,7 +39,6 @@
           @click.native="onSelectMethod(method)"
         />
       </tippy>
-      </span>
     </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
+          focus-visible:border-accent
-          truncate
-          focus:border-accent focus:outline-none
         "
         name="url"
         type="text"

components/http/Tests.vue

@@ -16,6 +16,7 @@
       <label class="font-semibold text-secondaryLight">
         {{ $t("javascript_code") }}
       </label>
+      <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://github.com/hoppscotch/hoppscotch/wiki/Post-Request-Tests"
@@ -23,6 +24,13 @@
           :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 {
+    const testScript = useTestScript()
-      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>

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

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>

components/realtime/Mqtt.vue

@@ -20,10 +20,7 @@
                     w-full
                     py-2
                     px-4
-                    transition
+                    focus-visible:border-accent
-                    truncate
-                    focus:(border-accent
-                    outline-none)
                   "
                   :placeholder="$t('url')"
                 />

components/realtime/Socketio.vue

@@ -22,10 +22,7 @@
                     w-full
                     py-2
                     px-4
-                    transition
+                    focus-visible:border-accent
-                    truncate
-                    focus:(border-accent
-                    outline-none)
                   "
                   :placeholder="$t('url')"
                   @keyup.enter="urlValid ? toggleConnection() : null"
@@ -41,10 +38,7 @@
                     w-full
                     py-2
                     px-4
-                    transition
+                    focus-visible:border-accent
-                    truncate
-                    focus:(border-accent
-                    outline-none)
                   "
                   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

components/realtime/Sse.vue

@@ -18,10 +18,7 @@
               w-full
               py-2
               px-4
-              transition
+              focus-visible:border-accent
-              truncate
-              focus:(border-accent
-              outline-none)
             "
             :placeholder="$t('url')"
             @keyup.enter="serverValid ? toggleSSEConnection() : null"
@@ -51,10 +48,7 @@
               w-full
               py-2
               px-4
-              transition
+              focus-visible:border-accent
-              truncate
-              focus:(border-accent
-              outline-none)
             "
             spellcheck="false"
           />

components/realtime/Websocket.vue

@@ -18,10 +18,7 @@
                     w-full
                     py-2
                     px-4
-                    transition
+                    focus-visible:border-accent
-                    truncate
-                    focus:(border-accent
-                    outline-none)
                   "
                   type="url"
                   spellcheck="false"
@@ -82,14 +79,7 @@
             >
               <input
                 v-model="protocol.value"
-                class="
+                class="bg-primaryLight flex flex-1 py-2 px-4"
-                  bg-primaryLight
-                  flex flex-1
-                  py-2
-                  px-4
-                  truncate
-                  focus:outline-none
-                "
                 :placeholder="$t('count.protocol', { count: index + 1 })"
                 name="message"
                 type="text"
@@ -107,9 +97,9 @@
                   :icon="
                     protocol.hasOwnProperty('active')
                       ? protocol.active
-                        ? 'check_box'
+                        ? 'check_circle_outline'
-                        : 'check_box_outline_blank'
+                        : 'radio_button_unchecked'
-                      : 'check_box'
+                      : '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 })"
                 />

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`
+        ? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
-        : 'hover:text-secondaryDark focus:text-secondaryDark',
+        : 'hover:text-secondaryDark focus-visible:text-secondaryDark',
       { 'opacity-75 cursor-not-allowed': disabled },
       { 'flex-row-reverse': reverse },
     ]"

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>
+        <span class="select-wrapper">
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('settings.choose_language')"
@@ -13,6 +13,7 @@
               $i18n.locales.find(({ code }) => code == $i18n.locale).name
             }`"
           />
+        </span>
       </template>
       <NuxtLink
         v-for="(locale, index) in $i18n.locales.filter(
@@ -26,5 +27,4 @@
       </NuxtLink>
     </tippy>
   </span>
-  </span>
 </template>

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 {

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>
+        <span class="select-wrapper">
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('settings.change_font_size')"
@@ -11,6 +11,7 @@
             outline
             :label="getFontSizeName(fontSizes.find((size) => size == active))"
           />
+        </span>
       </template>
       <SmartItem
         v-for="(size, index) in fontSizes"
@@ -25,7 +26,6 @@
       />
     </tippy>
   </span>
-  </span>
 </template>
 
 <script lang="ts">

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
+      hover:bg-primaryDark hover:text-secondaryDark
-      text-secondaryDark)
+      focus:outline-none
-      focus:(bg-primaryDark
+      focus-visible:bg-primaryDark focus-visible:text-secondaryDark
-      outline-none
-      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,
       },
     ]"

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;

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`
+        ? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
-        : 'hover:text-secondaryDark focus:text-accent',
+        : 'hover:text-secondaryDark focus-visible:text-accent',
       { 'opacity-75 cursor-not-allowed': disabled },
       { 'flex-row-reverse': reverse },
     ]"

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
+      focus:outline-none
-      translate-x-2)
+      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-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
-          : 'text-accent'
+          : 'text-accent hover:text-accentDark focus-visible:text-accentDark'
-        : 'hover:text-secondaryDark focus:text-secondaryDark',
+        : '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"

components/teams/Edit.vue

@@ -35,20 +35,13 @@
             class="divide-x divide-dividerLight flex"
           >
             <input
-              class="
+              class="bg-primaryLight flex flex-1 py-2 px-4"
-                bg-primaryLight
-                flex flex-1
-                py-2
-                px-4
-                truncate
-                focus:outline-none
-              "
               :placeholder="$t('team.email')"
               :name="'param' + index"
               :value="member.user.email"
               readonly
             />
-            <span class="select-wrapper">
+            <span>
               <tippy
                 :ref="`memberOptions-${index}`"
                 interactive
@@ -57,15 +50,9 @@
                 arrow
               >
                 <template #trigger>
+                  <span class="select-wrapper">
                     <input
-                    class="
+                      class="bg-primaryLight flex flex-1 py-2 px-4"
-                      bg-primaryLight
-                      flex flex-1
-                      py-2
-                      px-4
-                      truncate
-                      focus:outline-none
-                    "
                       :placeholder="$t('team.permissions')"
                       :name="'value' + index"
                       :value="
@@ -75,6 +62,7 @@
                       "
                       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="
+              class="bg-primaryLight flex flex-1 py-2 px-4"
-                bg-primaryLight
-                flex flex-1
-                py-2
-                px-4
-                truncate
-                focus:outline-none
-              "
               :placeholder="$t('team.email')"
               :name="'member' + index"
               autofocus
             />
-            <span class="select-wrapper">
+            <span>
               <tippy
                 :ref="`newMemberOptions-${index}`"
                 interactive
@@ -129,15 +110,9 @@
                 arrow
               >
                 <template #trigger>
+                  <span class="select-wrapper">
                     <input
-                    class="
+                      class="bg-primaryLight flex flex-1 py-2 px-4"
-                      bg-primaryLight
-                      flex flex-1
-                      py-2
-                      px-4
-                      truncate
-                      focus:outline-none
-                    "
                       :placeholder="$t('team.permissions')"
                       :name="'value' + index"
                       :value="
@@ -147,6 +122,7 @@
                       "
                       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)"
               />

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

newstore/RESTSession.ts

@@ -33,8 +33,8 @@ const defaultRESTRequest: HoppRESTRequest = {
     authName: "None",
     authActive: true,
   },
-  preRequestScript: "// pw.env.set('variable', 'value');",
+  preRequestScript: "",
-  testScript: "// pw.expect('variable').toBe('value');",
+  testScript: "",
   body: {
     contentType: "application/json",
     body: "",

pages/documentation.vue

@@ -306,19 +306,13 @@ export default defineComponent({
               return this.httpUser && this.httpPassword
             },
             isRawParams() {
-              return this.rawParams && this.rawParams !== "{}"
+              return this.rawParams && this.rawParams !== ""
             },
             isPreRequestScript() {
-              return (
+              return this.preRequestScript && this.preRequestScript !== ""
-                this.preRequestScript &&
-                this.preRequestScript !== `// pw.env.set('variable', 'value');`
-              )
             },
             isTestScript() {
-              return (
+              return this.testScript && this.testScript !== ""
-                this.testScript &&
-                this.testScript !== `// pw.expect('variable').toBe('value');`
-              )
             },
           },
           {