Feat/tailwind (#1179)

components/graphql/field.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="field-box">
+  <div class="p-2 m-2 border-b border-dashed border-brdColor">
     <div class="field-title">
       {{ fieldName }}
       <span v-if="fieldArgs.length > 0">
@@ -7,48 +7,24 @@
         <span v-for="(field, index) in fieldArgs" :key="index">
           {{ field.name }}:
           <typelink :gqlType="field.type" :jumpTypeCallback="jumpTypeCallback" />
-          <span v-if="index !== fieldArgs.length - 1">
-            ,
-          </span>
+          <span v-if="index !== fieldArgs.length - 1"> , </span>
         </span>
         ) </span
       >:
       <typelink :gqlType="gqlField.type" :jumpTypeCallback="jumpTypeCallback" />
     </div>
-    <div class="field-desc" v-if="gqlField.description">
+    <div class="mt-2 text-fgLightColor field-desc" v-if="gqlField.description">
       {{ gqlField.description }}
     </div>
-
-    <div class="field-deprecated" v-if="gqlField.isDeprecated">
+    <div
+      class="inline-block px-4 py-2 my-2 text-sm font-bold text-black bg-yellow-200 rounded-lg field-deprecated"
+      v-if="gqlField.isDeprecated"
+    >
       {{ $t("deprecated") }}
     </div>
   </div>
 </template>
 
-<style scoped lang="scss">
-.field-box {
-  padding: 16px;
-  margin: 4px;
-  border-bottom: 1px dashed var(--brd-color);
-}
-
-.field-deprecated {
-  background-color: yellow;
-  color: black;
-  display: inline-block;
-  padding: 4px 8px;
-  margin: 4px 0;
-  border-radius: 8px;
-  font-size: 14px;
-  font-weight: 700;
-}
-
-.field-desc {
-  color: var(--fg-light-color);
-  margin-top: 4px;
-}
-</style>
-
 <script>
 export default {
   props: {

components/graphql/queryeditor.vue

@@ -1,19 +1,17 @@
 <template>
-  <div class="show-if-initialized" :class="{ initialized }">
+  <div class="opacity-0 show-if-initialized" :class="{ initialized }">
     <pre ref="editor"></pre>
   </div>
 </template>
 
-<style lang="scss">
+<style scoped lang="scss">
 .show-if-initialized {
-  opacity: 0;
-
   &.initialized {
-    opacity: 1;
+    @apply opacity-100;
   }
 
   & > * {
-    transition: none;
+    @apply transition-none;
   }
 }
 </style>

components/graphql/type.vue

@@ -1,10 +1,9 @@
 <template>
-  <div class="type-box">
-    <div class="type-title">{{ gqlType.name }}</div>
-    <div class="type-desc" v-if="gqlType.description">
+  <div class="p-2 m-2">
+    <div class="font-bold type-title">{{ gqlType.name }}</div>
+    <div class="mt-2 text-fgLightColor type-desc" v-if="gqlType.description">
       {{ gqlType.description }}
     </div>
-
     <div v-if="gqlType.getFields">
       <h5>{{ $t("fields") }}</h5>
       <div v-for="field in gqlType.getFields()" :key="field.name">
@@ -14,22 +13,6 @@
   </div>
 </template>
 
-<style scoped lang="scss">
-.type-box {
-  padding: 16px;
-  margin: 4px 0;
-}
-
-.type-desc {
-  color: var(--fg-light-color);
-  margin-top: 4px;
-}
-
-.type-title {
-  font-weight: 700;
-}
-</style>
-
 <script>
 export default {
   props: {

components/graphql/typelink.vue

@@ -1,16 +1,9 @@
 <template>
-  <span class="typelink" @click="jumpToType">{{ typeString }}</span>
+  <span class="font-mono font-normal cursor-pointer text-acColor" @click="jumpToType">
+    {{ typeString }}
+  </span>
 </template>
 
-<style scoped lang="scss">
-.typelink {
-  color: var(--ac-color);
-  font-family: "Roboto Mono", monospace;
-  font-weight: 400;
-  cursor: pointer;
-}
-</style>
-
 <script>
 export default {
   props: {