refactor: remaining sections stylings

components/collections/graphql/index.vue

@@ -1,7 +1,6 @@
 <template>
   <AppSection
     label="collections"
-    class=""
     :class="{ 'rounded-lg border-2 border-divider': savingMode }"
   >
     <div

components/http/CodegenModal.vue

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

components/http/RawBody.vue

@@ -1,57 +1,55 @@
 <template>
   <div>
-    <ul>
-      <li>
-        <div class="flex flex-1">
-          <label for="rawBody">{{ $t("raw_request_body") }}</label>
-          <div>
-            <ButtonSecondary
-              v-if="rawInput && contentType.endsWith('json')"
-              ref="prettifyRequest"
-              v-tippy="{ theme: 'tooltip' }"
-              :title="$t('prettify_body')"
-              :icon="prettifyIcon"
-              @click.native="prettifyRequestBody"
-            />
-            <label for="payload" class="p-0">
-              <ButtonSecondary
-                v-tippy="{ theme: 'tooltip' }"
-                :title="$t('import_json')"
-                icon="post_add"
-                @click.native="$refs.payload.click()"
-              />
-            </label>
-            <input
-              ref="payload"
-              class="input"
-              name="payload"
-              type="file"
-              @change="uploadPayload"
-            />
-            <ButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="$t('clear')"
-              icon="clear_all"
-              @click.native="clearContent('rawParams', $event)"
-            />
-          </div>
-        </div>
-        <div class="relative">
-          <SmartAceEditor
-            v-model="rawParamsBody"
-            :lang="rawInputEditorLang"
-            :options="{
-              maxLines: '16',
-              minLines: '8',
-              fontSize: '15px',
-              autoScrollEditorIntoView: true,
-              showPrintMargin: false,
-              useWorker: false,
-            }"
+    <div class="flex flex-1 items-center justify-between pl-4">
+      <label for="rawBody" class="font-semibold text-xs">
+        {{ $t("raw_request_body") }}
+      </label>
+      <div>
+        <ButtonSecondary
+          v-if="rawInput && contentType.endsWith('json')"
+          ref="prettifyRequest"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('prettify_body')"
+          :icon="prettifyIcon"
+          @click.native="prettifyRequestBody"
+        />
+        <label for="payload">
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('import_json')"
+            icon="post_add"
+            @click.native="$refs.payload.click()"
           />
-        </div>
-      </li>
-    </ul>
+        </label>
+        <input
+          ref="payload"
+          class="input"
+          name="payload"
+          type="file"
+          @change="uploadPayload"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('clear')"
+          icon="clear_all"
+          @click.native="clearContent('rawParams', $event)"
+        />
+      </div>
+    </div>
+    <div class="relative">
+      <SmartAceEditor
+        v-model="rawParamsBody"
+        :lang="rawInputEditorLang"
+        :options="{
+          maxLines: '16',
+          minLines: '8',
+          fontSize: '14px',
+          autoScrollEditorIntoView: true,
+          showPrintMargin: false,
+          useWorker: false,
+        }"
+      />
+    </div>
   </div>
 </template>
 

components/http/ResponseMeta.vue

@@ -9,18 +9,21 @@
       items-center
       p-4
       font-mono font-semibold
-      space-x-4
+      space-x-8
     "
     :class="statusCategory ? statusCategory.className : ''"
   >
     <i v-if="active" class="animate-spin material-icons">refresh</i>
     <span v-else>
-      {{ response.status }}
+      <span class="text-secondaryDark"> Status: </span>
+      {{ response.status || $t("waiting_send_req") }}
     </span>
     <span v-if="response.duration" class="text-xs">
+      <span class="text-secondaryDark"> Time: </span>
       {{ `${response.duration} ms` }}
     </span>
     <span v-if="response.size" class="text-xs">
+      <span class="text-secondaryDark"> Size: </span>
       {{ `${response.size} B` }}
     </span>
   </div>

components/lenses/HeadersRenderer.vue

@@ -1,13 +1,50 @@
 <template>
-  <div>
-    <p v-for="(value, key) in headers" :key="key">
-      <input
-        :value="`${key} → ${value}`"
-        :name="key"
-        class="input bg-transparent"
-        readonly
-      />
-    </p>
+  <div class="p-2 font-mono">
+    <div v-for="(value, key) in headers" :key="key" class="flex items-center">
+      <span
+        class="
+          p-2
+          flex
+          min-w-0
+          text-xs
+          group-hover:text-secondaryDark
+          transition
+          font-semibold
+        "
+      >
+        <span class="truncate">
+          {{ key }}
+        </span>
+      </span>
+      <span
+        class="
+          font-mono font-bold
+          flex
+          justify-center
+          items-center
+          text-xs
+          mx-2
+          truncate
+        "
+      >
+        →
+      </span>
+      <span
+        class="
+          p-2
+          flex flex-1
+          min-w-0
+          text-xs
+          group-hover:text-secondaryDark
+          transition
+          font-semibold
+        "
+      >
+        <span class="truncate">
+          {{ value }}
+        </span>
+      </span>
+    </div>
   </div>
 </template>
 

components/lenses/renderers/HTMLLensRenderer.vue

@@ -1,18 +1,8 @@
 <template>
   <div>
-    <div class="flex flex-1">
+    <div class="flex flex-1 items-center justify-between">
       <label for="body">{{ $t("response_body") }}</label>
       <div>
-        <ButtonSecondary
-          v-if="response.body"
-          ref="ToggleExpandResponse"
-          v-tippy="{ theme: 'tooltip' }"
-          :title="
-            !expandResponse ? $t('expand_response') : $t('collapse_response')
-          "
-          :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
-          @click.native="ToggleExpandResponse"
-        />
         <ButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip' }"
@@ -43,15 +33,14 @@
         :value="responseBodyText"
         :lang="'html'"
         :options="{
-          maxLines: responseBodyMaxLines,
+          maxLines: Infinity,
           minLines: '16',
-          fontSize: '15px',
+          fontSize: '14px',
           autoScrollEditorIntoView: true,
           readOnly: true,
           showPrintMargin: false,
           useWorker: false,
         }"
-        styles="rounded-b-lg"
       />
       <iframe
         ref="previewFrame"
@@ -73,19 +62,12 @@ export default {
   },
   data() {
     return {
-      expandResponse: false,
-      responseBodyMaxLines: 16,
       downloadIcon: "save_alt",
       copyIcon: "content_copy",
       previewEnabled: false,
     }
   },
   methods: {
-    ToggleExpandResponse() {
-      this.expandResponse = !this.expandResponse
-      this.responseBodyMaxLines =
-        this.responseBodyMaxLines === Infinity ? 16 : Infinity
-    },
     downloadResponse() {
       const dataToWrite = this.responseBodyText
       const file = new Blob([dataToWrite], { type: "text/html" })

components/lenses/renderers/ImageLensRenderer.vue

@@ -1,7 +1,19 @@
 <template>
   <div>
-    <div class="flex flex-1">
-      <label for="body">{{ $t("response_body") }}</label>
+    <div
+      class="
+        flex flex-1
+        sticky
+        top-23
+        z-10
+        bg-primary
+        items-center
+        justify-between
+      "
+    >
+      <label for="body" class="px-4 font-semibold text-xs">
+        {{ $t("response_body") }}
+      </label>
       <div>
         <ButtonSecondary
           v-if="response.body"

components/lenses/renderers/JSONLensRenderer.vue

@@ -1,18 +1,20 @@
 <template>
   <div>
-    <div class="flex flex-1">
-      <label for="body">{{ $t("response_body") }}</label>
+    <div
+      class="
+        flex flex-1
+        sticky
+        top-23
+        z-10
+        bg-primary
+        items-center
+        justify-between
+      "
+    >
+      <label for="body" class="px-4 font-semibold text-xs">
+        {{ $t("response_body") }}
+      </label>
       <div>
-        <ButtonSecondary
-          v-if="response.body"
-          ref="ToggleExpandResponse"
-          v-tippy="{ theme: 'tooltip' }"
-          :title="
-            !expandResponse ? $t('expand_response') : $t('collapse_response')
-          "
-          :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
-          @click.native="ToggleExpandResponse"
-        />
         <ButtonSecondary
           v-if="response.body && canDownloadResponse"
           ref="downloadResponse"
@@ -37,15 +39,14 @@
         :lang="'json'"
         :provide-j-s-o-n-outline="true"
         :options="{
-          maxLines: responseBodyMaxLines,
+          maxLines: Infinity,
           minLines: '16',
-          fontSize: '15px',
+          fontSize: '14px',
           autoScrollEditorIntoView: true,
           readOnly: true,
           showPrintMargin: false,
           useWorker: false,
         }"
-        styles="rounded-b-lg"
       />
     </div>
   </div>
@@ -62,8 +63,6 @@ export default {
   },
   data() {
     return {
-      expandResponse: false,
-      responseBodyMaxLines: 16,
       downloadIcon: "save_alt",
       copyIcon: "content_copy",
     }
@@ -92,11 +91,6 @@ export default {
     },
   },
   methods: {
-    ToggleExpandResponse() {
-      this.expandResponse = !this.expandResponse
-      this.responseBodyMaxLines =
-        this.responseBodyMaxLines === Infinity ? 16 : Infinity
-    },
     downloadResponse() {
       const dataToWrite = this.responseBodyText
       const file = new Blob([dataToWrite], { type: this.responseType })

components/lenses/renderers/RawLensRenderer.vue

@@ -1,18 +1,20 @@
 <template>
   <div>
-    <div class="flex flex-1">
-      <label for="body">{{ $t("response_body") }}</label>
+    <div
+      class="
+        flex flex-1
+        sticky
+        top-23
+        z-10
+        bg-primary
+        items-center
+        justify-between
+      "
+    >
+      <label for="body" class="px-4 font-semibold text-xs">
+        {{ $t("response_body") }}
+      </label>
       <div>
-        <ButtonSecondary
-          v-if="response.body"
-          ref="ToggleExpandResponse"
-          v-tippy="{ theme: 'tooltip' }"
-          :title="
-            !expandResponse ? $t('expand_response') : $t('collapse_response')
-          "
-          :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
-          @click.native="ToggleExpandResponse"
-        />
         <ButtonSecondary
           v-if="response.body && canDownloadResponse"
           ref="downloadResponse"
@@ -36,15 +38,14 @@
         :value="responseBodyText"
         :lang="'plain_text'"
         :options="{
-          maxLines: responseBodyMaxLines,
+          maxLines: Infinity,
           minLines: '16',
-          fontSize: '15px',
+          fontSize: '14px',
           autoScrollEditorIntoView: true,
           readOnly: true,
           showPrintMargin: false,
           useWorker: false,
         }"
-        styles="rounded-b-lg"
       />
     </div>
   </div>
@@ -61,8 +62,6 @@ export default {
   },
   data() {
     return {
-      expandResponse: false,
-      responseBodyMaxLines: 16,
       downloadIcon: "save_alt",
       copyIcon: "content_copy",
     }
@@ -83,11 +82,6 @@ export default {
     },
   },
   methods: {
-    ToggleExpandResponse() {
-      this.expandResponse = !this.expandResponse
-      this.responseBodyMaxLines =
-        this.responseBodyMaxLines === Infinity ? 16 : Infinity
-    },
     downloadResponse() {
       const dataToWrite = this.responseBodyText
       const file = new Blob([dataToWrite], { type: this.responseType })

components/lenses/renderers/XMLLensRenderer.vue

@@ -1,18 +1,20 @@
 <template>
   <div>
-    <div class="flex flex-1">
-      <label for="body">{{ $t("response_body") }}</label>
+    <div
+      class="
+        flex flex-1
+        sticky
+        top-23
+        z-10
+        bg-primary
+        items-center
+        justify-between
+      "
+    >
+      <label for="body" class="px-4 font-semibold text-xs">
+        {{ $t("response_body") }}
+      </label>
       <div>
-        <ButtonSecondary
-          v-if="response.body"
-          ref="ToggleExpandResponse"
-          v-tippy="{ theme: 'tooltip' }"
-          :title="
-            !expandResponse ? $t('expand_response') : $t('collapse_response')
-          "
-          :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
-          @click.native="ToggleExpandResponse"
-        />
         <ButtonSecondary
           v-if="response.body"
           ref="downloadResponse"
@@ -36,15 +38,14 @@
         :value="responseBodyText"
         :lang="'xml'"
         :options="{
-          maxLines: responseBodyMaxLines,
+          maxLines: Infinity,
           minLines: '16',
-          fontSize: '15px',
+          fontSize: '14px',
           autoScrollEditorIntoView: true,
           readOnly: true,
           showPrintMargin: false,
           useWorker: false,
         }"
-        styles="rounded-b-lg"
       />
     </div>
   </div>
@@ -60,8 +61,6 @@ export default {
   },
   data() {
     return {
-      expandResponse: false,
-      responseBodyMaxLines: 16,
       copyIcon: "content_copy",
       downloadIcon: "save_alt",
     }
@@ -74,11 +73,6 @@ export default {
     },
   },
   methods: {
-    ToggleExpandResponse() {
-      this.expandResponse = !this.expandResponse
-      this.responseBodyMaxLines =
-        this.responseBodyMaxLines === Infinity ? 16 : Infinity
-    },
     downloadResponse() {
       const dataToWrite = this.responseBodyText
       const file = new Blob([dataToWrite], { type: this.responseType })

components/smart/AceEditor.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="show-if-initialized" :class="{ initialized }">
-    <div v-if="lang == 'json'" class="outline">
+    <div v-if="lang == 'json'" class="outline hide-scrollbar">
       <div v-for="(p, index) in currPath" :key="index" class="block">
         <div class="label" @click="onBlockClick(index)">
           {{ p }}
@@ -258,7 +258,7 @@ export default {
 
 .outline {
   @apply flex flex-nowrap;
-  @apply w-full;
+  @apply flex-1;
   @apply overflow-auto;
   @apply font-mono;
   @apply shadow-lg;

components/smart/Toggle.vue

@@ -1,9 +1,11 @@
 <template>
-  <div class="inline-block cursor-pointer" @click="$emit('change')">
+  <div class="inline-flex cursor-pointer flex-nowrap" @click="$emit('change')">
     <label ref="toggle" class="toggle" :class="{ on: on }">
       <span class="handle"></span>
     </label>
-    <label class="pl-0 align-middle cursor-pointer">
+    <label
+      class="pl-0 align-middle font-semibold truncate text-xs cursor-pointer"
+    >
       <slot></slot>
     </label>
   </div>