refactor: remaining sections stylings

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>