refactor(ui): popovers

assets/scss/styles.scss

@@ -59,6 +59,8 @@ body {
   -webkit-touch-callout: none;
 }
 
+.fade-enter-active,
+.fade-leave-active,
 .page-enter-active,
 .page-leave-active,
 .layout-enter-active,
@@ -66,10 +68,11 @@ body {
   @apply transition;
 }
 
-.page-enter,
+.fade-enter,
-.page-leave-active,
+.fade-leave-to .page-enter,
+.page-leave-to,
 .layout-enter,
-.layout-leave-active {
+.layout-leave-to {
   @apply opacity-0;
 }
 

components/app/GitHubStarButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <TranslateFade appear>
+  <transition name="fade" appear>
     <GithubButton
       title="Star Hoppscotch"
       href="https://github.com/hoppscotch/hoppscotch"
@@ -15,7 +15,7 @@
       aria-label="Star Hoppscotch on GitHub"
       data-size="large"
     />
-  </TranslateFade>
+  </transition>
 </template>
 
 <script>

components/app/Header.vue

@@ -17,13 +17,20 @@
           label="Get Started"
           @click.native="showLogin = true"
         />
-        <tippy v-else tabindex="-1" trigger="click" theme="popover" arrow>
+        <tippy
+          v-else
+          ref="user"
+          tabindex="-1"
+          trigger="click"
+          theme="popover"
+          arrow
+        >
           <template #trigger>
             <ProfilePicture
               v-if="currentUser.photoURL"
               v-tippy="{ theme: 'tooltip' }"
               :url="currentUser.photoURL"
-              class="mr-4"
+              :alt="currentUser.displayName"
               :title="
                 (currentUser.displayName ||
                   '<label><i>Name not found</i></label>') +
@@ -38,8 +45,19 @@
               icon="account_circle"
             />
           </template>
-          <SmartItem to="/settings" icon="settings" :label="$t('settings')" />
+          <SmartItem
-          <FirebaseLogout />
+            to="/profile"
+            icon="person"
+            :label="$t('profile')"
+            @click.native="$refs.user.tippy().hide()"
+          />
+          <SmartItem
+            to="/settings"
+            icon="settings"
+            :label="$t('settings')"
+            @click.native="$refs.user.tippy().hide()"
+          />
+          <FirebaseLogout @confirm-logout="$refs.user.tippy().hide()" />
         </tippy>
       </span>
       <span tabindex="-1">

components/collections/ImportExport.vue

@@ -17,36 +17,36 @@
           v-if="
             mode == 'import_export' && collectionsType.type == 'my-collections'
           "
+          ref="options"
           tabindex="-1"
           trigger="click"
           theme="popover"
           arrow
         >
           <template #trigger>
-            <ButtonSecondary
+            <TabPrimary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('more')"
               icon="more_vert"
             />
           </template>
-          <div>
+          <SmartItem
-            <ButtonSecondary
             icon="assignment_returned"
             :label="$t('import_from_gist')"
-              @click.native="readCollectionGist"
+            @click.native="
+              readCollectionGist
+              $refs.options.tippy().hide()
+            "
           />
-          </div>
+          <SmartItem
-          <div
             v-tippy="{ theme: 'tooltip' }"
-            title="{
+            :title="
-                content: !currentUser
+              !currentUser
                 ? $t('login_with_github_to') + $t('create_secret_gist')
                 : currentUser.provider !== 'github.com'
                 ? $t('login_with_github_to') + $t('create_secret_gist')
-                  : null,
+                : null
-              }"
+            "
-          >
-            <ButtonSecondary
             :disabled="
               !currentUser
                 ? true
@@ -56,9 +56,11 @@
             "
             icon="assignment_turned_in"
             :label="$t('create_secret_gist')"
-              @click.native="createCollectionGist"
+            @click.native="
+              createCollectionGist
+              $refs.options.tippy().hide()
+            "
           />
-          </div>
         </tippy>
         <ButtonSecondary icon="close" @click.native="hideModal" />
       </div>

components/collections/graphql/Collection.vue

@@ -31,39 +31,46 @@
           icon="topic"
           @click.native="$emit('select-collection')"
         />
-        <tippy tabindex="-1" trigger="click" theme="popover" arrow>
+        <tippy
+          ref="options"
+          tabindex="-1"
+          trigger="click"
+          theme="popover"
+          arrow
+        >
           <template #trigger>
-            <ButtonSecondary
+            <TabPrimary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('more')"
               icon="more_vert"
             />
           </template>
-          <div>
+          <SmartItem
-            <ButtonSecondary
             icon="create_new_folder"
             :label="$t('new_folder')"
             @click.native="
               $emit('add-folder', {
                 path: `${collectionIndex}`,
               })
+              $refs.options.tippy().hide()
             "
           />
-          </div>
+          <SmartItem
-          <div>
-            <ButtonSecondary
             icon="create"
-              label="$t('edit')"
+            :label="$t('edit')"
-              @click.native="$emit('edit-collection')"
+            @click.native="
+              $emit('edit-collection')
+              $refs.options.tippy().hide()
+            "
           />
-          </div>
+          <SmartItem
-          <div>
-            <ButtonSecondary
             icon="delete"
             :label="$t('delete')"
-              @click.native="confirmRemove = true"
+            @click.native="
+              confirmRemove = true
+              $refs.options.tippy().hide()
+            "
           />
-          </div>
         </tippy>
       </div>
     </div>

components/collections/graphql/Folder.vue

@@ -23,35 +23,38 @@
         <i v-else class="material-icons">folder_open</i>
         <span>{{ folder.name }}</span>
       </div>
-      <tippy tabindex="-1" trigger="click" theme="popover" arrow>
+      <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
         <template #trigger>
-          <ButtonSecondary
+          <TabPrimary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('more')"
             icon="more_vert"
           />
         </template>
-        <div>
+        <SmartItem
-          <ButtonSecondary
           icon="create_new_folder"
           :label="$t('new_folder')"
-            @click.native="$emit('add-folder', { folder, path: folderPath })"
+          @click.native="
+            $emit('add-folder', { folder, path: folderPath })
+            $refs.options.tippy().hide()
+          "
         />
-        </div>
+        <SmartItem
-        <div>
-          <ButtonSecondary
           icon="edit"
           :labeel="$t('edit')"
-            @click.native="$emit('edit-folder', { folder, folderPath })"
+          @click.native="
+            $emit('edit-folder', { folder, folderPath })
+            $refs.options.tippy().hide()
+          "
         />
-        </div>
+        <SmartItem
-        <div>
-          <ButtonSecondary
           icon="delete"
           :label="$t('delete')"
-            @click.native="confirmRemove = true"
+          @click.native="
+            confirmRemove = true
+            $refs.options.tippy().hide()
+          "
         />
-        </div>
       </tippy>
     </div>
     <div v-show="showChildren || isFiltered">

components/collections/graphql/ImportExport.vue

@@ -3,32 +3,37 @@
     <template #header>
       <h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
       <div>
-        <tippy tabindex="-1" trigger="click" theme="popover" arrow>
+        <tippy
+          ref="options"
+          tabindex="-1"
+          trigger="click"
+          theme="popover"
+          arrow
+        >
           <template #trigger>
-            <ButtonSecondary
+            <TabPrimary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('more')"
               icon="more_vert"
             />
           </template>
-          <div>
+          <SmartItem
-            <ButtonSecondary
             icon="assignment_returned"
             :label="$t('import_from_gist')"
-              @click.native="readCollectionGist"
+            @click.native="
+              readCollectionGist
+              $refs.options.tippy().hide()
+            "
           />
-          </div>
+          <SmartItem
-          <div
             v-tippy="{ theme: 'tooltip' }"
-            title="{
+            :title="
-                content: !currentUser
+              !currentUser
                 ? $t('login_with_github_to') + $t('create_secret_gist')
                 : currentUser.provider !== 'github.com'
                 ? $t('login_with_github_to') + $t('create_secret_gist')
-                  : null,
+                : null
-              }"
+            "
-          >
-            <ButtonSecondary
             :disabled="
               !currentUser
                 ? true
@@ -38,9 +43,11 @@
             "
             icon="assignment_turned_in"
             :label="$t('create_secret_gist')"
-              @click.native="createCollectionGist"
+            @click.native="
+              createCollectionGist
+              $refs.options.tippy().hide()
+            "
           />
-          </div>
         </tippy>
         <ButtonSecondary icon="close" @click.native="hideModal" />
       </div>

components/collections/graphql/Request.vue

@@ -18,16 +18,15 @@
           @click.native="!doc ? selectRequest() : {}"
         />
       </div>
-      <tippy tabindex="-1" trigger="click" theme="popover" arrow>
+      <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
         <template #trigger>
-          <ButtonSecondary
+          <TabPrimary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('more')"
             icon="more_vert"
           />
         </template>
-        <div>
+        <SmartItem
-          <ButtonSecondary
           icon="edit"
           :label="$t('edit')"
           @click.native="
@@ -36,16 +35,17 @@
               requestIndex,
               folderPath,
             })
+            $refs.options.tippy().hide()
           "
         />
-        </div>
+        <SmartItem
-        <div>
-          <ButtonSecondary
           icon="delete"
           :label="$t('delete')"
-            @click.native="confirmRemove = true"
+          @click.native="
+            confirmRemove = true
+            $refs.options.tippy().hide()
+          "
         />
-        </div>
       </tippy>
     </div>
     <SmartConfirmModal

components/collections/my/Collection.vue

@@ -38,16 +38,21 @@
           icon="check_box"
           @click.native="$emit('unselect-collection')"
         />
-        <tippy tabindex="-1" trigger="click" theme="popover" arrow>
+        <tippy
+          ref="options"
+          tabindex="-1"
+          trigger="click"
+          theme="popover"
+          arrow
+        >
           <template #trigger>
-            <ButtonSecondary
+            <TabPrimary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('more')"
               icon="more_vert"
             />
           </template>
-          <div>
+          <SmartItem
-            <ButtonSecondary
             icon="create_new_folder"
             :label="$t('new_folder')"
             @click.native="
@@ -55,23 +60,25 @@
                 folder: collection,
                 path: `${collectionIndex}`,
               })
+              $refs.options.tippy().hide()
             "
           />
-          </div>
+          <SmartItem
-          <div>
-            <ButtonSecondary
             icon="create"
             :label="$t('edit')"
-              @click.native="$emit('edit-collection')"
+            @click.native="
+              $emit('edit-collection')
+              $refs.options.tippy().hide()
+            "
           />
-          </div>
+          <SmartItem
-          <div>
-            <ButtonSecondary
             icon="delete"
             :label="$t('delete')"
-              @click.native="confirmRemove = true"
+            @click.native="
+              confirmRemove = true
+              $refs.options.tippy().hide()
+            "
           />
-          </div>
         </tippy>
       </div>
     </div>

components/collections/my/Folder.vue

@@ -25,23 +25,23 @@
         >
         <i v-else class="material-icons">folder_open</i>
       </div>
-      <tippy tabindex="-1" trigger="click" theme="popover" arrow>
+      <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
         <template #trigger>
-          <ButtonSecondary
+          <TabPrimary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('more')"
             icon="more_vert"
           />
         </template>
-        <div>
+        <SmartItem
-          <ButtonSecondary
           icon="create_new_folder"
           :label="$t('new_folder')"
-            @click.native="$emit('add-folder', { folder, path: folderPath })"
+          @click.native="
+            $emit('add-folder', { folder, path: folderPath })
+            $refs.options.tippy().hide()
+          "
         />
-        </div>
+        <SmartItem
-        <div>
-          <ButtonSecondary
           icon="edit"
           :label="$t('edit')"
           @click.native="
@@ -51,16 +51,17 @@
               collectionIndex,
               folderPath,
             })
+            $refs.options.tippy().hide()
           "
         />
-        </div>
+        <SmartItem
-        <div>
-          <ButtonSecondary
           icon="delete"
           :labl="$t('delete')"
-            @click.native="confirmRemove = true"
+          @click.native="
+            confirmRemove = true
+            $refs.options.tippy().hide()
+          "
         />
-        </div>
       </tippy>
     </div>
     <div v-show="showChildren || isFiltered">

components/collections/my/Request.vue

@@ -21,16 +21,15 @@
           @click.native="!doc ? selectRequest() : {}"
         />
       </div>
-      <tippy tabindex="-1" trigger="click" theme="popover" arrow>
+      <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
         <template #trigger>
-          <ButtonSecondary
+          <TabPrimary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('more')"
             icon="more_vert"
           />
         </template>
-        <div>
+        <SmartItem
-          <ButtonSecondary
           icon="edit"
           :label="$t('edit')"
           @click.native="
@@ -42,16 +41,17 @@
               requestIndex,
               folderPath,
             })
+            $refs.options.tippy().hide()
           "
         />
-        </div>
+        <SmartItem
-        <div>
-          <ButtonSecondary
           icon="delete"
           :label="$t('delete')"
-            @click.native="confirmRemove = true"
+          @click.native="
+            confirmRemove = true
+            $refs.options.tippy().hide()
+          "
         />
-        </div>
       </tippy>
     </div>
     <SmartConfirmModal

components/collections/teams/Collection.vue

@@ -30,17 +30,22 @@
           icon="check_box"
           @click.native="$emit('unselect-collection')"
         />
-        <tippy tabindex="-1" trigger="click" theme="popover" arrow>
+        <tippy
+          ref="options"
+          tabindex="-1"
+          trigger="click"
+          theme="popover"
+          arrow
+        >
           <template #trigger>
-            <ButtonSecondary
+            <TabPrimary
               v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('more')"
               icon="more_vert"
             />
           </template>
-          <div>
+          <SmartItem
-            <ButtonSecondary
             v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
             icon="create_new_folder"
             :label="$t('new_folder')"
@@ -49,25 +54,27 @@
                 folder: collection,
                 path: `${collectionIndex}`,
               })
+              $refs.options.tippy().hide()
             "
           />
-          </div>
+          <SmartItem
-          <div>
-            <ButtonSecondary
             v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
             icon="create"
             :label="$t('edit')"
-              @click.native="$emit('edit-collection')"
+            @click.native="
+              $emit('edit-collection')
+              $refs.options.tippy().hide()
+            "
           />
-          </div>
+          <SmartItem
-          <div>
-            <ButtonSecondary
             v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
             icon="delete"
             :label="$t('delete')"
-              @click.native="confirmRemove = true"
+            @click.native="
+              confirmRemove = true
+              $refs.options.tippy().hide()
+            "
           />
-          </div>
         </tippy>
       </div>
     </div>

components/collections/teams/Folder.vue

@@ -17,25 +17,25 @@
         >
         <i v-else class="material-icons">folder_open</i>
       </div>
-      <tippy tabindex="-1" trigger="click" theme="popover" arrow>
+      <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
         <template #trigger>
-          <ButtonSecondary
+          <TabPrimary
             v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('more')"
             icon="more_vert"
           />
         </template>
-        <div>
+        <SmartItem
-          <ButtonSecondary
           v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
           icon="create_new_folder"
           :label="$t('new_folder')"
-            @click.native="$emit('add-folder', { folder, path: folderPath })"
+          @click.native="
+            $emit('add-folder', { folder, path: folderPath })
+            $refs.options.tippy().hide()
+          "
         />
-        </div>
+        <SmartItem
-        <div>
-          <ButtonSecondary
           v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
           icon="edit"
           :label="$t('edit')"
@@ -46,17 +46,18 @@
               collectionIndex,
               folderPath: '',
             })
+            $refs.options.tippy().hide()
           "
         />
-        </div>
+        <SmartItem
-        <div>
-          <ButtonSecondary
           v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
           icon="delete"
           :label="$t('delete')"
-            @click.native="confirmRemove = true"
+          @click.native="
+            confirmRemove = true
+            $refs.options.tippy().hide()
+          "
         />
-        </div>
       </tippy>
     </div>
     <div v-show="showChildren || isFiltered">

components/collections/teams/Request.vue

@@ -15,17 +15,16 @@
           request.method
         }}</span>
       </div>
-      <tippy tabindex="-1" trigger="click" theme="popover" arrow>
+      <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
         <template #trigger>
-          <ButtonSecondary
+          <TabPrimary
             v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('more')"
             icon="more_vert"
           />
         </template>
-        <div>
+        <SmartItem
-          <ButtonSecondary
           icon="edit"
           :label="$t('edit')"
           @click.native="
@@ -36,16 +35,17 @@
               request,
               requestIndex,
             })
+            $refs.options.tippy().hide()
           "
         />
-        </div>
+        <SmartItem
-        <div>
-          <ButtonSecondary
           icon="delete"
           :label="$t('delete')"
-            @click.native="confirmRemove = true"
+          @click.native="
+            confirmRemove = true
+            $refs.options.tippy().hide()
+          "
         />
-        </div>
       </tippy>
     </div>
     <SmartConfirmModal

components/environments/Environment.vue

@@ -8,28 +8,30 @@
           @click.native="$emit('edit-environment')"
         />
       </div>
-      <tippy tabindex="-1" trigger="click" theme="popover" arrow>
+      <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
         <template #trigger>
-          <ButtonSecondary
+          <TabPrimary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('more')"
             icon="more_vert"
           />
         </template>
-        <div>
+        <SmartItem
-          <ButtonSecondary
           icon="create"
           :label="$t('edit')"
-            @click.native="$emit('edit-environment')"
+          @click.native="
+            $emit('edit-environment')
+            $refs.options.tippy().hide()
+          "
         />
-        </div>
+        <SmartItem
-        <div>
-          <ButtonSecondary
           icon="delete"
           :label="$t('delete')"
-            @click.native="confirmRemove = true"
+          @click.native="
+            confirmRemove = true
+            $refs.options.tippy().hide()
+          "
         />
-        </div>
       </tippy>
     </div>
     <SmartConfirmModal

components/environments/ImportExport.vue

@@ -5,32 +5,37 @@
         {{ $t("import_export") }} {{ $t("environments") }}
       </h3>
       <div>
-        <tippy tabindex="-1" trigger="click" theme="popover" arrow>
+        <tippy
+          ref="options"
+          tabindex="-1"
+          trigger="click"
+          theme="popover"
+          arrow
+        >
           <template #trigger>
-            <ButtonSecondary
+            <TabPrimary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('more')"
               icon="more_vert"
             />
           </template>
-          <div>
+          <SmartItem
-            <ButtonSecondary
             icon="assignment_returned"
             :label="$t('import_from_gist')"
-              @click.native="readEnvironmentGist"
+            @click.native="
+              readEnvironmentGist
+              $refs.options.tippy().hide()
+            "
           />
-          </div>
+          <SmartItem
-          <div
             v-tippy="{ theme: 'tooltip' }"
-            title="{
+            :title="
-                content: !currentUser
+              !currentUser
                 ? $t('login_with_github_to') + $t('create_secret_gist')
                 : currentUser.provider !== 'github.com'
                 ? $t('login_with_github_to') + $t('create_secret_gist')
-                  : null,
+                : null
-              }"
+            "
-          >
-            <ButtonSecondary
             :disabled="
               !currentUser
                 ? true
@@ -40,9 +45,11 @@
             "
             icon="assignment_turned_in"
             :label="$t('create_secret_gist')"
-              @click.native="createEnvironmentGist"
+            @click.native="
+              createEnvironmentGist
+              $refs.options.tippy().hide()
+            "
           />
-          </div>
         </tippy>
         <ButtonSecondary icon="close" @click.native="hideModal" />
       </div>

components/firebase/Logout.vue

@@ -1,9 +1,18 @@
 <template>
-  <div>
+  <div class="flex">
-    <ButtonSecondary
+    <SmartItem
       icon="exit_to_app"
       :label="$t('logout')"
-      @click.native="logout"
+      @click.native="
+        $emit('confirm-logout')
+        confirmLogout = true
+      "
+    />
+    <SmartConfirmModal
+      :show="confirmLogout"
+      :title="$t('are_you_sure_logout')"
+      @hide-modal="confirmLogout = false"
+      @resolve="logout"
     />
   </div>
 </template>
@@ -13,6 +22,11 @@ import Vue from "vue"
 import { signOutUser } from "~/helpers/fb/auth"
 
 export default Vue.extend({
+  data() {
+    return {
+      confirmLogout: false,
+    }
+  },
   methods: {
     async logout() {
       try {

components/history/graphql/Card.vue

@@ -15,9 +15,7 @@
       </li>
       <ButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
-        title="{
+        :title="!entry.star ? $t('add_star') : $t('remove_star')"
-          content: !entry.star ? $t('add_star') : $t('remove_star'),
-        }"
         data-testid="star_button"
         :class="{ stared: entry.star }"
         :icon="entry.star ? 'star' : 'star_border'"
@@ -25,40 +23,40 @@
       />
       <ButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
-        title="{
+        :title="expand ? $t('hide_more') : $t('show_more')"
-          content: expand ? $t('hide_more') : $t('show_more'),
-        }"
         data-testid="query_expand"
         :icon="expand ? 'unfold_less' : 'unfold_more'"
         @click.native="expand = !expand"
       />
-      <tippy tabindex="-1" trigger="click" theme="popover" arrow>
+      <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
         <template #trigger>
-          <ButtonSecondary
+          <TabPrimary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('options')"
             data-testid="options"
             icon="more_vert"
           />
         </template>
-        <div>
+        <SmartItem
-          <ButtonSecondary
           data-testid="restore_history_entry"
           :aria-label="$t('restore')"
           icon="restore"
           :label="$t('restore')"
-            @click.native="$emit('use-entry')"
+          @click.native="
+            $emit('use-entry')
+            $refs.options.tippy().hide()
+          "
         />
-        </div>
+        <SmartItem
-        <div>
-          <ButtonSecondary
           data-testid="delete_history_entry"
           :aria-label="$t('delete')"
           icon="delete"
           :label="$t('delete')"
-            @click.native="$emit('delete-entry')"
+          @click.native="
+            $emit('delete-entry')
+            $refs.options.tippy().hide()
+          "
         />
-        </div>
       </tippy>
     </div>
     <div class="flex">
@@ -137,14 +135,4 @@ export default {
 .stared {
   color: #f8e81c !important;
 }
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: all 0.2s;
-}
-
-.fade-enter,
-.fade-leave-to {
-  @apply opacity-0;
-}
 </style>

components/history/index.vue

@@ -50,7 +50,7 @@
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          title="{ content: !showMore ? $t('show_more') : $t('hide_more') }"
+          :title="!showMore ? $t('show_more') : $t('hide_more')"
           icon="!showMore ? 'unfold_more' : 'unfold_less'"
           @click.native="toggleCollapse()"
         />

components/history/rest/Card.vue

@@ -23,9 +23,7 @@
       <span>
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          title="{
+          :title="!entry.star ? $t('add_star') : $t('remove_star')"
-            content: !entry.star ? $t('add_star') : $t('remove_star'),
-          }"
           data-testid="star_button"
           :class="{ stared: entry.star }"
           :icon="entry.star ? 'star' : 'star_border'"
@@ -46,32 +44,34 @@
               </i>
 
           </li> -->
-      <tippy tabindex="-1" trigger="click" theme="popover" arrow>
+      <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
         <template #trigger>
-          <ButtonSecondary
+          <TabPrimary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('options')"
             icon="more_vert"
           />
         </template>
-        <div>
+        <SmartItem
-          <ButtonSecondary
           data-testid="restore_history_entry"
           :aria-label="$t('edit')"
           icon="restore"
           :label="$t('restore')"
-            @click.native="$emit('use-entry')"
+          @click.native="
+            $emit('use-entry')
+            $refs.options.tippy().hide()
+          "
         />
-        </div>
+        <SmartItem
-        <div>
-          <ButtonSecondary
           data-testid="delete_history_entry"
           :aria-label="$t('delete')"
           icon="delete"
           :label="$t('delete')"
-            @click.native="$emit('delete-entry')"
+          @click.native="
+            $emit('delete-entry')
+            $refs.options.tippy().hide()
+          "
         />
-        </div>
       </tippy>
     </div>
     <div class="flex">
@@ -154,14 +154,4 @@ export default {
 .stared {
   color: #f8e81c !important;
 }
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: all 0.2s;
-}
-
-.fade-enter,
-.fade-leave-to {
-  @apply opacity-0;
-}
 </style>

components/http/BodyParameters.vue

@@ -68,13 +68,13 @@
         <li>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
-            title="{
+            :title="
-              content: param.hasOwnProperty('active')
+              param.hasOwnProperty('active')
                 ? param.active
                   ? $t('turn_off')
                   : $t('turn_on')
-                : $t('turn_off'),
+                : $t('turn_off')
-            }"
+            "
             :icon="
               param.hasOwnProperty('active')
                 ? param.active

components/http/CodegenModal.vue

@@ -9,7 +9,13 @@
     <template #body>
       <label for="requestType">{{ $t("choose_language") }}</label>
       <span class="select-wrapper">
-        <tippy tabindex="-1" trigger="click" theme="popover" arrow>
+        <tippy
+          ref="options"
+          tabindex="-1"
+          trigger="click"
+          theme="popover"
+          arrow
+        >
           <template #trigger>
             <pre v-if="requestType">{{
               codegens.find((x) => x.id === requestType).name
@@ -24,10 +30,15 @@
               autofocus
             />
           </template>
-          <div v-for="gen in codegens" :key="gen.id">
+          <SmartItem
-            <ButtonSecondary @click.native="requestType = gen.id" />
+            v-for="gen in codegens"
-            {{ gen.name }}
+            :key="gen.id"
-          </div>
+            :label="gen.name"
+            @click.native="
+              requestType = gen.id
+              $refs.options.tippy().hide()
+            "
+          />
         </tippy>
       </span>
       <div class="row-wrapper">

components/http/Headers.vue

@@ -63,13 +63,13 @@
         <li>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
-            title="{
+            :title="
-              content: header.hasOwnProperty('active')
+              header.hasOwnProperty('active')
                 ? header.active
                   ? $t('turn_off')
                   : $t('turn_on')
-                : $t('turn_off'),
+                : $t('turn_off')
-            }"
+            "
             :icon="
               param.hasOwnProperty('active')
                 ? param.active

components/http/Parameters.vue

@@ -82,13 +82,13 @@
         <li>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
-            title="{
+            :title="
-              content: param.hasOwnProperty('active')
+              param.hasOwnProperty('active')
                 ? param.active
                   ? $t('turn_off')
                   : $t('turn_on')
-                : $t('turn_off'),
+                : $t('turn_off')
-            }"
+            "
             :icon="
               param.hasOwnProperty('active')
                 ? param.active

components/lenses/renderers/HTMLLensRenderer.vue

@@ -7,20 +7,16 @@
           v-if="response.body"
           ref="ToggleExpandResponse"
           v-tippy="{ theme: 'tooltip' }"
-          title="{
+          :title="
-            content: !expandResponse
+            !expandResponse ? $t('expand_response') : $t('collapse_response')
-              ? $t('expand_response')
+          "
-              : $t('collapse_response'),
-          }"
           :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
           @click.native="ToggleExpandResponse"
         />
         <ButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip' }"
-          title="{
+          :title="previewEnabled ? $t('hide_preview') : $t('preview_html')"
-            content: previewEnabled ? $t('hide_preview') : $t('preview_html'),
-          }"
           :icon="!previewEnabled ? 'visibility' : 'visibility_off'"
           @click.native.prevent="togglePreview"
         />

components/lenses/renderers/JSONLensRenderer.vue

@@ -7,11 +7,9 @@
           v-if="response.body"
           ref="ToggleExpandResponse"
           v-tippy="{ theme: 'tooltip' }"
-          title="{
+          :title="
-            content: !expandResponse
+            !expandResponse ? $t('expand_response') : $t('collapse_response')
-              ? $t('expand_response')
+          "
-              : $t('collapse_response'),
-          }"
           :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
           @click.native="ToggleExpandResponse"
         />

components/lenses/renderers/RawLensRenderer.vue

@@ -7,11 +7,9 @@
           v-if="response.body"
           ref="ToggleExpandResponse"
           v-tippy="{ theme: 'tooltip' }"
-          title="{
+          :title="
-            content: !expandResponse
+            !expandResponse ? $t('expand_response') : $t('collapse_response')
-              ? $t('expand_response')
+          "
-              : $t('collapse_response'),
-          }"
           :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
           @click.native="ToggleExpandResponse"
         />

components/lenses/renderers/XMLLensRenderer.vue

@@ -7,11 +7,9 @@
           v-if="response.body"
           ref="ToggleExpandResponse"
           v-tippy="{ theme: 'tooltip' }"
-          title="{
+          :title="
-            content: !expandResponse
+            !expandResponse ? $t('expand_response') : $t('collapse_response')
-              ? $t('expand_response')
+          "
-              : $t('collapse_response'),
-          }"
           :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
           @click.native="ToggleExpandResponse"
         />

components/profile/Picture.vue

@@ -1,17 +1,16 @@
 <template>
-  <div
+  <div class="relative flex items-center justify-center h-5 w-5 cursor-pointer">
-    class="relative flex items-center justify-center"
-    :class="`h-${size} w-${size}`"
-  >
     <img
       class="
         absolute
         object-cover object-center
         transition
-        rounded-lg
+        rounded-full
         bg-primaryDark
+        h-5
+        w-5
+        bg-primaryLight
       "
-      :class="`h-${size} w-${size} bg-${color}`"
       :src="url"
       :alt="alt"
       loading="lazy"
@@ -29,29 +28,9 @@ export default {
         .toString(36)
         .substring(7)}.svg?mood[]=happy`,
     },
-    size: {
-      type: Number,
-      default: 6,
-    },
-    radius: {
-      type: String,
-      default: "md",
-    },
-    color: {
-      type: String,
-      default: "gray",
-    },
     alt: {
       type: String,
       default: "Profile picture",
-      // default() {
-      //   return this.url
-      //     .split('/')
-      //     .pop()
-      //     .split('.')[0]
-      //     .split('#')[0]
-      //     .split('?')[0]
-      // },
     },
   },
 }

components/realtime/Sse.vue

@@ -21,8 +21,8 @@
               :disabled="!serverValid"
               name="start"
               class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
-              :icon="!connectionSSEState ? $t('start') : $t('stop')"
+              :icon="!connectionSSEState ? 'sync' : 'sync_disabled'"
-              :label="!connectionSSEState ? 'sync' : 'sync_disabled'"
+              :label="!connectionSSEState ? $t('start') : $t('stop')"
               reverse
               @click.native="toggleSSEConnection"
             />

components/realtime/Websocket.vue

@@ -63,13 +63,13 @@
           <li>
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
-              title="{
+              :title="
-                content: protocol.hasOwnProperty('active')
+                protocol.hasOwnProperty('active')
                   ? protocol.active
                     ? $t('turn_off')
                     : $t('turn_on')
-                  : $t('turn_off'),
+                  : $t('turn_off')
-              }"
+              "
               @click.native="
                 protocol.active = protocol.hasOwnProperty('active')
                   ? !protocol.active

components/smart/ChangeLanguage.vue

@@ -9,7 +9,7 @@
       :animate-fill="false"
     >
       <template #trigger>
-        <SmartItem
+        <TabPrimary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('choose_language')"
           :label="`${
@@ -24,6 +24,7 @@
         :key="locale.code"
         :to="switchLocalePath(locale.code).toString()"
         :label="`${locale.country} ${locale.name}`"
+        @click.native="$refs.language.tippy().hide()"
       />
     </tippy>
   </span>

components/smart/Modal.vue

@@ -2,24 +2,48 @@
   <transition name="modal" appear @leave="onTransitionLeaveStart">
     <div
       ref="modal"
-      class="modal-backdrop"
+      class="
+        fixed
+        inset-0
+        z-50
+        w-full
+        h-full
+        flex
+        items-center
+        justify-center
+        transition
+        bg-primaryLight
+      "
       @touchstart="onBackdropMouseDown"
       @touchend="onBackdropMouseUp"
       @mouseup="onBackdropMouseUp"
       @mousedown="onBackdropMouseDown"
     >
-      <div class="modal-container">
+      <div
-        <div class="modal-header">
+        class="
-          <div class="row-wrapper">
+          modal-container
+          relative
+          flex flex-1 flex-col
+          m-2
+          p-4
+          transition
+          bg-primary
+          rounded-lg
+          shadow-xl
+          max-w-md
+        "
+      >
+        <div class="pl-2">
+          <div class="flex items-center justify-between">
             <slot name="header"></slot>
           </div>
         </div>
-        <div class="modal-body">
+        <div class="my-4 overflow-auto max-h-xl">
           <div class="flex flex-col">
             <slot name="body"></slot>
           </div>
         </div>
-        <div v-if="hasFooterSlot" class="modal-footer">
+        <div v-if="hasFooterSlot" class="p-2">
           <div class="row-wrapper">
             <slot name="footer"></slot>
           </div>
@@ -114,45 +138,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.modal-backdrop {
-  @apply fixed;
-  @apply inset-0;
-  @apply z-50;
-  @apply w-full;
-  @apply h-full;
-  @apply flex;
-  @apply items-center;
-  @apply justify-center;
-  @apply transition;
-  @apply bg-primaryLight;
-}
-
-.modal-container {
-  @apply relative;
-  @apply flex flex-1 flex-col;
-  @apply m-2;
-  @apply p-4;
-  @apply transition;
-  @apply bg-primary;
-  @apply rounded-lg;
-  @apply shadow-xl;
-  @apply max-w-md;
-}
-
-.modal-header {
-  @apply pl-2;
-}
-
-.modal-body {
-  @apply my-4;
-  @apply overflow-auto;
-  @apply max-h-xl;
-}
-
-.modal-footer {
-  @apply p-2;
-}
-
 .modal-enter,
 .modal-leave-active {
   @apply opacity-0;

components/teams/Edit.vue

@@ -55,7 +55,13 @@
         </li>
         <li>
           <span class="select-wrapper">
-            <tippy tabindex="-1" trigger="click" theme="popover" arrow>
+            <tippy
+              ref="options"
+              tabindex="-1"
+              trigger="click"
+              theme="popover"
+              arrow
+            >
               <template #trigger>
                 <input
                   class="input"
@@ -69,18 +75,27 @@
                   readonly
                 />
               </template>
-              <div>
+              <SmartItem
-                <ButtonSecondary @click.native="updateRole(index, 'OWNER')" />
+                label="OWNER"
-                OWNER
+                @click.native="
-              </div>
+                  updateRole(index, 'OWNER')
-              <div>
+                  $refs.options.tippy().hide()
-                <ButtonSecondary @click.native="updateRole(index, 'EDITOR')" />
+                "
-                EDITOR
+              />
-              </div>
+              <SmartItem
-              <div>
+                label="EDITOR"
-                <ButtonSecondary @click.native="updateRole(index, 'VIEWER')" />
+                @click.native="
-                VIEWER
+                  updateRole(index, 'EDITOR')
-              </div>
+                  $refs.options.tippy().hide()
+                "
+              />
+              <SmartItem
+                label="VIEWER"
+                @click.native="
+                  updateRole(index, 'VIEWER')
+                  $refs.options.tippy().hide()
+                "
+              />
             </tippy>
           </span>
         </li>
@@ -119,7 +134,13 @@
         </li>
         <li>
           <span class="select-wrapper">
-            <tippy tabindex="-1" trigger="click" theme="popover" arrow>
+            <tippy
+              ref="memberOptions"
+              tabindex="-1"
+              trigger="click"
+              theme="popover"
+              arrow
+            >
               <template #trigger>
                 <input
                   class="input"
@@ -133,18 +154,27 @@
                   readonly
                 />
               </template>
-              <div>
+              <SmartItem
-                <ButtonSecondary @click.native="member.value = 'OWNER'" />
+                label="OWNER"
-                OWNER
+                @click.native="
-              </div>
+                  member.value = 'OWNER'
-              <div>
+                  $refs.options.tippy().hide()
-                <ButtonSecondary @click.native="member.value = 'EDITOR'" />
+                "
-                EDITOR
+              />
-              </div>
+              <SmartItem
-              <div>
+                label="EDITOR"
-                <ButtonSecondary @click.native="member.value = 'VIEWER'" />
+                @click.native="
-                VIEWER
+                  member.value = 'EDITOR'
-              </div>
+                  $refs.options.tippy().hide()
+                "
+              />
+              <SmartItem
+                label="VIEWER"
+                @click.native="
+                  member.value = 'VIEWER'
+                  $refs.options.tippy().hide()
+                "
+              />
             </tippy>
           </span>
         </li>

components/teams/Team.vue

@@ -9,46 +9,47 @@
         @click.native="team.myRole === 'OWNER' ? $emit('edit-team') : ''"
       />
     </div>
-    <tippy tabindex="-1" trigger="click" theme="popover" arrow>
+    <tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
       <template #trigger>
-        <ButtonSecondary
+        <TabPrimary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('more')"
           icon="more_vert"
         />
       </template>
-      <div v-if="team.myRole === 'OWNER'">
+      <SmartItem
-        <ButtonSecondary
+        v-if="team.myRole === 'OWNER'"
         icon="create"
         :label="$t('edit')"
-          @click.native="$emit('edit-team')"
+        @click.native="
+          $emit('edit-team')
+          $refs.options.tippy().hide()
+        "
       />
-      </div>
+      <SmartItem
-      <div v-if="team.myRole === 'OWNER'">
+        v-if="team.myRole === 'OWNER'"
-        <ButtonSecondary
         icon="delete"
         :label="$t('delete')"
-          @click.native="deleteTeam"
+        @click.native="
+          deleteTeam
+          $refs.options.tippy().hide()
+        "
       />
-      </div>
+      <SmartItem
-      <div>
-        <ButtonSecondary
-          :disabled="team.myRole === 'OWNER' && team.ownersCount == 1"
-          icon="remove"
-          @click.native="exitTeam"
-        />
-        <div
         v-tippy="{ theme: 'tooltip' }"
-          title="{
+        :title="
-                content:
           team.myRole === 'OWNER' && team.ownersCount == 1
             ? $t('disable_exit')
-                    : '',
+            : ''
-              }"
+        "
-        >
+        :disabled="team.myRole === 'OWNER' && team.ownersCount == 1"
-          <span>{{ $t("exit") }}</span>
+        icon="remove"
-        </div>
+        :label="$t('exit')"
-      </div>
+        @click.native="
+          exitTeam
+          $refs.options.tippy().hide()
+        "
+      />
     </tippy>
   </div>
 </template>

components/translate/Fade.vue

@@ -1,25 +0,0 @@
-<template>
-  <transition
-    :appear="appear"
-    name="translate-fade"
-    enter-active-class="transition"
-    enter-class="opacity-0"
-    enter-to-class="opacity-100"
-    leave-active-class="transition"
-    leave-class="opacity-100"
-    leave-to-class="opacity-0"
-  >
-    <slot></slot>
-  </transition>
-</template>
-
-<script>
-export default {
-  props: {
-    appear: {
-      type: Boolean,
-      default: false,
-    },
-  },
-}
-</script>

components/translate/SlideLeft.vue

@@ -1,41 +0,0 @@
-<template>
-  <transition :appear="appear" name="translate-slide-left">
-    <slot></slot>
-  </transition>
-</template>
-
-<script>
-export default {
-  props: {
-    appear: {
-      type: Boolean,
-      default: false,
-    },
-  },
-}
-</script>
-
-<style scoped lang="scss">
-.translate-slide-left {
-  &-enter,
-  &-leave-to {
-    width: 0%;
-    opacity: 0;
-    margin-left: 0;
-  }
-
-  &-enter-to,
-  &-leave {
-    width: var(--width, 33%);
-    margin-left: var(--ml, 0);
-    opacity: 1;
-  }
-
-  &-enter-active,
-  &-leave-active {
-    overflow-x: hidden;
-    white-space: nowrap;
-    transition: width 0.5s ease, opacity 0.3s ease, margin-left 0.5s ease;
-  }
-}
-</style>

components/translate/SlideRight.vue

@@ -1,25 +0,0 @@
-<template>
-  <transition
-    :appear="appear"
-    name="translate-slide-right"
-    enter-active-class="transition transform"
-    enter-class="-translate-x-full"
-    enter-to-class="translate-x-0"
-    leave-active-class="transition transform"
-    leave-class="translate-x-0"
-    leave-to-class="-translate-x-full"
-  >
-    <slot></slot>
-  </transition>
-</template>
-
-<script>
-export default {
-  props: {
-    appear: {
-      type: Boolean,
-      default: false,
-    },
-  },
-}
-</script>

lang/en-US.json

@@ -342,5 +342,7 @@
   "protocols": "Protocols",
   "protocol_count": "protocol {count}",
   "share": "Share",
-  "interceptor": "Interceptor"
+  "interceptor": "Interceptor",
+  "profile": "Profile",
+  "are_you_sure_logout": "Are you sure you want to logout?"
 }

pages/api.vue

@@ -10,7 +10,13 @@
                 <li class="shrink">
                   <label for="method">{{ $t("method") }}</label>
                   <span class="select-wrapper">
-                    <tippy tabindex="-1" trigger="click" theme="popover" arrow>
+                    <tippy
+                      ref="options"
+                      tabindex="-1"
+                      trigger="click"
+                      theme="popover"
+                      arrow
+                    >
                       <template #trigger>
                         <input
                           id="method"
@@ -20,19 +26,17 @@
                           autofocus
                         />
                       </template>
-                      <div
+                      <SmartItem
                         v-for="(methodMenuItem, index) in methodMenuItems"
                         :key="`method-${index}`"
-                      >
-                        <ButtonSecondary
                         @click.native="
                           customMethod =
                             methodMenuItem == 'CUSTOM' ? true : false
                           method = methodMenuItem
+                          $refs.options.tippy().hide()
                         "
+                        :label="methodMenuItem"
                       />
-                        {{ methodMenuItem }}
-                      </div>
                     </tippy>
                   </span>
                 </li>
@@ -101,6 +105,7 @@
                     }}</label>
                     <span class="select-wrapper">
                       <tippy
+                        ref="contentTypeOptions"
                         tabindex="-1"
                         trigger="click"
                         theme="popover"
@@ -114,17 +119,17 @@
                             readonly
                           />
                         </template>
-                        <div
+                        <SmartItem
                           v-for="(
                             contentTypeMenuItem, index
                           ) in validContentTypes"
                           :key="`content-type-${index}`"
-                        >
+                          @click.native="
-                          <ButtonSecondary
+                            contentType = contentTypeMenuItem
-                            @click.native="contentType = contentTypeMenuItem"
+                            $refs.contentTypeOptions.tippy().hide()
+                          "
+                          :label="contentTypeMenuItem"
                         />
-                          {{ contentTypeMenuItem }}
-                        </div>
                       </tippy>
                     </span>
                     <!-- <SmartAutoComplete
@@ -600,15 +605,10 @@
         </Splitpanes>
       </Pane>
       <Pane max-size="40" class="bg-pink-100">
-        <TranslateSlideLeft>
         <aside class="lg:max-w-md">
           <section>
             <SmartTabs>
-                <SmartTab
+              <SmartTab :id="'history'" :label="$t('history')" :selected="true">
-                  :id="'history'"
-                  :label="$t('history')"
-                  :selected="true"
-                >
                 <History
                   :page="'rest'"
                   @useHistory="handleUseHistory"
@@ -626,7 +626,6 @@
             </SmartTabs>
           </section>
         </aside>
-        </TranslateSlideLeft>
       </Pane>
     </Splitpanes>
 

pages/doc.vue

@@ -64,13 +64,13 @@
             <div v-else class="row-wrapper">
               <div
                 v-tippy="{ theme: 'tooltip' }"
-                title="{
+                :title="
-                  content: !currentUser
+                  !currentUser
                     ? $t('login_with_github_to') + $t('create_secret_gist')
                     : currentUser.provider !== 'github.com'
                     ? $t('login_with_github_to') + $t('create_secret_gist')
-                    : null,
+                    : null
-                }"
+                "
               >
                 <ButtonSecondary
                   :disabled="

pages/graphql.vue

@@ -92,13 +92,13 @@
                 <li>
                   <ButtonSecondary
                     v-tippy="{ theme: 'tooltip' }"
-                    title="{
+                    :title="
-                      content: header.hasOwnProperty('active')
+                      header.hasOwnProperty('active')
                         ? header.active
                           ? $t('turn_off')
                           : $t('turn_on')
-                        : $t('turn_off'),
+                        : $t('turn_off')
-                    }"
+                    "
                     @click.native="
                       $store.commit('setActiveGQLHeader', {
                         index,
@@ -149,11 +149,11 @@
               <ButtonSecondary
                 ref="ToggleExpandResponse"
                 v-tippy="{ theme: 'tooltip' }"
-                title="{
+                :title="
-                  content: !expandResponse
+                  !expandResponse
                     ? $t('expand_response')
-                    : $t('collapse_response'),
+                    : $t('collapse_response')
-                }"
+                "
                 :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
                 @click.native="ToggleExpandResponse"
               />
@@ -323,7 +323,6 @@
         </AppSection>
       </div>
 
-      <TranslateSlideLeft>
       <aside class="lg:max-w-md">
         <SmartTabs>
           <SmartTab :id="'docs'" :label="`Docs`" :selected="true">
@@ -438,7 +437,6 @@
           </SmartTab>
         </SmartTabs>
       </aside>
-      </TranslateSlideLeft>
     </div>
     <CollectionsSaveRequest
       mode="graphql"