refactor: minor ui improvements

assets/scss/styles.scss

@@ -156,7 +156,7 @@ a {
 
 .tippy-content > div {
   @apply flex flex-col;
-  @apply max-h-56;
+  @apply max-h-46;
   @apply items-stretch;
   @apply overflow-y-auto;
 

components/collections/graphql/index.vue

@@ -32,6 +32,14 @@
           class="rounded-none"
           @click.native="displayModalAdd(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' }"
@@ -41,6 +49,7 @@
           />
         </div>
       </div>
+    </div>
     <div class="flex-col">
       <CollectionsGraphqlCollection
         v-for="(collection, index) in filteredCollections"

components/environments/index.vue

@@ -45,6 +45,14 @@
           class="rounded-none"
           @click.native="displayModalAdd(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"
@@ -53,6 +61,7 @@
           />
         </div>
       </div>
+    </div>
     <EnvironmentsAdd
       :show="showModalAdd"
       @hide-modal="displayModalAdd(false)"

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="
+            styles="border-t border-dividerLight sticky z-10 top-sidebarSecondaryStickyFold"
-                    border-t border-dividerLight sticky z-8 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,6 +27,14 @@
           :placeholder="$t('search')"
         />
       </div>
+      <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"
@@ -36,6 +44,7 @@
           @click.native="confirmRemove = true"
         />
       </div>
+    </div>
     <div class="flex flex-col">
       <div v-for="(entry, index) in filteredHistory" :key="`entry-${index}`">
         <HistoryRestCard

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
+    <HttpBodyParameters v-if="contentType == 'multipart/form-data'" />
-      v-if="contentType == 'multipart/form-data'"
-      :content-type="contentType"
-    />
     <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"

lang/en-US.json

@@ -268,7 +268,7 @@
   "path": "Path",
   "label": "Label",
   "content_type": "Content Type",
-  "raw_input": "Raw input",
+  "raw": "Raw",
   "parameter_list": "Query Parameters",
   "body": "Body",
   "request_body": "Request Body",

tsconfig.json

@@ -14,13 +14,7 @@
       "~/*": ["./*"],
       "@/*": ["./*"]
     },
-    "types": [
+    "types": ["@types/node", "@nuxt/types", "@nuxtjs/i18n", "@nuxtjs/toast"]
-      "@types/node",
-      "@nuxt/types",
-      "@nuxtjs/i18n",
-      "@nuxtjs/toast",
-      "vue-rx"
-    ]
   },
   "exclude": ["node_modules", ".nuxt", "dist"]
 }