refactor(ui): better select popovers

components/app/Header.vue

@@ -1,7 +1,7 @@
 <template>
   <header class="flex flex-1 py-2 px-4 items-center justify-between">
     <div
-      class="font-bold space-x-2 flex-shrink-0 text-sm inline-flex items-center"
+      class="font-bold space-x-4 flex-shrink-0 text-sm inline-flex items-center"
     >
       <AppLogo />
       <span>Hoppscotch</span>

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

components/smart/ChangeLanguage.vue

@@ -15,6 +15,7 @@
             :title="$t('settings.choose_language')"
             class="pr-8"
             outline
+            icon="language"
             :label="`${
               $i18n.locales.find(({ code }) => code == $i18n.locale).name
             }`"

components/smart/FontSizePicker.vue

@@ -14,6 +14,7 @@
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('settings.change_font_size')"
             class="pr-8"
+            icon="format_size"
             outline
             :label="`${fontSizes.find(({ code }) => code == active.code).name}`"
           />
@@ -22,6 +23,7 @@
           v-for="(size, index) in fontSizes"
           :key="`size-${index}`"
           :label="size.name"
+          :info-icon="size.code === active.code ? 'done' : ''"
           @click.native="
             setActiveFont(size)
             $refs.fontSize.tippy().hide()

components/smart/Item.vue

@@ -39,7 +39,10 @@
       />
     </span>
     <SmartSpinner v-else class="mr-4" />
-    <div class="inline-flex items-start" :class="{ 'flex-col': description }">
+    <div
+      class="flex-1 inline-flex items-start"
+      :class="{ 'flex-col': description }"
+    >
       <div class="font-semibold">
         {{ label }}
       </div>
@@ -47,7 +50,7 @@
         {{ description }}
       </p>
     </div>
-    <i v-if="infoIcon" class="text-accent ml-4 material-icons">
+    <i v-if="infoIcon" class="text-accent ml-6 self-end material-icons">
       {{ infoIcon }}
     </i>
   </SmartLink>

components/teams/Team.vue

@@ -19,7 +19,7 @@
             :key="`member-${index}`"
             :src="member.user.photoURL"
             :alt="member.user.displayName"
-            class="rounded-full h-4 ring-primary ring-2 w-4 inline-block"
+            class="rounded-full h-5 ring-primary ring-2 w-5 inline-block"
           />
         </div>
       </div>
@@ -55,7 +55,7 @@
           color="red"
           :label="$t('delete')"
           @click.native="
-            deleteTeam
+            deleteTeam()
             $refs.options.tippy().hide()
           "
         />
@@ -70,7 +70,7 @@
           icon="remove"
           :label="$t('team.exit')"
           @click.native="
-            exitTeam
+            exitTeam()
             $refs.options.tippy().hide()
           "
         />
@@ -89,13 +89,13 @@ export default {
   },
   methods: {
     deleteTeam() {
-      if (!confirm("Are you sure you want to remove this team?")) return
+      if (!confirm(this.$t("confirm.remove_team"))) return
       // Call to the graphql mutation
       teamUtils
         .deleteTeam(this.$apollo, this.teamID)
         .then(() => {
           // Result
-          this.$toast.success(this.$t("team.new_created"), {
+          this.$toast.success(this.$t("team.deleted"), {
             icon: "done",
           })
         })