refactor(ui): minor font tweaks

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:12.10.0-alpine
+FROM node:12-alpine
 
 LABEL maintainer="Hoppscotch (support@hoppscotch.io)"
 

assets/scss/styles.scss

@@ -449,7 +449,6 @@ code {
   @apply bg-primaryDark;
   @apply text-secondary;
   @apply font-mono;
-  @apply font-normal;
   @apply transition;
   @apply ease-in-out;
   @apply duration-150;
@@ -484,7 +483,6 @@ pre {
 
 pre.ace_editor {
   @apply font-mono;
-  @apply font-normal;
   @apply z-0;
   @apply resize-none;
 }
@@ -798,7 +796,6 @@ section {
 
     text-transform: none !important;
     padding: 12px 16px !important;
-    font-size: 16px !important;
     margin: 0 !important;
     margin-left: 8px !important;
   }

components/graphql/Field.vue

@@ -21,7 +21,7 @@
     </div>
     <div
       v-if="gqlField.description"
-      class="mt-2 text-secondaryLight field-desc"
+      class="py-2 text-sm text-secondaryLight field-desc"
     >
       {{ gqlField.description }}
     </div>
@@ -53,7 +53,7 @@
           />
           <div
             v-if="field.description"
-            class="mt-2 text-secondaryLight field-desc"
+            class="py-2 text-sm text-secondaryLight field-desc"
           >
             {{ field.description }}
           </div>

components/graphql/Type.vue

@@ -4,11 +4,9 @@
       class="font-bold type-title"
       :class="{ 'type-highlighted': isHighlighted }"
     >
-      <span v-if="isInput" class="font-normal text-accent">input </span>
+      <span v-if="isInput" class="text-accent">input </span>
-      <span v-else-if="isInterface" class="font-normal text-accent"
+      <span v-else-if="isInterface" class="text-accent">interface </span>
-        >interface
+      <span v-else-if="isEnum" class="text-accent">enum </span>
-      </span>
-      <span v-else-if="isEnum" class="font-normal text-accent">enum </span>
       {{ gqlType.name }}
     </div>
     <div v-if="gqlType.description" class="mt-2 text-secondaryLight type-desc">

components/graphql/TypeLink.vue

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

components/http/CodegenModal.vue

@@ -60,7 +60,7 @@
         :options="{
           maxLines: '10',
           minLines: '10',
-          fontSize: '16px',
+          fontSize: '15px',
           autoScrollEditorIntoView: true,
           readOnly: true,
           showPrintMargin: false,

components/http/RawBody.vue

@@ -45,7 +45,7 @@
             :options="{
               maxLines: '16',
               minLines: '8',
-              fontSize: '16px',
+              fontSize: '15px',
               autoScrollEditorIntoView: true,
               showPrintMargin: false,
               useWorker: false,

components/lenses/renderers/HTMLLensRenderer.vue

@@ -57,7 +57,7 @@
         :options="{
           maxLines: responseBodyMaxLines,
           minLines: '16',
-          fontSize: '16px',
+          fontSize: '15px',
           autoScrollEditorIntoView: true,
           readOnly: true,
           showPrintMargin: false,

components/lenses/renderers/JSONLensRenderer.vue

@@ -46,7 +46,7 @@
         :options="{
           maxLines: responseBodyMaxLines,
           minLines: '16',
-          fontSize: '16px',
+          fontSize: '15px',
           autoScrollEditorIntoView: true,
           readOnly: true,
           showPrintMargin: false,

components/lenses/renderers/RawLensRenderer.vue

@@ -45,7 +45,7 @@
         :options="{
           maxLines: responseBodyMaxLines,
           minLines: '16',
-          fontSize: '16px',
+          fontSize: '15px',
           autoScrollEditorIntoView: true,
           readOnly: true,
           showPrintMargin: false,

components/lenses/renderers/XMLLensRenderer.vue

@@ -45,7 +45,7 @@
         :options="{
           maxLines: responseBodyMaxLines,
           minLines: '16',
-          fontSize: '16px',
+          fontSize: '15px',
           autoScrollEditorIntoView: true,
           readOnly: true,
           showPrintMargin: false,

components/realtime/Log.vue

@@ -52,7 +52,6 @@ export default {
   &,
   span {
     @apply font-mono;
-    @apply font-normal;
     @apply select-text;
   }
 

components/smart/AutoComplete.vue

@@ -214,7 +214,6 @@ export default {
       @apply px-4;
       @apply text-sm;
       @apply font-mono;
-      @apply font-normal;
 
       &:last-child {
         border-radius: 0 0 8px 8px;

components/smart/DeletableChip.vue

@@ -18,7 +18,6 @@
   @apply bg-primaryDark;
   @apply text-secondary;
   @apply font-mono;
-  @apply font-normal;
   @apply transition;
   @apply ease-in-out;
   @apply duration-150;

pages/doc.vue

@@ -42,7 +42,7 @@
               :options="{
                 maxLines: '16',
                 minLines: '8',
-                fontSize: '16px',
+                fontSize: '15px',
                 autoScrollEditorIntoView: true,
                 showPrintMargin: false,
                 useWorker: false,

pages/graphql.vue

@@ -150,7 +150,7 @@
           </div>
         </AppSection>
 
-        <AppSection label="schema">
+        <AppSection ref="schema" label="schema">
           <div class="row-wrapper">
             <label>{{ $t("schema") }}</label>
             <div v-if="schema">
@@ -193,7 +193,7 @@
             :options="{
               maxLines: responseBodyMaxLines,
               minLines: 16,
-              fontSize: '16px',
+              fontSize: '15px',
               autoScrollEditorIntoView: true,
               readOnly: true,
               showPrintMargin: false,
@@ -257,7 +257,7 @@
             :options="{
               maxLines: responseBodyMaxLines,
               minLines: 10,
-              fontSize: '16px',
+              fontSize: '15px',
               autoScrollEditorIntoView: true,
               showPrintMargin: false,
               useWorker: false,
@@ -275,7 +275,7 @@
               :options="{
                 maxLines: 10,
                 minLines: 5,
-                fontSize: '16px',
+                fontSize: '15px',
                 autoScrollEditorIntoView: true,
                 showPrintMargin: false,
                 useWorker: false,
@@ -285,7 +285,7 @@
           </div>
         </AppSection>
 
-        <AppSection label="response">
+        <AppSection ref="response" label="response">
           <div class="flex flex-col">
             <label>{{ $t("response") }}</label>
             <div class="row-wrapper">
@@ -319,7 +319,7 @@
               :options="{
                 maxLines: responseBodyMaxLines,
                 minLines: 10,
-                fontSize: '16px',
+                fontSize: '15px',
                 autoScrollEditorIntoView: true,
                 readOnly: true,
                 showPrintMargin: false,

pages/index.vue

@@ -3,7 +3,7 @@
   <div class="page">
     <div class="content">
       <div class="page-columns inner-left">
-        <AppSection label="request">
+        <AppSection ref="request" label="request">
           <ul>
             <li class="shrink">
               <label for="method">{{ $t("method") }}</label>
@@ -496,7 +496,7 @@
                       :options="{
                         maxLines: '16',
                         minLines: '8',
-                        fontSize: '16px',
+                        fontSize: '15px',
                         autoScrollEditorIntoView: true,
                         showPrintMargin: false,
                         useWorker: false,
@@ -532,7 +532,7 @@
                       :options="{
                         maxLines: '16',
                         minLines: '8',
-                        fontSize: '16px',
+                        fontSize: '15px',
                         autoScrollEditorIntoView: true,
                         showPrintMargin: false,
                         useWorker: false,