🎨 UI tweaks, added empty state prompts in Collections

components/collections/collection.vue

@@ -41,6 +41,9 @@
                         v-on:edit-folder="editFolder"
                     />
                 </li>
+                <li v-if="collection.folders.length === 0">
+                  <label>Collection is empty</label>
+                </li>
             </ul>
 
             <ul>

components/collections/folder.vue

@@ -29,6 +29,9 @@
                         :request-index="index"
                     ></request>
                 </li>
+                <li v-if="folder.requests.length === 0">
+                  <label>Folder is empty</label>
+                </li>
             </ul>
         </div>
     </div>

components/collections/index.vue

@@ -12,12 +12,13 @@
     <exportCollection :show="showExportModal" v-on:hide-model='toggleExport'></exportCollection>
 
     <div class='flex-wrap'>
-      <h3 class="title">Collections</h3>
       <div>
         <button class="icon" @click="toggleModal">
           <i class="material-icons">add</i>
           <span>New</span>
         </button>
+      </div>
+      <div>
         <button class="icon" @click="toggleExport">
           <i class="material-icons">import_export</i>
           <span>Export</span>
@@ -33,6 +34,9 @@
           v-on:edit-collection="editCollection"
           ></collection>
       </li>
+      <li v-if="collections.length === 0">
+        <label>Collections are empty</label>
+      </li>
     </ul>
   </div>
 </template>

components/history.vue

@@ -1,5 +1,5 @@
 <template>
-  <pw-section class="gray" icon="history" label="History">
+  <pw-section class="green" icon="history" label="History">
     <ul>
       <li id="filter-history">
         <input aria-label="Search" type="text" placeholder="search history" :readonly="history.length === 0" v-model="filterText">