From a56e2bb5774abfdf1f57c4bed041835c13c72408 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Sat, 12 Dec 2020 08:33:29 +0530
Subject: [PATCH] chore(refactor): better inputs

---
 components/environments/edit-environment.vue |  7 ++++-
 components/http/http-headers.vue             |  7 ++++-
 components/http/http-parameters.vue          |  7 ++++-
 components/http/token-list.vue               |  2 +-
 components/realtime/mqtt.vue                 |  9 ++++++-
 components/realtime/socketio.vue             |  8 +++++-
 components/realtime/sse.vue                  |  1 +
 components/realtime/websocket.vue            |  1 +
 pages/graphql.vue                            | 10 ++++++--
 pages/index.vue                              | 27 ++++++++++----------
 pages/settings.vue                           |  1 +
 11 files changed, 58 insertions(+), 22 deletions(-)

diff --git a/components/environments/edit-environment.vue b/components/environments/edit-environment.vue
index 5f0e83b08..685cb5a70 100644
--- a/components/environments/edit-environment.vue
+++ b/components/environments/edit-environment.vue
@@ -27,7 +27,12 @@
           </button>
         </div>
       </div>
-      <ul v-for="(variable, index) in this.editingEnvCopy.variables" :key="index">
+      <ul
+        v-for="(variable, index) in this.editingEnvCopy.variables"
+        :key="index"
+        class="border-b border-dashed divide-x border-brdColor divide-dashed divide-brdColor"
+        :class="{ 'border-t': index == 0 }"
+      >
         <li>
           <input
             :placeholder="$t('parameter_count', { count: index + 1 })"
diff --git a/components/http/http-headers.vue b/components/http/http-headers.vue
index 21dcac0d2..3d321c30d 100644
--- a/components/http/http-headers.vue
+++ b/components/http/http-headers.vue
@@ -16,7 +16,12 @@
         </div>
       </li>
     </ul>
-    <ul v-for="(header, index) in headers" :key="`${header.value}_${index}`">
+    <ul
+      v-for="(header, index) in headers"
+      :key="`${header.value}_${index}`"
+      class="border-b border-dashed divide-x border-brdColor divide-dashed divide-brdColor"
+      :class="{ 'border-t': index == 0 }"
+    >
       <li>
         <autocomplete
           :placeholder="$t('header_count', { count: index + 1 })"
diff --git a/components/http/http-parameters.vue b/components/http/http-parameters.vue
index 619ddad09..adcf7b847 100644
--- a/components/http/http-parameters.vue
+++ b/components/http/http-parameters.vue
@@ -16,7 +16,12 @@
         </div>
       </li>
     </ul>
-    <ul v-for="(param, index) in params" :key="index">
+    <ul
+      v-for="(param, index) in params"
+      :key="index"
+      class="border-b border-dashed divide-x border-brdColor divide-dashed divide-brdColor"
+      :class="{ 'border-t': index == 0 }"
+    >
       <li>
         <input
           :placeholder="$t('parameter_count', { count: index + 1 })"
diff --git a/components/http/token-list.vue b/components/http/token-list.vue
index a3bbc5af7..7a589d88d 100644
--- a/components/http/token-list.vue
+++ b/components/http/token-list.vue
@@ -26,7 +26,7 @@
       <ul id="token-list" v-for="(token, index) in tokens" :key="index">
         <li>
           <input
-            :placeholder="'name ' + (index + 1)"
+            :placeholder="`name ${index + 1}`"
             :value="token.name"
             @change="
               $store.commit('setOAuthTokenName', {
diff --git a/components/realtime/mqtt.vue b/components/realtime/mqtt.vue
index 8b3eae5e6..b598a6f6b 100644
--- a/components/realtime/mqtt.vue
+++ b/components/realtime/mqtt.vue
@@ -10,6 +10,7 @@
             v-model="url"
             spellcheck="false"
             class="md:rounded-bl-lg"
+            :placeholder="$t('url')"
           />
         </li>
         <div>
@@ -44,7 +45,13 @@
         </li>
         <li>
           <label for="mqtt-message">{{ $t("message") }}</label>
-          <input id="mqtt-message" type="text" v-model="msg" spellcheck="false" />
+          <input
+            id="mqtt-message"
+            type="text"
+            v-model="msg"
+            spellcheck="false"
+            class="border-dashed md:border-l border-brdColor"
+          />
         </li>
         <div>
           <li>
diff --git a/components/realtime/socketio.vue b/components/realtime/socketio.vue
index dd5b0f380..83d6fe2a9 100644
--- a/components/realtime/socketio.vue
+++ b/components/realtime/socketio.vue
@@ -12,6 +12,7 @@
             v-model="url"
             @keyup.enter="urlValid ? toggleConnection() : null"
             class="md:rounded-bl-lg"
+            :placeholder="$t('url')"
           />
         </li>
         <div>
@@ -67,7 +68,12 @@
           </div>
         </li>
       </ul>
-      <ul v-for="(input, index) of communication.inputs" :key="`input-${index}`">
+      <ul
+        v-for="(input, index) of communication.inputs"
+        :key="`input-${index}`"
+        class="border-b border-dashed divide-x border-brdColor divide-dashed divide-brdColor"
+        :class="{ 'border-t': index == 0 }"
+      >
         <li>
           <input
             name="message"
diff --git a/components/realtime/sse.vue b/components/realtime/sse.vue
index e436b4fd3..f0de956a6 100644
--- a/components/realtime/sse.vue
+++ b/components/realtime/sse.vue
@@ -11,6 +11,7 @@
             v-model="server"
             @keyup.enter="serverValid ? toggleSSEConnection() : null"
             class="md:rounded-bl-lg"
+            :placeholder="$t('url')"
           />
         </li>
         <div>
diff --git a/components/realtime/websocket.vue b/components/realtime/websocket.vue
index afab5ccb2..7024ccfd2 100644
--- a/components/realtime/websocket.vue
+++ b/components/realtime/websocket.vue
@@ -12,6 +12,7 @@
             v-model="url"
             @keyup.enter="urlValid ? toggleConnection() : null"
             class="md:rounded-bl-lg"
+            :placeholder="$t('url')"
           />
         </li>
         <div>
diff --git a/pages/graphql.vue b/pages/graphql.vue
index 3c6350313..3d917e5c3 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -13,6 +13,7 @@
                 spellcheck="false"
                 @keyup.enter="onPollSchemaClick()"
                 class="md:rounded-bl-lg"
+                :placeholder="$t('url')"
               />
             </li>
             <div>
@@ -51,7 +52,12 @@
                 </div>
               </li>
             </ul>
-            <ul v-for="(header, index) in headers" :key="`${header.value}_${index}`">
+            <ul
+              v-for="(header, index) in headers"
+              :key="`${header.value}_${index}`"
+              class="border-b border-dashed divide-x border-brdColor divide-dashed divide-brdColor"
+              :class="{ 'border-t': index == 0 }"
+            >
               <li>
                 <autocomplete
                   :placeholder="$t('header_count', { count: index + 1 })"
@@ -70,7 +76,7 @@
               <li>
                 <input
                   :placeholder="$t('value_count', { count: index + 1 })"
-                  :name="'value' + index"
+                  :name="`value ${index}`"
                   :value="header.value"
                   @change="
                     $store.commit('setGQLHeaderValue', {
diff --git a/pages/index.vue b/pages/index.vue
index e39fb486f..48226f19e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -40,7 +40,7 @@
               <input
                 v-if="!this.$store.state.postwoman.settings.EXPERIMENTAL_URL_BAR_ENABLED"
                 :class="{ error: !isValidURL }"
-                class="rounded-none"
+                class="border-dashed md:border-l border-brdColor"
                 @keyup.enter="isValidURL ? sendRequest() : null"
                 id="url"
                 name="url"
@@ -77,13 +77,7 @@
           <ul>
             <li>
               <label for="name" class="text-sm">{{ $t("token_req_name") }}</label>
-              <input
-                id="name"
-                name="name"
-                type="text"
-                v-model="name"
-                class="text-sm rounded-none"
-              />
+              <input id="name" name="name" type="text" v-model="name" class="text-sm" />
             </li>
           </ul>
           <div label="Request Body" v-if="['POST', 'PUT', 'PATCH', 'DELETE'].includes(method)">
@@ -94,7 +88,7 @@
                   :source="validContentTypes"
                   :spellcheck="false"
                   v-model="contentType"
-                  styles="text-sm rounded-none"
+                  styles="text-sm"
                 />
               </li>
             </ul>
@@ -174,11 +168,16 @@
                   </div>
                 </li>
               </ul>
-              <ul v-for="(param, index) in bodyParams" :key="index">
+              <ul
+                v-for="(param, index) in bodyParams"
+                :key="index"
+                class="border-b border-dashed divide-x border-brdColor divide-dashed divide-brdColor"
+                :class="{ 'border-t': index == 0 }"
+              >
                 <li>
                   <input
-                    :placeholder="'key ' + (index + 1)"
-                    :name="'bparam' + index"
+                    :placeholder="`key ${index + 1}`"
+                    :name="`bparam ${index}`"
                     :value="param.key"
                     @change="
                       $store.commit('setKeyBodyParams', {
@@ -192,8 +191,8 @@
                 </li>
                 <li>
                   <input
-                    :placeholder="'value ' + (index + 1)"
-                    :id="'bvalue' + index"
+                    :placeholder="`value ${index + 1}`"
+                    :id="`bvalue ${index}`"
                     :name="'bvalue' + index"
                     :value="param.value"
                     @change="
diff --git a/pages/settings.vue b/pages/settings.vue
index 785165c6c..f6d2d07be 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -127,6 +127,7 @@
           type="url"
           v-model="settings.PROXY_URL"
           :disabled="!settings.PROXY_ENABLED"
+          :placeholder="$t('url')"
         />
         <p class="info">
           {{ $t("postwoman_official_proxy_hosting") }}