refactor: remove absolute classes

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

@@ -64,13 +64,4 @@ defineProps<{
     }
   }
 }
-
-.shortcut-key {
-  @apply bg-dividerLight;
-  @apply rounded;
-  @apply ml-2;
-  @apply py-1;
-  @apply px-2;
-  @apply inline-flex;
-}
 </style>

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

@@ -102,14 +102,3 @@ const close = () => {
   emit("close")
 }
 </script>
-
-<style lang="scss" scoped>
-.shortcut-key {
-  @apply bg-dividerLight;
-  @apply rounded;
-  @apply ml-2;
-  @apply py-1;
-  @apply px-2;
-  @apply inline-flex;
-}
-</style>

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

@@ -22,14 +22,3 @@ defineProps<{
   shortcut: Object
 }>()
 </script>
-
-<style lang="scss" scoped>
-.shortcut-key {
-  @apply bg-dividerLight;
-  @apply rounded;
-  @apply ml-2;
-  @apply py-1;
-  @apply px-2;
-  @apply inline-flex;
-}
-</style>

packages/hoppscotch-app/components/collections/graphql/Collection.vue

@@ -77,7 +77,6 @@
             />
             <SmartItem
               svg="trash-2"
-              color="red"
               :label="`${$t('action.delete')}`"
               @click.native="
                 () => {

packages/hoppscotch-app/components/collections/graphql/Folder.vue

@@ -73,7 +73,6 @@
             />
             <SmartItem
               svg="trash-2"
-              color="red"
               :label="`${$t('action.delete')}`"
               @click.native="
                 () => {

packages/hoppscotch-app/components/collections/graphql/Request.vue

@@ -79,7 +79,6 @@
             />
             <SmartItem
               svg="trash-2"
-              color="red"
               :label="`${$t('action.delete')}`"
               @click.native="
                 () => {

packages/hoppscotch-app/components/collections/my/Collection.vue

@@ -96,7 +96,6 @@
             />
             <SmartItem
               svg="trash-2"
-              color="red"
               :label="$t('action.delete')"
               @click.native="
                 () => {

packages/hoppscotch-app/components/collections/my/Folder.vue

@@ -78,7 +78,6 @@
             />
             <SmartItem
               svg="trash-2"
-              color="red"
               :label="$t('action.delete')"
               @click.native="
                 () => {

packages/hoppscotch-app/components/collections/my/Request.vue

@@ -36,7 +36,9 @@
             active.folderPath === folderPath &&
             active.requestIndex === requestIndex
           "
+          v-tippy="{ theme: 'tooltip' }"
           class="rounded-full bg-green-500 flex-shrink-0 h-1.5 mx-3 w-1.5"
+          :title="`${$t('collection.request_in_use')}`"
         ></span>
       </span>
       <div class="flex">
@@ -95,7 +97,6 @@
             />
             <SmartItem
               svg="trash-2"
-              color="red"
               :label="$t('action.delete')"
               @click.native="
                 confirmRemove = true

packages/hoppscotch-app/components/collections/teams/Collection.vue

@@ -94,7 +94,6 @@
             <SmartItem
               v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
               svg="trash-2"
-              color="red"
               :label="$t('action.delete')"
               @click.native="
                 () => {

packages/hoppscotch-app/components/collections/teams/Folder.vue

@@ -77,7 +77,6 @@
             <SmartItem
               v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
               svg="trash-2"
-              color="red"
               :label="$t('action.delete')"
               @click.native="
                 () => {

packages/hoppscotch-app/components/collections/teams/Request.vue

@@ -30,7 +30,9 @@
             active.originLocation === 'team-collection' &&
             active.requestID === requestIndex
           "
+          v-tippy="{ theme: 'tooltip' }"
           class="rounded-full bg-green-500 flex-shrink-0 h-1.5 mx-3 w-1.5"
+          :title="`${$t('collection.request_in_use')}`"
         ></span>
       </span>
       <div class="flex">
@@ -74,7 +76,6 @@
             />
             <SmartItem
               svg="trash-2"
-              color="red"
               :label="$t('action.delete')"
               @click.native="
                 confirmRemove = true

packages/hoppscotch-app/components/environments/Environment.vue

@@ -49,7 +49,6 @@
         <SmartItem
           v-if="!(environmentIndex === 'Global')"
           svg="trash-2"
-          color="red"
           :label="`${$t('action.delete')}`"
           @click.native="
             () => {

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

@@ -137,14 +137,3 @@ const downloadResponse = () => {
   }, 1000)
 }
 </script>
-
-<style lang="scss" scoped>
-.shortcut-key {
-  @apply bg-dividerLight;
-  @apply rounded;
-  @apply ml-2;
-  @apply py-1;
-  @apply px-2;
-  @apply inline-flex;
-}
-</style>

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

@@ -144,14 +144,3 @@ const statusCategory = computed(() => {
   return findStatusGroup(props.response.statusCode)
 })
 </script>
-
-<style lang="scss" scoped>
-.shortcut-key {
-  @apply bg-dividerLight;
-  @apply rounded;
-  @apply ml-2;
-  @apply py-1;
-  @apply px-2;
-  @apply inline-flex;
-}
-</style>

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

@@ -89,7 +89,6 @@
           <SmartItem
             v-if="team.myRole === 'OWNER'"
             svg="trash-2"
-            color="red"
             :label="t('action.delete')"
             @click.native="
               () => {