refactor: minoe fixes and improvements

components/collections/graphql/index.vue

@@ -73,7 +73,6 @@
       v-if="collections.length === 0"
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
-      <i class="opacity-75 pb-2 material-icons">create_new_folder</i>
       <span class="text-center pb-4">
         {{ $t("empty.collections") }}
       </span>

components/environments/index.vue

@@ -80,7 +80,6 @@
       v-if="environments.length === 0"
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
-      <i class="opacity-75 pb-2 material-icons">library_add</i>
       <span class="text-center pb-4">
         {{ $t("empty.environments") }}
       </span>

components/graphql/RequestOptions.vue

@@ -62,6 +62,7 @@
               showPrintMargin: false,
               useWorker: false,
             }"
+            styles="border-b border-dividerLight"
             @update-query="updateQuery"
           />
         </AppSection>
@@ -105,6 +106,7 @@
               showPrintMargin: false,
               useWorker: false,
             }"
+            styles="border-b border-dividerLight"
           />
         </AppSection>
       </SmartTab>

components/graphql/Response.vue

@@ -47,6 +47,7 @@
         showPrintMargin: false,
         useWorker: false,
       }"
+      styles="border-b border-dividerLight"
     />
     <div
       v-else

components/graphql/Sidebar.vue

@@ -196,6 +196,7 @@
               showPrintMargin: false,
               useWorker: false,
             }"
+            styles="border-b border-dividerLight"
           />
           <div
             v-else

components/http/CodegenModal.vue

@@ -57,7 +57,7 @@
             showPrintMargin: false,
             useWorker: false,
           }"
-          styles="rounded"
+          styles="border rounded border-dividerLight"
         />
       </div>
     </template>

components/http/RawBody.vue

@@ -66,6 +66,7 @@
           showPrintMargin: false,
           useWorker: false,
         }"
+        styles="border-b border-dividerLight"
       />
     </div>
   </div>

components/lenses/renderers/HTMLLensRenderer.vue

@@ -42,7 +42,7 @@
         />
       </div>
     </div>
-    <div id="response-details-wrapper">
+    <div class="relative">
       <SmartAceEditor
         :value="responseBodyText"
         :lang="'html'"
@@ -54,6 +54,7 @@
           showPrintMargin: false,
           useWorker: false,
         }"
+        styles="border-b border-dividerLight"
       />
       <iframe
         ref="previewFrame"
@@ -135,3 +136,15 @@ export default {
   },
 }
 </script>
+
+<style lang="scss" scoped>
+.covers-response {
+  @apply absolute;
+  @apply inset-0;
+  @apply bg-primary;
+  @apply h-full;
+  @apply w-full;
+  @apply border;
+  @apply border-dividerLight;
+}
+</style>

components/lenses/renderers/ImageLensRenderer.vue

@@ -27,8 +27,11 @@
         />
       </div>
     </div>
-    <div id="response-details-wrapper">
-      <img class="max-w-full" :src="imageSource" />
+    <div class="flex relative">
+      <img
+        class="border-b border-dividerLight flex max-w-full flex-1"
+        :src="imageSource"
+      />
     </div>
   </div>
 </template>
@@ -46,7 +49,11 @@ export default {
   },
   computed: {
     responseType() {
-      return (this.response.headers["content-type"] || "")
+      return (
+        this.response.headers.find(
+          (h) => h.key.toLowerCase() === "content-type"
+        ).value || ""
+      )
         .split(";")[0]
         .toLowerCase()
     },

components/lenses/renderers/JSONLensRenderer.vue

@@ -35,7 +35,7 @@
         />
       </div>
     </div>
-    <div id="response-details-wrapper">
+    <div class="relative">
       <SmartAceEditor
         :value="jsonBodyText"
         :lang="'json'"
@@ -48,6 +48,7 @@
           showPrintMargin: false,
           useWorker: false,
         }"
+        styles="border-b border-dividerLight"
       />
     </div>
   </div>
@@ -78,7 +79,11 @@ export default {
       }
     },
     responseType() {
-      return (this.response.headers["content-type"] || "")
+      return (
+        this.response.headers.find(
+          (h) => h.key.toLowerCase() === "content-type"
+        ).value || ""
+      )
         .split(";")[0]
         .toLowerCase()
     },

components/lenses/renderers/RawLensRenderer.vue

@@ -35,7 +35,7 @@
         />
       </div>
     </div>
-    <div id="response-details-wrapper">
+    <div class="relative">
       <SmartAceEditor
         :value="responseBodyText"
         :lang="'plain_text'"
@@ -47,6 +47,7 @@
           showPrintMargin: false,
           useWorker: false,
         }"
+        styles="border-b border-dividerLight"
       />
     </div>
   </div>
@@ -69,13 +70,18 @@ export default {
   },
   computed: {
     responseType() {
-      return (this.response.headers["content-type"] || "")
+      return (
+        this.response.headers.find(
+          (h) => h.key.toLowerCase() === "content-type"
+        ).value || ""
+      )
         .split(";")[0]
         .toLowerCase()
     },
   },
   methods: {
     downloadResponse() {
+      console.log(this.responseType)
       const dataToWrite = this.responseBodyText
       const file = new Blob([dataToWrite], { type: this.responseType })
       const a = document.createElement("a")

components/lenses/renderers/XMLLensRenderer.vue

@@ -35,7 +35,7 @@
         />
       </div>
     </div>
-    <div id="response-details-wrapper">
+    <div class="relative">
       <SmartAceEditor
         :value="responseBodyText"
         :lang="'xml'"
@@ -47,6 +47,7 @@
           showPrintMargin: false,
           useWorker: false,
         }"
+        styles="border-b border-dividerLight"
       />
     </div>
   </div>
@@ -69,7 +70,11 @@ export default {
   },
   computed: {
     responseType() {
-      return (this.response.headers["content-type"] || "")
+      return (
+        this.response.headers.find(
+          (h) => h.key.toLowerCase() === "content-type"
+        ).value || ""
+      )
         .split(";")[0]
         .toLowerCase()
     },

components/smart/AutoComplete.vue

@@ -186,6 +186,7 @@ export default {
 
 <style scoped lang="scss">
 .autocomplete-wrapper {
+  @apply relative;
   @apply contents;
 
   input:focus + ul.suggestions,

components/smart/DeletableChip.vue

@@ -1,7 +1,7 @@
 <template>
   <span class="chip">
     <i class="opacity-75 material-icons">attachment</i>
-    <span class="px-2"><slot></slot></span>
+    <span class="max-w-64 px-2 truncate"><slot></slot></span>
     <ButtonSecondary
       class="rounded close-button"
       icon="close"

components/smart/Item.vue

@@ -57,10 +57,10 @@
     </span>
     <SmartSpinner v-else class="mr-4" />
     <div
-      class="flex-1 inline-flex items-start"
+      class="flex-1 inline-flex truncate items-start"
       :class="{ 'flex-col': description }"
     >
-      <div>
+      <div class="truncate">
         {{ label }}
       </div>
       <p v-if="description" class="my-2 text-left text-secondaryLight">