refactor: remove absolute classes

components/realtime/Mqtt.vue

@@ -20,10 +20,7 @@
                     w-full
                     py-2
                     px-4
-                    transition
-                    truncate
-                    focus:(border-accent
-                    outline-none)
+                    focus-visible:border-accent
                   "
                   :placeholder="$t('url')"
                 />

components/realtime/Socketio.vue

@@ -22,10 +22,7 @@
                     w-full
                     py-2
                     px-4
-                    transition
-                    truncate
-                    focus:(border-accent
-                    outline-none)
+                    focus-visible:border-accent
                   "
                   :placeholder="$t('url')"
                   @keyup.enter="urlValid ? toggleConnection() : null"
@@ -41,10 +38,7 @@
                     w-full
                     py-2
                     px-4
-                    transition
-                    truncate
-                    focus:(border-accent
-                    outline-none)
+                    focus-visible:border-accent
                   "
                   spellcheck="false"
                 />
@@ -124,7 +118,7 @@
                 v-if="index + 1 !== communication.inputs.length"
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('delete')"
-                icon="delete"
+                icon="remove_circle_outline"
                 class="rounded-l-none"
                 color="red"
                 outline

components/realtime/Sse.vue

@@ -18,10 +18,7 @@
               w-full
               py-2
               px-4
-              transition
-              truncate
-              focus:(border-accent
-              outline-none)
+              focus-visible:border-accent
             "
             :placeholder="$t('url')"
             @keyup.enter="serverValid ? toggleSSEConnection() : null"
@@ -51,10 +48,7 @@
               w-full
               py-2
               px-4
-              transition
-              truncate
-              focus:(border-accent
-              outline-none)
+              focus-visible:border-accent
             "
             spellcheck="false"
           />

components/realtime/Websocket.vue

@@ -18,10 +18,7 @@
                     w-full
                     py-2
                     px-4
-                    transition
-                    truncate
-                    focus:(border-accent
-                    outline-none)
+                    focus-visible:border-accent
                   "
                   type="url"
                   spellcheck="false"
@@ -82,14 +79,7 @@
             >
               <input
                 v-model="protocol.value"
-                class="
-                  bg-primaryLight
-                  flex flex-1
-                  py-2
-                  px-4
-                  truncate
-                  focus:outline-none
-                "
+                class="bg-primaryLight flex flex-1 py-2 px-4"
                 :placeholder="$t('count.protocol', { count: index + 1 })"
                 name="message"
                 type="text"
@@ -107,9 +97,9 @@
                   :icon="
                     protocol.hasOwnProperty('active')
                       ? protocol.active
-                        ? 'check_box'
-                        : 'check_box_outline_blank'
-                      : 'check_box'
+                        ? 'check_circle_outline'
+                        : 'radio_button_unchecked'
+                      : 'check_circle_outline'
                   "
                   color="green"
                   @click.native="
@@ -123,7 +113,7 @@
                 <ButtonSecondary
                   v-tippy="{ theme: 'tooltip' }"
                   :title="$t('delete')"
-                  icon="delete"
+                  icon="remove_circle_outline"
                   color="red"
                   @click.native="deleteProtocol({ index })"
                 />