From c2ae333a1217bba2d41915ee6fb1d6719be67b4f Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Mon, 16 Aug 2021 00:38:57 +0530
Subject: [PATCH] refactor(ui): better CTAs, expanded app bar

---
 components/app/Header.vue       | 49 ++++++++++++++++++++++++++-------
 components/app/Sidenav.vue      | 28 ++++++++++++++++++-
 components/button/Secondary.vue |  1 +
 components/smart/Modal.vue      |  2 +-
 lang/en-US.json                 |  7 ++---
 layouts/default.vue             |  6 ++--
 6 files changed, 74 insertions(+), 19 deletions(-)

diff --git a/components/app/Header.vue b/components/app/Header.vue
index ee7a6dfa2..9cfd4a10c 100644
--- a/components/app/Header.vue
+++ b/components/app/Header.vue
@@ -1,11 +1,29 @@
 <template>
   <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">
-        <AppLogo />
+    <header
+      class="
+        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">
-        <AppGitHubStarButton class="flex mx-2 mt-1" />
+      <div class="space-x-2 inline-flex items-center">
         <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>
 
diff --git a/components/app/Sidenav.vue b/components/app/Sidenav.vue
index d7543d4c0..aa94cde51 100644
--- a/components/app/Sidenav.vue
+++ b/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>
diff --git a/components/button/Secondary.vue b/components/button/Secondary.vue
index 3620d992f..f7f157442 100644
--- a/components/button/Secondary.vue
+++ b/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
diff --git a/components/smart/Modal.vue b/components/smart/Modal.vue
index e01e3934f..8bc5c3699 100644
--- a/components/smart/Modal.vue
+++ b/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' }"
           >
diff --git a/lang/en-US.json b/lang/en-US.json
index cb5334492..f2d167ba1 100644
--- a/lang/en-US.json
+++ b/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",
diff --git a/layouts/default.vue b/layouts/default.vue
index c573533bd..4db1ab18e 100644
--- a/layouts/default.vue
+++ b/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" />