refactor(ui): better font weight, icon hover states, etc

components/lenses/HeadersRenderer.vue

@@ -1,41 +1,19 @@
 <template>
-  <div class="font-mono p-2">
+  <div class="p-2">
     <div
       v-for="(header, index) in headers"
       :key="`header-${index}`"
       class="flex items-center"
     >
-      <span
-        class="
-          flex
-          font-semibold
-          min-w-0
-          p-2
-          transition
-          group-hover:text-secondaryDark
-        "
-      >
+      <span class="flex min-w-0 p-2 transition group-hover:text-secondaryDark">
         <span class="rounded select-all truncate">
           {{ header.key }}
         </span>
       </span>
+      <span class="flex mx-2 justify-center items-center truncate"> → </span>
       <span
         class="
-          flex
-          font-mono font-bold
-          mx-2
-          justify-center
-          items-center
-          truncate
-        "
-      >
-        →
-      </span>
-      <span
-        class="
-          flex
-          font-semibold
-          flex-1
+          flex flex-1
           min-w-0
           p-2
           transition

components/lenses/renderers/HTMLLensRenderer.vue

@@ -6,13 +6,14 @@
         border-b border-dividerLight
         flex flex-1
         top-lowerSecondaryStickyFold
+        pl-4
         z-10
         sticky
         items-center
         justify-between
       "
     >
-      <label for="body" class="font-semibold px-4">
+      <label class="font-semibold text-secondaryLight">
         {{ $t("response_body") }}
       </label>
       <div class="flex">

components/lenses/renderers/ImageLensRenderer.vue

@@ -6,13 +6,14 @@
         border-b border-dividerLight
         flex flex-1
         top-lowerSecondaryStickyFold
+        pl-4
         z-10
         sticky
         items-center
         justify-between
       "
     >
-      <label for="body" class="font-semibold px-4">
+      <label class="font-semibold text-secondaryLight">
         {{ $t("response_body") }}
       </label>
       <div class="flex">

components/lenses/renderers/JSONLensRenderer.vue

@@ -6,13 +6,14 @@
         border-b border-dividerLight
         flex flex-1
         top-lowerSecondaryStickyFold
+        pl-4
         z-10
         sticky
         items-center
         justify-between
       "
     >
-      <label for="body" class="font-semibold px-4">
+      <label class="font-semibold text-secondaryLight">
         {{ $t("response_body") }}
       </label>
       <div class="flex">

components/lenses/renderers/RawLensRenderer.vue

@@ -6,13 +6,14 @@
         border-b border-dividerLight
         flex flex-1
         top-lowerSecondaryStickyFold
+        pl-4
         z-10
         sticky
         items-center
         justify-between
       "
     >
-      <label for="body" class="font-semibold px-4">
+      <label class="font-semibold text-secondaryLight">
         {{ $t("response_body") }}
       </label>
       <div class="flex">

components/lenses/renderers/XMLLensRenderer.vue

@@ -6,13 +6,14 @@
         border-b border-dividerLight
         flex flex-1
         top-lowerSecondaryStickyFold
+        pl-4
         z-10
         sticky
         items-center
         justify-between
       "
     >
-      <label for="body" class="font-semibold px-4">
+      <label class="font-semibold text-secondaryLight">
         {{ $t("response_body") }}
       </label>
       <div class="flex">