Refactor UI

components/lenses/headers.vue

@@ -1,10 +1,8 @@
 <template>
   <div>
-    <ul v-for="(value, key) in headers" :key="key">
-      <li>
-        <input :value="`${key} → ${value}`" :name="key" class="bg-transparent" readonly />
-      </li>
-    </ul>
+    <p v-for="(value, key) in headers" :key="key">
+      <input :value="`${key} → ${value}`" :name="key" class="bg-transparent" readonly />
+    </p>
   </div>
 </template>
 

components/lenses/renderers/HTMLLensRenderer.vue

@@ -1,77 +1,75 @@
 <template>
-  <ul>
-    <li>
-      <div class="row-wrapper">
-        <label for="body">{{ $t("response") }}</label>
-        <div>
-          <button
-            class="icon"
-            @click="ToggleExpandResponse"
-            ref="ToggleExpandResponse"
-            v-if="response.body"
-            v-tooltip="{
-              content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
-            }"
-          >
-            <i class="material-icons">
-              {{ !expandResponse ? "unfold_more" : "unfold_less" }}
-            </i>
-          </button>
-          <button
-            v-if="response.body"
-            class="icon"
-            @click.prevent="togglePreview"
-            v-tooltip="{
-              content: previewEnabled ? $t('hide_preview') : $t('preview_html'),
-            }"
-          >
-            <i class="material-icons">
-              {{ !previewEnabled ? "visibility" : "visibility_off" }}
-            </i>
-          </button>
-          <button
-            class="icon"
-            @click="downloadResponse"
-            ref="downloadResponse"
-            v-if="response.body"
-            v-tooltip="$t('download_file')"
-          >
-            <i class="material-icons">save_alt</i>
-          </button>
-          <button
-            class="icon"
-            @click="copyResponse"
-            ref="copyResponse"
-            v-if="response.body"
-            v-tooltip="$t('copy_response')"
-          >
-            <i class="material-icons">content_copy</i>
-          </button>
-        </div>
-      </div>
-      <div id="response-details-wrapper">
-        <ace-editor
-          :value="responseBodyText"
-          :lang="'html'"
-          :options="{
-            maxLines: responseBodyMaxLines,
-            minLines: '16',
-            fontSize: '16px',
-            autoScrollEditorIntoView: true,
-            readOnly: true,
-            showPrintMargin: false,
-            useWorker: false,
+  <div>
+    <div class="row-wrapper">
+      <label for="body">{{ $t("response") }}</label>
+      <div>
+        <button
+          class="icon"
+          @click="ToggleExpandResponse"
+          ref="ToggleExpandResponse"
+          v-if="response.body"
+          v-tooltip="{
+            content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
           }"
-        />
-        <iframe
-          :class="{ hidden: !previewEnabled }"
-          class="covers-response"
-          ref="previewFrame"
-          src="about:blank"
-        ></iframe>
+        >
+          <i class="material-icons">
+            {{ !expandResponse ? "unfold_more" : "unfold_less" }}
+          </i>
+        </button>
+        <button
+          v-if="response.body"
+          class="icon"
+          @click.prevent="togglePreview"
+          v-tooltip="{
+            content: previewEnabled ? $t('hide_preview') : $t('preview_html'),
+          }"
+        >
+          <i class="material-icons">
+            {{ !previewEnabled ? "visibility" : "visibility_off" }}
+          </i>
+        </button>
+        <button
+          class="icon"
+          @click="downloadResponse"
+          ref="downloadResponse"
+          v-if="response.body"
+          v-tooltip="$t('download_file')"
+        >
+          <i class="material-icons">save_alt</i>
+        </button>
+        <button
+          class="icon"
+          @click="copyResponse"
+          ref="copyResponse"
+          v-if="response.body"
+          v-tooltip="$t('copy_response')"
+        >
+          <i class="material-icons">content_copy</i>
+        </button>
       </div>
-    </li>
-  </ul>
+    </div>
+    <div id="response-details-wrapper">
+      <ace-editor
+        :value="responseBodyText"
+        :lang="'html'"
+        :options="{
+          maxLines: responseBodyMaxLines,
+          minLines: '16',
+          fontSize: '16px',
+          autoScrollEditorIntoView: true,
+          readOnly: true,
+          showPrintMargin: false,
+          useWorker: false,
+        }"
+      />
+      <iframe
+        :class="{ hidden: !previewEnabled }"
+        class="covers-response"
+        ref="previewFrame"
+        src="about:blank"
+      ></iframe>
+    </div>
+  </div>
 </template>
 
 <script>

components/lenses/renderers/ImageLensRenderer.vue

@@ -1,25 +1,23 @@
 <template>
-  <ul>
-    <li>
-      <div class="row-wrapper">
-        <label for="body">{{ $t("response") }}</label>
-        <div>
-          <button
-            class="icon"
-            @click="downloadResponse"
-            ref="downloadResponse"
-            v-if="response.body"
-            v-tooltip="$t('download_file')"
-          >
-            <i class="material-icons">save_alt</i>
-          </button>
-        </div>
+  <div>
+    <div class="row-wrapper">
+      <label for="body">{{ $t("response") }}</label>
+      <div>
+        <button
+          class="icon"
+          @click="downloadResponse"
+          ref="downloadResponse"
+          v-if="response.body"
+          v-tooltip="$t('download_file')"
+        >
+          <i class="material-icons">save_alt</i>
+        </button>
       </div>
-      <div id="response-details-wrapper">
-        <img class="max-w-full" :src="imageSource" />
-      </div>
-    </li>
-  </ul>
+    </div>
+    <div id="response-details-wrapper">
+      <img class="max-w-full" :src="imageSource" />
+    </div>
+  </div>
 </template>
 
 <script>

components/lenses/renderers/JSONLensRenderer.vue

@@ -1,62 +1,60 @@
 <template>
-  <ul>
-    <li>
-      <div class="row-wrapper">
-        <label for="body">{{ $t("response") }}</label>
-        <div>
-          <button
-            class="icon"
-            @click="ToggleExpandResponse"
-            ref="ToggleExpandResponse"
-            v-if="response.body"
-            v-tooltip="{
-              content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
-            }"
-          >
-            <i class="material-icons">
-              {{ !expandResponse ? "unfold_more" : "unfold_less" }}
-            </i>
-          </button>
-          <button
-            class="icon"
-            @click="downloadResponse"
-            ref="downloadResponse"
-            v-if="response.body && canDownloadResponse"
-            v-tooltip="$t('download_file')"
-          >
-            <i class="material-icons">save_alt</i>
-          </button>
-          <button
-            class="icon"
-            @click="copyResponse"
-            ref="copyResponse"
-            v-if="response.body"
-            v-tooltip="$t('copy_response')"
-          >
-            <i class="material-icons">content_copy</i>
-          </button>
-        </div>
-      </div>
-      <div class="valid-warning" v-if="jsonInvalid">
-        <p class="info"><i class="material-icons">error_outline</i> Invalid JSON</p>
-      </div>
-      <div id="response-details-wrapper">
-        <ace-editor
-          :value="jsonBodyText"
-          :lang="'json'"
-          :options="{
-            maxLines: responseBodyMaxLines,
-            minLines: '16',
-            fontSize: '16px',
-            autoScrollEditorIntoView: true,
-            readOnly: true,
-            showPrintMargin: false,
-            useWorker: false,
+  <div>
+    <div class="row-wrapper">
+      <label for="body">{{ $t("response") }}</label>
+      <div>
+        <button
+          class="icon"
+          @click="ToggleExpandResponse"
+          ref="ToggleExpandResponse"
+          v-if="response.body"
+          v-tooltip="{
+            content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
           }"
-        />
+        >
+          <i class="material-icons">
+            {{ !expandResponse ? "unfold_more" : "unfold_less" }}
+          </i>
+        </button>
+        <button
+          class="icon"
+          @click="downloadResponse"
+          ref="downloadResponse"
+          v-if="response.body && canDownloadResponse"
+          v-tooltip="$t('download_file')"
+        >
+          <i class="material-icons">save_alt</i>
+        </button>
+        <button
+          class="icon"
+          @click="copyResponse"
+          ref="copyResponse"
+          v-if="response.body"
+          v-tooltip="$t('copy_response')"
+        >
+          <i class="material-icons">content_copy</i>
+        </button>
       </div>
-    </li>
-  </ul>
+    </div>
+    <div class="valid-warning" v-if="jsonInvalid">
+      <p class="info"><i class="material-icons">error_outline</i> Invalid JSON</p>
+    </div>
+    <div id="response-details-wrapper">
+      <ace-editor
+        :value="jsonBodyText"
+        :lang="'json'"
+        :options="{
+          maxLines: responseBodyMaxLines,
+          minLines: '16',
+          fontSize: '16px',
+          autoScrollEditorIntoView: true,
+          readOnly: true,
+          showPrintMargin: false,
+          useWorker: false,
+        }"
+      />
+    </div>
+  </div>
 </template>
 
 <script>

components/lenses/renderers/RawLensRenderer.vue

@@ -1,59 +1,57 @@
 <template>
-  <ul>
-    <li>
-      <div class="row-wrapper">
-        <label for="body">{{ $t("response") }}</label>
-        <div>
-          <button
-            class="icon"
-            @click="ToggleExpandResponse"
-            ref="ToggleExpandResponse"
-            v-if="response.body"
-            v-tooltip="{
-              content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
-            }"
-          >
-            <i class="material-icons">
-              {{ !expandResponse ? "unfold_more" : "unfold_less" }}
-            </i>
-          </button>
-          <button
-            class="icon"
-            @click="downloadResponse"
-            ref="downloadResponse"
-            v-if="response.body && canDownloadResponse"
-            v-tooltip="$t('download_file')"
-          >
-            <i class="material-icons">save_alt</i>
-          </button>
-          <button
-            class="icon"
-            @click="copyResponse"
-            ref="copyResponse"
-            v-if="response.body"
-            v-tooltip="$t('copy_response')"
-          >
-            <i class="material-icons">content_copy</i>
-          </button>
-        </div>
-      </div>
-      <div id="response-details-wrapper">
-        <ace-editor
-          :value="responseBodyText"
-          :lang="'plain_text'"
-          :options="{
-            maxLines: responseBodyMaxLines,
-            minLines: '16',
-            fontSize: '16px',
-            autoScrollEditorIntoView: true,
-            readOnly: true,
-            showPrintMargin: false,
-            useWorker: false,
+  <div>
+    <div class="row-wrapper">
+      <label for="body">{{ $t("response") }}</label>
+      <div>
+        <button
+          class="icon"
+          @click="ToggleExpandResponse"
+          ref="ToggleExpandResponse"
+          v-if="response.body"
+          v-tooltip="{
+            content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
           }"
-        />
+        >
+          <i class="material-icons">
+            {{ !expandResponse ? "unfold_more" : "unfold_less" }}
+          </i>
+        </button>
+        <button
+          class="icon"
+          @click="downloadResponse"
+          ref="downloadResponse"
+          v-if="response.body && canDownloadResponse"
+          v-tooltip="$t('download_file')"
+        >
+          <i class="material-icons">save_alt</i>
+        </button>
+        <button
+          class="icon"
+          @click="copyResponse"
+          ref="copyResponse"
+          v-if="response.body"
+          v-tooltip="$t('copy_response')"
+        >
+          <i class="material-icons">content_copy</i>
+        </button>
       </div>
-    </li>
-  </ul>
+    </div>
+    <div id="response-details-wrapper">
+      <ace-editor
+        :value="responseBodyText"
+        :lang="'plain_text'"
+        :options="{
+          maxLines: responseBodyMaxLines,
+          minLines: '16',
+          fontSize: '16px',
+          autoScrollEditorIntoView: true,
+          readOnly: true,
+          showPrintMargin: false,
+          useWorker: false,
+        }"
+      />
+    </div>
+  </div>
 </template>
 
 <script>

components/lenses/renderers/XMLLensRenderer.vue

@@ -1,59 +1,57 @@
 <template>
-  <ul>
-    <li>
-      <div class="row-wrapper">
-        <label for="body">{{ $t("response") }}</label>
-        <div>
-          <button
-            class="icon"
-            @click="ToggleExpandResponse"
-            ref="ToggleExpandResponse"
-            v-if="response.body"
-            v-tooltip="{
-              content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
-            }"
-          >
-            <i class="material-icons">
-              {{ !expandResponse ? "unfold_more" : "unfold_less" }}
-            </i>
-          </button>
-          <button
-            class="icon"
-            @click="downloadResponse"
-            ref="downloadResponse"
-            v-if="response.body"
-            v-tooltip="$t('download_file')"
-          >
-            <i class="material-icons">save_alt</i>
-          </button>
-          <button
-            class="icon"
-            @click="copyResponse"
-            ref="copyResponse"
-            v-if="response.body"
-            v-tooltip="$t('copy_response')"
-          >
-            <i class="material-icons">content_copy</i>
-          </button>
-        </div>
-      </div>
-      <div id="response-details-wrapper">
-        <ace-editor
-          :value="responseBodyText"
-          :lang="'xml'"
-          :options="{
-            maxLines: responseBodyMaxLines,
-            minLines: '16',
-            fontSize: '16px',
-            autoScrollEditorIntoView: true,
-            readOnly: true,
-            showPrintMargin: false,
-            useWorker: false,
+  <div>
+    <div class="row-wrapper">
+      <label for="body">{{ $t("response") }}</label>
+      <div>
+        <button
+          class="icon"
+          @click="ToggleExpandResponse"
+          ref="ToggleExpandResponse"
+          v-if="response.body"
+          v-tooltip="{
+            content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
           }"
-        />
+        >
+          <i class="material-icons">
+            {{ !expandResponse ? "unfold_more" : "unfold_less" }}
+          </i>
+        </button>
+        <button
+          class="icon"
+          @click="downloadResponse"
+          ref="downloadResponse"
+          v-if="response.body"
+          v-tooltip="$t('download_file')"
+        >
+          <i class="material-icons">save_alt</i>
+        </button>
+        <button
+          class="icon"
+          @click="copyResponse"
+          ref="copyResponse"
+          v-if="response.body"
+          v-tooltip="$t('copy_response')"
+        >
+          <i class="material-icons">content_copy</i>
+        </button>
       </div>
-    </li>
-  </ul>
+    </div>
+    <div id="response-details-wrapper">
+      <ace-editor
+        :value="responseBodyText"
+        :lang="'xml'"
+        :options="{
+          maxLines: responseBodyMaxLines,
+          minLines: '16',
+          fontSize: '16px',
+          autoScrollEditorIntoView: true,
+          readOnly: true,
+          showPrintMargin: false,
+          useWorker: false,
+        }"
+      />
+    </div>
+  </div>
 </template>
 
 <script>