feat: add status page link to footer

packages/hoppscotch-app/assets/icons/activity.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
+</svg>

packages/hoppscotch-app/assets/scss/themes.scss

@@ -45,11 +45,11 @@
   --secondary-light-color: theme("colors.true-gray.500");
   --secondary-dark-color: theme("colors.true-gray.100");
   --divider-color: theme("colors.true-gray.800");
-  --divider-light-color: theme("colors.dark.700");
+  --divider-light-color: theme("colors.dark.800");
   --divider-dark-color: theme("colors.dark.300");
   --error-color: theme("colors.warm-gray.900");
   --tooltip-color: theme("colors.true-gray.100");
-  --popover-color: theme("colors.dark.700");
+  --popover-color: theme("colors.dark.600");
   --editor-theme: "twilight";
 }
 

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 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"