From bfc0282e49cfe96fac48d9beb2b6b58eb012c4e7 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sun, 15 Aug 2021 15:18:04 +0530
Subject: [PATCH] refactor: minor ui improvements

---
 components/app/Header.vue                     |   2 +-
 components/app/Logo.vue                       |  14 +-
 components/collections/graphql/Collection.vue |  90 +++++++-----
 components/collections/graphql/Folder.vue     |  88 ++++++-----
 components/collections/graphql/Request.vue    |  84 ++++++-----
 components/collections/my/Collection.vue      | 126 ++++++++--------
 components/collections/my/Folder.vue          |  98 +++++++------
 components/collections/my/Request.vue         |  90 +++++++-----
 components/collections/teams/Collection.vue   | 138 +++++++++---------
 components/collections/teams/Folder.vue       | 112 +++++++-------
 components/collections/teams/Request.vue      |  96 ++++++------
 components/firebase/Login.vue                 |   2 +-
 components/http/CodegenModal.vue              |   2 +-
 .../lenses/renderers/JSONLensRenderer.vue     |   2 +-
 components/smart/AceEditor.vue                |  10 +-
 components/smart/ColorModePicker.vue          |   8 +-
 helpers/outline.js                            |   2 +-
 pages/enter.vue                               |  10 +-
 18 files changed, 525 insertions(+), 449 deletions(-)

diff --git a/components/app/Header.vue b/components/app/Header.vue
index 6d6cea59f..ee7a6dfa2 100644
--- a/components/app/Header.vue
+++ b/components/app/Header.vue
@@ -2,7 +2,7 @@
   <div>
     <header class="flex flex-1 py-2 px-4 items-center justify-between">
       <div class="font-bold flex-shrink-0 inline-flex items-center">
-        Hoppscotch
+        <AppLogo />
       </div>
       <div class="space-x-2 flex-shrink-0 inline-flex items-center">
         <AppGitHubStarButton class="flex mx-2 mt-1" />
diff --git a/components/app/Logo.vue b/components/app/Logo.vue
index 2d0518553..d59f2d3fb 100644
--- a/components/app/Logo.vue
+++ b/components/app/Logo.vue
@@ -1,14 +1,18 @@
 <template>
   <svg
     class="logo"
-    viewBox="0 0 24 24"
-    width="16"
-    height="16"
     xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
   >
     <path
-      class="fill-current"
-      d="M2.534 9.287C2.534 15.46 7.56 24 12 24c4.18 0 9.466-8.539 9.466-14.713C21.467 3.113 17.228 0 12 0 6.772 0 2.534 3.113 2.534 9.287zm11.926 4.565a4.649 4.649 0 014.257-1.261 4.649 4.649 0 01-1.262 4.256 4.649 4.649 0 01-4.257 1.262 4.649 4.649 0 011.262-4.257zm-9.177-1.261a4.649 4.649 0 014.258 1.261 4.649 4.649 0 011.261 4.257 4.649 4.649 0 01-4.257-1.262 4.649 4.649 0 01-1.262-4.256z"
+      d="M17 10.54C16.78 7.44 14.63 5 12 5s-4.78 2.44-5 5.54C4 11.23 2 12.5 2 14c0 2.21 4.5 4 10 4s10-1.79 10-4c0-1.5-2-2.77-5-3.46m-2.07 1.3c-1.9.21-3.96.21-5.86 0c-.04-.28-.07-.56-.07-.84c0-2.2 1.35-4 3-4s3 1.8 3 4c0 .28 0 .56-.07.84z"
+      fill="currentColor"
     />
   </svg>
 </template>
diff --git a/components/collections/graphql/Collection.vue b/components/collections/graphql/Collection.vue
index e1b22aec6..9d2bd955c 100644
--- a/components/collections/graphql/Collection.vue
+++ b/components/collections/graphql/Collection.vue
@@ -31,53 +31,63 @@
       >
         <span class="truncate"> {{ collection.name }} </span>
       </span>
-      <ButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        icon="create_new_folder"
-        :title="$t('folder.new')"
-        class="hidden group-hover:inline-flex"
-        @click.native="
-          $emit('add-folder', {
-            path: `${collectionIndex}`,
-          })
-        "
-      />
-      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
-        <template #trigger>
-          <ButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
-            :title="$t('more')"
-            icon="more_vert"
-          />
-        </template>
-        <SmartItem
+      <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
           icon="create_new_folder"
-          :label="$t('folder.new')"
+          :title="$t('folder.new')"
+          class="hidden group-hover:inline-flex"
           @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"
-          color="red"
-          :label="$t('delete')"
-          @click.native="
-            confirmRemove = true
-            $refs.options.tippy().hide()
-          "
-        />
-      </tippy>
+        <span>
+          <tippy
+            ref="options"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
+          >
+            <template #trigger>
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('more')"
+                icon="more_vert"
+              />
+            </template>
+            <SmartItem
+              icon="create_new_folder"
+              :label="$t('folder.new')"
+              @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"
+              color="red"
+              :label="$t('delete')"
+              @click.native="
+                confirmRemove = true
+                $refs.options.tippy().hide()
+              "
+            />
+          </tippy>
+        </span>
+      </div>
     </div>
     <div v-if="showChildren || isFiltered">
       <CollectionsGraphqlFolder
diff --git a/components/collections/graphql/Folder.vue b/components/collections/graphql/Folder.vue
index b6f41ec13..b4e7f57d3 100644
--- a/components/collections/graphql/Folder.vue
+++ b/components/collections/graphql/Folder.vue
@@ -33,47 +33,57 @@
           {{ folder.name ? folder.name : folder.title }}
         </span>
       </span>
-      <ButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        icon="create_new_folder"
-        :title="$t('folder.new')"
-        class="hidden group-hover:inline-flex"
-        @click.native="$emit('add-folder', { folder, path: folderPath })"
-      />
-      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
-        <template #trigger>
-          <ButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
-            :title="$t('more')"
-            icon="more_vert"
-          />
-        </template>
-        <SmartItem
+      <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
           icon="create_new_folder"
-          :label="$t('folder.new')"
-          @click.native="
-            $emit('add-folder', { folder, path: folderPath })
-            $refs.options.tippy().hide()
-          "
+          :title="$t('folder.new')"
+          class="hidden group-hover:inline-flex"
+          @click.native="$emit('add-folder', { folder, path: folderPath })"
         />
-        <SmartItem
-          icon="edit"
-          :label="$t('edit')"
-          @click.native="
-            $emit('edit-folder', { folder, folderPath })
-            $refs.options.tippy().hide()
-          "
-        />
-        <SmartItem
-          icon="delete"
-          color="red"
-          :label="$t('delete')"
-          @click.native="
-            confirmRemove = true
-            $refs.options.tippy().hide()
-          "
-        />
-      </tippy>
+        <span>
+          <tippy
+            ref="options"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
+          >
+            <template #trigger>
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('more')"
+                icon="more_vert"
+              />
+            </template>
+            <SmartItem
+              icon="create_new_folder"
+              :label="$t('folder.new')"
+              @click.native="
+                $emit('add-folder', { folder, path: folderPath })
+                $refs.options.tippy().hide()
+              "
+            />
+            <SmartItem
+              icon="edit"
+              :label="$t('edit')"
+              @click.native="
+                $emit('edit-folder', { folder, folderPath })
+                $refs.options.tippy().hide()
+              "
+            />
+            <SmartItem
+              icon="delete"
+              color="red"
+              :label="$t('delete')"
+              @click.native="
+                confirmRemove = true
+                $refs.options.tippy().hide()
+              "
+            />
+          </tippy>
+        </span>
+      </div>
     </div>
     <div v-if="showChildren || isFiltered">
       <CollectionsGraphqlFolder
diff --git a/components/collections/graphql/Request.vue b/components/collections/graphql/Request.vue
index a62cf7a74..3639d86fd 100644
--- a/components/collections/graphql/Request.vue
+++ b/components/collections/graphql/Request.vue
@@ -38,44 +38,54 @@
       >
         <span class="truncate"> {{ request.name }} </span>
       </span>
-      <ButtonSecondary
-        v-if="!savingMode"
-        v-tippy="{ theme: 'tooltip' }"
-        icon="replay"
-        :title="$t('restore')"
-        class="hidden group-hover:inline-flex"
-        @click.native="!doc ? selectRequest() : {}"
-      />
-      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
-        <template #trigger>
-          <ButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
-            :title="$t('more')"
-            icon="more_vert"
-          />
-        </template>
-        <SmartItem
-          icon="edit"
-          :label="$t('edit')"
-          @click.native="
-            $emit('edit-request', {
-              request,
-              requestIndex,
-              folderPath,
-            })
-            $refs.options.tippy().hide()
-          "
+      <div class="flex">
+        <ButtonSecondary
+          v-if="!savingMode"
+          v-tippy="{ theme: 'tooltip' }"
+          icon="replay"
+          :title="$t('restore')"
+          class="hidden group-hover:inline-flex"
+          @click.native="!doc ? selectRequest() : {}"
         />
-        <SmartItem
-          icon="delete"
-          color="red"
-          :label="$t('delete')"
-          @click.native="
-            confirmRemove = true
-            $refs.options.tippy().hide()
-          "
-        />
-      </tippy>
+        <span>
+          <tippy
+            ref="options"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
+          >
+            <template #trigger>
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('more')"
+                icon="more_vert"
+              />
+            </template>
+            <SmartItem
+              icon="edit"
+              :label="$t('edit')"
+              @click.native="
+                $emit('edit-request', {
+                  request,
+                  requestIndex,
+                  folderPath,
+                })
+                $refs.options.tippy().hide()
+              "
+            />
+            <SmartItem
+              icon="delete"
+              color="red"
+              :label="$t('delete')"
+              @click.native="
+                confirmRemove = true
+                $refs.options.tippy().hide()
+              "
+            />
+          </tippy>
+        </span>
+      </div>
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
diff --git a/components/collections/my/Collection.vue b/components/collections/my/Collection.vue
index e5912bc92..07c93ec05 100644
--- a/components/collections/my/Collection.vue
+++ b/components/collections/my/Collection.vue
@@ -31,72 +31,82 @@
       >
         <span class="truncate"> {{ collection.name }} </span>
       </span>
-      <ButtonSecondary
-        v-if="doc && !selected"
-        v-tippy="{ theme: 'tooltip' }"
-        :title="$t('import.title')"
-        icon="check_box_outline_blank"
-        color="green"
-        @click.native="$emit('select-collection')"
-      />
-      <ButtonSecondary
-        v-if="doc && selected"
-        v-tippy="{ theme: 'tooltip' }"
-        :title="$t('delete')"
-        icon="check_box"
-        color="green"
-        @click.native="$emit('unselect-collection')"
-      />
-      <ButtonSecondary
-        v-if="!doc"
-        v-tippy="{ theme: 'tooltip' }"
-        icon="create_new_folder"
-        :title="$t('folder.new')"
-        class="hidden group-hover:inline-flex"
-        @click.native="
-          $emit('add-folder', {
-            folder: collection,
-            path: `${collectionIndex}`,
-          })
-        "
-      />
-      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
-        <template #trigger>
-          <ButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
-            :title="$t('more')"
-            icon="more_vert"
-          />
-        </template>
-        <SmartItem
+      <div class="flex">
+        <ButtonSecondary
+          v-if="doc && !selected"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('import.title')"
+          icon="check_box_outline_blank"
+          color="green"
+          @click.native="$emit('select-collection')"
+        />
+        <ButtonSecondary
+          v-if="doc && selected"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('delete')"
+          icon="check_box"
+          color="green"
+          @click.native="$emit('unselect-collection')"
+        />
+        <ButtonSecondary
+          v-if="!doc"
+          v-tippy="{ theme: 'tooltip' }"
           icon="create_new_folder"
-          :label="$t('folder.new')"
+          :title="$t('folder.new')"
+          class="hidden group-hover:inline-flex"
           @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"
-          color="red"
-          :label="$t('delete')"
-          @click.native="
-            confirmRemove = true
-            $refs.options.tippy().hide()
-          "
-        />
-      </tippy>
+        <span>
+          <tippy
+            ref="options"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
+          >
+            <template #trigger>
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('more')"
+                icon="more_vert"
+              />
+            </template>
+            <SmartItem
+              icon="create_new_folder"
+              :label="$t('folder.new')"
+              @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"
+              color="red"
+              :label="$t('delete')"
+              @click.native="
+                confirmRemove = true
+                $refs.options.tippy().hide()
+              "
+            />
+          </tippy>
+        </span>
+      </div>
     </div>
     <div v-if="showChildren || isFiltered">
       <CollectionsMyFolder
diff --git a/components/collections/my/Folder.vue b/components/collections/my/Folder.vue
index d4f001f00..39a6d2fc2 100644
--- a/components/collections/my/Folder.vue
+++ b/components/collections/my/Folder.vue
@@ -33,52 +33,62 @@
           {{ folder.name ? folder.name : folder.title }}
         </span>
       </span>
-      <ButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        icon="create_new_folder"
-        :title="$t('folder.new')"
-        class="hidden group-hover:inline-flex"
-        @click.native="$emit('add-folder', { folder, path: folderPath })"
-      />
-      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
-        <template #trigger>
-          <ButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
-            :title="$t('more')"
-            icon="more_vert"
-          />
-        </template>
-        <SmartItem
+      <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
           icon="create_new_folder"
-          :label="$t('folder.new')"
-          @click.native="
-            $emit('add-folder', { folder, path: folderPath })
-            $refs.options.tippy().hide()
-          "
+          :title="$t('folder.new')"
+          class="hidden group-hover:inline-flex"
+          @click.native="$emit('add-folder', { folder, path: folderPath })"
         />
-        <SmartItem
-          icon="edit"
-          :label="$t('edit')"
-          @click.native="
-            $emit('edit-folder', {
-              folder,
-              folderIndex,
-              collectionIndex,
-              folderPath,
-            })
-            $refs.options.tippy().hide()
-          "
-        />
-        <SmartItem
-          icon="delete"
-          color="red"
-          :label="$t('delete')"
-          @click.native="
-            confirmRemove = true
-            $refs.options.tippy().hide()
-          "
-        />
-      </tippy>
+        <span>
+          <tippy
+            ref="options"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
+          >
+            <template #trigger>
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('more')"
+                icon="more_vert"
+              />
+            </template>
+            <SmartItem
+              icon="create_new_folder"
+              :label="$t('folder.new')"
+              @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"
+              color="red"
+              :label="$t('delete')"
+              @click.native="
+                confirmRemove = true
+                $refs.options.tippy().hide()
+              "
+            />
+          </tippy>
+        </span>
+      </div>
     </div>
     <div v-if="showChildren || isFiltered">
       <CollectionsMyFolder
diff --git a/components/collections/my/Request.vue b/components/collections/my/Request.vue
index ad00ee4ed..6ba9cfbe6 100644
--- a/components/collections/my/Request.vue
+++ b/components/collections/my/Request.vue
@@ -46,47 +46,57 @@
       >
         <span class="truncate"> {{ request.name }} </span>
       </span>
-      <ButtonSecondary
-        v-if="!saveRequest && !doc"
-        v-tippy="{ theme: 'tooltip' }"
-        icon="replay"
-        :title="$t('restore')"
-        class="hidden group-hover:inline-flex"
-        @click.native="!doc ? selectRequest() : {}"
-      />
-      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
-        <template #trigger>
-          <ButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
-            :title="$t('more')"
-            icon="more_vert"
-          />
-        </template>
-        <SmartItem
-          icon="edit"
-          :label="$t('edit')"
-          @click.native="
-            $emit('edit-request', {
-              collectionIndex,
-              folderIndex,
-              folderName,
-              request,
-              requestIndex,
-              folderPath,
-            })
-            $refs.options.tippy().hide()
-          "
+      <div class="flex">
+        <ButtonSecondary
+          v-if="!saveRequest && !doc"
+          v-tippy="{ theme: 'tooltip' }"
+          icon="replay"
+          :title="$t('restore')"
+          class="hidden group-hover:inline-flex"
+          @click.native="!doc ? selectRequest() : {}"
         />
-        <SmartItem
-          icon="delete"
-          color="red"
-          :label="$t('delete')"
-          @click.native="
-            confirmRemove = true
-            $refs.options.tippy().hide()
-          "
-        />
-      </tippy>
+        <span>
+          <tippy
+            ref="options"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
+          >
+            <template #trigger>
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('more')"
+                icon="more_vert"
+              />
+            </template>
+            <SmartItem
+              icon="edit"
+              :label="$t('edit')"
+              @click.native="
+                $emit('edit-request', {
+                  collectionIndex,
+                  folderIndex,
+                  folderName,
+                  request,
+                  requestIndex,
+                  folderPath,
+                })
+                $refs.options.tippy().hide()
+              "
+            />
+            <SmartItem
+              icon="delete"
+              color="red"
+              :label="$t('delete')"
+              @click.native="
+                confirmRemove = true
+                $refs.options.tippy().hide()
+              "
+            />
+          </tippy>
+        </span>
+      </div>
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
diff --git a/components/collections/teams/Collection.vue b/components/collections/teams/Collection.vue
index 67d47caab..7c5bacc2f 100644
--- a/components/collections/teams/Collection.vue
+++ b/components/collections/teams/Collection.vue
@@ -23,82 +23,86 @@
       >
         <span class="truncate"> {{ collection.title }} </span>
       </span>
-      <ButtonSecondary
-        v-if="doc && !selected"
-        v-tippy="{ theme: 'tooltip' }"
-        :title="$t('import.title')"
-        icon="check_box_outline_blank"
-        color="green"
-        @click.native="$emit('select-collection')"
-      />
-      <ButtonSecondary
-        v-if="doc && selected"
-        v-tippy="{ theme: 'tooltip' }"
-        :title="$t('delete')"
-        icon="check_box"
-        color="green"
-        @click.native="$emit('unselect-collection')"
-      />
-      <ButtonSecondary
-        v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-        v-tippy="{ theme: 'tooltip' }"
-        icon="create_new_folder"
-        :title="$t('folder.new')"
-        class="group-hover:inline-flex hidden"
-        @click.native="
-          $emit('add-folder', {
-            folder: collection,
-            path: `${collectionIndex}`,
-          })
-        "
-      />
-      <tippy
-        v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-        ref="options"
-        interactive
-        trigger="click"
-        theme="popover"
-        arrow
-      >
-        <template #trigger>
-          <ButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
-            :title="$t('more')"
-            icon="more_vert"
-          />
-        </template>
-        <SmartItem
+      <div class="flex">
+        <ButtonSecondary
+          v-if="doc && !selected"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('import.title')"
+          icon="check_box_outline_blank"
+          color="green"
+          @click.native="$emit('select-collection')"
+        />
+        <ButtonSecondary
+          v-if="doc && selected"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('delete')"
+          icon="check_box"
+          color="green"
+          @click.native="$emit('unselect-collection')"
+        />
+        <ButtonSecondary
           v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+          v-tippy="{ theme: 'tooltip' }"
           icon="create_new_folder"
-          :label="$t('folder.new')"
+          :title="$t('folder.new')"
+          class="hidden group-hover:inline-flex"
           @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"
-          color="red"
-          :label="$t('delete')"
-          @click.native="
-            confirmRemove = true
-            $refs.options.tippy().hide()
-          "
-        />
-      </tippy>
+        <span>
+          <tippy
+            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+            ref="options"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
+          >
+            <template #trigger>
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('more')"
+                icon="more_vert"
+              />
+            </template>
+            <SmartItem
+              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+              icon="create_new_folder"
+              :label="$t('folder.new')"
+              @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"
+              color="red"
+              :label="$t('delete')"
+              @click.native="
+                confirmRemove = true
+                $refs.options.tippy().hide()
+              "
+            />
+          </tippy>
+        </span>
+      </div>
     </div>
     <div v-if="showChildren || isFiltered">
       <CollectionsTeamsFolder
diff --git a/components/collections/teams/Folder.vue b/components/collections/teams/Folder.vue
index 202d30a8f..f991be3f0 100644
--- a/components/collections/teams/Folder.vue
+++ b/components/collections/teams/Folder.vue
@@ -25,63 +25,67 @@
           {{ folder.name ? folder.name : folder.title }}
         </span>
       </span>
-      <ButtonSecondary
-        v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-        v-tippy="{ theme: 'tooltip' }"
-        icon="create_new_folder"
-        :title="$t('folder.new')"
-        class="hidden group-hover:inline-flex"
-        @click.native="$emit('add-folder', { folder, path: folderPath })"
-      />
-      <tippy
-        v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-        ref="options"
-        interactive
-        trigger="click"
-        theme="popover"
-        arrow
-      >
-        <template #trigger>
-          <ButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
-            :title="$t('more')"
-            icon="more_vert"
-          />
-        </template>
-        <SmartItem
+      <div class="flex">
+        <ButtonSecondary
           v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+          v-tippy="{ theme: 'tooltip' }"
           icon="create_new_folder"
-          :label="$t('folder.new')"
-          @click.native="
-            $emit('add-folder', { folder, path: folderPath })
-            $refs.options.tippy().hide()
-          "
+          :title="$t('folder.new')"
+          class="hidden group-hover:inline-flex"
+          @click.native="$emit('add-folder', { folder, path: folderPath })"
         />
-        <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"
-          color="red"
-          :label="$t('delete')"
-          @click.native="
-            confirmRemove = true
-            $refs.options.tippy().hide()
-          "
-        />
-      </tippy>
+        <span>
+          <tippy
+            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+            ref="options"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
+          >
+            <template #trigger>
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('more')"
+                icon="more_vert"
+              />
+            </template>
+            <SmartItem
+              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+              icon="create_new_folder"
+              :label="$t('folder.new')"
+              @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"
+              color="red"
+              :label="$t('delete')"
+              @click.native="
+                confirmRemove = true
+                $refs.options.tippy().hide()
+              "
+            />
+          </tippy>
+        </span>
+      </div>
     </div>
     <div v-if="showChildren || isFiltered">
       <CollectionsTeamsFolder
diff --git a/components/collections/teams/Request.vue b/components/collections/teams/Request.vue
index 83708c088..ce935fbc1 100644
--- a/components/collections/teams/Request.vue
+++ b/components/collections/teams/Request.vue
@@ -39,53 +39,57 @@
       >
         <span class="truncate"> {{ request.name }} </span>
       </span>
-      <ButtonSecondary
-        v-if="!saveRequest && !doc"
-        v-tippy="{ theme: 'tooltip' }"
-        icon="replay"
-        :title="$t('restore')"
-        class="group-hover:inline-flex hidden"
-        @click.native="!doc ? selectRequest() : {}"
-      />
-      <tippy
-        v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-        ref="options"
-        interactive
-        trigger="click"
-        theme="popover"
-        arrow
-      >
-        <template #trigger>
-          <ButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
-            :title="$t('more')"
-            icon="more_vert"
-          />
-        </template>
-        <SmartItem
-          icon="edit"
-          :label="$t('edit')"
-          @click.native="
-            $emit('edit-request', {
-              collectionIndex,
-              folderIndex,
-              folderName,
-              request,
-              requestIndex,
-            })
-            $refs.options.tippy().hide()
-          "
+      <div class="flex">
+        <ButtonSecondary
+          v-if="!saveRequest && !doc"
+          v-tippy="{ theme: 'tooltip' }"
+          icon="replay"
+          :title="$t('restore')"
+          class="hidden group-hover:inline-flex"
+          @click.native="!doc ? selectRequest() : {}"
         />
-        <SmartItem
-          icon="delete"
-          color="red"
-          :label="$t('delete')"
-          @click.native="
-            confirmRemove = true
-            $refs.options.tippy().hide()
-          "
-        />
-      </tippy>
+        <span>
+          <tippy
+            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+            ref="options"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
+          >
+            <template #trigger>
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('more')"
+                icon="more_vert"
+              />
+            </template>
+            <SmartItem
+              icon="edit"
+              :label="$t('edit')"
+              @click.native="
+                $emit('edit-request', {
+                  collectionIndex,
+                  folderIndex,
+                  folderName,
+                  request,
+                  requestIndex,
+                })
+                $refs.options.tippy().hide()
+              "
+            />
+            <SmartItem
+              icon="delete"
+              color="red"
+              :label="$t('delete')"
+              @click.native="
+                confirmRemove = true
+                $refs.options.tippy().hide()
+              "
+            />
+          </tippy>
+        </span>
+      </div>
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
diff --git a/components/firebase/Login.vue b/components/firebase/Login.vue
index 7a7cf1d00..815dffb0f 100644
--- a/components/firebase/Login.vue
+++ b/components/firebase/Login.vue
@@ -6,7 +6,7 @@
     @close="hideModal"
   >
     <template #body>
-      <div v-if="mode === 'sign-in'" class="flex flex-col space-y-2">
+      <div v-if="mode === 'sign-in'" class="flex flex-col space-y-2 px-2">
         <SmartItem
           :loading="signingInWithGoogle"
           svg="google"
diff --git a/components/http/CodegenModal.vue b/components/http/CodegenModal.vue
index 7485d682b..bf5d9efa5 100644
--- a/components/http/CodegenModal.vue
+++ b/components/http/CodegenModal.vue
@@ -9,7 +9,7 @@
         <label for="requestType" class="px-4 pb-4">
           {{ $t("request.choose_language") }}
         </label>
-        <div class="flex flex-1">
+        <div class="flex">
           <tippy
             ref="options"
             interactive
diff --git a/components/lenses/renderers/JSONLensRenderer.vue b/components/lenses/renderers/JSONLensRenderer.vue
index f377ee058..67e6a2ab0 100644
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -39,7 +39,7 @@
       <SmartAceEditor
         :value="jsonBodyText"
         :lang="'json'"
-        :provide-j-s-o-n-outline="true"
+        :provide-outline="true"
         :options="{
           maxLines: Infinity,
           minLines: 16,
diff --git a/components/smart/AceEditor.vue b/components/smart/AceEditor.vue
index 66a647c3e..7b57ee27a 100644
--- a/components/smart/AceEditor.vue
+++ b/components/smart/AceEditor.vue
@@ -2,7 +2,7 @@
   <div class="show-if-initialized" :class="{ initialized }">
     <pre ref="editor" :class="styles"></pre>
     <div
-      v-if="provideJSONOutline"
+      v-if="provideOutline"
       class="
         bg-primaryLight
         border-t border-divider
@@ -63,7 +63,7 @@ import outline from "~/helpers/outline"
 
 export default {
   props: {
-    provideJSONOutline: {
+    provideOutline: {
       type: Boolean,
       default: false,
       required: false,
@@ -160,7 +160,7 @@ export default {
     this.editor = editor
     this.cacheValue = this.value
 
-    if (this.lang === "json" && this.provideJSONOutline)
+    if (this.lang === "json" && this.provideOutline)
       this.initOutline(this.value)
 
     editor.on("change", () => {
@@ -168,12 +168,12 @@ export default {
       this.$emit("input", content)
       this.cacheValue = content
 
-      if (this.provideJSONOutline) debounce(this.initOutline(content), 500)
+      if (this.provideOutline) debounce(this.initOutline(content), 500)
 
       if (this.lint) this.provideLinting(content)
     })
 
-    if (this.lang === "json" && this.provideJSONOutline) {
+    if (this.lang === "json" && this.provideOutline) {
       editor.session.selection.on("changeCursor", () => {
         const index = editor.session.doc.positionToIndex(
           editor.selection.getCursor(),
diff --git a/components/smart/ColorModePicker.vue b/components/smart/ColorModePicker.vue
index 615ae6629..5deaa74e1 100644
--- a/components/smart/ColorModePicker.vue
+++ b/components/smart/ColorModePicker.vue
@@ -38,15 +38,15 @@ export default defineComponent({
     getIcon(color: HoppBgColor) {
       switch (color) {
         case "system":
-          return "desktop_windows"
+          return "devices"
         case "light":
-          return "wb_sunny"
+          return "light_mode"
         case "dark":
           return "nights_stay"
         case "black":
-          return "bedtime"
+          return "dark_mode"
         default:
-          return "desktop_windows"
+          return "devices"
       }
     },
   },
diff --git a/helpers/outline.js b/helpers/outline.js
index 4ff9f6912..1eb3e31d5 100644
--- a/helpers/outline.js
+++ b/helpers/outline.js
@@ -106,7 +106,7 @@ export default () => {
   }
 
   const getSiblings = (index) => {
-    const parent = path[index].obj.parent
+    const parent = path[index]?.obj?.parent
     if (!parent) return []
     else if (parent.kind === "Object") {
       return parent.members
diff --git a/pages/enter.vue b/pages/enter.vue
index a980931d2..22c003340 100644
--- a/pages/enter.vue
+++ b/pages/enter.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="flex flex-col min-h-screen items-center justify-center">
-    <span v-if="signingInWithEmail">
+    <div v-if="signingInWithEmail">
       <SmartSpinner />
-    </span>
-    <span v-else class="text-secondaryLight">
-      {{ $t("waiting_for_connection") }}
-    </span>
+    </div>
+    <div v-else class="text-sm text-secondaryLight animate-pulse">
+      <AppLogo class="h-8 w-8" />
+    </div>
     <pre v-if="error">{{ error }}</pre>
   </div>
 </template>