chore(ui): minor ui improvements

README.md

@@ -36,7 +36,7 @@
   <p>
     <a href="https://hoppscotch.io">
       <img
-        src="https://tiny.cc/hoppscotch_screenshot_1"
+        src="https://raw.githubusercontent.com/hoppscotch/hoppscotch/main/packages/hoppscotch-app/static/banner.png"
         alt="Screenshot"
         width="100%"
       />

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

@@ -420,7 +420,7 @@ input[type="checkbox"] {
   @apply inset-0;
   @apply bg-dividerLight;
   @apply opacity-0;
-  @apply z-30;
+  @apply z-20;
   @apply transition;
 
   content: "";
@@ -429,7 +429,7 @@ input[type="checkbox"] {
 .smart-splitter .splitpanes__splitter::after {
   @apply absolute;
   @apply inset-0;
-  @apply z-30;
+  @apply z-20;
   @apply transition;
   @apply flex;
   @apply items-center;

packages/hoppscotch-app/components/teams/Invite.vue

@@ -280,10 +280,24 @@
             py-4
             rounded
             border border-dividerLight
-            bg-primaryLight
+            flex flex-col
+            items-start
           "
         >
-          <span class="pb-2 flex items-center font-semibold">
+          <span
+            class="
+              mb-4
+              px-2
+              py-1
+              flex
+              justify-center
+              items-center
+              font-semibold
+              rounded-full
+              bg-primaryDark
+              border border-divider
+            "
+          >
             <i class="text-secondaryLight mr-2 material-icons">help_outline</i>
             {{ $t("profile.roles") }}
           </span>

packages/hoppscotch-app/locales/en.json

@@ -263,6 +263,7 @@
     "snippets": "Snippets"
   },
   "profile": {
+    "app_settings": "App Settings",
     "editor": "Editor",
     "editor_description": "Editors can add, edit, and delete requests.",
     "no_permission": "You do not have permission to perform this action.",
@@ -330,10 +331,10 @@
     "account_name_description": "This is your display name.",
     "background": "Background",
     "black_mode": "Black",
-    "sidebar_on_left": "Sidebar on left",
     "change_font_size": "Change font size",
     "choose_language": "Choose language",
     "dark_mode": "Dark",
+    "expand_navigation": "Expand navigation",
     "experiments": "Experiments",
     "experiments_notice": "This is a collection of experiments we're working on that might turn out to be useful, fun, both, or neither. They're not final and may not be stable, so if something overly weird happens, don't panic. Just turn the dang thing off. Jokes aside, ",
     "extension_ver_not_reported": "Not Reported",
@@ -348,7 +349,6 @@
     "interceptor_description": "Middleware between application and APIs.",
     "language": "Language",
     "light_mode": "Light",
-    "expand_navigation": "Expand navigation",
     "official_proxy_hosting": "Official Proxy is hosted by Hoppscotch.",
     "profile": "Profile",
     "profile_description": "Update you profile details",
@@ -358,6 +358,7 @@
     "proxy_use_toggle": "Use the proxy middleware to send requests",
     "read_the": "Read the",
     "reset_default": "Reset to default",
+    "sidebar_on_left": "Sidebar on left",
     "sync": "Synchronise",
     "sync_collections": "Collections",
     "sync_description": "These settings are synced to cloud.",

packages/hoppscotch-app/pages/profile.vue

@@ -13,29 +13,42 @@
             class="bg-primaryLight h-24 md:h-32 -mb-11 rounded"
             style="background-image: url('/images/cover.svg')"
           ></div>
-          <div class="flex px-4 items-end">
-            <img
-              v-if="currentUser.photoURL"
-              :src="currentUser.photoURL"
-              class="rounded-lg ring-4 ring-primary h-16 w-16"
-              :alt="currentUser.displayName"
-            />
-            <SmartIcon v-else name="user" class="svg-icons" />
-            <div class="ml-4">
-              <label class="heading">
-                {{ currentUser.displayName || $t("state.nothing_found") }}
-              </label>
-              <p class="flex text-secondaryLight items-center">
-                {{ currentUser.email }}
-                <SmartIcon
-                  v-if="currentUser.emailVerified"
-                  name="verified"
-                  class="ml-2 text-green-500 svg-icons"
+          <div class="flex px-4 flex-col md:flex-row space-y-8 justify-between">
+            <div class="flex items-end">
+              <img
+                v-if="currentUser.photoURL"
+                :src="currentUser.photoURL"
+                class="rounded-lg ring-4 ring-primary h-16 w-16"
+                :alt="currentUser.displayName"
+              />
+              <SmartIcon v-else name="user" class="svg-icons" />
+              <div class="ml-4">
+                <label class="heading">
+                  {{ currentUser.displayName || $t("state.nothing_found") }}
+                </label>
+                <p class="flex text-secondaryLight items-center">
+                  {{ currentUser.email }}
+                  <SmartIcon
+                    v-if="currentUser.emailVerified"
+                    name="verified"
+                    class="ml-2 text-green-500 svg-icons"
+                  />
+                </p>
+              </div>
+            </div>
+            <div class="flex space-x-2 items-end">
+              <div>
+                <SmartItem
+                  to="/settings"
+                  svg="settings"
+                  :label="$t('profile.app_settings')"
+                  outline
                 />
-              </p>
+              </div>
+              <FirebaseLogout outline />
             </div>
           </div>
-          <SmartTabs styles="sticky bg-primary z-10 top-0">
+          <SmartTabs>
             <SmartTab
               :id="'sync'"
               :label="$t('settings.account')"