chore: minor fixes and improvements

assets/scss/styles.scss

@@ -282,25 +282,6 @@ pre.ace_editor {
   }
 }
 
-.search-wrapper {
-  @apply flex flex-1;
-  @apply relative;
-
-  &::after {
-    @apply absolute;
-    @apply flex;
-    @apply inset-y-0;
-    @apply items-center;
-    @apply justify-center;
-    @apply pointer-events-none;
-    @apply font-icon;
-    @apply text-secondaryLight;
-    @apply left-4;
-
-    content: "\e8b6";
-  }
-}
-
 input[type="checkbox"] {
   @apply hidden;
 

components/app/Shortcuts.vue

@@ -20,7 +20,7 @@
         </div>
       </div>
       <div class="bg-primary border-b border-dividerLight">
-        <div class="flex flex-col my-4 mx-6 search-wrapper">
+        <div class="flex flex-col my-4 mx-6">
           <input
             v-model="filterText"
             type="search"
@@ -31,8 +31,7 @@
               flex
               w-full
               py-2
-              pr-2
+              px-4
-              pl-8
               focus-visible:border-divider
             "
             :placeholder="$t('action.search')"

components/button/Primary.vue

@@ -6,6 +6,7 @@
     class="
       font-bold
       py-2
+      transition
       inline-flex
       items-center
       justify-center

components/button/Secondary.vue

@@ -6,6 +6,7 @@
     class="
       font-medium
       py-2
+      transition
       inline-flex
       items-center
       justify-center

components/collections/ChooseType.vue

@@ -19,7 +19,7 @@
               autofocus
               class="
                 bg-transparent
-                border-b border-transparent
+                border-t border-dividerLight
                 cursor-pointer
                 flex
                 font-medium

components/collections/graphql/index.vue

@@ -14,14 +14,13 @@
       "
       :class="{ 'bg-primary': !savingMode }"
     >
-      <div v-if="showCollActions" class="search-wrapper">
+      <input
-        <input
+        v-if="showCollActions"
-          v-model="filterText"
+        v-model="filterText"
-          type="search"
+        type="search"
-          :placeholder="$t('action.search')"
+        :placeholder="$t('action.search')"
-          class="bg-transparent flex w-full py-2 pr-2 pl-10"
+        class="bg-transparent flex w-full py-2 px-4"
-        />
+      />
-      </div>
       <div class="flex flex-1 justify-between">
         <ButtonSecondary
           svg="plus"

components/collections/index.vue

@@ -16,12 +16,12 @@
       "
       :class="{ '!top-sidebarPrimaryStickyFold': !saveRequest && !doc }"
     >
-      <div v-if="!saveRequest" class="search-wrapper">
+      <div v-if="!saveRequest" class="search-wrappe">
         <input
           v-model="filterText"
           type="search"
           :placeholder="$t('action.search')"
-          class="bg-transparent flex w-full py-2 pr-2 pl-10"
+          class="bg-transparent flex w-full py-2 pr-2 pl-4"
         />
       </div>
       <CollectionsChooseType

components/graphql/Sidebar.vue

@@ -4,14 +4,12 @@
       <SmartTab :id="'docs'" :label="`Docs`" :selected="true">
         <AppSection label="docs">
           <div class="bg-primary flex top-sidebarPrimaryStickyFold z-10 sticky">
-            <div class="search-wrapper">
+            <input
-              <input
+              v-model="graphqlFieldsFilterText"
-                v-model="graphqlFieldsFilterText"
+              type="search"
-                type="search"
+              :placeholder="$t('action.search')"
-                :placeholder="$t('action.search')"
+              class="bg-transparent flex w-full p-4 py-2"
-                class="bg-transparent flex w-full py-2 pr-2 pl-10"
+            />
-              />
-            </div>
             <div class="flex">
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"

components/history/index.vue

@@ -10,14 +10,12 @@
         sticky
       "
     >
-      <div class="search-wrapper">
+      <input
-        <input
+        v-model="filterText"
-          v-model="filterText"
+        type="search"
-          type="search"
+        class="bg-transparent flex w-full p-4 py-2"
-          class="bg-transparent flex w-full py-2 pr-2 pl-10"
+        :placeholder="$t('action.search')"
-          :placeholder="$t('action.search')"
+      />
-        />
-      </div>
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"

components/http/Authorization.vue

@@ -100,7 +100,7 @@
       </span>
       <ButtonSecondary
         outline
-        :label="$t('action.learn_more')"
+        :label="$t('app.documentation')"
         to="https://docs.hoppscotch.io"
         blank
         svg="external-link"

components/http/Body.vue

@@ -64,6 +64,14 @@
       <span class="text-center pb-4">
         {{ $t("empty.body") }}
       </span>
+      <ButtonSecondary
+        outline
+        :label="$t('app.documentation')"
+        to="https://docs.hoppscotch.io"
+        blank
+        svg="external-link"
+        reverse
+      />
     </div>
   </div>
 </template>

components/smart/Item.vue

@@ -5,6 +5,7 @@
     :blank="blank"
     class="
       rounded
+      transition
       font-medium
       flex-shrink-0
       py-2

components/smart/Toggle.vue

@@ -54,7 +54,6 @@ $transition: all 0.2s ease-in-out;
   height: $height;
   border: if($useBorder, 2px solid $borderColor, none);
   background-color: if($useBorder, transparent, $inactiveColor);
-  transition: $transition;
   box-sizing: initial;
 
   .handle {

components/tab/Primary.vue

@@ -6,6 +6,7 @@
     class="
       rounded
       py-2
+      transition
       px-4
       inline-flex
       items-center

components/tab/Secondary.vue

@@ -7,6 +7,7 @@
       font-medium
       flex-1
       py-2
+      transition
       transform
       inline-flex
       items-center