refactor(ui): better rendering with Inter font

components/graphql/Field.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="font-semibold text-xs field-title"
+      class="font-semibold field-title"
       :class="{ 'field-highlighted': isHighlighted }"
     >
       {{ fieldName }}
@@ -24,7 +24,7 @@
     </div>
     <div
       v-if="gqlField.description"
-      class="text-xs text-secondaryLight py-2 field-desc"
+      class="text-secondaryLight py-2 field-desc"
     >
       {{ gqlField.description }}
     </div>
@@ -35,7 +35,7 @@
         font-semibold
         bg-yellow-200
         my-1
-        text-xs text-black
+        text-black
         py-1
         px-2
         inline-block
@@ -45,10 +45,10 @@
       {{ $t("deprecated") }}
     </div>
     <div v-if="fieldArgs.length > 0">
-      <h5 class="my-2 text-xs">Arguments:</h5>
+      <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 text-xs">
+          <span class="font-semibold">
             {{ field.name }}:
             <GraphqlTypeLink
               :gql-type="field.type"
@@ -57,7 +57,7 @@
           </span>
           <div
             v-if="field.description"
-            class="text-xs text-secondaryLight py-2 field-desc"
+            class="text-secondaryLight py-2 field-desc"
           >
             {{ field.description }}
           </div>