From 27d3e9e6b72d985b661c5233d3a7e242d7d4fe1c Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Fri, 25 Oct 2019 14:49:47 +0530
Subject: [PATCH] :pencil2: Better Save request modal

---
 .../collections/importExportCollections.vue    | 12 ++++++------
 components/collections/saveRequestAs.vue       | 18 +++++++++++-------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/components/collections/importExportCollections.vue b/components/collections/importExportCollections.vue
index a7d54f8ad..a5122e6c2 100644
--- a/components/collections/importExportCollections.vue
+++ b/components/collections/importExportCollections.vue
@@ -20,8 +20,8 @@
     <div slot="footer">
       <ul>
         <li>
-          <button class="icon" @click="openDialogChooseFileToReplaceWith">
-            <i class="material-icons">get_app</i>
+          <button class="icon" @click="openDialogChooseFileToReplaceWith" v-tooltip="'Replace current'">
+            <i class="material-icons">create_new_folder</i>
             <span>Replace with JSON</span>
             <input
               type="file"
@@ -32,8 +32,8 @@
           </button>
         </li>
         <li>
-          <button class="icon" @click="openDialogChooseFileToImportFrom">
-            <i class="material-icons">get_app</i>
+          <button class="icon" @click="openDialogChooseFileToImportFrom" v-tooltip="'Preserve current'">
+            <i class="material-icons">folder_shared</i>
             <span>Import from JSON</span>
             <input
               type="file"
@@ -44,9 +44,9 @@
           </button>
         </li>
         <li>
-          <button class="icon" @click="exportJSON">
+          <button class="icon" @click="exportJSON" v-tooltip="'Download file'">
             <i class="material-icons">get_app</i>
-            <span>Export JSON</span>
+            <span>Export to JSON</span>
           </button>
         </li>
       </ul>
diff --git a/components/collections/saveRequestAs.vue b/components/collections/saveRequestAs.vue
index 8777f0502..bbb5ee18f 100644
--- a/components/collections/saveRequestAs.vue
+++ b/components/collections/saveRequestAs.vue
@@ -17,20 +17,24 @@
     <div slot="body">
       <ul>
         <li>
-          <input type="text" v-model="requestData.name" v-bind:placeholder="defaultRequestName" />
-          <select type="text" v-model="requestData.collectionIndex">
+          <label for="selectLabel">Label</label>
+          <input type="text" id="selectLabel" v-model="requestData.name" v-bind:placeholder="defaultRequestName" />
+          <label for="selectCollection">Collection</label>
+          <select type="text" id="selectCollection" v-model="requestData.collectionIndex">
             <option
               v-for="(collection, index) in $store.state.postwoman.collections"
               :key="index"
               :value="index"
             >{{ collection.name }}</option>
           </select>
-          <select type="text" v-model="requestData.folderIndex">
-            <option :key="undefined" :value="undefined"></option>
+          <label for="selectFolder">Folder</label>
+          <select type="text" id="selectFolder" v-model="requestData.folderIndex">
+            <option :key="undefined" :value="undefined">/</option>
             <option v-for="(folder, index) in folders" :key="index" :value="index">{{ folder.name }}</option>
           </select>
-          <select type="text" v-model="requestData.requestIndex">
-            <option :key="undefined" :value="undefined"></option>
+          <label for="selectRequest">Request</label>
+          <select type="text" id="selectRequest" v-model="requestData.requestIndex">
+            <option :key="undefined" :value="undefined">/</option>
             <option
               v-for="(folder, index) in requests"
               :key="index"
@@ -124,7 +128,7 @@
         const userDidntSpecifyCollection =
           this.$data.requestData.collectionIndex === undefined;
         if (userDidntSpecifyCollection) {
-          this.$toast.error("please, specify collection first", {
+          this.$toast.error("Select a Collection", {
             icon: "error"
           });
           return;