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,9 +1,9 @@
 <template>
   <div>
-    <ul>
+    <div class="flex flex-1 items-center justify-between pl-4">
-      <li>
+      <label for="rawBody" class="font-semibold text-xs">
-        <div class="flex flex-1">
+        {{ $t("raw_request_body") }}
-          <label for="rawBody">{{ $t("raw_request_body") }}</label>
+      </label>
       <div>
         <ButtonSecondary
           v-if="rawInput && contentType.endsWith('json')"
@@ -13,7 +13,7 @@
           :icon="prettifyIcon"
           @click.native="prettifyRequestBody"
         />
-            <label for="payload" class="p-0">
+        <label for="payload">
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('import_json')"
@@ -43,15 +43,13 @@
         :options="{
           maxLines: '16',
           minLines: '8',
-              fontSize: '15px',
+          fontSize: '14px',
           autoScrollEditorIntoView: true,
           showPrintMargin: false,
           useWorker: false,
         }"
       />
     </div>
-      </li>
-    </ul>
   </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>
+  <div class="p-2 font-mono">
-    <p v-for="(value, key) in headers" :key="key">
+    <div v-for="(value, key) in headers" :key="key" class="flex items-center">
-      <input
+      <span
-        :value="`${key} → ${value}`"
+        class="
-        :name="key"
+          p-2
-        class="input bg-transparent"
+          flex
-        readonly
+          min-w-0
-      />
+          text-xs
-    </p>
+          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">
+    <div
-      <label for="body">{{ $t("response_body") }}</label>
+      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">
+    <div
-      <label for="body">{{ $t("response_body") }}</label>
+      class="
-      <div>
+        flex flex-1
-        <ButtonSecondary
+        sticky
-          v-if="response.body"
+        top-23
-          ref="ToggleExpandResponse"
+        z-10
-          v-tippy="{ theme: 'tooltip' }"
+        bg-primary
-          :title="
+        items-center
-            !expandResponse ? $t('expand_response') : $t('collapse_response')
+        justify-between
       "
-          :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
+    >
-          @click.native="ToggleExpandResponse"
+      <label for="body" class="px-4 font-semibold text-xs">
-        />
+        {{ $t("response_body") }}
+      </label>
+      <div>
         <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">
+    <div
-      <label for="body">{{ $t("response_body") }}</label>
+      class="
-      <div>
+        flex flex-1
-        <ButtonSecondary
+        sticky
-          v-if="response.body"
+        top-23
-          ref="ToggleExpandResponse"
+        z-10
-          v-tippy="{ theme: 'tooltip' }"
+        bg-primary
-          :title="
+        items-center
-            !expandResponse ? $t('expand_response') : $t('collapse_response')
+        justify-between
       "
-          :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
+    >
-          @click.native="ToggleExpandResponse"
+      <label for="body" class="px-4 font-semibold text-xs">
-        />
+        {{ $t("response_body") }}
+      </label>
+      <div>
         <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">
+    <div
-      <label for="body">{{ $t("response_body") }}</label>
+      class="
-      <div>
+        flex flex-1
-        <ButtonSecondary
+        sticky
-          v-if="response.body"
+        top-23
-          ref="ToggleExpandResponse"
+        z-10
-          v-tippy="{ theme: 'tooltip' }"
+        bg-primary
-          :title="
+        items-center
-            !expandResponse ? $t('expand_response') : $t('collapse_response')
+        justify-between
       "
-          :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
+    >
-          @click.native="ToggleExpandResponse"
+      <label for="body" class="px-4 font-semibold text-xs">
-        />
+        {{ $t("response_body") }}
+      </label>
+      <div>
         <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>

pages/doc.vue

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

pages/graphql.vue

@@ -183,9 +183,9 @@
                 styles="rounded-b-lg"
                 :on-run-g-q-l-query="runQuery"
                 :options="{
-                  maxLines: responseBodyMaxLines,
+                  maxLines: Infinity,
                   minLines: 10,
-                  fontSize: '15px',
+                  fontSize: '14px',
                   autoScrollEditorIntoView: true,
                   showPrintMargin: false,
                   useWorker: false,
@@ -202,7 +202,7 @@
                   :options="{
                     maxLines: 10,
                     minLines: 5,
-                    fontSize: '15px',
+                    fontSize: '14px',
                     autoScrollEditorIntoView: true,
                     showPrintMargin: false,
                     useWorker: false,
@@ -249,9 +249,9 @@
                 :value="schema"
                 :lang="'graphqlschema'"
                 :options="{
-                  maxLines: responseBodyMaxLines,
+                  maxLines: Infinity,
                   minLines: 16,
-                  fontSize: '15px',
+                  fontSize: '14px',
                   autoScrollEditorIntoView: true,
                   readOnly: true,
                   showPrintMargin: false,
@@ -299,9 +299,9 @@
                   :lang="'json'"
                   :lint="false"
                   :options="{
-                    maxLines: responseBodyMaxLines,
+                    maxLines: Infinity,
                     minLines: 10,
-                    fontSize: '15px',
+                    fontSize: '14px',
                     autoScrollEditorIntoView: true,
                     readOnly: true,
                     showPrintMargin: false,

pages/index.vue

@@ -278,12 +278,7 @@
                   }`
                 "
               >
-                <ul>
+                <div class="flex flex-1 items-center justify-between py-2">
-                  <li>
-                    <label for="contentType" class="text-sm">{{
-                      $t("content_type")
-                    }}</label>
-                    <span class="select-wrapper">
                   <tippy
                     interactive
                     ref="contentTypeOptions"
@@ -293,17 +288,31 @@
                     arrow
                   >
                     <template #trigger>
+                      <div class="flex">
+                        <span class="select-wrapper">
                           <input
                             id="contentType"
-                            class="input"
+                            class="
+                              flex
+                              w-full
+                              px-4
+                              py-2
+                              bg-primary
+                              truncate
+                              rounded-lg
+                              font-semibold font-mono
+                              text-xs
+                              transition
+                              focus:outline-none
+                            "
                             v-model="contentType"
                             readonly
                           />
+                        </span>
+                      </div>
                     </template>
                     <SmartItem
-                          v-for="(
+                      v-for="(contentTypeMenuItem, index) in validContentTypes"
-                            contentTypeMenuItem, index
-                          ) in validContentTypes"
                       :key="`content-type-${index}`"
                       @click.native="
                         contentType = contentTypeMenuItem
@@ -312,30 +321,15 @@
                       :label="contentTypeMenuItem"
                     />
                   </tippy>
-                    </span>
-                    <!-- <SmartAutoComplete
-                  :source="validContentTypes"
-                  :spellcheck="false"
-                  v-model="contentType"
-                  styles="text-sm"
-                /> -->
-                  </li>
-                </ul>
-                <ul>
-                  <li>
-                    <div class="flex flex-1">
-                      <span>
                   <SmartToggle
                     v-if="canListParameters"
                     :on="rawInput"
                     @change="rawInput = !rawInput"
+                    class="px-4"
                   >
                     {{ $t("raw_input") }}
                   </SmartToggle>
-                      </span>
                 </div>
-                  </li>
-                </ul>
                 <HttpBodyParameters
                   v-if="!rawInput"
                   :bodyParams="bodyParams"
@@ -597,11 +591,10 @@
                 :label="$t('pre_request_script')"
               >
                 <AppSection v-if="showPreRequestScript" label="preRequest">
-                  <ul>
+                  <div class="flex flex-1 items-center justify-between pl-4">
-                    <li>
+                    <label class="font-semibold text-xs">
-                      <div class="flex flex-1">
+                      {{ $t("javascript_code") }}
-                        <label>{{ $t("javascript_code") }}</label>
+                    </label>
-                        <div>
                     <ButtonSecondary
                       to="https://github.com/hoppscotch/hoppscotch/wiki/Pre-Request-Scripts"
                       blank
@@ -610,32 +603,27 @@
                       icon="help_outline"
                     />
                   </div>
-                      </div>
                   <SmartJsEditor
                     v-model="preRequestScript"
                     :options="{
                       maxLines: '16',
                       minLines: '8',
-                          fontSize: '15px',
+                      fontSize: '14px',
                       autoScrollEditorIntoView: true,
                       showPrintMargin: false,
                       useWorker: false,
                     }"
-                        styles="rounded-b-lg"
                     completeMode="pre"
                   />
-                    </li>
-                  </ul>
                 </AppSection>
               </SmartTab>
 
               <SmartTab :id="'tests'" :label="$t('tests')">
                 <AppSection v-if="testsEnabled" label="postRequestTests">
-                  <ul>
+                  <div class="flex flex-1 items-center justify-between pl-4">
-                    <li>
+                    <label class="font-semibold text-xs">
-                      <div class="flex flex-1">
+                      {{ $t("javascript_code") }}
-                        <label>{{ $t("javascript_code") }}</label>
+                    </label>
-                        <div>
                     <ButtonSecondary
                       to="https://github.com/hoppscotch/hoppscotch/wiki/Post-Request-Tests"
                       blank
@@ -644,24 +632,23 @@
                       icon="help_outline"
                     />
                   </div>
-                      </div>
                   <SmartJsEditor
                     v-model="testScript"
                     :options="{
                       maxLines: '16',
                       minLines: '8',
-                          fontSize: '15px',
+                      fontSize: '14px',
                       autoScrollEditorIntoView: true,
                       showPrintMargin: false,
                       useWorker: false,
                     }"
-                        styles="rounded-b-lg"
                     completeMode="test"
                   />
                   <div v-if="testReports.length !== 0">
-                        <div class="flex flex-1">
+                    <div class="flex flex-1 items-center justify-between pl-4">
-                          <label>Test Reports</label>
+                      <label class="font-semibold text-xs">
-                          <div>
+                        Test Reports
+                      </label>
                       <ButtonSecondary
                         @click.native="clearContent('tests', $event)"
                         v-tippy="{ theme: 'tooltip' }"
@@ -669,10 +656,10 @@
                         icon="clear_all"
                       />
                     </div>
-                        </div>
                     <div
                       v-for="(testReport, index) in testReports"
                       :key="index"
+                      class="px-4"
                     >
                       <div v-if="testReport.startBlock">
                         <hr />
@@ -682,26 +669,24 @@
                       </div>
                       <p
                         v-else-if="testReport.result"
-                            class="flex flex-1 info"
+                        class="flex flex-1 font-mono text-xs info"
                       >
-                            <span :class="testReport.styles.class">
+                        <span
-                              <i class="material-icons">
+                          :class="testReport.styles.class"
+                          class="flex items-center"
+                        >
+                          <i class="material-icons text-sm">
                             {{ testReport.styles.icon }}
                           </i>
                           <span>&nbsp;{{ testReport.result }}</span>
                           <span v-if="testReport.message">
-                                <label
+                            <label>: {{ testReport.message }}</label>
-                                  >&nbsp; • &nbsp;
-                                  {{ testReport.message }}</label
-                                >
                           </span>
                         </span>
                       </p>
                       <div v-else-if="testReport.endBlock"><hr /></div>
                     </div>
                   </div>
-                    </li>
-                  </ul>
                 </AppSection>
               </SmartTab>
             </SmartTabs>