chore(refactor): better inputs

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

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

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

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', {

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>

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"

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>

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>

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', {

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
+              <input id="name" name="name" type="text" v-model="name" class="text-sm" />
-                id="name"
-                name="name"
-                type="text"
-                v-model="name"
-                class="text-sm rounded-none"
-              />
             </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)"
+                    :placeholder="`key ${index + 1}`"
-                    :name="'bparam' + index"
+                    :name="`bparam ${index}`"
                     :value="param.key"
                     @change="
                       $store.commit('setKeyBodyParams', {
@@ -192,8 +191,8 @@
                 </li>
                 <li>
                   <input
-                    :placeholder="'value ' + (index + 1)"
+                    :placeholder="`value ${index + 1}`"
-                    :id="'bvalue' + index"
+                    :id="`bvalue ${index}`"
                     :name="'bvalue' + index"
                     :value="param.value"
                     @change="

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