From 405e6c1e4ea4fecda6308fe54d7a4012b40f56fd Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sat, 28 Aug 2021 10:57:21 +0530
Subject: [PATCH] chore: minor fixes and improvements

---
 assets/scss/styles.scss                  | 19 -------------------
 components/app/Shortcuts.vue             |  5 ++---
 components/button/Primary.vue            |  1 +
 components/button/Secondary.vue          |  1 +
 components/collections/ChooseType.vue    |  2 +-
 components/collections/graphql/index.vue | 15 +++++++--------
 components/collections/index.vue         |  4 ++--
 components/graphql/Sidebar.vue           | 14 ++++++--------
 components/history/index.vue             | 14 ++++++--------
 components/http/Authorization.vue        |  2 +-
 components/http/Body.vue                 |  8 ++++++++
 components/smart/Item.vue                |  1 +
 components/smart/Toggle.vue              |  1 -
 components/tab/Primary.vue               |  1 +
 components/tab/Secondary.vue             |  1 +
 15 files changed, 38 insertions(+), 51 deletions(-)

diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index 0f83655f1..686631a90 100644
--- a/assets/scss/styles.scss
+++ b/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;
 
diff --git a/components/app/Shortcuts.vue b/components/app/Shortcuts.vue
index 6d2f2c5b6..31afa2fb2 100644
--- a/components/app/Shortcuts.vue
+++ b/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
-              pl-8
+              px-4
               focus-visible:border-divider
             "
             :placeholder="$t('action.search')"
diff --git a/components/button/Primary.vue b/components/button/Primary.vue
index 42b7a203c..1e094c7c1 100644
--- a/components/button/Primary.vue
+++ b/components/button/Primary.vue
@@ -6,6 +6,7 @@
     class="
       font-bold
       py-2
+      transition
       inline-flex
       items-center
       justify-center
diff --git a/components/button/Secondary.vue b/components/button/Secondary.vue
index 235527d8b..ee2148046 100644
--- a/components/button/Secondary.vue
+++ b/components/button/Secondary.vue
@@ -6,6 +6,7 @@
     class="
       font-medium
       py-2
+      transition
       inline-flex
       items-center
       justify-center
diff --git a/components/collections/ChooseType.vue b/components/collections/ChooseType.vue
index 37ad0cfc0..09077fa12 100644
--- a/components/collections/ChooseType.vue
+++ b/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
diff --git a/components/collections/graphql/index.vue b/components/collections/graphql/index.vue
index 8b6649bd1..384b37ee1 100644
--- a/components/collections/graphql/index.vue
+++ b/components/collections/graphql/index.vue
@@ -14,14 +14,13 @@
       "
       :class="{ 'bg-primary': !savingMode }"
     >
-      <div v-if="showCollActions" class="search-wrapper">
-        <input
-          v-model="filterText"
-          type="search"
-          :placeholder="$t('action.search')"
-          class="bg-transparent flex w-full py-2 pr-2 pl-10"
-        />
-      </div>
+      <input
+        v-if="showCollActions"
+        v-model="filterText"
+        type="search"
+        :placeholder="$t('action.search')"
+        class="bg-transparent flex w-full py-2 px-4"
+      />
       <div class="flex flex-1 justify-between">
         <ButtonSecondary
           svg="plus"
diff --git a/components/collections/index.vue b/components/collections/index.vue
index a6c2b732c..90290e708 100644
--- a/components/collections/index.vue
+++ b/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
diff --git a/components/graphql/Sidebar.vue b/components/graphql/Sidebar.vue
index b9e110de2..1de2e324f 100644
--- a/components/graphql/Sidebar.vue
+++ b/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
-                v-model="graphqlFieldsFilterText"
-                type="search"
-                :placeholder="$t('action.search')"
-                class="bg-transparent flex w-full py-2 pr-2 pl-10"
-              />
-            </div>
+            <input
+              v-model="graphqlFieldsFilterText"
+              type="search"
+              :placeholder="$t('action.search')"
+              class="bg-transparent flex w-full p-4 py-2"
+            />
             <div class="flex">
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
diff --git a/components/history/index.vue b/components/history/index.vue
index 6134f1aa4..8403421af 100644
--- a/components/history/index.vue
+++ b/components/history/index.vue
@@ -10,14 +10,12 @@
         sticky
       "
     >
-      <div class="search-wrapper">
-        <input
-          v-model="filterText"
-          type="search"
-          class="bg-transparent flex w-full py-2 pr-2 pl-10"
-          :placeholder="$t('action.search')"
-        />
-      </div>
+      <input
+        v-model="filterText"
+        type="search"
+        class="bg-transparent flex w-full p-4 py-2"
+        :placeholder="$t('action.search')"
+      />
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
diff --git a/components/http/Authorization.vue b/components/http/Authorization.vue
index 6d9b0c649..d17fe3c2f 100644
--- a/components/http/Authorization.vue
+++ b/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"
diff --git a/components/http/Body.vue b/components/http/Body.vue
index f86fde877..c683f9e20 100644
--- a/components/http/Body.vue
+++ b/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>
diff --git a/components/smart/Item.vue b/components/smart/Item.vue
index 9d2a6c14f..4474f2d12 100644
--- a/components/smart/Item.vue
+++ b/components/smart/Item.vue
@@ -5,6 +5,7 @@
     :blank="blank"
     class="
       rounded
+      transition
       font-medium
       flex-shrink-0
       py-2
diff --git a/components/smart/Toggle.vue b/components/smart/Toggle.vue
index c9b343a6b..7c45f2b83 100644
--- a/components/smart/Toggle.vue
+++ b/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 {
diff --git a/components/tab/Primary.vue b/components/tab/Primary.vue
index 756b23395..2a53348d8 100644
--- a/components/tab/Primary.vue
+++ b/components/tab/Primary.vue
@@ -6,6 +6,7 @@
     class="
       rounded
       py-2
+      transition
       px-4
       inline-flex
       items-center
diff --git a/components/tab/Secondary.vue b/components/tab/Secondary.vue
index 4f28e281f..addb08ceb 100644
--- a/components/tab/Secondary.vue
+++ b/components/tab/Secondary.vue
@@ -7,6 +7,7 @@
       font-medium
       flex-1
       py-2
+      transition
       transform
       inline-flex
       items-center