chore(ui): improve ui consistency

packages/hoppscotch-app/components/app/Footer.vue

@@ -97,6 +97,20 @@
                 }
               "
             />
+            <SmartItem
+              svg="gift"
+              :label="`${t('app.whats_new')}`"
+              to="https://docs.hoppscotch.io/changelog"
+              blank
+              @click.native="options.tippy().hide()"
+            />
+            <SmartItem
+              svg="activity"
+              :label="t('app.status')"
+              to="https://status.hoppscotch.io"
+              blank
+              @click.native="options.tippy().hide()"
+            />
             <hr />
             <SmartItem
               svg="github"
@@ -129,14 +143,6 @@
               blank
               @click.native="options.tippy().hide()"
             />
-            <SmartItem
-              svg="gift"
-              :label="`${t('app.whats_new')}`"
-              to="https://docs.hoppscotch.io/changelog"
-              blank
-              @click.native="options.tippy().hide()"
-            />
-            <!-- <SmartItem :label="t('app.status')" /> -->
             <div class="flex opacity-50 py-2 px-4">
               {{ `${t("app.name")} ${t("app.version")}` }}
             </div>

packages/hoppscotch-app/components/app/Header.vue

@@ -85,6 +85,15 @@
                   svg="user"
                 />
               </template>
+              <div class="flex text-tiny px-2 flex-col">
+                <span class="inline-flex truncate font-semibold">
+                  {{ currentUser.displayName }}
+                </span>
+                <span class="inline-flex truncate text-secondaryLight">
+                  {{ currentUser.email }}
+                </span>
+              </div>
+              <hr />
               <div
                 ref="tippyActions"
                 class="flex flex-col focus:outline-none"

packages/hoppscotch-app/components/app/Interceptor.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="flex flex-col space-y-4 p-4 items-start">
+  <div class="flex flex-col space-y-4 p-4">
     <div class="flex flex-col">
-      <h2 class="inline-flex font-semibold text-secondaryDark pb-2">
+      <h2 class="inline-flex font-semibold text-secondaryDark pb-1">
         {{ t("settings.interceptor") }}
       </h2>
-      <p class="inline-flex">
+      <p class="inline-flex text-tiny">
         {{ t("settings.interceptor_description") }}
       </p>
     </div>