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>