refactor: minor ui improvements

components/collections/graphql/index.vue

@@ -32,13 +32,22 @@
           class="rounded-none"
           @click.native="displayModalAdd(true)"
         />
-        <ButtonSecondary
-          v-if="showCollActions"
-          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('modal.import_export')"
-          icon="import_export"
-          @click.native="displayModalImportExport(true)"
-        />
+        <div class="flex">
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            to="https://docs.hoppscotch.io/"
+            blank
+            :title="$t('wiki')"
+            icon="help_outline"
+          />
+          <ButtonSecondary
+            v-if="showCollActions"
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('modal.import_export')"
+            icon="import_export"
+            @click.native="displayModalImportExport(true)"
+          />
+        </div>
       </div>
     </div>
     <div class="flex-col">

components/environments/index.vue

@@ -45,12 +45,21 @@
           class="rounded-none"
           @click.native="displayModalAdd(true)"
         />
-        <ButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
-          icon="import_export"
-          :title="$t('modal.import_export')"
-          @click.native="displayModalImportExport(true)"
-        />
+        <div class="flex">
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            to="https://docs.hoppscotch.io/"
+            blank
+            :title="$t('wiki')"
+            icon="help_outline"
+          />
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            icon="import_export"
+            :title="$t('modal.import_export')"
+            @click.native="displayModalImportExport(true)"
+          />
+        </div>
       </div>
     </div>
     <EnvironmentsAdd

components/graphql/RequestOptions.vue

@@ -152,7 +152,6 @@
               border-b border-dividerLight
               flex
             "
-            :class="{ 'border-t': index == 0 }"
           >
             <SmartAutoComplete
               :placeholder="$t('count.header', { count: index + 1 })"
@@ -333,6 +332,7 @@ export default defineComponent({
     const showSaveRequestModal = ref(false)
 
     const schema = useReadonlyStream(props.conn.schemaString$, "")
+
     watch(
       headers,
       () => {

components/graphql/Sidebar.vue

@@ -6,7 +6,7 @@
           <div
             class="
               bg-primaryLight
-              flex flex-col
+              flex
               top-sidebarPrimaryStickyFold
               z-10
               sticky
@@ -29,11 +29,19 @@
                 "
               />
             </div>
+            <div class="flex">
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                to="https://docs.hoppscotch.io/"
+                blank
+                :title="$t('wiki')"
+                icon="help_outline"
+              />
+            </div>
           </div>
           <SmartTabs
             ref="gqlTabs"
-            styles="
-                    border-t border-dividerLight sticky z-8 top-sidebarSecondaryStickyFold"
+            styles="border-t border-dividerLight sticky z-10 top-sidebarSecondaryStickyFold"
           >
             <div class="gqlTabs">
               <SmartTab
@@ -153,6 +161,13 @@
               {{ $t("schema") }}
             </label>
             <div class="flex">
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                to="https://docs.hoppscotch.io/"
+                blank
+                :title="$t('wiki')"
+                icon="help_outline"
+              />
               <ButtonSecondary
                 ref="downloadSchema"
                 v-tippy="{ theme: 'tooltip' }"

components/history/index.vue

@@ -27,14 +27,23 @@
           :placeholder="$t('search')"
         />
       </div>
-      <ButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        data-testid="clear_history"
-        :disabled="history.length === 0"
-        icon="clear_all"
-        :title="$t('clear_all')"
-        @click.native="confirmRemove = true"
-      />
+      <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          to="https://docs.hoppscotch.io/"
+          blank
+          :title="$t('wiki')"
+          icon="help_outline"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          data-testid="clear_history"
+          :disabled="history.length === 0"
+          icon="clear_all"
+          :title="$t('clear_all')"
+          @click.native="confirmRemove = true"
+        />
+      </div>
     </div>
     <div class="flex flex-col">
       <div v-for="(entry, index) in filteredHistory" :key="`entry-${index}`">

components/http/Authorization.vue

@@ -66,7 +66,7 @@
           class="px-2"
           @change="authActive = !authActive"
         >
-          {{ authActive ? $t("enabled") : $t("disabled") }}
+          {{ $t("enabled") }}
         </SmartToggle>
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"

components/http/Body.vue

@@ -45,10 +45,7 @@
         </tippy>
       </span>
     </div>
-    <HttpBodyParameters
-      v-if="contentType == 'multipart/form-data'"
-      :content-type="contentType"
-    />
+    <HttpBodyParameters v-if="contentType == 'multipart/form-data'" />
     <HttpRawBody v-else :content-type="contentType" />
   </div>
 </template>

components/http/Headers.vue

@@ -42,7 +42,6 @@
       v-for="(header, index) in headers$"
       :key="`header-${index}`"
       class="divide-x divide-dividerLight border-b border-dividerLight flex"
-      :class="{ 'border-t': index == 0 }"
     >
       <SmartAutoComplete
         :placeholder="$t('count.header', { count: index + 1 })"

components/http/ImportCurl.vue

@@ -119,7 +119,6 @@ export default defineComponent({
             body: {
               contentType: "application/json",
               body: "",
-              isRaw: false,
             },
           })
         )

components/http/Parameters.vue

@@ -42,7 +42,6 @@
       v-for="(param, index) in params$"
       :key="`param-${index}`"
       class="divide-x divide-dividerLight border-b border-dividerLight flex"
-      :class="{ 'border-t': index == 0 }"
     >
       <SmartEnvInput
         v-if="EXPERIMENTAL_URL_BAR_ENABLED"

components/http/PreRequestScript.vue

@@ -24,7 +24,7 @@
         icon="help_outline"
       />
     </div>
-    <div class="flex">
+    <div class="border-b border-dividerLight flex">
       <div class="border-r border-dividerLight w-2/3">
         <SmartJsEditor
           v-model="preRequestScript"

components/http/RawBody.vue

@@ -13,7 +13,7 @@
         justify-between
       "
     >
-      <label for="rawBody">
+      <label class="font-semibold text-secondaryLight">
         {{ $t("raw_request_body") }}
       </label>
       <div class="flex">

components/http/Tests.vue

@@ -24,7 +24,7 @@
         icon="help_outline"
       />
     </div>
-    <div class="flex">
+    <div class="border-b border-dividerLight flex">
       <div class="border-r border-dividerLight w-2/3">
         <SmartJsEditor
           v-model="testScript"

components/realtime/Websocket.vue

@@ -79,7 +79,6 @@
                 border-b border-dividerLight
                 flex
               "
-              :class="{ 'border-t': index == 0 }"
             >
               <input
                 v-model="protocol.value"