From 753db25e4c5b9ef7bf73c5787b81aa7ac6c9111b Mon Sep 17 00:00:00 2001
From: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com>
Date: Mon, 13 Mar 2023 18:57:29 +0530
Subject: [PATCH] refactor: remove of light mode from admin dashboard + added
 README, .env.example (#33)

---
 packages/hoppscotch-sh-admin/.env.example     |   4 +
 packages/hoppscotch-sh-admin/README.md        |  45 ++++++++
 packages/hoppscotch-sh-admin/src/App.vue      |  10 --
 .../hoppscotch-sh-admin/src/components.d.ts   |  60 +++++-----
 .../src/components/app/Header.vue             |   4 +-
 .../src/components/app/Modal.vue              |   2 +-
 .../src/components/app/Sidebar.vue            |   4 +-
 .../src/components/teams/AddMembers.vue       |   4 +-
 .../src/components/users/Details.vue          | 108 ------------------
 .../src/pages/dashboard.vue                   |  46 +++-----
 .../src/pages/settings.vue                    |   4 +-
 .../src/pages/teams/AddTeam.vue               |  10 +-
 .../src/pages/teams/details.vue               |  62 +++-------
 .../src/pages/teams/index.vue                 |  34 ++----
 .../src/pages/users/_id.vue                   |  30 ++---
 .../src/pages/users/index.vue                 |  27 ++---
 .../src/pages/users/invited.vue               |  16 +--
 17 files changed, 157 insertions(+), 313 deletions(-)
 create mode 100644 packages/hoppscotch-sh-admin/.env.example
 create mode 100644 packages/hoppscotch-sh-admin/README.md
 delete mode 100644 packages/hoppscotch-sh-admin/src/components/users/Details.vue

diff --git a/packages/hoppscotch-sh-admin/.env.example b/packages/hoppscotch-sh-admin/.env.example
new file mode 100644
index 000000000..baf0c1722
--- /dev/null
+++ b/packages/hoppscotch-sh-admin/.env.example
@@ -0,0 +1,4 @@
+# Backend URLs
+VITE_BACKEND_GQL_URL='*****************************'
+VITE_BACKEND_WS_URL='******************************'
+VITE_BACKEND_API_URL='*****************************'
diff --git a/packages/hoppscotch-sh-admin/README.md b/packages/hoppscotch-sh-admin/README.md
new file mode 100644
index 000000000..d5cc17347
--- /dev/null
+++ b/packages/hoppscotch-sh-admin/README.md
@@ -0,0 +1,45 @@
+<div align="center">
+  <a href="https://hoppscotch.io">
+    <img
+      src="https://avatars.githubusercontent.com/u/56705483"
+      alt="Hoppscotch Logo"
+      height="64"
+    />
+  </a>
+  <br />
+  <p>
+    <h3>
+      <b>
+        Hoppscotch Self Hosted Admin Dashboard
+      </b>
+    </h3>
+  </p>
+
+#### **Support**
+
+[![Chat on Discord](https://img.shields.io/badge/chat-Discord-7289DA?logo=discord)](https://hoppscotch.io/discord) [![Chat on Telegram](https://img.shields.io/badge/chat-Telegram-2CA5E0?logo=telegram)](https://hoppscotch.io/telegram) [![Discuss on GitHub](https://img.shields.io/badge/discussions-GitHub-333333?logo=github)](https://github.com/hoppscotch/hoppscotch/discussions)
+
+ </div>
+
+## **Built with**
+
+- [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML)
+- [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS), [SCSS](https://sass-lang.com), [Windi CSS](https://windicss.org)
+- [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
+- [TypeScript](https://www.typescriptlang.org)
+- [Vue](https://vuejs.org)
+- [Vite](https://vitejs.dev)
+
+## **Developing**
+
+0. Update [`.env.example`](https://github.com/hoppscotch/hoppscotch/blob/main/.env.example) file found in the root of repository with your own keys and rename it to `.env`.
+
+### Local development environment
+
+1. [Clone this repo](https://help.github.com/en/articles/cloning-a-repository) with git.
+2. Update `.env.example` file found in the root of `hoppscotch-sh-admin` directory with your own keys and rename it to `.env`.
+3. Install pnpm using npm by running `npm install -g pnpm`.
+4. Install dependencies by running `pnpm install` within the `hoppscotch-sh-admin` directory
+5. It is assumed that the backend is running. Refer the Hoppscotch Backend [`README`](https://github.com/hoppscotch/self-hosted/blob/main/packages/hoppscotch-backend/README.md) to get the backend setup and running.
+6. Start the development server with `pnpm run dev`.
+7. Open the development site by going to [`http://localhost:3000`](http://localhost:3000) in your browser.
diff --git a/packages/hoppscotch-sh-admin/src/App.vue b/packages/hoppscotch-sh-admin/src/App.vue
index cb647e8d0..75e52b968 100644
--- a/packages/hoppscotch-sh-admin/src/App.vue
+++ b/packages/hoppscotch-sh-admin/src/App.vue
@@ -5,7 +5,6 @@
 </template>
 
 <script setup lang="ts">
-import { useDark, useToggle } from '@vueuse/core';
 import { computed } from 'vue';
 import { useRouter } from 'vue-router';
 import { HOPP_MODULES } from './modules';
@@ -18,15 +17,6 @@ const layout = computed(
   () => `${currentRoute.value.meta.layout || defaultLayout}-layout`
 );
 
-const isDark = useDark();
-useToggle(isDark);
-
 // Run module root component setup code
 HOPP_MODULES.forEach((mod) => mod.onRootSetup?.());
 </script>
-
-<style lang="scss">
-html.dark {
-  color-scheme: dark;
-}
-</style>
diff --git a/packages/hoppscotch-sh-admin/src/components.d.ts b/packages/hoppscotch-sh-admin/src/components.d.ts
index a26536564..e04de87a2 100644
--- a/packages/hoppscotch-sh-admin/src/components.d.ts
+++ b/packages/hoppscotch-sh-admin/src/components.d.ts
@@ -1,40 +1,38 @@
 // generated by unplugin-vue-components
 // We suggest you to commit this file into source control
 // Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
+import '@vue/runtime-core';
 
-export {}
+export {};
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    AppHeader: typeof import('./components/app/Header.vue')['default']
-    AppLogin: typeof import('./components/app/Login.vue')['default']
-    AppLogout: typeof import('./components/app/Logout.vue')['default']
-    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']
-    IconLucideBell: typeof import('~icons/lucide/bell')['default']
-    IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
-    IconLucideLayoutDashboard: typeof import('~icons/lucide/layout-dashboard')['default']
-    IconLucideLineChart: typeof import('~icons/lucide/line-chart')['default']
-    IconLucideLock: typeof import('~icons/lucide/lock')['default']
-    IconLucideMenu: typeof import('~icons/lucide/menu')['default']
-    IconLucideSettings: typeof import('~icons/lucide/settings')['default']
-    IconLucideSidebarClose: typeof import('~icons/lucide/sidebar-close')['default']
-    IconLucideSidebarOpen: typeof import('~icons/lucide/sidebar-open')['default']
-    IconLucideUser: typeof import('~icons/lucide/user')['default']
-    IconLucideUserCog: typeof import('~icons/lucide/user-cog')['default']
-    IconLucideUsers: typeof import('~icons/lucide/users')['default']
-    ProfilePicture: typeof import('./components/profile/Picture.vue')['default']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-    TeamsAddMembers: typeof import('./components/teams/AddMembers.vue')['default']
-    UsersDetails: typeof import('./components/users/Details.vue')['default']
+    AppHeader: typeof import('./components/app/Header.vue')['default'];
+    AppLogin: typeof import('./components/app/Login.vue')['default'];
+    AppLogout: typeof import('./components/app/Logout.vue')['default'];
+    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'];
+    IconLucideBell: typeof import('~icons/lucide/bell')['default'];
+    IconLucideInbox: typeof import('~icons/lucide/inbox')['default'];
+    IconLucideLayoutDashboard: typeof import('~icons/lucide/layout-dashboard')['default'];
+    IconLucideLineChart: typeof import('~icons/lucide/line-chart')['default'];
+    IconLucideLock: typeof import('~icons/lucide/lock')['default'];
+    IconLucideMenu: typeof import('~icons/lucide/menu')['default'];
+    IconLucideSettings: typeof import('~icons/lucide/settings')['default'];
+    IconLucideSidebarClose: typeof import('~icons/lucide/sidebar-close')['default'];
+    IconLucideSidebarOpen: typeof import('~icons/lucide/sidebar-open')['default'];
+    IconLucideUser: typeof import('~icons/lucide/user')['default'];
+    IconLucideUserCog: typeof import('~icons/lucide/user-cog')['default'];
+    IconLucideUsers: typeof import('~icons/lucide/users')['default'];
+    ProfilePicture: typeof import('./components/profile/Picture.vue')['default'];
+    RouterLink: typeof import('vue-router')['RouterLink'];
+    RouterView: typeof import('vue-router')['RouterView'];
+    TeamsAddMembers: typeof import('./components/teams/AddMembers.vue')['default'];
   }
-
 }
diff --git a/packages/hoppscotch-sh-admin/src/components/app/Header.vue b/packages/hoppscotch-sh-admin/src/components/app/Header.vue
index 247a28001..a2aa98fa9 100644
--- a/packages/hoppscotch-sh-admin/src/components/app/Header.vue
+++ b/packages/hoppscotch-sh-admin/src/components/app/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <header
-    class="flex items-center justify-between border-b border-gray-400 dark:border-gray-600 px-6 py-4 bg-neutral-50 dark:bg-neutral-900 shadow-lg"
+    class="flex items-center justify-between border-b border-gray-600 px-6 py-4 bg-neutral-900 shadow-lg"
   >
     <div class="flex items-center">
       <button
@@ -64,7 +64,7 @@
         >
           <div
             v-show="dropdownOpen"
-            class="absolute right-0 z-20 w-48 py-2 mt-2 bg-zinc-200 dark:bg-zinc-800 rounded-md shadow-xl"
+            class="absolute right-0 z-20 w-48 py-2 mt-2 bg-zinc-800 rounded-md shadow-xl"
           >
             <HoppSmartItem to="/profile" :icon="IconUser" :label="'Profile'" />
             <HoppSmartItem
diff --git a/packages/hoppscotch-sh-admin/src/components/app/Modal.vue b/packages/hoppscotch-sh-admin/src/components/app/Modal.vue
index 920766ee4..bd63654b1 100644
--- a/packages/hoppscotch-sh-admin/src/components/app/Modal.vue
+++ b/packages/hoppscotch-sh-admin/src/components/app/Modal.vue
@@ -2,7 +2,7 @@
   <div>
     <button
       @click="open = true"
-      class="inline-flex items-center bg-emerald-700 h-8 ml-3 pl-2.5 pr-2 rounded-md shadow text-gray-200 dark:border-gray-800 border border-gray-200 leading-none py-0 hover:bg-emerald-700 focus:outline-none focus:bg-emerald-800"
+      class="inline-flex items-center bg-emerald-700 h-8 ml-3 pl-2.5 pr-2 rounded-md shadow border-gray-800 border border-gray-200 leading-none py-0 hover:bg-emerald-700 focus:outline-none focus:bg-emerald-800"
     >
       Invite User
     </button>
diff --git a/packages/hoppscotch-sh-admin/src/components/app/Sidebar.vue b/packages/hoppscotch-sh-admin/src/components/app/Sidebar.vue
index 729414145..94cab4bf2 100644
--- a/packages/hoppscotch-sh-admin/src/components/app/Sidebar.vue
+++ b/packages/hoppscotch-sh-admin/src/components/app/Sidebar.vue
@@ -20,7 +20,7 @@
 
               <span
                 v-if="isExpanded"
-                class="mx-2 text-xl font-semibold text-gray-600 dark:text-gray-200"
+                class="mx-2 text-xl font-semibold text-gray-200"
                 >Hoppscotch</span
               >
             </router-link>
@@ -104,6 +104,6 @@ const inactiveClass =
   @apply fixed md:static md:translate-x-0 md:inset-0 inset-y-0 left-0 z-30;
   @apply transition duration-300;
 
-  @apply flex overflow-y-auto bg-neutral-200 dark:bg-neutral-900 border-r border-gray-300 dark:border-gray-600;
+  @apply flex overflow-y-auto bg-neutral-900 border-r border-gray-600;
 }
 </style>
diff --git a/packages/hoppscotch-sh-admin/src/components/teams/AddMembers.vue b/packages/hoppscotch-sh-admin/src/components/teams/AddMembers.vue
index d26c77163..55d89b0b9 100644
--- a/packages/hoppscotch-sh-admin/src/components/teams/AddMembers.vue
+++ b/packages/hoppscotch-sh-admin/src/components/teams/AddMembers.vue
@@ -1,8 +1,6 @@
 <template>
   <div class="flex justify-between">
-    <h3
-      class="mt-10 text-2xl justify-start font-medium text-zinc-800 dark:text-gray-200"
-    >
+    <h3 class="mt-10 text-2xl justify-start font-medium text-gray-200">
       Members
     </h3>
     <div class="mt-8 ml-2">
diff --git a/packages/hoppscotch-sh-admin/src/components/users/Details.vue b/packages/hoppscotch-sh-admin/src/components/users/Details.vue
deleted file mode 100644
index 715aaebe9..000000000
--- a/packages/hoppscotch-sh-admin/src/components/users/Details.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<template>
-  <div>
-    <div>
-      <div class="px-6 rounded-md">
-        <div class="grid gap-6 mt-4">
-          <div v-if="user.photoURL" class="h-10">
-            <img :src="user?.photoURL" alt="" />
-          </div>
-          <div>
-            <label class="text-gray-800 dark:text-gray-200" for="username"
-              >UID</label
-            >
-            <div
-              v-if="user.uid"
-              class="w-full p-3 mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
-            >
-              {{ user?.uid }}
-            </div>
-          </div>
-          <div v-if="user.displayName">
-            <label class="text-gray-800 dark:text-gray-200" for="username"
-              >Name</label
-            >
-            <div
-              class="w-full p-3 mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
-            >
-              {{ user?.displayName }}
-            </div>
-          </div>
-          <div v-if="user.email">
-            <label class="text-gray-800 dark:text-gray-200" for="username"
-              >Email</label
-            >
-            <div
-              class="w-full p-3 mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
-            >
-              {{ user?.email }}
-            </div>
-          </div>
-          <div v-if="user.createdOn">
-            <label class="text-gray-800 dark:text-gray-200" for="username"
-              >Created On</label
-            >
-            <div
-              class="w-full p-3 mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
-            >
-              {{ getCreatedDateAndTime(user?.createdOn) }}
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-center sm:justify-start mt-8">
-          <button
-            class="mr-3 px-4 py-2 text-gray-200 bg-emerald-900 rounded-md hover:bg-emerald-700 focus:outline-none focus:bg-emerald-800"
-          >
-            Go Back
-          </button>
-
-          <button
-            @click="deleteUser"
-            class="px-4 py-2 text-gray-200 bg-red-800 rounded-md hover:bg-red-600 focus:outline-none focus:bg-red-800"
-          >
-            Delete User
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { defineProps, onMounted, ref } from 'vue';
-import { format } from 'date-fns';
-import { useQuery } from '@urql/vue';
-import { UserInfoDocument } from '../../helpers/backend/graphql';
-import { routeLocationKey, useRoute } from 'vue-router';
-
-const route = useRoute();
-
-const { fetching, error, data } = useQuery({ query: UserInfoDocument });
-
-// Get Proper Date Formats
-const getCreatedDateAndTime = (date: string) =>
-  format(new Date(date), 'd-MM-yyyy  hh:mm a');
-
-const props = defineProps({
-  user: {
-    type: Object,
-    required: true,
-  },
-});
-
-onMounted(() => {
-  console.log('mounted');
-
-  console.log(props.user.uid);
-});
-
-const deleteUser = () => {
-  console.log('delete user');
-};
-</script>
-
-<style>
-.modal {
-  transition: opacity 0.25s ease;
-}
-</style>
diff --git a/packages/hoppscotch-sh-admin/src/pages/dashboard.vue b/packages/hoppscotch-sh-admin/src/pages/dashboard.vue
index 5b6bee20c..c3a9900d6 100644
--- a/packages/hoppscotch-sh-admin/src/pages/dashboard.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/dashboard.vue
@@ -1,77 +1,57 @@
 <template>
   <div class="sm:px-6 p-4">
-    <h3 class="text-3xl font-medium text-gray-800 dark:text-gray-200 mb-6">
-      Dashboard
-    </h3>
+    <h3 class="text-3xl font-medium text-gray-200 mb-6">Dashboard</h3>
 
     <div class="mt-4">
       <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
         <div class="w-full">
           <div
-            class="flex items-center px-5 py-6 bg-zinc-200 dark:bg-zinc-800 rounded-md shadow-sm"
+            class="flex items-center px-5 py-6 bg-zinc-800 rounded-md shadow-sm"
           >
             <icon-lucide-user-cog class="text-2xl text-emerald-500" />
 
             <div class="mx-5">
-              <h4
-                class="text-2xl font-semibold text-gray-700 dark:text-gray-200"
-              >
-                1000
-              </h4>
-              <div class="text-gray-600 dark:text-gray-400">Total Users</div>
+              <h4 class="text-2xl font-semibold text-gray-200">1000</h4>
+              <div class="text-gray-400">Total Users</div>
             </div>
           </div>
         </div>
 
         <div class="w-full">
           <div
-            class="flex items-center px-5 py-6 bg-zinc-200 dark:bg-zinc-800 rounded-md shadow-sm"
+            class="flex items-center px-5 py-6 bg-zinc-800 rounded-md shadow-sm"
           >
             <icon-lucide-users class="text-2xl text-pink-400" />
 
             <div class="mx-5">
-              <h4
-                class="text-2xl font-semibold text-gray-700 dark:text-gray-200"
-              >
-                200
-              </h4>
-              <div class="text-gray-600 dark:text-gray-400">Total Teams</div>
+              <h4 class="text-2xl font-semibold text-gray-200">200</h4>
+              <div class="text-gray-400">Total Teams</div>
             </div>
           </div>
         </div>
 
         <div class="w-full">
           <div
-            class="flex items-center px-5 py-6 bg-zinc-200 dark:bg-zinc-800 rounded-md shadow-sm"
+            class="flex items-center px-5 py-6 bg-zinc-800 rounded-md shadow-sm"
           >
             <icon-lucide-lock class="text-2xl text-cyan-400" />
 
             <div class="mx-5">
-              <h4
-                class="text-2xl font-semibold text-gray-700 dark:text-gray-200"
-              >
-                20
-              </h4>
-              <div class="text-gray-600 dark:text-gray-400">Total Roles</div>
+              <h4 class="text-2xl font-semibold text-gray-200">20</h4>
+              <div class="text-gray-400">Total Roles</div>
             </div>
           </div>
         </div>
 
         <div class="w-full">
           <div
-            class="flex items-center px-5 py-6 bg-zinc-200 dark:bg-zinc-800 rounded-md shadow-sm"
+            class="flex items-center px-5 py-6 bg-zinc-800 rounded-md shadow-sm"
           >
             <icon-lucide-line-chart class="text-2xl text-orange-400" />
 
             <div class="mx-5">
-              <h4
-                class="text-2xl font-semibold text-gray-700 dark:text-gray-200"
-              >
-                215
-              </h4>
-              <div class="text-gray-600 dark:text-gray-400">
-                Total Collections
-              </div>
+              <h4 class="text-2xl font-semibold text-gray-200">215</h4>
+              <div class="text-gray-400">Total Collections</div>
             </div>
           </div>
         </div>
diff --git a/packages/hoppscotch-sh-admin/src/pages/settings.vue b/packages/hoppscotch-sh-admin/src/pages/settings.vue
index 98edf30cf..0ff02ae4e 100644
--- a/packages/hoppscotch-sh-admin/src/pages/settings.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/settings.vue
@@ -1,5 +1,3 @@
 <template>
-  <h3 class="sm:px-6 p-4 text-3xl font-medium text-zinc-800 dark:text-gray-200">
-    Settings
-  </h3>
+  <h3 class="sm:px-6 p-4 text-3xl font-medium text-gray-200">Settings</h3>
 </template>
diff --git a/packages/hoppscotch-sh-admin/src/pages/teams/AddTeam.vue b/packages/hoppscotch-sh-admin/src/pages/teams/AddTeam.vue
index 7496247ea..35cb29fc3 100644
--- a/packages/hoppscotch-sh-admin/src/pages/teams/AddTeam.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/teams/AddTeam.vue
@@ -1,7 +1,5 @@
 <template>
-  <h3 class="sm:px-6 p-4 text-3xl font-medium text-zinc-800 dark:text-gray-200">
-    Create Team
-  </h3>
+  <h3 class="sm:px-6 p-4 text-3xl font-medium text-gray-200">Create Team</h3>
 
   <div>
     <div>
@@ -9,13 +7,11 @@
         <form>
           <div class="flex mt-4 ml-10">
             <div>
-              <label
-                class="text-gray-800 dark:text-gray-200 mr-5 text-lg"
-                for="username"
+              <label class="text-gray-200 mr-5 text-lg" for="username"
                 >Name:
               </label>
               <input
-                class="w-96 p-2 mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+                class="w-96 p-2 mt-2 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
                 type="text"
                 placeholder="Enter Name"
               />
diff --git a/packages/hoppscotch-sh-admin/src/pages/teams/details.vue b/packages/hoppscotch-sh-admin/src/pages/teams/details.vue
index 38e057d4a..161557e4a 100644
--- a/packages/hoppscotch-sh-admin/src/pages/teams/details.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/teams/details.vue
@@ -1,57 +1,41 @@
 <template>
   <div class="sm:px-6 p-4">
-    <h3
-      class="sm:px-6 p-4 text-3xl font-medium text-zinc-800 dark:text-gray-200"
-    >
-      Team Details
-    </h3>
+    <h3 class="sm:px-6 p-4 text-3xl font-medium text-gray-200">Team Details</h3>
 
     <div class="mt-5">
       <div class="flex flex-wrap justify-center mx-6">
         <div class="w-full px-4 sm:w-1/2 xl:w-1/3">
-          <div
-            class="h-80 px-6 py-6 bg-zinc-200 dark:bg-zinc-800 rounded-md shadow-sm"
-          >
+          <div class="h-80 px-6 py-6 bg-zinc-800 rounded-md shadow-sm">
             <div class="flex ml-3 mt-2">
               <icon-lucide-user class="text-emerald-400 text-3xl" />
 
-              <h4
-                class="text-3xl ml-2 font-semibold text-gray-700 dark:text-gray-200"
-              >
+              <h4 class="text-3xl ml-2 font-semibold text-gray-200">
                 Team Info
               </h4>
             </div>
             <div class="flex mt-5 ml-5 text-xl">
-              <h4 class="font-semibold text-gray-700 dark:text-gray-400">
-                Team ID:
-              </h4>
-              <div class="text-gray-600 dark:text-gray-200 ml-2">
+              <h4 class="font-semibold text-gray-400">Team ID:</h4>
+              <div class="text-gray-200 ml-2">
                 {{ team.id }}
               </div>
             </div>
             <div class="flex mt-2 ml-5 text-xl">
-              <h4 class="font-semibold text-gray-700 dark:text-gray-400">
-                Team Name:
-              </h4>
-              <div class="text-gray-600 dark:text-gray-200 ml-2">
+              <h4 class="font-semibold text-gray-400">Team Name:</h4>
+              <div class="text-gray-200 ml-2">
                 {{ team.name }}
               </div>
             </div>
 
             <div class="flex mt-2 ml-5 text-xl">
-              <h4 class="font-semibold text-gray-700 dark:text-gray-400">
-                Creation Date:
-              </h4>
-              <div class="text-gray-600 dark:text-gray-200 ml-2">
+              <h4 class="font-semibold text-gray-400">Creation Date:</h4>
+              <div class="text-gray-200 ml-2">
                 {{ team.date }}
               </div>
             </div>
 
             <div class="flex mt-2 ml-5 text-xl">
-              <h4 class="font-semibold text-gray-700 dark:text-gray-400">
-                Number of members:
-              </h4>
-              <div class="text-gray-600 dark:text-gray-200 ml-2">
+              <h4 class="font-semibold text-gray-400">Number of members:</h4>
+              <div class="text-gray-200 ml-2">
                 {{ team.members }}
               </div>
             </div>
@@ -59,42 +43,34 @@
         </div>
 
         <div class="w-full px-4 sm:w-1/2 xl:w-1/3">
-          <div
-            class="h-80 px-5 py-6 bg-zinc-200 dark:bg-zinc-800 rounded-md shadow-sm"
-          >
+          <div class="h-80 px-5 py-6 bg-zinc-800 rounded-md shadow-sm">
             <div class="flex ml-3 mt-2">
               <icon-lucide-line-chart class="text-yellow-300 text-3xl" />
 
-              <h4
-                class="text-3xl ml-2 font-semibold text-gray-700 dark:text-gray-200"
-              >
-                Stats
-              </h4>
+              <h4 class="text-3xl ml-2 font-semibold text-gray-200">Stats</h4>
             </div>
 
             <div class="flex mt-5 ml-5 text-xl">
-              <h4 class="font-semibold text-gray-700 dark:text-gray-400">
+              <h4 class="font-semibold text-gray-400">
                 Number of Collections:
               </h4>
-              <div class="text-gray-600 dark:text-gray-200 ml-2">
+              <div class="text-gray-200 ml-2">
                 {{ stats.collections }}
               </div>
             </div>
 
             <div class="flex mt-2 ml-5 text-xl">
-              <h4 class="font-semibold text-gray-700 dark:text-gray-400">
-                Number of Requests:
-              </h4>
-              <div class="text-gray-600 dark:text-gray-200 ml-2">
+              <h4 class="font-semibold text-gray-400">Number of Requests:</h4>
+              <div class="text-gray-200 ml-2">
                 {{ stats.requests }}
               </div>
             </div>
 
             <div class="flex mt-2 ml-5 text-xl">
-              <h4 class="font-semibold text-gray-700 dark:text-gray-400">
+              <h4 class="font-semibold text-gray-400">
                 Number of Environments:
               </h4>
-              <div class="text-gray-600 dark:text-gray-200 ml-2">
+              <div class="text-gray-200 ml-2">
                 {{ stats.environments }}
               </div>
             </div>
diff --git a/packages/hoppscotch-sh-admin/src/pages/teams/index.vue b/packages/hoppscotch-sh-admin/src/pages/teams/index.vue
index 4d983581b..e6c86a5c9 100644
--- a/packages/hoppscotch-sh-admin/src/pages/teams/index.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/teams/index.vue
@@ -1,10 +1,6 @@
 <template>
   <div>
-    <h3
-      class="sm:px-6 p-4 text-3xl font-medium text-zinc-800 dark:text-gray-200"
-    >
-      Teams
-    </h3>
+    <h3 class="sm:px-6 p-4 text-3xl font-medium text-gray-200">Teams</h3>
 
     <div class="flex flex-col">
       <div class="py-2 -my-2 overflow-x-auto sm:-mx-6 sm:px-4 lg:-mx-8 lg:px-8">
@@ -12,24 +8,20 @@
           <div class="sm:px-7 p-4">
             <div v-if="showOptions" class="flex w-full items-center mb-7">
               <button
-                class="inline-flex mr-3 items-center h-8 pl-2.5 pr-2 rounded-md shadow text-gray-700 dark:text-gray-400 dark:border-gray-800 border-2 border-gray-200 leading-none py-0"
+                class="inline-flex mr-3 items-center h-8 pl-2.5 pr-2 rounded-md shadow text-gray-400 border-gray-800 border-2 leading-none py-0"
               >
                 Last 30 days
-                <icon-lucide-chevron-down
-                  class="w-4 ml-1.5 text-gray-400 dark:text-gray-600"
-                />
+                <icon-lucide-chevron-down class="w-4 ml-1.5 text-gray-600" />
               </button>
               <button
-                class="inline-flex items-center h-8 pl-2.5 pr-2 rounded-md shadow text-gray-700 dark:text-gray-400 dark:border-gray-800 border-2 border-gray-200 leading-none py-0"
+                class="inline-flex items-center h-8 pl-2.5 pr-2 rounded-md shadow text-gray-400 border-gray-800 border-2 leading-none py-0"
               >
                 Filter by
-                <icon-lucide-chevron-down
-                  class="w-4 ml-1.5 text-gray-400 dark:text-gray-600"
-                />
+                <icon-lucide-chevron-down class="w-4 ml-1.5 text-gray-600" />
               </button>
               <router-link to="/teams/addteam">
                 <button
-                  class="inline-flex items-center bg-emerald-700 h-8 ml-3 pl-2.5 pr-2 rounded-md shadow text-gray-200 dark:border-gray-800 border border-gray-200 leading-none py-0 hover:bg-emerald-700 focus:outline-none focus:bg-emerald-800"
+                  class="inline-flex items-center bg-emerald-700 h-8 ml-3 pl-2.5 pr-2 rounded-md shadow border-gray-800 border leading-none py-0 hover:bg-emerald-700 focus:outline-none focus:bg-emerald-800"
                 >
                   Create Team
                 </button>
@@ -39,12 +31,12 @@
               >
                 <span class="mr-3">Page 2 of 4</span>
                 <button
-                  class="inline-flex mr-2 items-center h-8 w-8 justify-center text-gray-400 rounded-md shadow border border-gray-200 dark:border-gray-800 leading-none py-0"
+                  class="inline-flex mr-2 items-center h-8 w-8 justify-center text-gray-400 rounded-md shadow border border-gray-800 leading-none py-0"
                 >
                   <icon-lucide-chevron-left class="text-xl" />
                 </button>
                 <button
-                  class="inline-flex items-center h-8 w-8 justify-center text-gray-400 rounded-md shadow border border-gray-200 dark:border-gray-800 leading-none py-0"
+                  class="inline-flex items-center h-8 w-8 justify-center text-gray-400 rounded-md shadow border border-gray-800 leading-none py-0"
                 >
                   <icon-lucide-chevron-right class="text-xl" />
                 </button>
@@ -53,9 +45,7 @@
             <div>
               <table class="w-full text-left">
                 <thead>
-                  <tr
-                    class="text-zinc-900 dark:text-gray-200 border-b border-gray-300 dark:border-gray-600 text-sm"
-                  >
+                  <tr class="text-gray-200 border-b border-gray-600 text-sm">
                     <th class="font-normal px-3 pt-0 pb-3"></th>
                     <th class="font-normal px-3 pt-0 pb-3">Team ID</th>
                     <th class="font-normal px-3 pt-0 pb-3">Team Name</th>
@@ -66,12 +56,12 @@
                     <th class="font-normal px-3 pt-0 pb-3">Date</th>
                   </tr>
                 </thead>
-                <tbody class="text-gray-600 dark:text-gray-300">
+                <tbody class="text-gray-300">
                   <!-- <router-link :custom="true" class="" :to="'/team/detail'"> -->
                   <tr
                     v-for="team in teams"
                     id="team.id"
-                    class="border-b border-gray-300 dark:border-gray-600 hover:bg-zinc-800 rounded-xl"
+                    class="border-b border-gray-600 hover:bg-zinc-800 rounded-xl"
                     @click="goToTeam"
                   >
                     <td>
@@ -92,7 +82,7 @@
                     </td>
 
                     <td
-                      class="sm:p-3 py-2 px-1 md:table-cell hidden text-sky-500 dark:text-sky-300"
+                      class="sm:p-3 py-2 px-1 md:table-cell hidden text-sky-300"
                     >
                       {{ team.name }}
                     </td>
diff --git a/packages/hoppscotch-sh-admin/src/pages/users/_id.vue b/packages/hoppscotch-sh-admin/src/pages/users/_id.vue
index 0092b3dde..ac88e0b95 100644
--- a/packages/hoppscotch-sh-admin/src/pages/users/_id.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/users/_id.vue
@@ -1,11 +1,7 @@
 <template>
   <div v-if="fetching" class="flex justify-center"><HoppSmartSpinner /></div>
   <div v-else>
-    <h3
-      class="sm:px-6 p-4 text-3xl font-medium text-zinc-800 dark:text-gray-200"
-    >
-      User Details
-    </h3>
+    <h3 class="sm:px-6 p-4 text-3xl font-medium text-gray-200">User Details</h3>
 
     <div>
       <div>
@@ -21,41 +17,33 @@
               <icon-lucide-user class="text-4xl" />
             </div>
             <div v-if="user.uid">
-              <label class="text-gray-800 dark:text-gray-200" for="username"
-                >UID</label
-              >
+              <label class="text-gray-200" for="username">UID</label>
               <div
-                class="w-full p-3 mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+                class="w-full p-3 mt-2 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
               >
                 {{ user.uid }}
               </div>
             </div>
             <div v-if="user.displayName">
-              <label class="text-gray-800 dark:text-gray-200" for="username"
-                >Name</label
-              >
+              <label class="text-gray-200" for="username">Name</label>
               <div
-                class="w-full p-3 mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+                class="w-full p-3 mt-2 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
               >
                 {{ user.displayName }}
               </div>
             </div>
             <div v-if="user.email">
-              <label class="text-gray-800 dark:text-gray-200" for="username"
-                >Email</label
-              >
+              <label class="text-gray-200" for="username">Email</label>
               <div
-                class="w-full p-3 mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+                class="w-full p-3 mt-2 bg-zinc-800 border-gray-200 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
               >
                 {{ user.email }}
               </div>
             </div>
             <div v-if="user.createdOn">
-              <label class="text-gray-800 dark:text-gray-200" for="username"
-                >Created On</label
-              >
+              <label class="text-gray-200" for="username">Created On</label>
               <div
-                class="w-full p-3 mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+                class="w-full p-3 mt-2 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
               >
                 {{ getCreatedDateAndTime(user.createdOn) }}
               </div>
diff --git a/packages/hoppscotch-sh-admin/src/pages/users/index.vue b/packages/hoppscotch-sh-admin/src/pages/users/index.vue
index c02875f90..66a36871e 100644
--- a/packages/hoppscotch-sh-admin/src/pages/users/index.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/users/index.vue
@@ -1,10 +1,6 @@
 <template>
   <div>
-    <h3
-      class="sm:px-6 p-4 text-3xl font-medium text-zinc-800 dark:text-gray-200"
-    >
-      Users
-    </h3>
+    <h3 class="sm:px-6 p-4 text-3xl font-medium text-gray-200">Users</h3>
 
     <!-- Table List View for All Users -->
     <div class="flex flex-col">
@@ -40,7 +36,7 @@
               >
                 <thead>
                   <tr
-                    class="text-zinc-900 dark:text-gray-200 border-b border-gray-300 dark:border-gray-600 text-sm text-center"
+                    class="text-gray-200 border-b border-gray-600 text-sm text-center"
                   >
                     <th class="font-normal px-3 pt-0 pb-3">User ID</th>
                     <th class="font-normal px-3 pt-0 pb-3">Name</th>
@@ -50,11 +46,11 @@
                   </tr>
                 </thead>
 
-                <tbody class="text-gray-600 dark:text-gray-300">
+                <tbody class="text-gray-300">
                   <tr
                     v-for="user in usersList"
                     :key="user.uid"
-                    class="border-b border-gray-300 dark:border-gray-600 hover:bg-zinc-800 rounded-xl"
+                    class="border-b border-gray-600 hover:bg-zinc-800 rounded-xl"
                   >
                     <td
                       @click="goToUserDetails(user)"
@@ -97,7 +93,7 @@
                     </td>
                     <td
                       @click="goToUserDetails(user)"
-                      class="sm:p-3 py-2 px-1 text-sky-500 dark:text-sky-300 text-center"
+                      class="sm:p-3 py-2 px-1 text-sky-300 text-center"
                     >
                       {{ user.email }}
                     </td>
@@ -131,17 +127,17 @@
                         >
                           <div
                             v-show="activeUserId && activeUserId == user.uid"
-                            class="absolute right-0 z-20 w-28 mt-5 bg-zinc-200 dark:bg-zinc-800 rounded-md shadow-xl"
+                            class="absolute right-0 z-20 w-28 mt-5 bg-zinc-800 rounded-md shadow-xl"
                           >
                             <button
                               v-if="!user.isAdmin"
                               @click="makeUserAdmin(user.uid)"
-                              class="block w-full h-10 px-4 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-emerald-700 hover:text-white rounded-md"
+                              class="block w-full h-10 px-4 py-2 text-sm text-gray-200 hover:bg-emerald-700 hover:text-white rounded-md"
                             >
                               Make admin
                             </button>
                             <button
-                              class="block w-full h-10 px-4 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-red-700 hover:text-white rounded-md"
+                              class="block w-full h-10 px-4 py-2 text-sm text-gray-200 hover:bg-red-700 hover:text-white rounded-md"
                               @click="deleteUser(user.uid)"
                             >
                               Delete
@@ -182,14 +178,11 @@
               <div>
                 <div class="my-4">
                   <div>
-                    <label
-                      class="text-gray-800 dark:text-gray-200"
-                      for="emailAddress"
-                    >
+                    <label class="text-gray-200" for="emailAddress">
                       Email Address
                     </label>
                     <input
-                      class="w-full p-3 mt-3 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+                      class="w-full p-3 mt-3 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
                       type="email"
                       v-model="email"
                       placeholder="Enter Email Address"
diff --git a/packages/hoppscotch-sh-admin/src/pages/users/invited.vue b/packages/hoppscotch-sh-admin/src/pages/users/invited.vue
index ccdd9e7a3..03960cdde 100644
--- a/packages/hoppscotch-sh-admin/src/pages/users/invited.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/users/invited.vue
@@ -1,8 +1,6 @@
 <template>
   <div>
-    <h3
-      class="sm:px-6 p-4 text-3xl font-medium text-zinc-800 dark:text-gray-200"
-    >
+    <h3 class="sm:px-6 p-4 text-3xl font-medium text-gray-200">
       Invited Users
     </h3>
 
@@ -21,7 +19,7 @@
               <table v-else class="w-full text-left">
                 <thead>
                   <tr
-                    class="text-zinc-900 dark:text-gray-200 border-b border-gray-300 dark:border-gray-600 text-sm text-center"
+                    class="text-gray-200 border-b border-gray-600 text-sm text-center"
                   >
                     <th class="font-normal px-3 pt-0 pb-3">Admin ID</th>
                     <th class="font-normal px-3 pt-0 pb-3">Admin Email</th>
@@ -32,10 +30,10 @@
                 <tbody
                   v-for="user in invitedUsers"
                   id="user.id"
-                  class="text-gray-600 dark:text-gray-300"
+                  class="text-gray-300"
                 >
                   <tr
-                    class="border-b border-gray-300 dark:border-gray-600 hover:bg-zinc-800 rounded-xl"
+                    class="border-b border-gray-600 hover:bg-zinc-800 rounded-xl"
                   >
                     <td class="sm:p-3 py-2 px-3 max-w-30">
                       <div class="flex justify-center">
@@ -44,14 +42,12 @@
                         </span>
                       </div>
                     </td>
-                    <td class="sm:p-3 py-2 px-1 text-sky-500 dark:text-sky-300">
+                    <td class="sm:p-3 py-2 px-1 text-sky-300">
                       <div class="flex items-center justify-center">
                         {{ user?.adminEmail }}
                       </div>
                     </td>
-                    <td
-                      class="sm:p-3 py-2 px-1 text-sky-500 dark:text-sky-300 text-center"
-                    >
+                    <td class="sm:p-3 py-2 px-1 text-sky-300 text-center">
                       {{ user?.inviteeEmail }}
                     </td>