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>

components/graphql/Type.vue

@@ -1,7 +1,7 @@
 <template>
   <div :id="`type_${gqlType.name}`" class="p-4">
     <div
-      class="font-semibold text-xs type-title"
+      class="font-semibold type-title"
       :class="{ 'text-accent': isHighlighted }"
     >
       <span v-if="isInput" class="text-accent">input </span>
@@ -9,14 +9,11 @@
       <span v-else-if="isEnum" class="text-accent">enum </span>
       {{ gqlType.name }}
     </div>
-    <div
-      v-if="gqlType.description"
-      class="text-xs text-secondaryLight py-2 type-desc"
-    >
+    <div v-if="gqlType.description" class="text-secondaryLight py-2 type-desc">
       {{ gqlType.description }}
     </div>
     <div v-if="interfaces.length > 0">
-      <h5 class="my-2 text-xs">Interfaces:</h5>
+      <h5 class="my-2">Interfaces:</h5>
       <div
         v-for="(gqlInterface, index) in interfaces"
         :key="`gqlInterface-${index}`"
@@ -29,7 +26,7 @@
       </div>
     </div>
     <div v-if="children.length > 0" class="mb-2">
-      <h5 class="my-2 text-xs">Children:</h5>
+      <h5 class="my-2">Children:</h5>
       <GraphqlTypeLink
         v-for="(child, index) in children"
         :key="`child-${index}`"
@@ -39,7 +36,7 @@
       />
     </div>
     <div v-if="gqlType.getFields">
-      <h5 class="my-2 text-xs">Fields:</h5>
+      <h5 class="my-2">Fields:</h5>
       <GraphqlField
         v-for="(field, index) in gqlType.getFields()"
         :key="`field-${index}`"
@@ -50,7 +47,7 @@
       />
     </div>
     <div v-if="isEnum">
-      <h5 class="my-2 text-xs">Values:</h5>
+      <h5 class="my-2">Values:</h5>
       <div
         v-for="(value, index) in gqlType.getValues()"
         :key="`value-${index}`"

components/graphql/TypeLink.vue

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