From 2b4155e9693344f4dd0233378f0df8a1081a14dc Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sun, 2 Jan 2022 07:00:17 +0530
Subject: [PATCH] refactor: improve ui consistency

---
 packages/hoppscotch-app/assets/scss/styles.scss           | 4 ++++
 packages/hoppscotch-app/components/history/index.vue      | 2 +-
 packages/hoppscotch-app/components/realtime/Mqtt.vue      | 6 ++----
 packages/hoppscotch-app/components/realtime/Socketio.vue  | 2 +-
 packages/hoppscotch-app/components/realtime/Websocket.vue | 2 +-
 5 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/hoppscotch-app/assets/scss/styles.scss b/packages/hoppscotch-app/assets/scss/styles.scss
index cd495080..0e3aa15c 100644
--- a/packages/hoppscotch-app/assets/scss/styles.scss
+++ b/packages/hoppscotch-app/assets/scss/styles.scss
@@ -459,6 +459,10 @@ pre.ace_editor {
   @apply first-letter:capitalize;
 }
 
+details summary::-webkit-details-marker {
+  @apply hidden;
+}
+
 @media (max-width: 767px) {
   main {
     margin-bottom: env(safe-area-inset-bottom);
diff --git a/packages/hoppscotch-app/components/history/index.vue b/packages/hoppscotch-app/components/history/index.vue
index 86f411ab..f7b659f4 100644
--- a/packages/hoppscotch-app/components/history/index.vue
+++ b/packages/hoppscotch-app/components/history/index.vue
@@ -37,7 +37,7 @@
         open
       >
         <summary
-          class="flex items-center justify-between flex-1 min-w-0 transition cursor-pointer text-secondaryLight text-tiny group"
+          class="flex items-center justify-between flex-1 min-w-0 transition cursor-pointer focus:outline-none text-secondaryLight text-tiny group"
         >
           <span
             class="px-4 py-2 truncate transition group-hover:text-secondary capitalize-first"
diff --git a/packages/hoppscotch-app/components/realtime/Mqtt.vue b/packages/hoppscotch-app/components/realtime/Mqtt.vue
index 8e7e29ef..205cf0d3 100644
--- a/packages/hoppscotch-app/components/realtime/Mqtt.vue
+++ b/packages/hoppscotch-app/components/realtime/Mqtt.vue
@@ -73,7 +73,7 @@
       min-size="20"
       class="hide-scrollbar !overflow-auto"
     >
-      <div class="flex inline-flex flex-col flex-1 p-4">
+      <div class="flex flex-col flex-1 p-4">
         <label for="pub_topic" class="font-semibold text-secondaryLight">
           {{ $t("mqtt.topic") }}
         </label>
@@ -112,9 +112,7 @@
           @click.native="publish"
         />
       </div>
-      <div
-        class="flex inline-flex flex-col flex-1 p-4 mt-4 border-t border-dividerLight"
-      >
+      <div class="flex flex-col flex-1 p-4 mt-4 border-t border-dividerLight">
         <label for="sub_topic" class="font-semibold text-secondaryLight">
           {{ $t("mqtt.topic") }}
         </label>
diff --git a/packages/hoppscotch-app/components/realtime/Socketio.vue b/packages/hoppscotch-app/components/realtime/Socketio.vue
index 63c1bfd4..ca0884b3 100644
--- a/packages/hoppscotch-app/components/realtime/Socketio.vue
+++ b/packages/hoppscotch-app/components/realtime/Socketio.vue
@@ -225,7 +225,7 @@
       min-size="20"
       class="hide-scrollbar !overflow-auto"
     >
-      <div class="flex inline-flex flex-col flex-1 p-4">
+      <div class="flex flex-col flex-1 p-4">
         <label for="events" class="font-semibold text-secondaryLight">
           {{ $t("socketio.events") }}
         </label>
diff --git a/packages/hoppscotch-app/components/realtime/Websocket.vue b/packages/hoppscotch-app/components/realtime/Websocket.vue
index a24f92a1..bacd72c4 100644
--- a/packages/hoppscotch-app/components/realtime/Websocket.vue
+++ b/packages/hoppscotch-app/components/realtime/Websocket.vue
@@ -147,7 +147,7 @@
       min-size="20"
       class="hide-scrollbar !overflow-auto"
     >
-      <div class="flex inline-flex flex-col flex-1 p-4">
+      <div class="flex flex-col flex-1 p-4">
         <label
           for="websocket-message"
           class="font-semibold text-secondaryLight"