refactor(ui): better font weight, icon hover states, etc

components/graphql/Field.vue

@@ -1,9 +1,6 @@
 <template>
   <div>
-    <div
-      class="font-semibold field-title"
-      :class="{ 'field-highlighted': isHighlighted }"
-    >
+    <div class="field-title" :class="{ 'field-highlighted': isHighlighted }">
       {{ fieldName }}
       <span v-if="fieldArgs.length > 0">
         (
@@ -32,7 +29,6 @@
       v-if="gqlField.isDeprecated"
       class="
         rounded
-        font-semibold
         bg-yellow-200
         my-1
         text-black
@@ -48,7 +44,7 @@
       <h5 class="my-2">Arguments:</h5>
       <div class="border-divider border-l-2 pl-4">
         <div v-for="(field, index) in fieldArgs" :key="`field-${index}`">
-          <span class="font-semibold">
+          <span>
             {{ field.name }}:
             <GraphqlTypeLink
               :gql-type="field.type"

components/graphql/Request.vue

@@ -11,7 +11,6 @@
           bg-primaryLight
           border border-divider
           rounded-l
-          font-semibold font-mono
           text-secondaryDark
           w-full
           py-2

components/graphql/RequestOptions.vue

@@ -17,7 +17,7 @@
               gqlRunQuery
             "
           >
-            <label for="gqlQuery" class="font-semibold">
+            <label class="font-semibold text-secondaryLight">
               {{ $t("query") }}
             </label>
             <div class="flex">
@@ -25,7 +25,7 @@
                 :label="$t('run')"
                 :shortcut="[getSpecialKey(), 'Enter']"
                 icon="play_arrow"
-                class="!text-accent"
+                class="rounded-none !text-accent"
                 @click.native="runQuery()"
               />
               <ButtonSecondary
@@ -83,7 +83,7 @@
               justify-between
             "
           >
-            <label class="font-semibold">
+            <label class="font-semibold text-secondaryLight">
               {{ $t("variables") }}
             </label>
             <div class="flex">
@@ -126,7 +126,7 @@
               justify-between
             "
           >
-            <label class="font-semibold">
+            <label class="font-semibold text-secondaryLight">
               {{ $t("headers") }}
             </label>
             <div class="flex">
@@ -163,9 +163,8 @@
               styles="
                 bg-primaryLight
                 flex
-                font-semibold font-mono
                 flex-1
-                py-2
+          py-1
                 px-4
                 truncate
                 focus:outline-none
@@ -181,9 +180,7 @@
             <input
               class="
                 bg-primaryLight
-                flex
-                font-semibold font-mono
-                w-full
+                flex flex-1
                 py-2
                 px-4
                 truncate
@@ -248,13 +245,13 @@
               justify-center
             "
           >
-            <i class="opacity-75 pb-2 material-icons">post_add</i>
             <span class="text-center pb-4">
               {{ $t("empty.headers") }}
             </span>
             <ButtonSecondary
               :label="$t('add.new')"
               outline
+              icon="add"
               @click.native="addRequestHeader"
             />
           </div>
@@ -273,6 +270,7 @@
 <script lang="ts">
 import {
   defineComponent,
+  onMounted,
   PropType,
   ref,
   useContext,
@@ -335,8 +333,24 @@ export default defineComponent({
     const showSaveRequestModal = ref(false)
 
     const schema = useReadonlyStream(props.conn.schemaString$, "")
-    watch(schema, () => {
-      console.log(schema.value)
+    watch(
+      headers,
+      () => {
+        console.log("changed")
+        if (
+          (headers.value[headers.value.length - 1]?.key !== "" ||
+            headers.value[headers.value.length - 1]?.value !== "") &&
+          headers.value.length
+        )
+          addRequestHeader()
+      },
+      { deep: true }
+    )
+
+    onMounted(() => {
+      if (!headers.value?.length) {
+        addRequestHeader()
+      }
     })
 
     const copyQuery = () => {

components/graphql/Response.vue

@@ -14,7 +14,7 @@
         justify-between
       "
     >
-      <label class="font-semibold" for="responseField">
+      <label class="font-semibold text-secondaryLight">
         {{ $t("response") }}
       </label>
       <div class="flex">
@@ -59,7 +59,7 @@
         justify-center
       "
     >
-      <div class="flex space-x-2 pb-8">
+      <div class="flex space-x-2 pb-4">
         <div class="flex flex-col space-y-4 items-end">
           <span class="flex flex-1 items-center">
             {{ $t("shortcut.send_request") }}
@@ -94,8 +94,10 @@
       <ButtonSecondary
         :label="$t('documentation')"
         to="https://docs.hoppscotch.io"
+        icon="open_in_new"
         blank
         outline
+        reverse
       />
     </div>
   </AppSection>

components/graphql/Sidebar.vue

@@ -20,7 +20,6 @@
                 class="
                   bg-primaryLight
                   flex
-                  font-semibold font-mono
                   w-full
                   py-2
                   pr-2
@@ -150,7 +149,7 @@
               justify-between
             "
           >
-            <label class="font-semibold">
+            <label class="font-semibold text-secondaryLight">
               {{ $t("schema") }}
             </label>
             <div class="flex">

components/graphql/Type.vue

@@ -1,9 +1,6 @@
 <template>
   <div :id="`type_${gqlType.name}`" class="p-4">
-    <div
-      class="font-semibold type-title"
-      :class="{ 'text-accent': isHighlighted }"
-    >
+    <div class="type-title" :class="{ 'text-accent': isHighlighted }">
       <span v-if="isInput" class="text-accent">input </span>
       <span v-else-if="isInterface" class="text-accent">interface </span>
       <span v-else-if="isEnum" class="text-accent">enum </span>

components/graphql/TypeLink.vue

@@ -1,7 +1,6 @@
 <template>
   <span
     :class="isScalar ? 'text-secondaryLight' : 'cursor-pointer text-accent'"
-    class="font-mono"
     @click="jumpToType"
   >
     {{ typeString }}