From ed91486d536a5b87239d58eab829a9c50dab51ea Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Mon, 5 Jul 2021 16:52:15 +0000
Subject: [PATCH] refactor(ui): popovers

---
 assets/scss/styles.scss                       |   9 +-
 components/app/GitHubStarButton.vue           |   4 +-
 components/app/Header.vue                     |  26 +-
 components/collections/ImportExport.vue       |  62 ++---
 components/collections/graphql/Collection.vue |  61 ++---
 components/collections/graphql/Folder.vue     |  49 ++--
 .../collections/graphql/ImportExport.vue      |  69 +++---
 components/collections/graphql/Request.vue    |  44 ++--
 components/collections/my/Collection.vue      |  63 ++---
 components/collections/my/Folder.vue          |  61 ++---
 components/collections/my/Request.vue         |  50 ++--
 components/collections/teams/Collection.vue   |  69 +++---
 components/collections/teams/Folder.vue       |  67 ++---
 components/collections/teams/Request.vue      |  48 ++--
 components/environments/Environment.vue       |  34 +--
 components/environments/ImportExport.vue      |  69 +++---
 components/firebase/Logout.vue                |  20 +-
 components/history/graphql/Card.vue           |  60 ++---
 components/history/index.vue                  |   2 +-
 components/history/rest/Card.vue              |  56 ++---
 components/http/BodyParameters.vue            |   8 +-
 components/http/CodegenModal.vue              |  21 +-
 components/http/Headers.vue                   |   8 +-
 components/http/Parameters.vue                |   8 +-
 .../lenses/renderers/HTMLLensRenderer.vue     |  12 +-
 .../lenses/renderers/JSONLensRenderer.vue     |   8 +-
 .../lenses/renderers/RawLensRenderer.vue      |   8 +-
 .../lenses/renderers/XMLLensRenderer.vue      |   8 +-
 components/profile/Picture.vue                |  31 +--
 components/realtime/Sse.vue                   |   4 +-
 components/realtime/Websocket.vue             |   8 +-
 components/smart/ChangeLanguage.vue           |   3 +-
 components/smart/Modal.vue                    |  75 +++---
 components/teams/Edit.vue                     |  82 +++++--
 components/teams/Team.vue                     |  69 +++---
 components/translate/Fade.vue                 |  25 --
 components/translate/SlideLeft.vue            |  41 ----
 components/translate/SlideRight.vue           |  25 --
 lang/en-US.json                               |   4 +-
 pages/api.vue                                 |  87 ++++---
 pages/doc.vue                                 |   8 +-
 pages/graphql.vue                             | 228 +++++++++---------
 42 files changed, 828 insertions(+), 866 deletions(-)
 delete mode 100644 components/translate/Fade.vue
 delete mode 100644 components/translate/SlideLeft.vue
 delete mode 100644 components/translate/SlideRight.vue

diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index 80ce5e88d..b384aece4 100644
--- a/assets/scss/styles.scss
+++ b/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,
-.page-leave-active,
+.fade-enter,
+.fade-leave-to .page-enter,
+.page-leave-to,
 .layout-enter,
-.layout-leave-active {
+.layout-leave-to {
   @apply opacity-0;
 }
 
diff --git a/components/app/GitHubStarButton.vue b/components/app/GitHubStarButton.vue
index a11737bc8..aaca1bf69 100644
--- a/components/app/GitHubStarButton.vue
+++ b/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>
diff --git a/components/app/Header.vue b/components/app/Header.vue
index 275969afe..814e8641d 100644
--- a/components/app/Header.vue
+++ b/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')" />
-          <FirebaseLogout />
+          <SmartItem
+            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">
diff --git a/components/collections/ImportExport.vue b/components/collections/ImportExport.vue
index b8d45455a..14f784079 100644
--- a/components/collections/ImportExport.vue
+++ b/components/collections/ImportExport.vue
@@ -17,48 +17,50 @@
           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>
-            <ButtonSecondary
-              icon="assignment_returned"
-              :label="$t('import_from_gist')"
-              @click.native="readCollectionGist"
-            />
-          </div>
-          <div
+          <SmartItem
+            icon="assignment_returned"
+            :label="$t('import_from_gist')"
+            @click.native="
+              readCollectionGist
+              $refs.options.tippy().hide()
+            "
+          />
+          <SmartItem
             v-tippy="{ theme: 'tooltip' }"
-            title="{
-                content: !currentUser
-                  ? $t('login_with_github_to') + $t('create_secret_gist')
-                  : currentUser.provider !== 'github.com'
-                  ? $t('login_with_github_to') + $t('create_secret_gist')
-                  : null,
-              }"
-          >
-            <ButtonSecondary
-              :disabled="
-                !currentUser
-                  ? true
-                  : currentUser.provider !== 'github.com'
-                  ? true
-                  : false
-              "
-              icon="assignment_turned_in"
-              :label="$t('create_secret_gist')"
-              @click.native="createCollectionGist"
-            />
-          </div>
+            :title="
+              !currentUser
+                ? $t('login_with_github_to') + $t('create_secret_gist')
+                : currentUser.provider !== 'github.com'
+                ? $t('login_with_github_to') + $t('create_secret_gist')
+                : null
+            "
+            :disabled="
+              !currentUser
+                ? true
+                : currentUser.provider !== 'github.com'
+                ? true
+                : false
+            "
+            icon="assignment_turned_in"
+            :label="$t('create_secret_gist')"
+            @click.native="
+              createCollectionGist
+              $refs.options.tippy().hide()
+            "
+          />
         </tippy>
         <ButtonSecondary icon="close" @click.native="hideModal" />
       </div>
diff --git a/components/collections/graphql/Collection.vue b/components/collections/graphql/Collection.vue
index 47ee4b5b8..39fced44f 100644
--- a/components/collections/graphql/Collection.vue
+++ b/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>
-            <ButtonSecondary
-              icon="create_new_folder"
-              :label="$t('new_folder')"
-              @click.native="
-                $emit('add-folder', {
-                  path: `${collectionIndex}`,
-                })
-              "
-            />
-          </div>
-          <div>
-            <ButtonSecondary
-              icon="create"
-              label="$t('edit')"
-              @click.native="$emit('edit-collection')"
-            />
-          </div>
-          <div>
-            <ButtonSecondary
-              icon="delete"
-              :label="$t('delete')"
-              @click.native="confirmRemove = true"
-            />
-          </div>
+          <SmartItem
+            icon="create_new_folder"
+            :label="$t('new_folder')"
+            @click.native="
+              $emit('add-folder', {
+                path: `${collectionIndex}`,
+              })
+              $refs.options.tippy().hide()
+            "
+          />
+          <SmartItem
+            icon="create"
+            :label="$t('edit')"
+            @click.native="
+              $emit('edit-collection')
+              $refs.options.tippy().hide()
+            "
+          />
+          <SmartItem
+            icon="delete"
+            :label="$t('delete')"
+            @click.native="
+              confirmRemove = true
+              $refs.options.tippy().hide()
+            "
+          />
         </tippy>
       </div>
     </div>
diff --git a/components/collections/graphql/Folder.vue b/components/collections/graphql/Folder.vue
index 4c2176eb2..92b92b39f 100644
--- a/components/collections/graphql/Folder.vue
+++ b/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>
-          <ButtonSecondary
-            icon="create_new_folder"
-            :label="$t('new_folder')"
-            @click.native="$emit('add-folder', { folder, path: folderPath })"
-          />
-        </div>
-        <div>
-          <ButtonSecondary
-            icon="edit"
-            :labeel="$t('edit')"
-            @click.native="$emit('edit-folder', { folder, folderPath })"
-          />
-        </div>
-        <div>
-          <ButtonSecondary
-            icon="delete"
-            :label="$t('delete')"
-            @click.native="confirmRemove = true"
-          />
-        </div>
+        <SmartItem
+          icon="create_new_folder"
+          :label="$t('new_folder')"
+          @click.native="
+            $emit('add-folder', { folder, path: folderPath })
+            $refs.options.tippy().hide()
+          "
+        />
+        <SmartItem
+          icon="edit"
+          :labeel="$t('edit')"
+          @click.native="
+            $emit('edit-folder', { folder, folderPath })
+            $refs.options.tippy().hide()
+          "
+        />
+        <SmartItem
+          icon="delete"
+          :label="$t('delete')"
+          @click.native="
+            confirmRemove = true
+            $refs.options.tippy().hide()
+          "
+        />
       </tippy>
     </div>
     <div v-show="showChildren || isFiltered">
diff --git a/components/collections/graphql/ImportExport.vue b/components/collections/graphql/ImportExport.vue
index 77c8bd1d3..ed0111940 100644
--- a/components/collections/graphql/ImportExport.vue
+++ b/components/collections/graphql/ImportExport.vue
@@ -3,44 +3,51 @@
     <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>
-            <ButtonSecondary
-              icon="assignment_returned"
-              :label="$t('import_from_gist')"
-              @click.native="readCollectionGist"
-            />
-          </div>
-          <div
+          <SmartItem
+            icon="assignment_returned"
+            :label="$t('import_from_gist')"
+            @click.native="
+              readCollectionGist
+              $refs.options.tippy().hide()
+            "
+          />
+          <SmartItem
             v-tippy="{ theme: 'tooltip' }"
-            title="{
-                content: !currentUser
-                  ? $t('login_with_github_to') + $t('create_secret_gist')
-                  : currentUser.provider !== 'github.com'
-                  ? $t('login_with_github_to') + $t('create_secret_gist')
-                  : null,
-              }"
-          >
-            <ButtonSecondary
-              :disabled="
-                !currentUser
-                  ? true
-                  : currentUser.provider !== 'github.com'
-                  ? true
-                  : false
-              "
-              icon="assignment_turned_in"
-              :label="$t('create_secret_gist')"
-              @click.native="createCollectionGist"
-            />
-          </div>
+            :title="
+              !currentUser
+                ? $t('login_with_github_to') + $t('create_secret_gist')
+                : currentUser.provider !== 'github.com'
+                ? $t('login_with_github_to') + $t('create_secret_gist')
+                : null
+            "
+            :disabled="
+              !currentUser
+                ? true
+                : currentUser.provider !== 'github.com'
+                ? true
+                : false
+            "
+            icon="assignment_turned_in"
+            :label="$t('create_secret_gist')"
+            @click.native="
+              createCollectionGist
+              $refs.options.tippy().hide()
+            "
+          />
         </tippy>
         <ButtonSecondary icon="close" @click.native="hideModal" />
       </div>
diff --git a/components/collections/graphql/Request.vue b/components/collections/graphql/Request.vue
index 72d7922e7..026636b80 100644
--- a/components/collections/graphql/Request.vue
+++ b/components/collections/graphql/Request.vue
@@ -18,34 +18,34 @@
           @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>
-          <ButtonSecondary
-            icon="edit"
-            :label="$t('edit')"
-            @click.native="
-              $emit('edit-request', {
-                request,
-                requestIndex,
-                folderPath,
-              })
-            "
-          />
-        </div>
-        <div>
-          <ButtonSecondary
-            icon="delete"
-            :label="$t('delete')"
-            @click.native="confirmRemove = true"
-          />
-        </div>
+        <SmartItem
+          icon="edit"
+          :label="$t('edit')"
+          @click.native="
+            $emit('edit-request', {
+              request,
+              requestIndex,
+              folderPath,
+            })
+            $refs.options.tippy().hide()
+          "
+        />
+        <SmartItem
+          icon="delete"
+          :label="$t('delete')"
+          @click.native="
+            confirmRemove = true
+            $refs.options.tippy().hide()
+          "
+        />
       </tippy>
     </div>
     <SmartConfirmModal
diff --git a/components/collections/my/Collection.vue b/components/collections/my/Collection.vue
index a1f72e01d..81d98a671 100644
--- a/components/collections/my/Collection.vue
+++ b/components/collections/my/Collection.vue
@@ -38,40 +38,47 @@
           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>
-            <ButtonSecondary
-              icon="create_new_folder"
-              :label="$t('new_folder')"
-              @click.native="
-                $emit('add-folder', {
-                  folder: collection,
-                  path: `${collectionIndex}`,
-                })
-              "
-            />
-          </div>
-          <div>
-            <ButtonSecondary
-              icon="create"
-              :label="$t('edit')"
-              @click.native="$emit('edit-collection')"
-            />
-          </div>
-          <div>
-            <ButtonSecondary
-              icon="delete"
-              :label="$t('delete')"
-              @click.native="confirmRemove = true"
-            />
-          </div>
+          <SmartItem
+            icon="create_new_folder"
+            :label="$t('new_folder')"
+            @click.native="
+              $emit('add-folder', {
+                folder: collection,
+                path: `${collectionIndex}`,
+              })
+              $refs.options.tippy().hide()
+            "
+          />
+          <SmartItem
+            icon="create"
+            :label="$t('edit')"
+            @click.native="
+              $emit('edit-collection')
+              $refs.options.tippy().hide()
+            "
+          />
+          <SmartItem
+            icon="delete"
+            :label="$t('delete')"
+            @click.native="
+              confirmRemove = true
+              $refs.options.tippy().hide()
+            "
+          />
         </tippy>
       </div>
     </div>
diff --git a/components/collections/my/Folder.vue b/components/collections/my/Folder.vue
index 0748ee708..b8dcdd8a9 100644
--- a/components/collections/my/Folder.vue
+++ b/components/collections/my/Folder.vue
@@ -25,42 +25,43 @@
         >
         <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>
-          <ButtonSecondary
-            icon="create_new_folder"
-            :label="$t('new_folder')"
-            @click.native="$emit('add-folder', { folder, path: folderPath })"
-          />
-        </div>
-        <div>
-          <ButtonSecondary
-            icon="edit"
-            :label="$t('edit')"
-            @click.native="
-              $emit('edit-folder', {
-                folder,
-                folderIndex,
-                collectionIndex,
-                folderPath,
-              })
-            "
-          />
-        </div>
-        <div>
-          <ButtonSecondary
-            icon="delete"
-            :labl="$t('delete')"
-            @click.native="confirmRemove = true"
-          />
-        </div>
+        <SmartItem
+          icon="create_new_folder"
+          :label="$t('new_folder')"
+          @click.native="
+            $emit('add-folder', { folder, path: folderPath })
+            $refs.options.tippy().hide()
+          "
+        />
+        <SmartItem
+          icon="edit"
+          :label="$t('edit')"
+          @click.native="
+            $emit('edit-folder', {
+              folder,
+              folderIndex,
+              collectionIndex,
+              folderPath,
+            })
+            $refs.options.tippy().hide()
+          "
+        />
+        <SmartItem
+          icon="delete"
+          :labl="$t('delete')"
+          @click.native="
+            confirmRemove = true
+            $refs.options.tippy().hide()
+          "
+        />
       </tippy>
     </div>
     <div v-show="showChildren || isFiltered">
diff --git a/components/collections/my/Request.vue b/components/collections/my/Request.vue
index 8ab4a1c52..e8ff71c17 100644
--- a/components/collections/my/Request.vue
+++ b/components/collections/my/Request.vue
@@ -21,37 +21,37 @@
           @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>
-          <ButtonSecondary
-            icon="edit"
-            :label="$t('edit')"
-            @click.native="
-              $emit('edit-request', {
-                collectionIndex,
-                folderIndex,
-                folderName,
-                request,
-                requestIndex,
-                folderPath,
-              })
-            "
-          />
-        </div>
-        <div>
-          <ButtonSecondary
-            icon="delete"
-            :label="$t('delete')"
-            @click.native="confirmRemove = true"
-          />
-        </div>
+        <SmartItem
+          icon="edit"
+          :label="$t('edit')"
+          @click.native="
+            $emit('edit-request', {
+              collectionIndex,
+              folderIndex,
+              folderName,
+              request,
+              requestIndex,
+              folderPath,
+            })
+            $refs.options.tippy().hide()
+          "
+        />
+        <SmartItem
+          icon="delete"
+          :label="$t('delete')"
+          @click.native="
+            confirmRemove = true
+            $refs.options.tippy().hide()
+          "
+        />
       </tippy>
     </div>
     <SmartConfirmModal
diff --git a/components/collections/teams/Collection.vue b/components/collections/teams/Collection.vue
index 0b9286497..98074907c 100644
--- a/components/collections/teams/Collection.vue
+++ b/components/collections/teams/Collection.vue
@@ -30,44 +30,51 @@
           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>
-            <ButtonSecondary
-              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-              icon="create_new_folder"
-              :label="$t('new_folder')"
-              @click.native="
-                $emit('add-folder', {
-                  folder: collection,
-                  path: `${collectionIndex}`,
-                })
-              "
-            />
-          </div>
-          <div>
-            <ButtonSecondary
-              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-              icon="create"
-              :label="$t('edit')"
-              @click.native="$emit('edit-collection')"
-            />
-          </div>
-          <div>
-            <ButtonSecondary
-              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-              icon="delete"
-              :label="$t('delete')"
-              @click.native="confirmRemove = true"
-            />
-          </div>
+          <SmartItem
+            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+            icon="create_new_folder"
+            :label="$t('new_folder')"
+            @click.native="
+              $emit('add-folder', {
+                folder: collection,
+                path: `${collectionIndex}`,
+              })
+              $refs.options.tippy().hide()
+            "
+          />
+          <SmartItem
+            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+            icon="create"
+            :label="$t('edit')"
+            @click.native="
+              $emit('edit-collection')
+              $refs.options.tippy().hide()
+            "
+          />
+          <SmartItem
+            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+            icon="delete"
+            :label="$t('delete')"
+            @click.native="
+              confirmRemove = true
+              $refs.options.tippy().hide()
+            "
+          />
         </tippy>
       </div>
     </div>
diff --git a/components/collections/teams/Folder.vue b/components/collections/teams/Folder.vue
index 3d3d07036..34c7a9a1c 100644
--- a/components/collections/teams/Folder.vue
+++ b/components/collections/teams/Folder.vue
@@ -17,46 +17,47 @@
         >
         <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>
-          <ButtonSecondary
-            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-            icon="create_new_folder"
-            :label="$t('new_folder')"
-            @click.native="$emit('add-folder', { folder, path: folderPath })"
-          />
-        </div>
-        <div>
-          <ButtonSecondary
-            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-            icon="edit"
-            :label="$t('edit')"
-            @click.native="
-              $emit('edit-folder', {
-                folder,
-                folderIndex,
-                collectionIndex,
-                folderPath: '',
-              })
-            "
-          />
-        </div>
-        <div>
-          <ButtonSecondary
-            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-            icon="delete"
-            :label="$t('delete')"
-            @click.native="confirmRemove = true"
-          />
-        </div>
+        <SmartItem
+          v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+          icon="create_new_folder"
+          :label="$t('new_folder')"
+          @click.native="
+            $emit('add-folder', { folder, path: folderPath })
+            $refs.options.tippy().hide()
+          "
+        />
+        <SmartItem
+          v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+          icon="edit"
+          :label="$t('edit')"
+          @click.native="
+            $emit('edit-folder', {
+              folder,
+              folderIndex,
+              collectionIndex,
+              folderPath: '',
+            })
+            $refs.options.tippy().hide()
+          "
+        />
+        <SmartItem
+          v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+          icon="delete"
+          :label="$t('delete')"
+          @click.native="
+            confirmRemove = true
+            $refs.options.tippy().hide()
+          "
+        />
       </tippy>
     </div>
     <div v-show="showChildren || isFiltered">
diff --git a/components/collections/teams/Request.vue b/components/collections/teams/Request.vue
index 8da2a2fc3..a371e9660 100644
--- a/components/collections/teams/Request.vue
+++ b/components/collections/teams/Request.vue
@@ -15,37 +15,37 @@
           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>
-          <ButtonSecondary
-            icon="edit"
-            :label="$t('edit')"
-            @click.native="
-              $emit('edit-request', {
-                collectionIndex,
-                folderIndex,
-                folderName,
-                request,
-                requestIndex,
-              })
-            "
-          />
-        </div>
-        <div>
-          <ButtonSecondary
-            icon="delete"
-            :label="$t('delete')"
-            @click.native="confirmRemove = true"
-          />
-        </div>
+        <SmartItem
+          icon="edit"
+          :label="$t('edit')"
+          @click.native="
+            $emit('edit-request', {
+              collectionIndex,
+              folderIndex,
+              folderName,
+              request,
+              requestIndex,
+            })
+            $refs.options.tippy().hide()
+          "
+        />
+        <SmartItem
+          icon="delete"
+          :label="$t('delete')"
+          @click.native="
+            confirmRemove = true
+            $refs.options.tippy().hide()
+          "
+        />
       </tippy>
     </div>
     <SmartConfirmModal
diff --git a/components/environments/Environment.vue b/components/environments/Environment.vue
index 7c1d88e68..f3e945b1d 100644
--- a/components/environments/Environment.vue
+++ b/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>
-          <ButtonSecondary
-            icon="create"
-            :label="$t('edit')"
-            @click.native="$emit('edit-environment')"
-          />
-        </div>
-        <div>
-          <ButtonSecondary
-            icon="delete"
-            :label="$t('delete')"
-            @click.native="confirmRemove = true"
-          />
-        </div>
+        <SmartItem
+          icon="create"
+          :label="$t('edit')"
+          @click.native="
+            $emit('edit-environment')
+            $refs.options.tippy().hide()
+          "
+        />
+        <SmartItem
+          icon="delete"
+          :label="$t('delete')"
+          @click.native="
+            confirmRemove = true
+            $refs.options.tippy().hide()
+          "
+        />
       </tippy>
     </div>
     <SmartConfirmModal
diff --git a/components/environments/ImportExport.vue b/components/environments/ImportExport.vue
index cdcbf5e0a..6b7848ee0 100644
--- a/components/environments/ImportExport.vue
+++ b/components/environments/ImportExport.vue
@@ -5,44 +5,51 @@
         {{ $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>
-            <ButtonSecondary
-              icon="assignment_returned"
-              :label="$t('import_from_gist')"
-              @click.native="readEnvironmentGist"
-            />
-          </div>
-          <div
+          <SmartItem
+            icon="assignment_returned"
+            :label="$t('import_from_gist')"
+            @click.native="
+              readEnvironmentGist
+              $refs.options.tippy().hide()
+            "
+          />
+          <SmartItem
             v-tippy="{ theme: 'tooltip' }"
-            title="{
-                content: !currentUser
-                  ? $t('login_with_github_to') + $t('create_secret_gist')
-                  : currentUser.provider !== 'github.com'
-                  ? $t('login_with_github_to') + $t('create_secret_gist')
-                  : null,
-              }"
-          >
-            <ButtonSecondary
-              :disabled="
-                !currentUser
-                  ? true
-                  : currentUser.provider !== 'github.com'
-                  ? true
-                  : false
-              "
-              icon="assignment_turned_in"
-              :label="$t('create_secret_gist')"
-              @click.native="createEnvironmentGist"
-            />
-          </div>
+            :title="
+              !currentUser
+                ? $t('login_with_github_to') + $t('create_secret_gist')
+                : currentUser.provider !== 'github.com'
+                ? $t('login_with_github_to') + $t('create_secret_gist')
+                : null
+            "
+            :disabled="
+              !currentUser
+                ? true
+                : currentUser.provider !== 'github.com'
+                ? true
+                : false
+            "
+            icon="assignment_turned_in"
+            :label="$t('create_secret_gist')"
+            @click.native="
+              createEnvironmentGist
+              $refs.options.tippy().hide()
+            "
+          />
         </tippy>
         <ButtonSecondary icon="close" @click.native="hideModal" />
       </div>
diff --git a/components/firebase/Logout.vue b/components/firebase/Logout.vue
index ce7488378..ef0c8b2d6 100644
--- a/components/firebase/Logout.vue
+++ b/components/firebase/Logout.vue
@@ -1,9 +1,18 @@
 <template>
-  <div>
-    <ButtonSecondary
+  <div class="flex">
+    <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 {
diff --git a/components/history/graphql/Card.vue b/components/history/graphql/Card.vue
index a5223d8df..bbb9b7f2d 100644
--- a/components/history/graphql/Card.vue
+++ b/components/history/graphql/Card.vue
@@ -15,9 +15,7 @@
       </li>
       <ButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
-        title="{
-          content: !entry.star ? $t('add_star') : $t('remove_star'),
-        }"
+        :title="!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="{
-          content: expand ? $t('hide_more') : $t('show_more'),
-        }"
+        :title="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>
-          <ButtonSecondary
-            data-testid="restore_history_entry"
-            :aria-label="$t('restore')"
-            icon="restore"
-            :label="$t('restore')"
-            @click.native="$emit('use-entry')"
-          />
-        </div>
-        <div>
-          <ButtonSecondary
-            data-testid="delete_history_entry"
-            :aria-label="$t('delete')"
-            icon="delete"
-            :label="$t('delete')"
-            @click.native="$emit('delete-entry')"
-          />
-        </div>
+        <SmartItem
+          data-testid="restore_history_entry"
+          :aria-label="$t('restore')"
+          icon="restore"
+          :label="$t('restore')"
+          @click.native="
+            $emit('use-entry')
+            $refs.options.tippy().hide()
+          "
+        />
+        <SmartItem
+          data-testid="delete_history_entry"
+          :aria-label="$t('delete')"
+          icon="delete"
+          :label="$t('delete')"
+          @click.native="
+            $emit('delete-entry')
+            $refs.options.tippy().hide()
+          "
+        />
       </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>
diff --git a/components/history/index.vue b/components/history/index.vue
index 3123e3b06..a5ae5c190 100644
--- a/components/history/index.vue
+++ b/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()"
         />
diff --git a/components/history/rest/Card.vue b/components/history/rest/Card.vue
index 5d78174eb..0fc4c1af8 100644
--- a/components/history/rest/Card.vue
+++ b/components/history/rest/Card.vue
@@ -23,9 +23,7 @@
       <span>
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          title="{
-            content: !entry.star ? $t('add_star') : $t('remove_star'),
-          }"
+          :title="!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>
-          <ButtonSecondary
-            data-testid="restore_history_entry"
-            :aria-label="$t('edit')"
-            icon="restore"
-            :label="$t('restore')"
-            @click.native="$emit('use-entry')"
-          />
-        </div>
-        <div>
-          <ButtonSecondary
-            data-testid="delete_history_entry"
-            :aria-label="$t('delete')"
-            icon="delete"
-            :label="$t('delete')"
-            @click.native="$emit('delete-entry')"
-          />
-        </div>
+        <SmartItem
+          data-testid="restore_history_entry"
+          :aria-label="$t('edit')"
+          icon="restore"
+          :label="$t('restore')"
+          @click.native="
+            $emit('use-entry')
+            $refs.options.tippy().hide()
+          "
+        />
+        <SmartItem
+          data-testid="delete_history_entry"
+          :aria-label="$t('delete')"
+          icon="delete"
+          :label="$t('delete')"
+          @click.native="
+            $emit('delete-entry')
+            $refs.options.tippy().hide()
+          "
+        />
       </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>
diff --git a/components/http/BodyParameters.vue b/components/http/BodyParameters.vue
index 0fbec0218..5c59f7d10 100644
--- a/components/http/BodyParameters.vue
+++ b/components/http/BodyParameters.vue
@@ -68,13 +68,13 @@
         <li>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
-            title="{
-              content: param.hasOwnProperty('active')
+            :title="
+              param.hasOwnProperty('active')
                 ? param.active
                   ? $t('turn_off')
                   : $t('turn_on')
-                : $t('turn_off'),
-            }"
+                : $t('turn_off')
+            "
             :icon="
               param.hasOwnProperty('active')
                 ? param.active
diff --git a/components/http/CodegenModal.vue b/components/http/CodegenModal.vue
index b1062b220..1666e7a43 100644
--- a/components/http/CodegenModal.vue
+++ b/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">
-            <ButtonSecondary @click.native="requestType = gen.id" />
-            {{ gen.name }}
-          </div>
+          <SmartItem
+            v-for="gen in codegens"
+            :key="gen.id"
+            :label="gen.name"
+            @click.native="
+              requestType = gen.id
+              $refs.options.tippy().hide()
+            "
+          />
         </tippy>
       </span>
       <div class="row-wrapper">
diff --git a/components/http/Headers.vue b/components/http/Headers.vue
index 84aca3342..2cf36d458 100644
--- a/components/http/Headers.vue
+++ b/components/http/Headers.vue
@@ -63,13 +63,13 @@
         <li>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
-            title="{
-              content: header.hasOwnProperty('active')
+            :title="
+              header.hasOwnProperty('active')
                 ? header.active
                   ? $t('turn_off')
                   : $t('turn_on')
-                : $t('turn_off'),
-            }"
+                : $t('turn_off')
+            "
             :icon="
               param.hasOwnProperty('active')
                 ? param.active
diff --git a/components/http/Parameters.vue b/components/http/Parameters.vue
index 77d3a07d7..4a375d4cf 100644
--- a/components/http/Parameters.vue
+++ b/components/http/Parameters.vue
@@ -82,13 +82,13 @@
         <li>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
-            title="{
-              content: param.hasOwnProperty('active')
+            :title="
+              param.hasOwnProperty('active')
                 ? param.active
                   ? $t('turn_off')
                   : $t('turn_on')
-                : $t('turn_off'),
-            }"
+                : $t('turn_off')
+            "
             :icon="
               param.hasOwnProperty('active')
                 ? param.active
diff --git a/components/lenses/renderers/HTMLLensRenderer.vue b/components/lenses/renderers/HTMLLensRenderer.vue
index 9796dbb3c..9fa22c5ff 100644
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -7,20 +7,16 @@
           v-if="response.body"
           ref="ToggleExpandResponse"
           v-tippy="{ theme: 'tooltip' }"
-          title="{
-            content: !expandResponse
-              ? $t('expand_response')
-              : $t('collapse_response'),
-          }"
+          :title="
+            !expandResponse ? $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="{
-            content: previewEnabled ? $t('hide_preview') : $t('preview_html'),
-          }"
+          :title="previewEnabled ? $t('hide_preview') : $t('preview_html')"
           :icon="!previewEnabled ? 'visibility' : 'visibility_off'"
           @click.native.prevent="togglePreview"
         />
diff --git a/components/lenses/renderers/JSONLensRenderer.vue b/components/lenses/renderers/JSONLensRenderer.vue
index 517aa673d..4f2670eee 100644
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -7,11 +7,9 @@
           v-if="response.body"
           ref="ToggleExpandResponse"
           v-tippy="{ theme: 'tooltip' }"
-          title="{
-            content: !expandResponse
-              ? $t('expand_response')
-              : $t('collapse_response'),
-          }"
+          :title="
+            !expandResponse ? $t('expand_response') : $t('collapse_response')
+          "
           :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
           @click.native="ToggleExpandResponse"
         />
diff --git a/components/lenses/renderers/RawLensRenderer.vue b/components/lenses/renderers/RawLensRenderer.vue
index 2c50c068b..8e5a99ac6 100644
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -7,11 +7,9 @@
           v-if="response.body"
           ref="ToggleExpandResponse"
           v-tippy="{ theme: 'tooltip' }"
-          title="{
-            content: !expandResponse
-              ? $t('expand_response')
-              : $t('collapse_response'),
-          }"
+          :title="
+            !expandResponse ? $t('expand_response') : $t('collapse_response')
+          "
           :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
           @click.native="ToggleExpandResponse"
         />
diff --git a/components/lenses/renderers/XMLLensRenderer.vue b/components/lenses/renderers/XMLLensRenderer.vue
index de6bbd989..86c2ae49e 100644
--- a/components/lenses/renderers/XMLLensRenderer.vue
+++ b/components/lenses/renderers/XMLLensRenderer.vue
@@ -7,11 +7,9 @@
           v-if="response.body"
           ref="ToggleExpandResponse"
           v-tippy="{ theme: 'tooltip' }"
-          title="{
-            content: !expandResponse
-              ? $t('expand_response')
-              : $t('collapse_response'),
-          }"
+          :title="
+            !expandResponse ? $t('expand_response') : $t('collapse_response')
+          "
           :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
           @click.native="ToggleExpandResponse"
         />
diff --git a/components/profile/Picture.vue b/components/profile/Picture.vue
index 0615e3236..396ec8828 100644
--- a/components/profile/Picture.vue
+++ b/components/profile/Picture.vue
@@ -1,17 +1,16 @@
 <template>
-  <div
-    class="relative flex items-center justify-center"
-    :class="`h-${size} w-${size}`"
-  >
+  <div class="relative flex items-center justify-center h-5 w-5 cursor-pointer">
     <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]
-      // },
     },
   },
 }
diff --git a/components/realtime/Sse.vue b/components/realtime/Sse.vue
index a0c80855a..8ca65c6f7 100644
--- a/components/realtime/Sse.vue
+++ b/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')"
-              :label="!connectionSSEState ? 'sync' : 'sync_disabled'"
+              :icon="!connectionSSEState ? 'sync' : 'sync_disabled'"
+              :label="!connectionSSEState ? $t('start') : $t('stop')"
               reverse
               @click.native="toggleSSEConnection"
             />
diff --git a/components/realtime/Websocket.vue b/components/realtime/Websocket.vue
index 63bb86c78..1ed2e65d7 100644
--- a/components/realtime/Websocket.vue
+++ b/components/realtime/Websocket.vue
@@ -63,13 +63,13 @@
           <li>
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
-              title="{
-                content: protocol.hasOwnProperty('active')
+              :title="
+                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
diff --git a/components/smart/ChangeLanguage.vue b/components/smart/ChangeLanguage.vue
index 2fb20d026..8997e1929 100644
--- a/components/smart/ChangeLanguage.vue
+++ b/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>
diff --git a/components/smart/Modal.vue b/components/smart/Modal.vue
index 01ebc91b3..d90aa16fa 100644
--- a/components/smart/Modal.vue
+++ b/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 class="modal-header">
-          <div class="row-wrapper">
+      <div
+        class="
+          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;
diff --git a/components/teams/Edit.vue b/components/teams/Edit.vue
index 3fe1dd71e..d2697f733 100644
--- a/components/teams/Edit.vue
+++ b/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>
-                <ButtonSecondary @click.native="updateRole(index, 'OWNER')" />
-                OWNER
-              </div>
-              <div>
-                <ButtonSecondary @click.native="updateRole(index, 'EDITOR')" />
-                EDITOR
-              </div>
-              <div>
-                <ButtonSecondary @click.native="updateRole(index, 'VIEWER')" />
-                VIEWER
-              </div>
+              <SmartItem
+                label="OWNER"
+                @click.native="
+                  updateRole(index, 'OWNER')
+                  $refs.options.tippy().hide()
+                "
+              />
+              <SmartItem
+                label="EDITOR"
+                @click.native="
+                  updateRole(index, 'EDITOR')
+                  $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>
-                <ButtonSecondary @click.native="member.value = 'OWNER'" />
-                OWNER
-              </div>
-              <div>
-                <ButtonSecondary @click.native="member.value = 'EDITOR'" />
-                EDITOR
-              </div>
-              <div>
-                <ButtonSecondary @click.native="member.value = 'VIEWER'" />
-                VIEWER
-              </div>
+              <SmartItem
+                label="OWNER"
+                @click.native="
+                  member.value = 'OWNER'
+                  $refs.options.tippy().hide()
+                "
+              />
+              <SmartItem
+                label="EDITOR"
+                @click.native="
+                  member.value = 'EDITOR'
+                  $refs.options.tippy().hide()
+                "
+              />
+              <SmartItem
+                label="VIEWER"
+                @click.native="
+                  member.value = 'VIEWER'
+                  $refs.options.tippy().hide()
+                "
+              />
             </tippy>
           </span>
         </li>
diff --git a/components/teams/Team.vue b/components/teams/Team.vue
index d6bfe1ab6..fb6128861 100644
--- a/components/teams/Team.vue
+++ b/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'">
-        <ButtonSecondary
-          icon="create"
-          :label="$t('edit')"
-          @click.native="$emit('edit-team')"
-        />
-      </div>
-      <div v-if="team.myRole === 'OWNER'">
-        <ButtonSecondary
-          icon="delete"
-          :label="$t('delete')"
-          @click.native="deleteTeam"
-        />
-      </div>
-      <div>
-        <ButtonSecondary
-          :disabled="team.myRole === 'OWNER' && team.ownersCount == 1"
-          icon="remove"
-          @click.native="exitTeam"
-        />
-        <div
-          v-tippy="{ theme: 'tooltip' }"
-          title="{
-                content:
-                  team.myRole === 'OWNER' && team.ownersCount == 1
-                    ? $t('disable_exit')
-                    : '',
-              }"
-        >
-          <span>{{ $t("exit") }}</span>
-        </div>
-      </div>
+      <SmartItem
+        v-if="team.myRole === 'OWNER'"
+        icon="create"
+        :label="$t('edit')"
+        @click.native="
+          $emit('edit-team')
+          $refs.options.tippy().hide()
+        "
+      />
+      <SmartItem
+        v-if="team.myRole === 'OWNER'"
+        icon="delete"
+        :label="$t('delete')"
+        @click.native="
+          deleteTeam
+          $refs.options.tippy().hide()
+        "
+      />
+      <SmartItem
+        v-tippy="{ theme: 'tooltip' }"
+        :title="
+          team.myRole === 'OWNER' && team.ownersCount == 1
+            ? $t('disable_exit')
+            : ''
+        "
+        :disabled="team.myRole === 'OWNER' && team.ownersCount == 1"
+        icon="remove"
+        :label="$t('exit')"
+        @click.native="
+          exitTeam
+          $refs.options.tippy().hide()
+        "
+      />
     </tippy>
   </div>
 </template>
diff --git a/components/translate/Fade.vue b/components/translate/Fade.vue
deleted file mode 100644
index c7d613a11..000000000
--- a/components/translate/Fade.vue
+++ /dev/null
@@ -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>
diff --git a/components/translate/SlideLeft.vue b/components/translate/SlideLeft.vue
deleted file mode 100644
index bc53e491d..000000000
--- a/components/translate/SlideLeft.vue
+++ /dev/null
@@ -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>
diff --git a/components/translate/SlideRight.vue b/components/translate/SlideRight.vue
deleted file mode 100644
index ede0db7f6..000000000
--- a/components/translate/SlideRight.vue
+++ /dev/null
@@ -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>
diff --git a/lang/en-US.json b/lang/en-US.json
index 7fbff12dc..fcfe1f1af 100644
--- a/lang/en-US.json
+++ b/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?"
 }
diff --git a/pages/api.vue b/pages/api.vue
index d2b2aca63..4781437a5 100644
--- a/pages/api.vue
+++ b/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
-                          "
-                        />
-                        {{ methodMenuItem }}
-                      </div>
+                        @click.native="
+                          customMethod =
+                            methodMenuItem == 'CUSTOM' ? true : false
+                          method = methodMenuItem
+                          $refs.options.tippy().hide()
+                        "
+                        :label="methodMenuItem"
+                      />
                     </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}`"
-                        >
-                          <ButtonSecondary
-                            @click.native="contentType = contentTypeMenuItem"
-                          />
-                          {{ contentTypeMenuItem }}
-                        </div>
+                          @click.native="
+                            contentType = contentTypeMenuItem
+                            $refs.contentTypeOptions.tippy().hide()
+                          "
+                          :label="contentTypeMenuItem"
+                        />
                       </tippy>
                     </span>
                     <!-- <SmartAutoComplete
@@ -600,33 +605,27 @@
         </Splitpanes>
       </Pane>
       <Pane max-size="40" class="bg-pink-100">
-        <TranslateSlideLeft>
-          <aside class="lg:max-w-md">
-            <section>
-              <SmartTabs>
-                <SmartTab
-                  :id="'history'"
-                  :label="$t('history')"
-                  :selected="true"
-                >
-                  <History
-                    :page="'rest'"
-                    @useHistory="handleUseHistory"
-                    ref="historyComponent"
-                  />
-                </SmartTab>
+        <aside class="lg:max-w-md">
+          <section>
+            <SmartTabs>
+              <SmartTab :id="'history'" :label="$t('history')" :selected="true">
+                <History
+                  :page="'rest'"
+                  @useHistory="handleUseHistory"
+                  ref="historyComponent"
+                />
+              </SmartTab>
 
-                <SmartTab :id="'collections'" :label="$t('collections')">
-                  <Collections />
-                </SmartTab>
+              <SmartTab :id="'collections'" :label="$t('collections')">
+                <Collections />
+              </SmartTab>
 
-                <SmartTab :id="'env'" :label="$t('environments')">
-                  <Environments />
-                </SmartTab>
-              </SmartTabs>
-            </section>
-          </aside>
-        </TranslateSlideLeft>
+              <SmartTab :id="'env'" :label="$t('environments')">
+                <Environments />
+              </SmartTab>
+            </SmartTabs>
+          </section>
+        </aside>
       </Pane>
     </Splitpanes>
 
diff --git a/pages/doc.vue b/pages/doc.vue
index 00e60aaf9..65d39870e 100644
--- a/pages/doc.vue
+++ b/pages/doc.vue
@@ -64,13 +64,13 @@
             <div v-else class="row-wrapper">
               <div
                 v-tippy="{ theme: 'tooltip' }"
-                title="{
-                  content: !currentUser
+                :title="
+                  !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="
diff --git a/pages/graphql.vue b/pages/graphql.vue
index 4ae898a04..449c122b5 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -92,13 +92,13 @@
                 <li>
                   <ButtonSecondary
                     v-tippy="{ theme: 'tooltip' }"
-                    title="{
-                      content: header.hasOwnProperty('active')
+                    :title="
+                      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="{
-                  content: !expandResponse
+                :title="
+                  !expandResponse
                     ? $t('expand_response')
-                    : $t('collapse_response'),
-                }"
+                    : $t('collapse_response')
+                "
                 :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
                 @click.native="ToggleExpandResponse"
               />
@@ -323,122 +323,120 @@
         </AppSection>
       </div>
 
-      <TranslateSlideLeft>
-        <aside class="lg:max-w-md">
-          <SmartTabs>
-            <SmartTab :id="'docs'" :label="`Docs`" :selected="true">
-              <AppSection label="docs">
-                <section class="flex-col">
-                  <input
-                    v-model="graphqlFieldsFilterText"
-                    type="text"
-                    :placeholder="$t('search')"
-                    class="input rounded-t-lg"
-                  />
-                  <SmartTabs ref="gqlTabs" styles="m-4">
-                    <div class="gqlTabs">
-                      <SmartTab
-                        v-if="queryFields.length > 0"
-                        :id="'queries'"
-                        :label="$t('queries')"
-                        :selected="true"
+      <aside class="lg:max-w-md">
+        <SmartTabs>
+          <SmartTab :id="'docs'" :label="`Docs`" :selected="true">
+            <AppSection label="docs">
+              <section class="flex-col">
+                <input
+                  v-model="graphqlFieldsFilterText"
+                  type="text"
+                  :placeholder="$t('search')"
+                  class="input rounded-t-lg"
+                />
+                <SmartTabs ref="gqlTabs" styles="m-4">
+                  <div class="gqlTabs">
+                    <SmartTab
+                      v-if="queryFields.length > 0"
+                      :id="'queries'"
+                      :label="$t('queries')"
+                      :selected="true"
+                    >
+                      <div
+                        v-for="field in filteredQueryFields"
+                        :key="field.name"
                       >
-                        <div
-                          v-for="field in filteredQueryFields"
-                          :key="field.name"
-                        >
-                          <GraphqlField
-                            :gql-field="field"
-                            :jump-type-callback="handleJumpToType"
-                          />
-                        </div>
-                      </SmartTab>
+                        <GraphqlField
+                          :gql-field="field"
+                          :jump-type-callback="handleJumpToType"
+                        />
+                      </div>
+                    </SmartTab>
 
-                      <SmartTab
-                        v-if="mutationFields.length > 0"
-                        :id="'mutations'"
-                        :label="$t('mutations')"
+                    <SmartTab
+                      v-if="mutationFields.length > 0"
+                      :id="'mutations'"
+                      :label="$t('mutations')"
+                    >
+                      <div
+                        v-for="field in filteredMutationFields"
+                        :key="field.name"
                       >
-                        <div
-                          v-for="field in filteredMutationFields"
-                          :key="field.name"
-                        >
-                          <GraphqlField
-                            :gql-field="field"
-                            :jump-type-callback="handleJumpToType"
-                          />
-                        </div>
-                      </SmartTab>
+                        <GraphqlField
+                          :gql-field="field"
+                          :jump-type-callback="handleJumpToType"
+                        />
+                      </div>
+                    </SmartTab>
 
-                      <SmartTab
-                        v-if="subscriptionFields.length > 0"
-                        :id="'subscriptions'"
-                        :label="$t('subscriptions')"
+                    <SmartTab
+                      v-if="subscriptionFields.length > 0"
+                      :id="'subscriptions'"
+                      :label="$t('subscriptions')"
+                    >
+                      <div
+                        v-for="field in filteredSubscriptionFields"
+                        :key="field.name"
                       >
-                        <div
-                          v-for="field in filteredSubscriptionFields"
-                          :key="field.name"
-                        >
-                          <GraphqlField
-                            :gql-field="field"
-                            :jump-type-callback="handleJumpToType"
-                          />
-                        </div>
-                      </SmartTab>
+                        <GraphqlField
+                          :gql-field="field"
+                          :jump-type-callback="handleJumpToType"
+                        />
+                      </div>
+                    </SmartTab>
 
-                      <SmartTab
-                        v-if="graphqlTypes.length > 0"
-                        :id="'types'"
-                        ref="typesTab"
-                        :label="$t('types')"
+                    <SmartTab
+                      v-if="graphqlTypes.length > 0"
+                      :id="'types'"
+                      ref="typesTab"
+                      :label="$t('types')"
+                    >
+                      <div
+                        v-for="type in filteredGraphqlTypes"
+                        :key="type.name"
                       >
-                        <div
-                          v-for="type in filteredGraphqlTypes"
-                          :key="type.name"
-                        >
-                          <GraphqlType
-                            :gql-type="type"
-                            :gql-types="graphqlTypes"
-                            :is-highlighted="
-                              isGqlTypeHighlighted({ gqlType: type })
-                            "
-                            :highlighted-fields="
-                              getGqlTypeHighlightedFields({ gqlType: type })
-                            "
-                            :jump-type-callback="handleJumpToType"
-                          />
-                        </div>
-                      </SmartTab>
-                    </div>
-                  </SmartTabs>
-                </section>
-                <p
-                  v-if="
-                    queryFields.length === 0 &&
-                    mutationFields.length === 0 &&
-                    subscriptionFields.length === 0 &&
-                    graphqlTypes.length === 0
-                  "
-                >
-                  {{ $t("send_request_first") }}
-                </p>
-              </AppSection>
-            </SmartTab>
+                        <GraphqlType
+                          :gql-type="type"
+                          :gql-types="graphqlTypes"
+                          :is-highlighted="
+                            isGqlTypeHighlighted({ gqlType: type })
+                          "
+                          :highlighted-fields="
+                            getGqlTypeHighlightedFields({ gqlType: type })
+                          "
+                          :jump-type-callback="handleJumpToType"
+                        />
+                      </div>
+                    </SmartTab>
+                  </div>
+                </SmartTabs>
+              </section>
+              <p
+                v-if="
+                  queryFields.length === 0 &&
+                  mutationFields.length === 0 &&
+                  subscriptionFields.length === 0 &&
+                  graphqlTypes.length === 0
+                "
+              >
+                {{ $t("send_request_first") }}
+              </p>
+            </AppSection>
+          </SmartTab>
 
-            <SmartTab :id="'history'" :label="$t('history')">
-              <History
-                ref="graphqlHistoryComponent"
-                :page="'graphql'"
-                @useHistory="handleUseHistory"
-              />
-            </SmartTab>
+          <SmartTab :id="'history'" :label="$t('history')">
+            <History
+              ref="graphqlHistoryComponent"
+              :page="'graphql'"
+              @useHistory="handleUseHistory"
+            />
+          </SmartTab>
 
-            <SmartTab :id="'collections'" :label="$t('collections')">
-              <CollectionsGraphql />
-            </SmartTab>
-          </SmartTabs>
-        </aside>
-      </TranslateSlideLeft>
+          <SmartTab :id="'collections'" :label="$t('collections')">
+            <CollectionsGraphql />
+          </SmartTab>
+        </SmartTabs>
+      </aside>
     </div>
     <CollectionsSaveRequest
       mode="graphql"