fix: styling issues with wa tab components

Author: deepjyoti30-st

package-lock.json

@@ -32,20 +32,21 @@
   },
   "devDependencies": {
     "@shared/eslint": "*",
+    "@shared/js": "*",
+    "@shared/react": "*",
     "@shared/tsconfig": "*",
     "@testing-library/jest-dom": "^6.1.0",
     "@types/react": "^17.0.20",
+    "@vitejs/plugin-react": "^4.5.2",
     "jsdom": "^26.1.0",
     "prettier": "3.6.2",
     "pretty-quick": "^4.2.2",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
     "typescript": "^5.8.3",
-    "vitest": "^1.3.1",
-    "@shared/js": "*",
-    "@shared/react": "*",
     "vite": "^6.3.5",
-    "@vitejs/plugin-react": "^4.5.2",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
     "vite-plugin-dts": "^4.5.4",
-    "rollup-plugin-peer-deps-external": "^2.2.4"
+    "vitest": "^1.3.1"
   },
   "browser": {
     "fs": false

packages/tenants-react/package.json

@@ -1,15 +1,15 @@
 import React from "react";
 
 type TenantTabProps = {
-    description: string;
-    children: React.ReactNode;
-}
+  description: string;
+  children: React.ReactNode;
+};
 
 export const TenantTab: React.FC<TenantTabProps> = ({ description, children }) => {
   return (
     <div>
-        <div>{description}</div>
-        <div>{children}</div>
+      <div>{description}</div>
+      <div>{children}</div>
     </div>
   );
 };

packages/tenants-react/src/components/tab/TenantTab.tsx

@@ -1,16 +1,26 @@
 import { createPluginInitFunction } from "@shared/js";
 import { buildContext, getQuerier } from "@shared/react";
-import { getTranslationFunction, SuperTokensPlugin, SuperTokensPublicConfig, SuperTokensPublicPlugin } from "supertokens-auth-react";
+import {
+  getTranslationFunction,
+  SuperTokensPlugin,
+  SuperTokensPublicConfig,
+  SuperTokensPublicPlugin,
+} from "supertokens-auth-react";
 import { BooleanClaim } from "supertokens-auth-react/recipe/session";
 
 import { getApi } from "./api";
 import { API_PATH, PLUGIN_ID } from "./constants";
+import "./styles/global.css";
 // import { InvitationAcceptWrapper } from "./invitation-accept-wrapper";
 import { enableDebugLogs } from "./logger";
 import { TenantManagement } from "./pages/tenant-management/tenant-management";
 // import { SelectTenantPage } from "./select-tenant-page";
 import { defaultTranslationsTenants } from "./translations";
-import { SuperTokensPluginTenantsPluginConfig, SuperTokensPluginTenantsPluginNormalisedConfig, TranslationKeys } from "./types";
+import {
+  SuperTokensPluginTenantsPluginConfig,
+  SuperTokensPluginTenantsPluginNormalisedConfig,
+  TranslationKeys,
+} from "./types";
 
 const { usePluginContext, setContext } = buildContext<{
   plugins: SuperTokensPublicPlugin[];
@@ -137,14 +147,14 @@ export const init = createPluginInitFunction<
         return {
           status: "OK",
           routeHandlers: [
-            {
-              path: "/user/tenants/select",
-              handler: () => SelectTenantPage.call(null),
-            },
-            {
-              path: "/user/invite/accept",
-              handler: () => InvitationAcceptWrapper.call(null),
-            },
+            // {
+            //   path: "/user/tenants/select",
+            //   handler: () => SelectTenantPage.call(null),
+            // },
+            // {
+            //   path: "/user/invite/accept",
+            //   handler: () => InvitationAcceptWrapper.call(null),
+            // },
           ],
         };
       },

packages/tenants-react/src/plugin.tsx

@@ -0,0 +1,7 @@
+/* Tab related styling */
+
+.st-tab-group::part(base) {
+  border: 1px solid #dddde3;
+  border-radius: 12px;
+  background-color: #f9f9f8;
+}

packages/tenants-react/src/styles/global.css

@@ -1,34 +1,36 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import dts from 'vite-plugin-dts';
-import peerDepsExternal from 'rollup-plugin-peer-deps-external';
-import * as path from 'path';
-import packageJson from './package.json';
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import dts from "vite-plugin-dts";
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import * as path from "path";
+import packageJson from "./package.json";
+import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
 
 export default defineConfig(() => {
   return {
     root: __dirname,
     plugins: [
       react(),
-      dts({ entryRoot: 'src', tsconfigPath: path.join(__dirname, 'tsconfig.json') }),
+      dts({ entryRoot: "src", tsconfigPath: path.join(__dirname, "tsconfig.json") }),
       peerDepsExternal(),
+      cssInjectedByJsPlugin(),
     ],
 
     build: {
-      outDir: 'dist',
+      outDir: "dist",
       sourcemap: false,
       emptyOutDir: true,
       commonjsOptions: {
         transformMixedEsModules: true,
       },
       lib: {
         // Could also be a dictionary or array of multiple entry points.
-        entry: 'src/index.ts',
-        fileName: 'index',
+        entry: "src/index.ts",
+        fileName: "index",
         name: packageJson.name,
         // Change this to the formats you want to support.
         // Don't forget to update your package.json as well.
-        formats: ['es' as const, 'cjs' as const],
+        formats: ["es" as const, "cjs" as const],
       },
       rollupOptions: {
         cache: false,