From b6950332ad95a93ae86250b6e1fd4b836b1347dd Mon Sep 17 00:00:00 2001
From: Nivedin <53208152+nivedin@users.noreply.github.com>
Date: Tue, 28 Mar 2023 23:33:50 +0530
Subject: [PATCH] refactor: sh admin login polish (#58)

---
 .../hoppscotch-sh-admin/src/components.d.ts   |  12 ++
 .../src/components/app/Login.vue              | 128 +++++++++---------
 .../src/components/app/Sidebar.vue            |   7 +-
 .../hoppscotch-sh-admin/src/pages/index.vue   |  24 ++--
 4 files changed, 93 insertions(+), 78 deletions(-)

diff --git a/packages/hoppscotch-sh-admin/src/components.d.ts b/packages/hoppscotch-sh-admin/src/components.d.ts
index 71c920e53..8f7e04f79 100644
--- a/packages/hoppscotch-sh-admin/src/components.d.ts
+++ b/packages/hoppscotch-sh-admin/src/components.d.ts
@@ -13,6 +13,18 @@ declare module '@vue/runtime-core' {
     AppModal: typeof import('./components/app/Modal.vue')['default']
     AppSidebar: typeof import('./components/app/Sidebar.vue')['default']
     AppToast: typeof import('./components/app/Toast.vue')['default']
+    HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
+    HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
+    HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
+    HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
+    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
+    IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
+    IconLucideLayoutDashboard: typeof import('~icons/lucide/layout-dashboard')['default']
+    IconLucideMenu: typeof import('~icons/lucide/menu')['default']
+    IconLucideSidebarClose: typeof import('~icons/lucide/sidebar-close')['default']
+    IconLucideSidebarOpen: typeof import('~icons/lucide/sidebar-open')['default']
+    IconLucideUser: typeof import('~icons/lucide/user')['default']
+    IconLucideUsers: typeof import('~icons/lucide/users')['default']
     ProfilePicture: typeof import('./components/profile/Picture.vue')['default']
     TeamsAddMembers: typeof import('./components/teams/AddMembers.vue')['default']
     TeamsDetails: typeof import('./components/teams/Details.vue')['default']
diff --git a/packages/hoppscotch-sh-admin/src/components/app/Login.vue b/packages/hoppscotch-sh-admin/src/components/app/Login.vue
index d23119791..b98cc96c3 100644
--- a/packages/hoppscotch-sh-admin/src/components/app/Login.vue
+++ b/packages/hoppscotch-sh-admin/src/components/app/Login.vue
@@ -6,72 +6,78 @@
     >
     and login with an admin account.
   </div>
-  <div v-else>
-    <div v-if="mode === 'sign-in'" class="flex flex-col space-y-2">
-      <HoppSmartItem
-        :loading="signingInWithGitHub"
-        :icon="IconGithub"
-        :label="`Continue with GitHub`"
-        @click="signInWithGithub"
-      />
-      <HoppSmartItem
-        :loading="signingInWithGoogle"
-        :icon="IconGoogle"
-        :label="`Continue with Google`"
-        @click="signInWithGoogle"
-      />
-      <HoppSmartItem
-        :loading="signingInWithMicrosoft"
-        :icon="IconMicrosoft"
-        :label="`Continue with Microsoft`"
-        @click="signInWithMicrosoft"
-      />
-      <HoppSmartItem
-        :icon="IconEmail"
-        :label="`Continue with Email`"
-        @click="mode = 'email'"
-      />
-    </div>
-    <form
-      v-if="mode === 'email'"
-      class="flex flex-col space-y-2"
-      @submit.prevent="signInWithEmail"
+  <div v-else class="flex flex-1 flex-col">
+    <div
+      class="p-6 bg-primaryLight rounded-lg border border-primaryDark shadow"
     >
-      <div class="flex flex-col">
-        <input
-          id="email"
-          v-model="form.email"
-          class="input floating-input"
-          placeholder=" "
-          type="email"
-          name="email"
-          autocomplete="off"
-          required
-          spellcheck="false"
-          v-focus
-          autofocus
+      <div v-if="mode === 'sign-in'" class="flex flex-col space-y-2">
+        <HoppSmartItem
+          :loading="signingInWithGitHub"
+          :icon="IconGithub"
+          :label="`Continue with GitHub`"
+          class="!items-center"
+          @click="signInWithGithub"
+        />
+        <HoppSmartItem
+          :loading="signingInWithGoogle"
+          :icon="IconGoogle"
+          :label="`Continue with Google`"
+          @click="signInWithGoogle"
+        />
+        <HoppSmartItem
+          :loading="signingInWithMicrosoft"
+          :icon="IconMicrosoft"
+          :label="`Continue with Microsoft`"
+          @click="signInWithMicrosoft"
+        />
+        <HoppSmartItem
+          :icon="IconEmail"
+          :label="`Continue with Email`"
+          @click="mode = 'email'"
         />
-        <label for="email"> Email </label>
       </div>
-      <HoppButtonPrimary
-        :loading="signingInWithEmail"
-        type="submit"
-        :label="`Send magic link`"
-      />
-    </form>
-    <div v-if="mode === 'email-sent'" class="flex flex-col px-4">
-      <div class="flex flex-col items-center justify-center max-w-md">
-        <icon-lucide-inbox class="w-6 h-6 text-accent" />
-        <h3 class="my-2 text-lg text-center">
-          We sent a magic link to {{ form.email }}
-        </h3>
-        <p class="text-center">
-          We sent a magic link to {{ form.email }}. Click on the link to sign
-          in.
-        </p>
+      <form
+        v-if="mode === 'email'"
+        class="flex flex-col space-y-4"
+        @submit.prevent="signInWithEmail"
+      >
+        <div class="flex flex-col">
+          <input
+            id="email"
+            v-model="form.email"
+            class="input floating-input"
+            placeholder=" "
+            type="email"
+            name="email"
+            autocomplete="off"
+            required
+            spellcheck="false"
+            v-focus
+            autofocus
+          />
+          <label for="email"> Email </label>
+        </div>
+        <HoppButtonPrimary
+          :loading="signingInWithEmail"
+          type="submit"
+          :label="`Send magic link`"
+        />
+      </form>
+      <div v-if="mode === 'email-sent'" class="flex flex-col px-4">
+        <div class="flex flex-col items-center justify-center max-w-md">
+          <icon-lucide-inbox class="w-6 h-6 text-accent" />
+          <h3 class="my-2 text-lg text-center">
+            We sent a magic link to {{ form.email }}
+          </h3>
+          <p class="text-center">
+            We sent a magic link to {{ form.email }}. Click on the link to sign
+            in.
+          </p>
+        </div>
       </div>
     </div>
-    <section class="text-center mt-10">
+
+    <section class="mt-15">
       <div v-if="mode === 'sign-in'" class="text-secondaryLight text-tiny">
         By signing in, you are agreeing to our
         <HoppSmartAnchor
diff --git a/packages/hoppscotch-sh-admin/src/components/app/Sidebar.vue b/packages/hoppscotch-sh-admin/src/components/app/Sidebar.vue
index 5fb01b5ea..06db5f520 100644
--- a/packages/hoppscotch-sh-admin/src/components/app/Sidebar.vue
+++ b/packages/hoppscotch-sh-admin/src/components/app/Sidebar.vue
@@ -15,15 +15,15 @@
       <div :class="isExpanded ? 'w-64' : 'w-full'">
         <div class="flex items-center justify-start mt-6 ml-6">
           <div class="flex items-center">
-            <router-link class="flex" to="/dashboard">
-              <img src="/public/cover.jpg" alt="" class="h-7" />
+            <HoppSmartLink class="flex items-center space-x-4" to="/dashboard">
+              <img src="/cover.jpg" alt="hoppscotch-logo" class="h-7" />
 
               <span
                 v-if="isExpanded"
                 class="mx-2 text-xl font-semibold text-gray-200"
                 >Hoppscotch</span
               >
-            </router-link>
+            </HoppSmartLink>
           </div>
         </div>
 
@@ -73,6 +73,7 @@
 </template>
 
 <script setup lang="ts">
+import { HoppSmartLink } from '@hoppscotch/ui';
 import { useSidebar } from '../../composables/useSidebar';
 import { useRoute } from 'vue-router';
 
diff --git a/packages/hoppscotch-sh-admin/src/pages/index.vue b/packages/hoppscotch-sh-admin/src/pages/index.vue
index dac5d38fa..7054c60ad 100644
--- a/packages/hoppscotch-sh-admin/src/pages/index.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/index.vue
@@ -1,23 +1,19 @@
 <template>
-  <div
-    class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gradient-to-r dark:from-zinc-700 dark:to-gray-900 p-6"
+  <main
+    class="flex h-screen flex-col justify-center items-center flex-1 flex-shrink-0"
   >
-    <div>
-      <div class="flex flex-col items-center justify-center mb-10">
-        <HoppButtonSecondary
-          class="tracking-wide !font-bold !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark uppercase"
-          :label="'Hoppscotch'"
-          to="/"
-        />
-        <span> Dashboard </span>
+    <div class="flex flex-col justify-center text-center px-4">
+      <div class="flex justify-center items-center py-6">
+        <img src="/cover.jpg" alt="hoppscotch-logo" class="h-15" />
       </div>
-      <div
-        class="bg-primary xs:w-xs sm:w-sm md:w-lg p-10 rounded-md border border-secondaryLight"
-      >
+      <div class="flex flex-col items-center">
+        <h1 class="text-2xl text-secondaryDark">Login to Admin Dashboard</h1>
+      </div>
+      <div class="flex my-6">
         <AppLogin />
       </div>
     </div>
-  </div>
+  </main>
 </template>
 
 <route lang="yaml">