refactor: gql docs

components/graphql/Field.vue

@@ -1,6 +1,9 @@
 <template>
-  <div class="p-2 m-2 border-b border-dashed border-divider">
-    <div class="field-title" :class="{ 'field-highlighted': isHighlighted }">
+  <div>
+    <div
+      class="font-bold text-xs field-title"
+      :class="{ 'field-highlighted': isHighlighted }"
+    >
       {{ fieldName }}
       <span v-if="fieldArgs.length > 0">
         (
@@ -10,7 +13,7 @@
             :gql-type="field.type"
             :jump-type-callback="jumpTypeCallback"
           />
-          <span v-if="index !== fieldArgs.length - 1"> , </span>
+          <span v-if="index !== fieldArgs.length - 1">, </span>
         </span>
         ) </span
       >:
@@ -21,7 +24,7 @@
     </div>
     <div
       v-if="gqlField.description"
-      class="py-2 text-sm text-secondaryLight field-desc"
+      class="py-2 text-xs text-secondaryLight field-desc"
     >
       {{ gqlField.description }}
     </div>
@@ -29,31 +32,32 @@
       v-if="gqlField.isDeprecated"
       class="
         inline-block
-        px-4
-        py-2
-        my-2
-        text-sm
-        font-bold
-        text-black
+        px-2
+        py-1
+        my-1
+        text-xs text-black
         bg-yellow-200
-        rounded-lg
+        rounded
+        font-bold
         field-deprecated
       "
     >
       {{ $t("deprecated") }}
     </div>
     <div v-if="fieldArgs.length > 0">
-      <h5 class="my-2 text-xs">ARGUMENTS:</h5>
-      <div class="px-4 border-l-2 border-accent">
+      <h5 class="my-2 text-xs">Arguments:</h5>
+      <div class="pl-4 border-l-2 border-divider">
         <div v-for="(field, index) in fieldArgs" :key="index">
-          {{ field.name }}:
-          <GraphqlTypeLink
-            :gql-type="field.type"
-            :jump-type-callback="jumpTypeCallback"
-          />
+          <span class="font-bold text-xs">
+            {{ field.name }}:
+            <GraphqlTypeLink
+              :gql-type="field.type"
+              :jump-type-callback="jumpTypeCallback"
+            />
+          </span>
           <div
             v-if="field.description"
-            class="py-2 text-sm text-secondaryLight field-desc"
+            class="py-2 text-xs text-secondaryLight field-desc"
           >
             {{ field.description }}
           </div>

components/graphql/Type.vue

@@ -1,55 +1,57 @@
 <template>
-  <div :id="`type_${gqlType.name}`" class="p-2 m-2">
+  <div :id="`type_${gqlType.name}`" class="p-4">
     <div
-      class="font-bold type-title"
-      :class="{ 'type-highlighted': isHighlighted }"
+      class="font-bold text-xs 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>
       {{ gqlType.name }}
     </div>
-    <div v-if="gqlType.description" class="mt-2 text-secondaryLight type-desc">
+    <div
+      v-if="gqlType.description"
+      class="py-2 text-xs text-secondaryLight type-desc"
+    >
       {{ gqlType.description }}
     </div>
-    <div v-if="interfaces.length > 0" class="mb-2">
-      <h5>{{ $t("interfaces") }}</h5>
-      <div
-        v-for="gqlInterface in interfaces"
-        :key="gqlInterface.name"
-        class="m-2 ml-4"
-      >
+    <div v-if="interfaces.length > 0">
+      <h5 class="my-2 text-xs">Interfaces:</h5>
+      <div v-for="gqlInterface in interfaces" :key="gqlInterface.name">
         <GraphqlTypeLink
           :gql-type="gqlInterface"
           :jump-type-callback="jumpTypeCallback"
+          class="pl-4 border-l-2 border-divider"
         />
       </div>
     </div>
     <div v-if="children.length > 0" class="mb-2">
-      <h5>{{ $t("children") }}</h5>
-      <div v-for="child in children" :key="child.name" class="m-2 ml-4">
-        <GraphqlTypeLink
-          :gql-type="child"
-          :jump-type-callback="jumpTypeCallback"
-        />
-      </div>
+      <h5 class="my-2 text-xs">Children:</h5>
+      <GraphqlTypeLink
+        v-for="child in children"
+        :key="child.name"
+        :gql-type="child"
+        :jump-type-callback="jumpTypeCallback"
+        class="pl-4 border-l-2 border-divider"
+      />
     </div>
     <div v-if="gqlType.getFields">
-      <h5>{{ $t("fields") }}</h5>
-      <div v-for="field in gqlType.getFields()" :key="field.name">
-        <GraphqlField
-          :gql-field="field"
-          :is-highlighted="isFieldHighlighted({ field })"
-          :jump-type-callback="jumpTypeCallback"
-        />
-      </div>
+      <h5 class="my-2 text-xs">Fields:</h5>
+      <GraphqlField
+        v-for="field in gqlType.getFields()"
+        :key="field.name"
+        class="pl-4 border-l-2 border-divider"
+        :gql-field="field"
+        :is-highlighted="isFieldHighlighted({ field })"
+        :jump-type-callback="jumpTypeCallback"
+      />
     </div>
     <div v-if="isEnum">
-      <h5>{{ $t("values") }}</h5>
+      <h5 class="my-2 text-xs">Values:</h5>
       <div
         v-for="value in gqlType.getValues()"
         :key="value.name"
-        class="m-4"
+        class="pl-4 border-l-2 border-divider"
         v-text="value.name"
       ></div>
     </div>

components/graphql/TypeLink.vue

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