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,12 +6,16 @@
     >
     and login with an admin account.
   </div>
-  <div v-else>
+  <div v-else class="flex flex-1 flex-col">
+    <div
+      class="p-6 bg-primaryLight rounded-lg border border-primaryDark shadow"
+    >
       <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
@@ -34,7 +38,7 @@
       </div>
       <form
         v-if="mode === 'email'"
-      class="flex flex-col space-y-2"
+        class="flex flex-col space-y-4"
         @submit.prevent="signInWithEmail"
       >
         <div class="flex flex-col">
@@ -71,7 +75,9 @@
           </p>
         </div>
       </div>
-    <section class="text-center mt-10">
+    </div>
+
+    <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">