refactor(ui): better select popovers

components/http/Body.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="flex flex-1 py-2 items-center justify-between">
+    <div class="flex flex-1 p-2 items-center justify-between">
       <tippy
         ref="contentTypeOptions"
         interactive
@@ -12,23 +12,7 @@
         <template #trigger>
           <div class="flex">
             <span class="select-wrapper">
-              <input
-                id="contentType"
-                v-model="contentType"
-                class="
-                  bg-primary
-                  rounded
-                  flex
-                  font-semibold font-mono
-                  w-full
-                  py-2
-                  px-4
-                  transition
-                  truncate
-                  focus:outline-none
-                "
-                readonly
-              />
+              <ButtonSecondary class="pr-8" :label="contentType" outline />
             </span>
           </div>
         </template>
@@ -36,13 +20,14 @@
           v-for="(contentTypeItem, index) in validContentTypes"
           :key="`contentTypeItem-${index}`"
           :label="contentTypeItem"
+          :info-icon="contentTypeItem === contentType ? 'done' : ''"
           @click.native="
             contentType = contentTypeItem
             $refs.contentTypeOptions.tippy().hide()
           "
         />
       </tippy>
-      <SmartToggle :on="rawInput" class="px-4" @change="rawInput = !rawInput">
+      <SmartToggle :on="rawInput" class="px-2" @change="rawInput = !rawInput">
         {{ $t("raw_input") }}
       </SmartToggle>
     </div>

components/http/CodegenModal.vue

@@ -1,13 +1,13 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
-      <h3 class="heading">{{ $t("generate_code") }}</h3>
+      <h3 class="heading">{{ $t("request.generate_code") }}</h3>
       <ButtonSecondary icon="close" @click.native="hideModal" />
     </template>
     <template #body>
       <div class="flex flex-col px-2">
         <label for="requestType" class="font-semibold px-4 pb-4">
-          {{ $t("choose_language") }}
+          {{ $t("request.choose_language") }}
         </label>
         <div class="flex flex-1">
           <span class="select-wrapper">
@@ -41,6 +41,7 @@
                 v-for="(gen, index) in codegens"
                 :key="`gen-${index}`"
                 :label="gen.name"
+                :info-icon="gen.id === codegenType ? 'done' : ''"
                 @click.native="
                   codegenType = gen.id
                   $refs.options.tippy().hide()
@@ -51,7 +52,7 @@
         </div>
         <div class="flex flex-1 justify-between">
           <label for="generatedCode" class="font-semibold px-4 pt-4 pb-4">
-            {{ $t("generated_code") }}
+            {{ $t("request.generated_code") }}
           </label>
         </div>
         <SmartAceEditor