refactor(ui): better CTAs, expanded app bar

components/app/Header.vue

@@ -1,11 +1,29 @@
 <template>
   <div>
-    <header class="flex flex-1 py-2 px-4 items-center justify-between">
+    <header
-      <div class="font-bold flex-shrink-0 inline-flex items-center">
+      class="
-        <AppLogo />
+        flex
+        space-x-2
+        flex-1
+        py-2
+        px-2
+        hide-scrollbar
+        items-center
+        justify-between
+      "
+      :class="{ 'overflow-x-auto': !currentUser }"
+    >
+      <div class="space-x-2 group inline-flex items-center">
+        <ButtonSecondary
+          class="tracking-wide !font-bold"
+          label="HOPPSCOTCH"
+          to="/"
+        />
+        <AppGitHubStarButton
+          class="mt-1.5 transition hidden group-hover:flex"
+        />
       </div>
-      <div class="space-x-2 flex-shrink-0 inline-flex items-center">
+      <div class="space-x-2 inline-flex items-center">
-        <AppGitHubStarButton class="flex mx-2 mt-1" />
         <ButtonSecondary
           id="installPWA"
           v-tippy="{ theme: 'tooltip' }"
@@ -13,17 +31,28 @@
           icon="offline_bolt"
           @click.native="showInstallPrompt()"
         />
-        <ButtonPrimary
+        <ButtonSecondary
           v-if="currentUser === null"
-          label="Login"
+          icon="filter_drama"
+          :label="$t('header.save_workspace')"
+          outline
+          class="hidden !text-secondaryDark md:flex"
           @click.native="showLogin = true"
         />
-        <span v-else>
+        <ButtonPrimary
+          v-if="currentUser === null"
+          :label="$t('header.login')"
+          outline
+          @click.native="showLogin = true"
+        />
+        <span v-else class="pr-2">
           <tippy ref="user" interactive trigger="click" theme="popover" arrow>
             <template #trigger>
               <ProfilePicture
                 v-if="currentUser.photoURL"
-                v-tippy="{ theme: 'tooltip' }"
+                v-tippy="{
+                  theme: 'tooltip',
+                }"
                 :url="currentUser.photoURL"
                 :alt="currentUser.displayName"
                 :title="currentUser.displayName"
@@ -47,9 +76,9 @@
           </tippy>
         </span>
       </div>
-      <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
     </header>
     <AppAnnouncement v-if="!isOnLine" />
+    <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
   </div>
 </template>
 

components/app/Sidenav.vue

@@ -118,13 +118,35 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .nav-link {
+  @apply relative;
   @apply p-4;
   @apply flex flex-col flex-1;
   @apply items-center;
   @apply justify-center;
   @apply transition;
   @apply hover:(bg-primaryDark text-secondaryDark);
-  @apply focus-visible:(ring ring-inset ring-accent);
+  @apply focus:text-secondaryDark;
+
+  &::after {
+    @apply absolute;
+    @apply inset-x-0;
+    @apply md:inset-x-auto;
+    @apply md:inset-y-0;
+    @apply bottom-0;
+    @apply md:bottom-auto;
+    @apply md:left-0;
+    @apply z-2;
+    @apply h-0.5;
+    @apply md:h-full;
+    @apply w-full;
+    @apply md:w-0.5;
+
+    content: "";
+  }
+
+  &:focus::after {
+    @apply bg-divider;
+  }
 
   .material-icons,
   .svg-icons {
@@ -144,6 +166,10 @@ export default defineComponent({
     .svg-icons {
       @apply opacity-100;
     }
+
+    &::after {
+      @apply bg-accent;
+    }
   }
 }
 </style>

components/button/Secondary.vue

@@ -10,6 +10,7 @@
       inline-flex
       items-center
       justify-center
+      whitespace-nowrap
       hover:bg-primaryDark
       focus:outline-none
       focus-visible:bg-primaryDark

components/smart/Modal.vue

@@ -34,7 +34,6 @@
           <div
             class="
               bg-primary
-              rounded-lg
               shadow-lg
               text-left
               w-full
@@ -45,6 +44,7 @@
               align-bottom
               overflow-hidden
               sm:max-w-md sm:align-middle
+              md:rounded-lg
             "
             :class="{ 'mt-24 md:mb-8': placement === 'top' }"
           >

lang/en-US.json

@@ -7,7 +7,9 @@
     "settings": "Settings"
   },
   "header": {
-    "install_pwa": "Install app"
+    "install_pwa": "Install app",
+    "save_workspace": "Save My Workspace",
+    "login": "Login"
   },
   "action": {
     "turn_on": "Turn on",
@@ -444,9 +446,6 @@
   "extension_ver_not_reported": "Not Reported",
   "extensions_info1": "Browser extension simplifies access to Hoppscotch, fix CORS issues, etc.",
   "extensions_info2": "Get Hoppscotch browser extension!",
-  "installed": "Installed",
-  "login_with": "Login with",
-  "login": "Login",
   "login_to_hoppscotch": "Login to Hoppscotch",
   "logged_out": "Logged out",
   "login_success": "Successfully logged in",

layouts/default.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="flex h-screen w-screen">
     <Splitpanes :dbl-click-splitter="false" horizontal>
+      <Pane v-if="!ZEN_MODE" style="height: auto">
+        <AppHeader />
+      </Pane>
       <Pane class="flex flex-1 hide-scrollbar !overflow-auto">
         <Splitpanes
           :dbl-click-splitter="false"
@@ -15,9 +18,6 @@
           </Pane>
           <Pane class="flex flex-1 hide-scrollbar !overflow-auto">
             <Splitpanes :dbl-click-splitter="false" horizontal>
-              <Pane v-if="!ZEN_MODE" style="height: auto">
-                <AppHeader />
-              </Pane>
               <Pane class="flex flex-1 hide-scrollbar !overflow-auto">
                 <main class="flex flex-1 w-full">
                   <nuxt class="flex flex-1" />