UI improvements

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 {

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')">

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>

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

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"