refactor(ui): better select popovers

assets/scss/styles.scss

@@ -46,8 +46,8 @@ body {
   @apply select-none;
   @apply overflow-x-hidden;
 
-  font-size: var(--font-size);
-  line-height: var(--line-height);
+  font-size: var(--body-font-size);
+  line-height: var(--body-line-height);
   overflow: overlay;
   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
@@ -189,8 +189,8 @@ input,
 select,
 textarea,
 button {
-  font-size: var(--font-size);
-  line-height: var(--line-height);
+  font-size: var(--body-font-size);
+  line-height: var(--body-line-height);
 }
 
 .input[type="file"],
@@ -259,16 +259,17 @@ input[type="checkbox"] {
     @apply cursor-pointer;
 
     &::before {
-      @apply border border-secondary;
+      @apply border-2 border-divider;
       @apply rounded;
       @apply inline-flex;
       @apply items-center;
       @apply justify-center;
       @apply text-transparent;
+      @apply h-4;
+      @apply w-4;
+      @apply font-icon;
 
-      content: "\2714";
-      height: 16px;
-      width: 16px;
+      content: "\e876";
       margin: 8px 8px 8px 0;
     }
   }

assets/scss/themes.scss

@@ -300,9 +300,9 @@
 
 @mixin fontSmall {
   // Font size
-  --font-size: 0.75rem;
+  --body-font-size: 0.75rem;
   // Line height
-  --line-height: 1rem;
+  --body-line-height: 1rem;
   // Upper primary sticky fold
   --upper-primary-sticky-fold: 4.125rem;
   // Upper secondary sticky fold
@@ -321,9 +321,9 @@
 
 @mixin fontMedium {
   // Font size
-  --font-size: 0.875rem;
+  --body-font-size: 0.875rem;
   // Line height
-  --line-height: 1.25rem;
+  --body-line-height: 1.25rem;
   // Upper primary sticky fold
   --upper-primary-sticky-fold: 4.375rem;
   // Upper secondary sticky fold
@@ -342,9 +342,9 @@
 
 @mixin fontLarge {
   // Font size
-  --font-size: 1rem;
+  --body-font-size: 1rem;
   // Line height
-  --line-height: 1.5rem;
+  --body-line-height: 1.5rem;
   // Upper primary sticky fold
   --upper-primary-sticky-fold: 4.625rem;
   // Upper secondary sticky fold

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",
           })
         })

lang/en-US.json

@@ -22,7 +22,8 @@
     "remove_folder": "Are you sure you want to permanently delete this folder?",
     "remove_request": "Are you sure you want to permanently delete this request?",
     "remove_environment": "Are you sure you want to permanently delete this environment?",
-    "remove_telemetry": "Are you sure you want to opt-out of Telemetry?"
+    "remove_telemetry": "Are you sure you want to opt-out of Telemetry?",
+    "remove_team": "Are you sure you want to delete this team?"
   },
   "empty": {
     "protocols": "Protocols are empty",
@@ -53,7 +54,7 @@
     "star": "Remove star"
   },
   "show": {
-    "code": "Show Code",
+    "code": "Show code",
     "more": "Show more",
     "sidebar": "Show sidebar"
   },
@@ -87,6 +88,7 @@
     "new": "New Team",
     "new_name": "My New Team",
     "edit": "Edit Team",
+    "deleted": "Team deleted",
     "members": "Members",
     "permissions": "Permissions",
     "invalid_member_permission": "Please provide a valid permission to the team member",
@@ -146,6 +148,9 @@
     "save": "Save",
     "save_as": "Save as",
     "name": "Request name",
+    "choose_language": "Choose language",
+    "generate_code": "Generate code",
+    "generated_code": "Generated code",
     "share": "Share"
   },
   "settings": {
@@ -198,9 +203,7 @@
   "edit_environment": "Edit Environment",
   "env_variable_list": "Variable List",
   "invalid_environment_name": "Please provide a valid name for the environment",
-  "generate_code": "Generate code",
   "request_type": "Request type",
-  "generated_code": "Generated code",
   "status": "Status",
   "headers": "Headers",
   "waiting_for_connection": "waiting for connection",
@@ -260,7 +263,7 @@
   "search": "Search",
   "history_deleted": "History deleted",
   "clear": "Clear",
-  "clear_all": "Clear All",
+  "clear_all": "Clear all",
   "cleared": "Cleared",
   "time": "Time",
   "duration": "Duration",