feat: replacing windicss by tailwindcss in hoppscotch-ui (#3076)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com> Co-authored-by: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com> Co-authored-by: nivedin <nivedinp@gmail.com>
2023-11-01 21:25:08 +06:00
parent 59b5a50a97
commit a215860782
174 changed files with 6921 additions and 5185 deletions
--- a/packages/hoppscotch-sh-admin/.prettierignore
+++ b/packages/hoppscotch-sh-admin/.prettierignore
@@ -0,0 +1,10 @@
+.dependabot
+.github
+.hoppscotch
+.vscode
+package-lock.json
+node_modules
+dist
+static
+components.d.ts
+src/types
--- a/packages/hoppscotch-sh-admin/.prettierrc.cjs
+++ b/packages/hoppscotch-sh-admin/.prettierrc.cjs
@@ -0,0 +1,4 @@
+module.exports = {
+  semi: false,
+  plugins: [require("prettier-plugin-tailwindcss")],
+}
--- a/packages/hoppscotch-sh-admin/assets/scss/styles.scss
+++ b/packages/hoppscotch-sh-admin/assets/scss/styles.scss
@@ -1,7 +1,91 @@
+/*
+* Write hoppscotch-sh-admin related custom styles in this file.
+* If styles are sharable across all package then write into hoppscotch-ui/assets/scss/styles.scss file.
+*/
+
+@mixin base-theme {
+  --font-sans: 'Inter Variable', sans-serif;
+  --font-icon: 'Material Symbols Rounded Variable';
+  --font-mono: 'Roboto Mono Variable', monospace;
+  --font-size-body: 0.75rem;
+  --font-size-tiny: 0.688rem;
+  --line-height-body: 1rem;
+  --upper-primary-sticky-fold: 4.125rem;
+  --upper-secondary-sticky-fold: 6.188rem;
+  --upper-tertiary-sticky-fold: 8.25rem;
+  --upper-fourth-sticky-fold: 10.2rem;
+  --upper-mobile-primary-sticky-fold: 6.625rem;
+  --upper-mobile-secondary-sticky-fold: 8.688rem;
+  --upper-mobile-sticky-fold: 10.75rem;
+  --upper-mobile-tertiary-sticky-fold: 8.25rem;
+  --lower-primary-sticky-fold: 3rem;
+  --lower-secondary-sticky-fold: 5.063rem;
+  --lower-tertiary-sticky-fold: 7.125rem;
+  --lower-fourth-sticky-fold: 9.188rem;
+  --sidebar-primary-sticky-fold: 2rem;
+}
+
+@mixin dark-theme {
+  --primary-color: #181818;
+  --primary-light-color: #1c1c1e;
+  --primary-dark-color: #262626;
+  --primary-contrast-color: #171717;
+
+  --secondary-color: #a3a3a3;
+  --secondary-light-color: #737373;
+  --secondary-dark-color: #fafafa;
+
+  --divider-color: #262626;
+  --divider-light-color: #1f1f1f;
+  --divider-dark-color: #2d2d2d;
+
+  --error-color: #292524;
+  --tooltip-color: #f5f5f5;
+  --popover-color: #1b1b1b;
+}
+
+@mixin green-theme {
+  --accent-color: #10b981;
+  --accent-light-color: #34d399;
+  --accent-dark-color: #059669;
+  --accent-contrast-color: #fff;
+  --gradient-from-color: #a7f3d0;
+  --gradient-via-color: #34d399;
+  --gradient-to-color: #059669;
+}
+
+:root {
+  @include base-theme;
+  @include dark-theme;
+  @include green-theme;
+}
+
+:root.dark {
+  @include dark-theme;
+  color-scheme: dark;
+}
+
+:root[data-accent='green'] {
+  @include green-theme;
+}
+
 * {
-  @apply backface-hidden;
-  @apply before:backface-hidden;
-  @apply after:backface-hidden;
+  backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+
+  &::before {
+    backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+  }
+
+  &::after {
+    backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+  }
+
  @apply selection:bg-accentDark;
  @apply selection:text-accentContrast;
  @apply overscroll-none;
@@ -11,17 +95,25 @@
  @apply antialiased;
  accent-color: var(--accent-color);
  font-variant-ligatures: common-ligatures;
+
+  // Colors
+  --info-color: #ec4899;
+  --success-color: #10b981;
+  --blue-color: #3b82f6;
+  --warning-color: #f59e0b;
+  --cl-error-color: #ef4444;
+  --sv-error-color: #dc2626;
 }

 ::-webkit-scrollbar-track {
  @apply bg-transparent;
-  @apply border-solid border-l border-dividerLight border-t-0 border-b-0 border-r-0;
+  @apply border-b-0 border-l border-r-0 border-t-0 border-solid border-dividerLight;
 }

 ::-webkit-scrollbar-thumb {
  @apply bg-divider bg-clip-content;
  @apply rounded-full;
-  @apply border-solid border-transparent border-4;
+  @apply border-4 border-solid border-transparent;
  @apply hover:bg-dividerDark;
  @apply hover:bg-clip-content;
 }
@@ -54,7 +146,7 @@ html {

 body {
  @apply bg-primary;
-  @apply text-secondary text-body;
+  @apply text-body text-secondary;
  @apply font-medium;
  @apply select-none;
  @apply overflow-x-hidden;
@@ -124,8 +216,8 @@ a {

  &.link {
    @apply items-center;
-    @apply py-0.5 px-1;
-    @apply -my-0.5 -mx-1;
+    @apply px-1 py-0.5;
+    @apply -mx-1 -my-0.5;
    @apply text-accent;
    @apply rounded;
    @apply hover:text-accentDark;
@@ -140,7 +232,7 @@ a {
    @apply shadow-none #{!important};
    @apply fixed;
    @apply inline-flex;
-    @apply -mt-7.5;
+    @apply -mt-8;
  }
 }

@@ -154,7 +246,7 @@ a {
    @apply flex;
    @apply text-tiny text-primary;
    @apply font-semibold;
-    @apply py-1 px-2;
+    @apply px-2 py-1;
    @apply truncate;
    @apply leading-normal;
    @apply items-center;
@@ -162,7 +254,7 @@ a {
    kbd {
      @apply hidden;
      @apply font-sans;
-      @apply bg-gray-500/45;
+      background-color: rgba(107, 114, 128, 0.45);
      @apply text-primaryLight;
      @apply rounded-sm;
      @apply px-1;
@@ -170,6 +262,12 @@ a {
      @apply truncate;
      @apply sm:inline-flex;
    }
+
+    .env-icon {
+      @apply transition;
+      @apply inline-flex;
+      @apply items-center;
+    }
  }

  .tippy-svg-arrow {
@@ -195,7 +293,7 @@ a {
    @apply max-h-[45vh];
    @apply items-stretch;
    @apply overflow-y-auto;
-    @apply text-secondary text-body;
+    @apply text-body text-secondary;
    @apply p-2;
    @apply leading-normal;
    @apply focus:outline-none;
@@ -234,7 +332,7 @@ hr {

 .heading {
  @apply font-bold;
-  @apply text-secondaryDark text-lg;
+  @apply text-lg text-secondaryDark;
  @apply tracking-tight;
 }

@@ -243,7 +341,7 @@ hr {
 .textarea {
  @apply flex;
  @apply w-full;
-  @apply py-2 px-4;
+  @apply px-4 py-2;
  @apply bg-transparent;
  @apply rounded;
  @apply text-secondaryDark;
@@ -284,7 +382,7 @@ button {
  @apply transform;
  @apply origin-top-left;
  @apply scale-75;
-  @apply translate-x-1 -translate-y-4;
+  @apply -translate-y-4 translate-x-1;
 }

 .floating-input:focus-within ~ label {
@@ -293,7 +391,7 @@ button {

 .floating-input ~ .end-actions {
  @apply absolute;
-  @apply right-0.2;
+  @apply right-[.05rem];
  @apply inset-y-0;
  @apply flex;
  @apply items-center;
@@ -335,23 +433,23 @@ pre.ace_editor {
 }

 .info-response {
-  @apply text-pink-500;
+  color: var(--info-color);
 }

 .success-response {
-  @apply text-green-500;
+  color: var(--success-color);
 }

 .redir-response {
-  @apply text-yellow-500;
+  color: var(--warning-color);
 }

 .cl-error-response {
-  @apply text-red-500;
+  color: var(--cl-error-color);
 }

 .sv-error-response {
-  @apply text-red-600;
+  color: var(--sv-error-color);
 }

 .missing-data-response {
@@ -366,7 +464,7 @@ pre.ace_editor {
      @apply px-4 py-2;
      @apply bg-tooltip;
      @apply border-secondaryDark;
-      @apply text-primary text-body;
+      @apply text-body text-primary;
      @apply justify-between;
      @apply shadow-lg;
      @apply font-semibold;
@@ -394,7 +492,7 @@ pre.ace_editor {
        @apply before:opacity-10;
        @apply before:inset-0;
        @apply before:transition;
-        @apply before:content-DEFAULT;
+        @apply before:content-[''];
        @apply hover:no-underline;
        @apply hover:before:opacity-20;
      }
@@ -428,7 +526,7 @@ pre.ace_editor {
  @apply before:opacity-0;
  @apply before:z-20;
  @apply before:transition;
-  @apply before:content-DEFAULT;
+  @apply before:content-[''];
  @apply hover:before:opacity-100;
 }

--- a/packages/hoppscotch-sh-admin/assets/scss/tailwind.scss
+++ b/packages/hoppscotch-sh-admin/assets/scss/tailwind.scss
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/packages/hoppscotch-sh-admin/assets/scss/themes.scss
+++ b/packages/hoppscotch-sh-admin/assets/scss/themes.scss
@@ -1,272 +0,0 @@
-@mixin base-theme {
-  --font-sans: 'Inter Variable', sans-serif;
-  --font-icon: 'Material Symbols Rounded Variable';
-  --font-mono: 'Roboto Mono Variable', monospace;
-  --font-size-body: 0.75rem;
-  --font-size-tiny: 0.688rem;
-  --line-height-body: 1rem;
-  --upper-primary-sticky-fold: 4.125rem;
-  --upper-secondary-sticky-fold: 6.188rem;
-  --upper-tertiary-sticky-fold: 8.25rem;
-  --upper-mobile-primary-sticky-fold: 6.625rem;
-  --upper-mobile-secondary-sticky-fold: 8.688rem;
-  --upper-mobile-sticky-fold: 10.75rem;
-  --upper-mobile-tertiary-sticky-fold: 8.25rem;
-  --lower-primary-sticky-fold: 3rem;
-  --lower-secondary-sticky-fold: 5.063rem;
-  --lower-tertiary-sticky-fold: 7.125rem;
-  --sidebar-primary-sticky-fold: 2rem;
-}
-
-@mixin dark-theme {
-  --primary-color: theme('colors.dark.800');
-  --primary-light-color: theme('colors.dark.600');
-  --primary-dark-color: theme('colors.neutral.800');
-  --primary-contrast-color: theme('colors.neutral.900');
-
-  --secondary-color: theme('colors.neutral.400');
-  --secondary-light-color: theme('colors.neutral.500');
-  --secondary-dark-color: theme('colors.neutral.50');
-
-  --divider-color: theme('colors.neutral.800');
-  --divider-light-color: theme('colors.dark.500');
-  --divider-dark-color: theme('colors.dark.300');
-
-  --error-color: theme('colors.stone.800');
-  --tooltip-color: theme('colors.neutral.100');
-  --popover-color: theme('colors.dark.700');
-  --editor-theme: 'merbivore_soft';
-}
-
-@mixin light-theme {
-  --primary-color: theme('colors.white');
-  --primary-light-color: theme('colors.gray.50');
-  --primary-dark-color: theme('colors.gray.100');
-  --primary-contrast-color: theme('colors.light.50');
-
-  --secondary-color: theme('colors.gray.500');
-  --secondary-light-color: theme('colors.gray.400');
-  --secondary-dark-color: theme('colors.gray.900');
-
-  --divider-color: theme('colors.gray.100');
-  --divider-light-color: theme('colors.gray.100');
-  --divider-dark-color: theme('colors.gray.300');
-
-  --error-color: theme('colors.yellow.100');
-  --tooltip-color: theme('colors.neutral.800');
-  --popover-color: theme('colors.white');
-  --editor-theme: 'textmate';
-}
-
-@mixin black-theme {
-  --primary-color: theme('colors.dark.900');
-  --primary-light-color: theme('colors.neutral.900');
-  --primary-dark-color: theme('colors.dark.800');
-  --primary-contrast-color: theme('colors.dark.900');
-
-  --secondary-color: theme('colors.neutral.400');
-  --secondary-light-color: theme('colors.neutral.500');
-  --secondary-dark-color: theme('colors.neutral.100');
-
-  --divider-color: theme('colors.dark.600');
-  --divider-light-color: theme('colors.dark.800');
-  --divider-dark-color: theme('colors.dark.200');
-
-  --error-color: theme('colors.stone.900');
-  --tooltip-color: theme('colors.neutral.100');
-  --popover-color: theme('colors.dark.900');
-  --editor-theme: 'twilight';
-}
-
-@mixin dark-editor-theme {
-  --editor-type-color: theme('colors.purple.400');
-  --editor-name-color: theme('colors.blue.400');
-  --editor-operator-color: theme('colors.indigo.400');
-  --editor-invalid-color: theme('colors.red.400');
-  --editor-separator-color: theme('colors.gray.400');
-  --editor-meta-color: theme('colors.gray.400');
-  --editor-variable-color: theme('colors.green.400');
-  --editor-link-color: theme('colors.cyan.400');
-  --editor-process-color: theme('colors.fuchsia.400');
-  --editor-constant-color: theme('colors.violet.400');
-  --editor-keyword-color: theme('colors.pink.400');
-}
-
-@mixin light-editor-theme {
-  --editor-type-color: theme('colors.purple.600');
-  --editor-name-color: theme('colors.red.600');
-  --editor-operator-color: theme('colors.indigo.600');
-  --editor-invalid-color: theme('colors.red.600');
-  --editor-separator-color: theme('colors.gray.600');
-  --editor-meta-color: theme('colors.gray.600');
-  --editor-variable-color: theme('colors.green.600');
-  --editor-link-color: theme('colors.cyan.600');
-  --editor-process-color: theme('colors.blue.600');
-  --editor-constant-color: theme('colors.fuchsia.600');
-  --editor-keyword-color: theme('colors.pink.600');
-}
-
-@mixin black-editor-theme {
-  --editor-type-color: theme('colors.purple.400');
-  --editor-name-color: theme('colors.fuchsia.400');
-  --editor-operator-color: theme('colors.indigo.400');
-  --editor-invalid-color: theme('colors.red.400');
-  --editor-separator-color: theme('colors.gray.400');
-  --editor-meta-color: theme('colors.gray.400');
-  --editor-variable-color: theme('colors.green.400');
-  --editor-link-color: theme('colors.cyan.400');
-  --editor-process-color: theme('colors.violet.400');
-  --editor-constant-color: theme('colors.blue.400');
-  --editor-keyword-color: theme('colors.pink.400');
-}
-
-@mixin green-theme {
-  --accent-color: theme('colors.green.500');
-  --accent-light-color: theme('colors.green.400');
-  --accent-dark-color: theme('colors.green.600');
-  --accent-contrast-color: theme('colors.white');
-  --gradient-from-color: theme('colors.green.200');
-  --gradient-via-color: theme('colors.green.400');
-  --gradient-to-color: theme('colors.green.600');
-}
-
-@mixin teal-theme {
-  --accent-color: theme('colors.teal.500');
-  --accent-light-color: theme('colors.teal.400');
-  --accent-dark-color: theme('colors.teal.600');
-  --accent-contrast-color: theme('colors.white');
-  --gradient-from-color: theme('colors.teal.200');
-  --gradient-via-color: theme('colors.teal.400');
-  --gradient-to-color: theme('colors.teal.600');
-}
-
-@mixin blue-theme {
-  --accent-color: theme('colors.blue.500');
-  --accent-light-color: theme('colors.blue.400');
-  --accent-dark-color: theme('colors.blue.600');
-  --accent-contrast-color: theme('colors.white');
-  --gradient-from-color: theme('colors.blue.200');
-  --gradient-via-color: theme('colors.blue.400');
-  --gradient-to-color: theme('colors.blue.600');
-}
-
-@mixin indigo-theme {
-  --accent-color: theme('colors.indigo.500');
-  --accent-light-color: theme('colors.indigo.400');
-  --accent-dark-color: theme('colors.indigo.600');
-  --accent-contrast-color: theme('colors.white');
-  --gradient-from-color: theme('colors.indigo.200');
-  --gradient-via-color: theme('colors.indigo.400');
-  --gradient-to-color: theme('colors.indigo.600');
-}
-
-@mixin purple-theme {
-  --accent-color: theme('colors.purple.500');
-  --accent-light-color: theme('colors.purple.400');
-  --accent-dark-color: theme('colors.purple.600');
-  --accent-contrast-color: theme('colors.white');
-  --gradient-from-color: theme('colors.purple.200');
-  --gradient-via-color: theme('colors.purple.400');
-  --gradient-to-color: theme('colors.purple.600');
-}
-
-@mixin yellow-theme {
-  --accent-color: theme('colors.yellow.500');
-  --accent-light-color: theme('colors.yellow.400');
-  --accent-dark-color: theme('colors.yellow.600');
-  --accent-contrast-color: theme('colors.white');
-  --gradient-from-color: theme('colors.yellow.200');
-  --gradient-via-color: theme('colors.yellow.400');
-  --gradient-to-color: theme('colors.yellow.600');
-}
-
-@mixin orange-theme {
-  --accent-color: theme('colors.orange.500');
-  --accent-light-color: theme('colors.orange.400');
-  --accent-dark-color: theme('colors.orange.600');
-  --accent-contrast-color: theme('colors.white');
-  --gradient-from-color: theme('colors.orange.200');
-  --gradient-via-color: theme('colors.orange.400');
-  --gradient-to-color: theme('colors.orange.600');
-}
-
-@mixin red-theme {
-  --accent-color: theme('colors.red.500');
-  --accent-light-color: theme('colors.red.400');
-  --accent-dark-color: theme('colors.red.600');
-  --accent-contrast-color: theme('colors.white');
-  --gradient-from-color: theme('colors.red.200');
-  --gradient-via-color: theme('colors.red.400');
-  --gradient-to-color: theme('colors.red.600');
-}
-
-@mixin pink-theme {
-  --accent-color: theme('colors.pink.500');
-  --accent-light-color: theme('colors.pink.400');
-  --accent-dark-color: theme('colors.pink.600');
-  --accent-contrast-color: theme('colors.white');
-  --gradient-from-color: theme('colors.pink.200');
-  --gradient-via-color: theme('colors.pink.400');
-  --gradient-to-color: theme('colors.pink.600');
-}
-
-:root {
-  @include base-theme;
-  @include dark-theme;
-  @include dark-editor-theme;
-  @include green-theme;
-}
-
-:root.light {
-  @include light-theme;
-  @include light-editor-theme;
-  color-scheme: light;
-}
-
-:root.dark {
-  @include dark-theme;
-  @include dark-editor-theme;
-  color-scheme: dark;
-}
-
-:root.black {
-  @include black-theme;
-  @include black-editor-theme;
-  color-scheme: dark;
-}
-
-:root[data-accent='blue'] {
-  @include blue-theme;
-}
-
-:root[data-accent='green'] {
-  @include green-theme;
-}
-
-:root[data-accent='teal'] {
-  @include teal-theme;
-}
-
-:root[data-accent='indigo'] {
-  @include indigo-theme;
-}
-
-:root[data-accent='purple'] {
-  @include purple-theme;
-}
-
-:root[data-accent='orange'] {
-  @include orange-theme;
-}
-
-:root[data-accent='pink'] {
-  @include pink-theme;
-}
-
-:root[data-accent='red'] {
-  @include red-theme;
-}
-
-:root[data-accent='yellow'] {
-  @include yellow-theme;
-}
--- a/packages/hoppscotch-sh-admin/package.json
+++ b/packages/hoppscotch-sh-admin/package.json
@@ -34,7 +34,10 @@
    "graphql": "^16.6.0",
    "io-ts": "^2.2.16",
    "lodash-es": "^4.17.21",
+    "postcss": "^8.4.23",
+    "prettier-plugin-tailwindcss": "^0.5.6",
    "rxjs": "^7.8.0",
+    "tailwindcss": "^3.3.2",
    "tippy.js": "^6.3.7",
    "ts-node-dev": "^2.0.0",
    "unplugin-icons": "^0.14.9",
@@ -67,9 +70,7 @@
    "vite": "^3.1.4",
    "vite-plugin-pages": "^0.26.0",
    "vite-plugin-vue-layouts": "^0.7.0",
-    "vite-plugin-windicss": "^1.8.8",
-    "vue-tsc": "^0.3.0",
-    "windicss": "^3.5.6"
+    "vue-tsc": "^0.3.0"
  },
  "prettier": {
    "singleQuote": true,
--- a/packages/hoppscotch-sh-admin/postcss.config.cjs
+++ b/packages/hoppscotch-sh-admin/postcss.config.cjs
@@ -0,0 +1,7 @@
+const postcssConfig = require("@hoppscotch/ui/postcss.config")
+
+const config = {
+  ...postcssConfig,
+}
+
+module.exports = config
--- a/packages/hoppscotch-sh-admin/src/components.d.ts
+++ b/packages/hoppscotch-sh-admin/src/components.d.ts
@@ -1,40 +1,39 @@
 // 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']
-    DashboardMetricsCard: typeof import('./components/dashboard/MetricsCard.vue')['default']
-    HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
-    HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
-    HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
-    HoppSmartAutoComplete: typeof import('@hoppscotch/ui')['HoppSmartAutoComplete']
-    HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
-    HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput']
-    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
-    HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
-    HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
-    HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
-    IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
-    IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
-    TeamsAdd: typeof import('./components/teams/Add.vue')['default']
-    TeamsDetails: typeof import('./components/teams/Details.vue')['default']
-    TeamsInvite: typeof import('./components/teams/Invite.vue')['default']
-    TeamsMembers: typeof import('./components/teams/Members.vue')['default']
-    TeamsPendingInvites: typeof import('./components/teams/PendingInvites.vue')['default']
-    TeamsTable: typeof import('./components/teams/Table.vue')['default']
-    Tippy: typeof import('vue-tippy')['Tippy']
-    UsersInviteModal: typeof import('./components/users/InviteModal.vue')['default']
-    UsersTable: typeof import('./components/users/Table.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'];
+    DashboardMetricsCard: typeof import('./components/dashboard/MetricsCard.vue')['default'];
+    HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary'];
+    HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary'];
+    HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor'];
+    HoppSmartAutoComplete: typeof import('@hoppscotch/ui')['HoppSmartAutoComplete'];
+    HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal'];
+    HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput'];
+    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem'];
+    HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal'];
+    HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture'];
+    HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner'];
+    IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default'];
+    IconLucideInbox: typeof import('~icons/lucide/inbox')['default'];
+    TeamsAdd: typeof import('./components/teams/Add.vue')['default'];
+    TeamsDetails: typeof import('./components/teams/Details.vue')['default'];
+    TeamsInvite: typeof import('./components/teams/Invite.vue')['default'];
+    TeamsMembers: typeof import('./components/teams/Members.vue')['default'];
+    TeamsPendingInvites: typeof import('./components/teams/PendingInvites.vue')['default'];
+    TeamsTable: typeof import('./components/teams/Table.vue')['default'];
+    Tippy: typeof import('vue-tippy')['Tippy'];
+    UsersInviteModal: typeof import('./components/users/InviteModal.vue')['default'];
+    UsersTable: typeof import('./components/users/Table.vue')['default'];
  }
-
 }
--- a/packages/hoppscotch-sh-admin/src/components/app/Header.vue
+++ b/packages/hoppscotch-sh-admin/src/components/app/Header.vue
@@ -7,7 +7,7 @@
        v-tippy="{ theme: 'tooltip' }"
        :title="t('app.open_navigation')"
        :icon="IconMenu"
-        class="transform !md:hidden mr-2"
+        class="transform md:hidden mr-2"
        @click="isOpen = true"
      />
      <HoppButtonSecondary
@@ -18,7 +18,7 @@
            : `${t('app.expand_sidebar')}`
        "
        :icon="isExpanded ? IconSidebarClose : IconSidebarOpen"
-        class="transform"
+        class="transform hidden md:block"
        @click="expandSidebar"
      />
    </div>
--- a/packages/hoppscotch-sh-admin/src/components/app/Login.vue
+++ b/packages/hoppscotch-sh-admin/src/components/app/Login.vue
@@ -93,7 +93,7 @@
      </div>
    </div>

-    <section class="mt-15">
+    <section class="mt-16">
      <div
        v-if="
          mode === 'sign-in' &&
--- a/packages/hoppscotch-sh-admin/src/components/app/Sidebar.vue
+++ b/packages/hoppscotch-sh-admin/src/components/app/Sidebar.vue
@@ -9,10 +9,10 @@
    <!-- End Backdrop -->

    <div
-      :class="isOpen ? '' : '!-translate-x-full ease-in'"
+      :class="isOpen ? '' : '-translate-x-full ease-in'"
      class="sidebar-container transform !md:translate-x-0 ease-out"
    >
-      <div :class="isExpanded ? 'w-xs' : 'w-full'">
+      <div :class="isExpanded ? 'w-80' : 'w-full'">
        <div class="flex items-center justify-start px-4 my-4">
          <div class="flex items-center">
            <HoppSmartLink class="flex items-center space-x-4" to="/dashboard">
@@ -106,22 +106,22 @@ const primaryNavigations = [
  @apply flex flex-1;
  @apply items-center;
  @apply space-x-4;
-  @apply hover: (bg-primaryDark text-secondaryDark);
-  @apply focus-visible: text-secondaryDark;
+  @apply hover:bg-primaryDark hover:text-secondaryDark;
+  @apply focus-visible:text-secondaryDark;
  @apply after:absolute;
  @apply after:inset-x-0;
-  @apply after:md: inset-x-auto;
-  @apply after:md: inset-y-0;
+  @apply after:md:inset-x-auto;
+  @apply after:md:inset-y-0;
  @apply after:bottom-0;
-  @apply after:md: bottom-auto;
-  @apply after:md: left-0;
-  @apply after:z-2;
+  @apply after:md:bottom-auto;
+  @apply after:md:left-0;
+  @apply after:z-10;
  @apply after:h-0.5;
-  @apply after:md: h-full;
+  @apply after:md:h-full;
  @apply after:w-full;
-  @apply after:md: w-0.5;
-  @apply after:content-DEFAULT;
-  @apply focus: after: bg-divider;
+  @apply after:md:w-0.5;
+  @apply after:content-[''];
+  @apply focus:after:bg-divider;

  .svg-icons {
    @apply opacity-75;
@@ -130,7 +130,7 @@ const primaryNavigations = [
  &.router-link-active {
    @apply text-secondaryDark;
    @apply bg-primaryLight;
-    @apply hover: text-secondaryDark;
+    @apply hover:text-secondaryDark;
    @apply after:bg-accent;

    .svg-icons {
@@ -141,7 +141,7 @@ const primaryNavigations = [
  &.exact-active-link {
    @apply text-secondaryDark;
    @apply bg-primaryLight;
-    @apply hover: text-secondaryDark;
+    @apply hover:text-secondaryDark;
    @apply after:bg-accent;

    .svg-icons {
--- a/packages/hoppscotch-sh-admin/src/components/dashboard/MetricsCard.vue
+++ b/packages/hoppscotch-sh-admin/src/components/dashboard/MetricsCard.vue
@@ -1,6 +1,6 @@
 <template>
  <div
-    class="flex items-center sm:px-15 px-8 justify-center !sm:justify-start py-6 bg-primaryLight rounded-md shadow-sm h-50 space-x-6"
+    class="flex items-center sm:px-16 px-8 justify-start py-6 bg-primaryLight rounded-md shadow-sm h-48 space-x-6"
  >
    <component :is="icon" class="text-5xl" :class="color" />

--- a/packages/hoppscotch-sh-admin/src/main.ts
+++ b/packages/hoppscotch-sh-admin/src/main.ts
@@ -4,14 +4,14 @@ import { authExchange } from '@urql/exchange-auth';
 import App from './App.vue';

 // STYLES
-import 'virtual:windi.css';
 import '@hoppscotch/ui/style.css';
-import '../assets/scss/themes.scss';
 import '../assets/scss/styles.scss';
+import '../assets/scss/tailwind.scss';
 import '@fontsource-variable/inter';
 import '@fontsource-variable/material-symbols-rounded';
 import '@fontsource-variable/roboto-mono';
 // END STYLES
+
 import { HOPP_MODULES } from './modules';
 import { auth } from './helpers/auth';
 import { pipe } from 'fp-ts/function';
--- a/packages/hoppscotch-sh-admin/src/pages/index.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/index.vue
@@ -4,7 +4,7 @@
  >
    <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" />
+        <img src="/cover.jpg" alt="hoppscotch-logo" class="h-16" />
      </div>
      <div class="flex flex-col items-center">
        <h1 class="text-2xl text-secondaryDark">Login to Admin Dashboard</h1>
--- a/packages/hoppscotch-sh-admin/src/pages/users/_id.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/users/_id.vue
@@ -16,17 +16,17 @@
          <img class="object-cover rounded-3xl mb-3" :src="user.photoURL" />
          <span
            v-if="user.isAdmin"
-            class="absolute left-17 bottom-0 text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
+            class="absolute left-16 bottom-0 text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
          >
            {{ t('users.admin') }}
          </span>
        </div>

-        <div v-else class="bg-primaryDark w-17 p-3 rounded-2xl mb-3 relative">
+        <div v-else class="bg-primaryDark w-16 p-3 rounded-2xl mb-3 relative">
          <icon-lucide-user class="text-4xl" />
          <span
            v-if="user.isAdmin"
-            class="absolute left-15 bottom-0 text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
+            class="absolute left-16 bottom-0 text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
          >
            {{ t('users.admin') }}
          </span>
@@ -37,7 +37,7 @@
            t('users.uid')
          }}</label>
          <div
-            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"
+            class="w-full p-3 mt-2 bg-divider border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
          >
            {{ user.uid }}
          </div>
@@ -47,7 +47,7 @@
            t('users.name')
          }}</label>
          <div
-            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"
+            class="w-full p-3 mt-2 bg-divider border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
          >
            <span v-if="user.displayName">
              {{ user.displayName }}
@@ -60,7 +60,7 @@
            t('users.email')
          }}</label>
          <div
-            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"
+            class="w-full p-3 mt-2 bg-divider border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
          >
            {{ user.email }}
          </div>
@@ -70,7 +70,7 @@
            t('users.created_on')
          }}</label>
          <div
-            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"
+            class="w-full p-3 mt-2 bg-divider border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
          >
            {{ getCreatedDateAndTime(user.createdOn) }}
          </div>
@@ -99,7 +99,7 @@
        </span>
        <HoppButtonSecondary
          v-if="!user.isAdmin"
-          class="mr-4 !bg-red-600 !text-gray-300 !hover:text-gray-100"
+          class="mr-4 bg-red-600 text-white hover:text-gray-100"
          filled
          outline
          :label="t('users.delete')"
@@ -109,7 +109,7 @@

        <HoppButtonSecondary
          v-if="user.isAdmin"
-          class="mr-4 !bg-red-600 !text-gray-300 !hover:text-gray-100"
+          class="mr-4 bg-red-600 text-white hover:text-gray-100"
          filled
          outline
          :icon="IconTrash"
--- a/packages/hoppscotch-sh-admin/tailwind.config.ts
+++ b/packages/hoppscotch-sh-admin/tailwind.config.ts
@@ -0,0 +1,7 @@
+import { Config } from 'tailwindcss';
+import preset from '@hoppscotch/ui/ui-preset';
+
+export default {
+  content: ['src/**/*.{vue,html}', '../hoppscotch-ui/src/**/*.{vue,html}'],
+  presets: [preset],
+} satisfies Config;
--- a/packages/hoppscotch-sh-admin/vite.config.ts
+++ b/packages/hoppscotch-sh-admin/vite.config.ts
@@ -5,7 +5,6 @@ import Icons from 'unplugin-icons/vite';
 import Unfonts from 'unplugin-fonts/vite';
 import IconResolver from 'unplugin-icons/resolver';
 import Components from 'unplugin-vue-components/vite';
-import WindiCSS from 'vite-plugin-windicss';
 import Pages from 'vite-plugin-pages';
 import Layouts from 'vite-plugin-vue-layouts';
 import path from 'path';
@@ -40,12 +39,9 @@ export default defineConfig({
      compositionOnly: true,
      include: [path.resolve(__dirname, './locales/**')],
    }),
-    WindiCSS({
-      root: path.resolve(__dirname),
-    }),
    Components({
      dts: './src/components.d.ts',
-      dirs: ['./src/components'],
+      dirs: ['./src/components', '../hoppscotch-ui/src/components'],
      directoryAsNamespace: true,
      resolvers: [
        IconResolver({
--- a/packages/hoppscotch-sh-admin/windi.config.ts
+++ b/packages/hoppscotch-sh-admin/windi.config.ts
@@ -1,65 +0,0 @@
-import { defineConfig } from 'windicss/helpers';
-
-export default defineConfig({
-  theme: {
-    container: {
-      center: true,
-    },
-    extend: {
-      inset: {
-        upperPrimaryStickyFold: 'var(--upper-primary-sticky-fold)',
-        upperSecondaryStickyFold: 'var(--upper-secondary-sticky-fold)',
-        upperTertiaryStickyFold: 'var(--upper-tertiary-sticky-fold)',
-        upperMobilePrimaryStickyFold: 'var(--upper-mobile-primary-sticky-fold)',
-        upperMobileSecondaryStickyFold:
-          'var(--upper-mobile-secondary-sticky-fold)',
-        upperMobileStickyFold: 'var(--upper-mobile-sticky-fold)',
-        upperMobileTertiaryStickyFold:
-          'var(--upper-mobile-tertiary-sticky-fold)',
-        lowerPrimaryStickyFold: 'var(--lower-primary-sticky-fold)',
-        lowerSecondaryStickyFold: 'var(--lower-secondary-sticky-fold)',
-        lowerTertiaryStickyFold: 'var(--lower-tertiary-sticky-fold)',
-        sidebarPrimaryStickyFold: 'var(--sidebar-primary-sticky-fold)',
-      },
-      colors: {
-        primary: 'var(--primary-color)',
-        primaryLight: 'var(--primary-light-color)',
-        primaryDark: 'var(--primary-dark-color)',
-        primaryContrast: 'var(--primary-contrast-color)',
-        secondary: 'var(--secondary-color)',
-        secondaryLight: 'var(--secondary-light-color)',
-        secondaryDark: 'var(--secondary-dark-color)',
-        accent: 'var(--accent-color)',
-        accentLight: 'var(--accent-light-color)',
-        accentDark: 'var(--accent-dark-color)',
-        accentContrast: 'var(--accent-contrast-color)',
-        divider: 'var(--divider-color)',
-        dividerLight: 'var(--divider-light-color)',
-        dividerDark: 'var(--divider-dark-color)',
-        error: 'var(--error-color)',
-        tooltip: 'var(--tooltip-color)',
-        popover: 'var(--popover-color)',
-        gradientFrom: 'var(--gradient-from-color)',
-        gradientVia: 'var(--gradient-via-color)',
-        gradientTo: 'var(--gradient-to-color)',
-      },
-      fontFamily: {
-        sans: 'var(--font-sans)',
-        mono: 'var(--font-mono)',
-        icon: 'var(--font-icon)',
-      },
-      fontSize: {
-        tiny: 'var(--font-size-tiny)',
-        body: 'var(--font-size-body)',
-      },
-      lineHeight: {
-        body: 'var(--line-height-body)',
-      },
-      cursor: {
-        nsResize: 'ns-resize',
-        grab: 'grab',
-        grabbing: 'grabbing',
-      },
-    },
-  },
-});