From c223b251d6a6b47955dfbc249cbbeccdc5872d52 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Tue, 30 Jun 2020 07:39:28 +0530
Subject: [PATCH] UI improvements

---
 assets/css/styles.scss                           | 5 +++++
 components/collections/index.vue                 | 5 +----
 components/environments/index.vue                | 5 +----
 components/layout/history.vue                    | 4 ++--
 components/lenses/renderers/JSONLensRenderer.vue | 8 +-------
 5 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 0583e163b..7a9d668fe 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -286,6 +286,11 @@ hr {
 .info:not(.toasted) {
   margin-left: 4px;
   color: var(--fg-light-color);
+
+  .material-icons {
+    vertical-align: middle;
+    margin-right: 8px;
+  }
 }
 
 .bg-color {
diff --git a/components/collections/index.vue b/components/collections/index.vue
index 2aac7dad7..510dbefd7 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -62,7 +62,7 @@ TODO:
       </div>
     </div>
     <p v-if="collections.length === 0" class="info">
-      Create new collection
+      <i class="material-icons">help_outline</i> Create new collection
     </p>
     <div class="virtual-list">
       <ul>
@@ -76,9 +76,6 @@ TODO:
             @edit-request="editRequest($event)"
           />
         </li>
-        <li v-if="collections.length === 0">
-          <label>Collections are empty</label>
-        </li>
       </ul>
     </div>
     <nuxt-link :to="localePath('doc')" :aria-label="$t('documentation')">
diff --git a/components/environments/index.vue b/components/environments/index.vue
index 6d6f76085..716d3bd9d 100644
--- a/components/environments/index.vue
+++ b/components/environments/index.vue
@@ -25,7 +25,7 @@
       </div>
     </div>
     <p v-if="environments.length === 0" class="info">
-      Create new environment
+      <i class="material-icons">help_outline</i> Create new environment
     </p>
     <div class="virtual-list">
       <ul>
@@ -37,9 +37,6 @@
             @select-environment="$emit('use-environment', environment)"
           />
         </li>
-        <li v-if="environments.length === 0">
-          <label>Environments are empty</label>
-        </li>
       </ul>
     </div>
   </pw-section>
diff --git a/components/layout/history.vue b/components/layout/history.vue
index fe2bd9c89..778346c81 100644
--- a/components/layout/history.vue
+++ b/components/layout/history.vue
@@ -154,7 +154,7 @@
       </li>
     </ul>
     <p v-if="history.length === 0" class="info">
-      {{ $t("history_empty") }}
+      <i class="material-icons">schedule</i> {{ $t("history_empty") }}
     </p>
     <div v-if="history.length !== 0">
       <div class="flex-wrap" v-if="!isClearingHistory">
@@ -221,7 +221,7 @@
       </div>
       <div class="flex-wrap" v-else>
         <label for="clear-history-button" class="info">
-          {{ $t("are_you_sure") }}
+          <i class="material-icons">help_outline</i> {{ $t("are_you_sure") }}
         </label>
         <div>
           <button
diff --git a/components/lenses/renderers/JSONLensRenderer.vue b/components/lenses/renderers/JSONLensRenderer.vue
index a2c12de75..ebbba2cb6 100644
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -38,7 +38,7 @@
         </div>
       </div>
       <div class="valid-warning" v-if="jsonInvalid">
-        Invalid JSON detected
+        <p class="info"><i class="material-icons">error_outline</i> Invalid JSON</p>
       </div>
       <div id="response-details-wrapper">
         <Editor
@@ -59,12 +59,6 @@
   </ul>
 </template>
 
-<style scoped lang="scss">
-.valid-warning {
-  color: yellow;
-}
-</style>
-
 <script>
 import AceEditor from "../../ui/ace-editor"
 import { isJSONContentType } from "~/helpers/utils/contenttypes"