refactor: sh admin login polish (#58)

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']

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-else class="flex flex-1 flex-col">
-    <div v-if="mode === 'sign-in'" class="flex flex-col space-y-2">
+    <div
-      <HoppSmartItem
+      class="p-6 bg-primaryLight rounded-lg border border-primaryDark shadow"
-        :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 class="flex flex-col">
+      <div v-if="mode === 'sign-in'" class="flex flex-col space-y-2">
-        <input
+        <HoppSmartItem
-          id="email"
+          :loading="signingInWithGitHub"
-          v-model="form.email"
+          :icon="IconGithub"
-          class="input floating-input"
+          :label="`Continue with GitHub`"
-          placeholder=" "
+          class="!items-center"
-          type="email"
+          @click="signInWithGithub"
-          name="email"
+        />
-          autocomplete="off"
+        <HoppSmartItem
-          required
+          :loading="signingInWithGoogle"
-          spellcheck="false"
+          :icon="IconGoogle"
-          v-focus
+          :label="`Continue with Google`"
-          autofocus
+          @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
+      <form
-        :loading="signingInWithEmail"
+        v-if="mode === 'email'"
-        type="submit"
+        class="flex flex-col space-y-4"
-        :label="`Send magic link`"
+        @submit.prevent="signInWithEmail"
-      />
+      >
-    </form>
+        <div class="flex flex-col">
-    <div v-if="mode === 'email-sent'" class="flex flex-col px-4">
+          <input
-      <div class="flex flex-col items-center justify-center max-w-md">
+            id="email"
-        <icon-lucide-inbox class="w-6 h-6 text-accent" />
+            v-model="form.email"
-        <h3 class="my-2 text-lg text-center">
+            class="input floating-input"
-          We sent a magic link to {{ form.email }}
+            placeholder=" "
-        </h3>
+            type="email"
-        <p class="text-center">
+            name="email"
-          We sent a magic link to {{ form.email }}. Click on the link to sign
+            autocomplete="off"
-          in.
+            required
-        </p>
+            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

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">
+            <HoppSmartLink class="flex items-center space-x-4" to="/dashboard">
-              <img src="/public/cover.jpg" alt="" class="h-7" />
+              <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';
 

packages/hoppscotch-sh-admin/src/pages/index.vue

@@ -1,23 +1,19 @@
 <template>
-  <div
+  <main
-    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"
+    class="flex h-screen flex-col justify-center items-center flex-1 flex-shrink-0"
   >
-    <div>
+    <div class="flex flex-col justify-center text-center px-4">
-      <div class="flex flex-col items-center justify-center mb-10">
+      <div class="flex justify-center items-center py-6">
-        <HoppButtonSecondary
+        <img src="/cover.jpg" alt="hoppscotch-logo" class="h-15" />
-          class="tracking-wide !font-bold !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark uppercase"
-          :label="'Hoppscotch'"
-          to="/"
-        />
-        <span> Dashboard </span>
       </div>
-      <div
+      <div class="flex flex-col items-center">
-        class="bg-primary xs:w-xs sm:w-sm md:w-lg p-10 rounded-md border border-secondaryLight"
+        <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">