fix(tests/fixtures/signoz.py): anchor Docker build context to repo root

Previously used path="../../" which resolved to the repo root only when
pytest's cwd was tests/integration/. After hoisting the pytest project
to tests/, that same relative path pointed one level above the repo
root and the build failed with:

  Cannot locate specified Dockerfile: cmd/enterprise/Dockerfile.with-web.integration

Anchor the build context to an absolute path computed from __file__ so
the fixture works regardless of pytest cwd.

.github/CODEOWNERS

@@ -16,38 +16,38 @@ go.mod @therealpandey
 
 # Scaffold Owners
 
-/pkg/config/ @vikrantgupta25
-/pkg/errors/ @vikrantgupta25
-/pkg/factory/ @vikrantgupta25
-/pkg/types/ @vikrantgupta25
-/pkg/valuer/ @vikrantgupta25
-/cmd/ @vikrantgupta25
-.golangci.yml @vikrantgupta25
+/pkg/config/ @therealpandey
+/pkg/errors/ @therealpandey
+/pkg/factory/ @therealpandey
+/pkg/types/ @therealpandey
+/pkg/valuer/ @therealpandey
+/cmd/ @therealpandey
+.golangci.yml @therealpandey
 
 # Zeus Owners
 
-/pkg/zeus/ @vikrantgupta25
-/ee/zeus/ @vikrantgupta25
-/pkg/licensing/ @vikrantgupta25
-/ee/licensing/ @vikrantgupta25
+/pkg/zeus/ @therealpandey
+/ee/zeus/ @therealpandey
+/pkg/licensing/ @therealpandey
+/ee/licensing/ @therealpandey
 
 # SQL Owners
 
-/pkg/sqlmigration/ @vikrantgupta25
-/ee/sqlmigration/ @vikrantgupta25
-/pkg/sqlschema/ @vikrantgupta25
-/ee/sqlschema/ @vikrantgupta25
+/pkg/sqlmigration/ @therealpandey
+/ee/sqlmigration/ @therealpandey
+/pkg/sqlschema/ @therealpandey
+/ee/sqlschema/ @therealpandey
 
 # Analytics Owners
 
-/pkg/analytics/ @vikrantgupta25
-/pkg/statsreporter/ @vikrantgupta25
+/pkg/analytics/ @therealpandey
+/pkg/statsreporter/ @therealpandey
 
 # Emailing Owners
 
-/pkg/emailing/ @vikrantgupta25
-/pkg/types/emailtypes/ @vikrantgupta25
-/templates/email/ @vikrantgupta25
+/pkg/emailing/ @therealpandey
+/pkg/types/emailtypes/ @therealpandey
+/templates/email/ @therealpandey
 
 # Querier Owners
 
@@ -97,23 +97,23 @@ go.mod @therealpandey
 
 # AuthN / AuthZ Owners
 
-/pkg/authz/ @vikrantgupta25
-/ee/authz/ @vikrantgupta25
-/pkg/authn/ @vikrantgupta25
-/ee/authn/ @vikrantgupta25
-/pkg/modules/user/ @vikrantgupta25
-/pkg/modules/session/ @vikrantgupta25
-/pkg/modules/organization/ @vikrantgupta25
-/pkg/modules/authdomain/ @vikrantgupta25
-/pkg/modules/role/ @vikrantgupta25
+/pkg/authz/ @therealpandey
+/ee/authz/ @therealpandey
+/pkg/authn/ @therealpandey
+/ee/authn/ @therealpandey
+/pkg/modules/user/ @therealpandey
+/pkg/modules/session/ @therealpandey
+/pkg/modules/organization/ @therealpandey
+/pkg/modules/authdomain/ @therealpandey
+/pkg/modules/role/ @therealpandey
 
 # IdentN Owners
-/pkg/identn/ @vikrantgupta25
-/pkg/http/middleware/identn.go @vikrantgupta25
+/pkg/identn/ @therealpandey
+/pkg/http/middleware/identn.go @therealpandey
 
 # Integration tests
 
-/tests/integration/ @vikrantgupta25
+/tests/integration/ @therealpandey
 
 # OpenAPI types generator
 

.github/workflows/integrationci.yaml

@@ -25,11 +25,11 @@ jobs:
         uses: astral-sh/setup-uv@v4
       - name: install
         run: |
-          cd tests/integration && uv sync
+          cd tests && uv sync
       - name: fmt
         run: |
           make py-fmt
-          git diff --exit-code -- tests/integration/
+          git diff --exit-code -- tests/
       - name: lint
         run: |
           make py-lint
@@ -79,7 +79,7 @@ jobs:
         uses: astral-sh/setup-uv@v4
       - name: install
         run: |
-          cd tests/integration && uv sync
+          cd tests && uv sync
       - name: webdriver
         run: |
           wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
@@ -99,10 +99,10 @@ jobs:
           google-chrome-stable --version
       - name: run
         run: |
-          cd tests/integration && \
+          cd tests && \
             uv run pytest \
             --basetemp=./tmp/ \
-            src/${{matrix.src}} \
+            integration/src/${{matrix.src}} \
             --sqlstore-provider ${{matrix.sqlstore-provider}} \
             --sqlite-mode ${{matrix.sqlite-mode}} \
             --postgres-version ${{matrix.postgres-version}} \

Makefile

@@ -201,26 +201,26 @@ docker-buildx-enterprise: go-build-enterprise js-build
 # python commands
 ##############################################################
 .PHONY: py-fmt
-py-fmt: ## Run black for integration tests
-	@cd tests/integration && uv run black .
+py-fmt: ## Run black across the shared tests project
+	@cd tests && uv run black .
 
 .PHONY: py-lint
-py-lint: ## Run lint for integration tests
-	@cd tests/integration && uv run isort .
-	@cd tests/integration && uv run autoflake .
-	@cd tests/integration && uv run pylint .
+py-lint: ## Run lint across the shared tests project
+	@cd tests && uv run isort .
+	@cd tests && uv run autoflake .
+	@cd tests && uv run pylint .
 
 .PHONY: py-test-setup
-py-test-setup: ## Runs integration tests
-	@cd tests/integration && uv run pytest --basetemp=./tmp/ -vv --reuse --capture=no src/bootstrap/setup.py::test_setup
+py-test-setup: ## Bring up the shared SigNoz backend used by integration and e2e tests
+	@cd tests && uv run pytest --basetemp=./tmp/ -vv --reuse --capture=no integration/src/bootstrap/setup.py::test_setup
 
 .PHONY: py-test-teardown
-py-test-teardown: ## Runs integration tests with teardown
-	@cd tests/integration && uv run pytest --basetemp=./tmp/ -vv --teardown --capture=no  src/bootstrap/setup.py::test_teardown
+py-test-teardown: ## Tear down the shared SigNoz backend
+	@cd tests && uv run pytest --basetemp=./tmp/ -vv --teardown --capture=no  integration/src/bootstrap/setup.py::test_teardown
 
 .PHONY: py-test
 py-test: ## Runs integration tests
-	@cd tests/integration && uv run pytest --basetemp=./tmp/ -vv --capture=no src/
+	@cd tests && uv run pytest --basetemp=./tmp/ -vv --capture=no integration/src/
 
 .PHONY: py-clean
 py-clean: ## Clear all pycache and pytest cache from tests directory recursively

frontend/jest.config.ts

@@ -45,7 +45,7 @@ const config: Config.InitialOptions = {
 		'^.+\\.(js|jsx)$': 'babel-jest',
 	},
 	transformIgnorePatterns: [
-		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|@signozhq/table|@signozhq/calendar|@signozhq/input|@signozhq/popover|@signozhq/*|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs)/)',
+		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|@signozhq/table|@signozhq/calendar|@signozhq/input|@signozhq/popover|@signozhq/button|@signozhq/*|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs)/)',
 	],
 	setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],

frontend/jest.setup.ts

@@ -24,10 +24,6 @@ window.matchMedia =
 		};
 	};
 
-if (!HTMLElement.prototype.scrollIntoView) {
-	HTMLElement.prototype.scrollIntoView = function (): void {};
-}
-
 // Patch getComputedStyle to handle CSS parsing errors from @signozhq/* packages.
 // These packages inject CSS at import time via style-inject / vite-plugin-css-injected-by-js.
 // jsdom's nwsapi cannot parse some of the injected selectors (e.g. Tailwind's :animate-in),

frontend/package.json

@@ -48,9 +48,24 @@
     "@radix-ui/react-tooltip": "1.0.7",
     "@sentry/react": "8.41.0",
     "@sentry/vite-plugin": "2.22.6",
+    "@signozhq/button": "0.0.5",
+    "@signozhq/calendar": "0.1.1",
+    "@signozhq/callout": "0.0.4",
+    "@signozhq/checkbox": "0.0.4",
+    "@signozhq/combobox": "0.0.4",
+    "@signozhq/command": "0.0.2",
     "@signozhq/design-tokens": "2.1.4",
+    "@signozhq/dialog": "0.0.4",
+    "@signozhq/drawer": "0.0.6",
     "@signozhq/icons": "0.1.0",
-    "@signozhq/ui": "0.0.9",
+    "@signozhq/input": "0.0.4",
+    "@signozhq/popover": "0.1.2",
+    "@signozhq/radio-group": "0.0.4",
+    "@signozhq/resizable": "0.0.2",
+    "@signozhq/tabs": "0.0.11",
+    "@signozhq/table": "0.3.8",
+    "@signozhq/toggle-group": "0.0.3",
+    "@signozhq/ui": "0.0.5",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",

frontend/src/auto-import-registry.d.ts

@@ -10,6 +10,21 @@
 // PR for reference: https://github.com/SigNoz/signoz/pull/9694
 // -------------------------------------------------------------------------
 
+import '@signozhq/button';
+import '@signozhq/calendar';
+import '@signozhq/callout';
+import '@signozhq/checkbox';
+import '@signozhq/combobox';
+import '@signozhq/command';
 import '@signozhq/design-tokens';
+import '@signozhq/dialog';
+import '@signozhq/drawer';
 import '@signozhq/icons';
+import '@signozhq/input';
+import '@signozhq/popover';
+import '@signozhq/radio-group';
+import '@signozhq/resizable';
+import '@signozhq/tabs';
+import '@signozhq/table';
+import '@signozhq/toggle-group';
 import '@signozhq/ui';

frontend/src/components/AppLoading/AppLoading.styles.scss

@@ -80,12 +80,12 @@
 
 	mask-image: radial-gradient(
 		circle at 50% 0,
-		color-mix(in srgb, var(--l1-background) 10%, transparent) 0,
+		color-mix(in srgb, var(--background) 10%, transparent) 0,
 		transparent 100%
 	);
 	-webkit-mask-image: radial-gradient(
 		circle at 50% 0,
-		color-mix(in srgb, var(--l1-background) 10%, transparent) 0,
+		color-mix(in srgb, var(--background) 10%, transparent) 0,
 		transparent 100%
 	);
 }

frontend/src/components/AuthPageContainer/AuthHeader.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { Button } from '@signozhq/ui';
+import { Button } from '@signozhq/button';
 import { LifeBuoy } from 'lucide-react';
 
 import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';
@@ -23,10 +23,8 @@ function AuthHeader(): JSX.Element {
 			</div>
 			<Button
 				className="auth-header-help-button"
-				prefix={<LifeBuoy size={12} />}
+				prefixIcon={<LifeBuoy size={12} />}
 				onClick={handleGetHelp}
-				variant="solid"
-				color="none"
 			>
 				Get Help
 			</Button>

frontend/src/components/AuthPageContainer/AuthPageContainer.styles.scss

@@ -43,12 +43,12 @@
 .masked-dots {
 	mask-image: radial-gradient(
 		circle at 50% 0%,
-		color-mix(in srgb, var(--l1-background) 10%, transparent) 0%,
+		color-mix(in srgb, var(--background) 10%, transparent) 0%,
 		transparent 56.77%
 	);
 	-webkit-mask-image: radial-gradient(
 		circle at 50% 0%,
-		color-mix(in srgb, var(--l1-background) 10%, transparent) 0%,
+		color-mix(in srgb, var(--background) 10%, transparent) 0%,
 		transparent 56.77%
 	);
 }

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -1,13 +1,10 @@
 import { Controller, useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
+import { Button } from '@signozhq/button';
+import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { X } from '@signozhq/icons';
-import {
-	Button,
-	DialogFooter,
-	DialogWrapper,
-	Input,
-	toast,
-} from '@signozhq/ui';
+import { Input } from '@signozhq/input';
+import { toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	invalidateListServiceAccounts,
@@ -140,7 +137,6 @@ function CreateServiceAccountModal(): JSX.Element {
 
 				<Button
 					type="submit"
-					// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
 					form="create-sa-form"
 					variant="solid"
 					color="primary"

frontend/src/components/CreateServiceAccountModal/__tests__/CreateServiceAccountModal.test.tsx

@@ -1,13 +1,7 @@
 import { toast } from '@signozhq/ui';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import {
-	render,
-	screen,
-	userEvent,
-	waitFor,
-	waitForElementToBeRemoved,
-} from 'tests/test-utils';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import CreateServiceAccountModal from '../CreateServiceAccountModal';
 
@@ -127,12 +121,12 @@ describe('CreateServiceAccountModal', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		const dialog = await screen.findByRole('dialog', {
-			name: /New Service Account/i,
-		});
+		await screen.findByRole('dialog', { name: /New Service Account/i });
 		await user.click(screen.getByRole('button', { name: /Cancel/i }));
 
-		await waitForElementToBeRemoved(dialog);
+		expect(
+			screen.queryByRole('dialog', { name: /New Service Account/i }),
+		).not.toBeInTheDocument();
 	});
 
 	it('shows "Name is required" after clearing the name field', async () => {

frontend/src/components/CustomTimePicker/CalendarContainer.tsx

@@ -1,4 +1,4 @@
-import { Calendar } from '@signozhq/ui';
+import { Calendar } from '@signozhq/calendar';
 import { Button } from 'antd';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -7,7 +7,7 @@ import {
 	useState,
 } from 'react';
 import { useLocation } from 'react-router-dom';
-import { Button } from '@signozhq/ui';
+import { Button } from '@signozhq/button';
 import { Input, InputRef, Popover, Tooltip } from 'antd';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -661,9 +661,7 @@ function CustomTimePicker({
 						onClick={handleZoomOut}
 						disabled={zoomOutDisabled}
 						data-testid="zoom-out-btn"
-						prefix={<ZoomOut size={14} />}
-						variant="solid"
-						color="none"
+						prefixIcon={<ZoomOut size={14} />}
 					/>
 				</Tooltip>
 			)}

frontend/src/components/EditMemberDrawer/DeleteMemberDialog.tsx

@@ -1,5 +1,6 @@
+import { Button } from '@signozhq/button';
+import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { Trash2, X } from '@signozhq/icons';
-import { Button, DialogFooter, DialogWrapper } from '@signozhq/ui';
 import { MemberRow } from 'components/MembersTable/MembersTable';
 
 interface DeleteMemberDialogProps {

frontend/src/components/EditMemberDrawer/EditMemberDrawer.styles.scss

@@ -1,10 +1,17 @@
 .edit-member-drawer {
+	&__layout {
+		display: flex;
+		flex-direction: column;
+		height: calc(100vh - 48px);
+	}
+
 	&__body {
 		flex: 1;
 		overflow-y: auto;
 		display: flex;
 		flex-direction: column;
 		gap: var(--spacing-8);
+		padding: var(--padding-5) var(--padding-4);
 	}
 
 	&__field {
@@ -113,6 +120,11 @@
 		align-items: center;
 		justify-content: space-between;
 		width: 100%;
+		height: 56px;
+		padding: 0 var(--padding-4);
+		border-top: 1px solid var(--l1-border);
+		flex-shrink: 0;
+		background: var(--card);
 	}
 
 	&__footer-left {

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -1,7 +1,10 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
+import { Button } from '@signozhq/button';
+import { DrawerWrapper } from '@signozhq/drawer';
 import { LockKeyhole, RefreshCw, Trash2, X } from '@signozhq/icons';
-import { Badge, Button, DrawerWrapper, Input, toast } from '@signozhq/ui';
+import { Input } from '@signozhq/input';
+import { Badge, toast } from '@signozhq/ui';
 import { Skeleton, Tooltip } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
@@ -593,69 +596,65 @@ function EditMemberDrawer({
 	const drawerContent = (
 		<div className="edit-member-drawer__layout">
 			<div className="edit-member-drawer__body">{drawerBody}</div>
-		</div>
-	);
 
-	const footer = (
-		<div className="edit-member-drawer__footer">
-			<div className="edit-member-drawer__footer-left">
-				<Tooltip title={getDeleteTooltip(isRootUser, isSelf)}>
-					<span className="edit-member-drawer__tooltip-wrapper">
-						<Button
-							className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--danger"
-							onClick={(): void => setShowDeleteConfirm(true)}
-							disabled={isRootUser || isSelf}
-							variant="solid"
-							color="none"
-						>
-							<Trash2 size={12} />
-							{isInvited ? 'Revoke Invite' : 'Delete Member'}
+			{!isDeleted && (
+				<div className="edit-member-drawer__footer">
+					<div className="edit-member-drawer__footer-left">
+						<Tooltip title={getDeleteTooltip(isRootUser, isSelf)}>
+							<span className="edit-member-drawer__tooltip-wrapper">
+								<Button
+									className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--danger"
+									onClick={(): void => setShowDeleteConfirm(true)}
+									disabled={isRootUser || isSelf}
+								>
+									<Trash2 size={12} />
+									{isInvited ? 'Revoke Invite' : 'Delete Member'}
+								</Button>
+							</span>
+						</Tooltip>
+
+						<div className="edit-member-drawer__footer-divider" />
+						<Tooltip title={isRootUser ? ROOT_USER_TOOLTIP : undefined}>
+							<span className="edit-member-drawer__tooltip-wrapper">
+								<Button
+									className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--warning"
+									onClick={handleGenerateResetLink}
+									disabled={isGeneratingLink || isRootUser || isLoadingTokenStatus}
+								>
+									<RefreshCw size={12} />
+									{isGeneratingLink
+										? 'Generating...'
+										: isInvited
+										? getInviteButtonLabel(
+												isLoadingTokenStatus,
+												existingToken,
+												isTokenExpired,
+												tokenNotFound,
+										  )
+										: 'Generate Password Reset Link'}
+								</Button>
+							</span>
+						</Tooltip>
+					</div>
+
+					<div className="edit-member-drawer__footer-right">
+						<Button variant="solid" color="secondary" size="sm" onClick={handleClose}>
+							<X size={14} />
+							Cancel
 						</Button>
-					</span>
-				</Tooltip>
 
-				<div className="edit-member-drawer__footer-divider" />
-				<Tooltip title={isRootUser ? ROOT_USER_TOOLTIP : undefined}>
-					<span className="edit-member-drawer__tooltip-wrapper">
 						<Button
-							className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--warning"
-							onClick={handleGenerateResetLink}
-							disabled={isGeneratingLink || isRootUser || isLoadingTokenStatus}
 							variant="solid"
-							color="none"
+							color="primary"
+							size="sm"
+							disabled={!isDirty || isSaving || isRootUser}
+							onClick={handleSave}
 						>
-							<RefreshCw size={12} />
-							{isGeneratingLink
-								? 'Generating...'
-								: isInvited
-								? getInviteButtonLabel(
-										isLoadingTokenStatus,
-										existingToken,
-										isTokenExpired,
-										tokenNotFound,
-								  )
-								: 'Generate Password Reset Link'}
+							{isSaving ? 'Saving...' : 'Save Member Details'}
 						</Button>
-					</span>
-				</Tooltip>
-			</div>
-
-			<div className="edit-member-drawer__footer-right">
-				<Button variant="solid" color="secondary" size="sm" onClick={handleClose}>
-					<X size={14} />
-					Cancel
-				</Button>
-
-				<Button
-					variant="solid"
-					color="primary"
-					size="sm"
-					disabled={!isDirty || isSaving || isRootUser}
-					onClick={handleSave}
-				>
-					{isSaving ? 'Saving...' : 'Save Member Details'}
-				</Button>
-			</div>
+					</div>
+				</div>
+			)}
 		</div>
 	);
 
@@ -669,14 +668,14 @@ function EditMemberDrawer({
 					}
 				}}
 				direction="right"
+				type="panel"
 				showCloseButton
 				showOverlay={false}
-				title="Member Details"
-				footer={footer}
-				width="wide"
-			>
-				{drawerContent}
-			</DrawerWrapper>
+				allowOutsideClick
+				header={{ title: 'Member Details' }}
+				content={drawerContent}
+				className="edit-member-drawer"
+			/>
 
 			<ResetLinkDialog
 				open={showResetLinkDialog}

frontend/src/components/EditMemberDrawer/ResetLinkDialog.tsx

@@ -1,5 +1,6 @@
+import { Button } from '@signozhq/button';
+import { DialogWrapper } from '@signozhq/dialog';
 import { Check, Copy } from '@signozhq/icons';
-import { Button, DialogWrapper } from '@signozhq/ui';
 
 interface ResetLinkDialogProps {
 	open: boolean;
@@ -48,7 +49,7 @@ function ResetLinkDialog({
 						color="secondary"
 						size="sm"
 						onClick={onCopy}
-						prefix={hasCopied ? <Check size={12} /> : <Copy size={12} />}
+						prefixIcon={hasCopied ? <Check size={12} /> : <Copy size={12} />}
 						className="reset-link-dialog__copy-btn"
 					>
 						{hasCopied ? 'Copied!' : 'Copy'}

frontend/src/components/EditMemberDrawer/__tests__/EditMemberDrawer.test.tsx

@@ -20,29 +20,17 @@ import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import EditMemberDrawer, { EditMemberDrawerProps } from '../EditMemberDrawer';
 
-jest.mock('api/generated/services/users', () => ({
-	useDeleteUser: jest.fn(),
-	useGetUser: jest.fn(),
-	useUpdateUser: jest.fn(),
-	useUpdateMyUserV2: jest.fn(),
-	useSetRoleByUserID: jest.fn(),
-	useGetResetPasswordToken: jest.fn(),
-	useCreateResetPasswordToken: jest.fn(),
-}));
-
-jest.mock('api/ErrorResponseHandlerForGeneratedAPIs', () => ({
-	convertToApiError: jest.fn(),
-}));
-
-jest.mock('@signozhq/ui', () => ({
-	...jest.requireActual('@signozhq/ui'),
+jest.mock('@signozhq/drawer', () => ({
 	DrawerWrapper: ({
-		children,
+		content,
 		open,
 	}: {
-		children?: ReactNode;
+		content?: ReactNode;
 		open: boolean;
-	}): JSX.Element | null => (open ? <div>{children}</div> : null),
+	}): JSX.Element | null => (open ? <div>{content}</div> : null),
+}));
+
+jest.mock('@signozhq/dialog', () => ({
 	DialogWrapper: ({
 		children,
 		open,
@@ -60,6 +48,24 @@ jest.mock('@signozhq/ui', () => ({
 	DialogFooter: ({ children }: { children?: ReactNode }): JSX.Element => (
 		<div>{children}</div>
 	),
+}));
+
+jest.mock('api/generated/services/users', () => ({
+	useDeleteUser: jest.fn(),
+	useGetUser: jest.fn(),
+	useUpdateUser: jest.fn(),
+	useUpdateMyUserV2: jest.fn(),
+	useSetRoleByUserID: jest.fn(),
+	useGetResetPasswordToken: jest.fn(),
+	useCreateResetPasswordToken: jest.fn(),
+}));
+
+jest.mock('api/ErrorResponseHandlerForGeneratedAPIs', () => ({
+	convertToApiError: jest.fn(),
+}));
+
+jest.mock('@signozhq/ui', () => ({
+	...jest.requireActual('@signozhq/ui'),
 	toast: {
 		success: jest.fn(),
 		error: jest.fn(),

frontend/src/components/ErrorModal/ErrorModal.styles.scss

@@ -21,7 +21,7 @@
 	&__wrap {
 		background: linear-gradient(
 			180deg,
-			color-mix(in srgb, var(--l1-background) 12%, transparent) 0.07%,
+			color-mix(in srgb, var(--background) 12%, transparent) 0.07%,
 			color-mix(in srgb, var(--bg-sakura-950) 24%, transparent) 50.04%,
 			color-mix(in srgb, var(--bg-sakura-800) 36%, transparent) 75.02%,
 			color-mix(in srgb, var(--bg-sakura-600) 48%, transparent) 87.51%,
@@ -40,17 +40,15 @@
 			margin: auto;
 		}
 	}
-
 	&__body {
 		padding: 0;
+		background: var(--l2-background);
 		overflow: hidden;
 		border-top-left-radius: 4px;
 		border-top-right-radius: 4px;
 	}
-
 	&__header {
 		background: none !important;
-
 		.ant-modal-title {
 			display: flex;
 			justify-content: space-between;
@@ -82,7 +80,6 @@
 				pointer-events: none;
 			}
 		}
-
 		.close-button {
 			padding: 3px 7px;
 			background: var(--l2-background);
@@ -93,15 +90,15 @@
 			box-shadow: none;
 		}
 	}
-
 	&__footer {
 		margin: 0 !important;
 		height: 6px;
+		background: var(--bg-sakura-500);
 	}
-
 	&__content {
 		padding: 0 !important;
 		border-radius: 4px;
 		overflow: hidden;
+		background: none !important;
 	}
 }

frontend/src/components/ErrorModal/components/ErrorContent.styles.scss

@@ -5,6 +5,7 @@
 	&__summary-section {
 		display: flex;
 		flex-direction: column;
+		border-bottom: 1px solid var(--l1-border);
 	}
 
 	&__summary {

frontend/src/components/InputWithLabel/InputWithLabel.styles.scss

@@ -5,6 +5,7 @@
 	border-radius: 2px 0px 0px 2px;
 
 	.label {
+		color: var(--l2-foreground);
 		font-size: 12px;
 		font-style: normal;
 		font-weight: 500;
@@ -20,9 +21,8 @@
 		padding: 0px 8px;
 
 		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--l2-border);
-		background: var(--l2-background);
-		color: var(--l2-foreground);
+		border: 1px solid var(--l1-border);
+		background: var(--l3-background);
 
 		display: flex;
 		justify-content: flex-start;
@@ -37,7 +37,6 @@
 
 		border-radius: 2px 0px 0px 2px;
 		border: 1px solid var(--l1-border);
-		background: var(--l2-background);
 
 		border-right: none;
 		border-left: none;
@@ -47,7 +46,6 @@
 		border-bottom-left-radius: 0px;
 		font-size: 12px !important;
 		line-height: 27px;
-
 		&::placeholder {
 			color: var(--l2-foreground) !important;
 			font-size: 12px !important;
@@ -63,8 +61,8 @@
 
 	.close-btn {
 		border-radius: 0px 2px 2px 0px;
-		border: 1px solid var(--l2-border);
-		background: var(--l2-background);
+		border: 1px solid var(--l1-border);
+		background: var(--l3-background);
 		height: 38px;
 		width: 38px;
 	}
@@ -73,7 +71,7 @@
 		.input {
 			border-radius: 0px 2px 2px 0px;
 			border: 1px solid var(--l1-border);
-			background: var(--l2-background);
+			background: var(--l3-background);
 			border-top-right-radius: 0px;
 			border-bottom-right-radius: 0px;
 		}

frontend/src/components/InviteMembersModal/InviteMembersModal.tsx

@@ -1,14 +1,11 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Button } from '@signozhq/button';
+import { Callout } from '@signozhq/callout';
 import { Style } from '@signozhq/design-tokens';
+import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { ChevronDown, CircleAlert, Plus, Trash2, X } from '@signozhq/icons';
-import {
-	Button,
-	Callout,
-	DialogFooter,
-	DialogWrapper,
-	Input,
-	toast,
-} from '@signozhq/ui';
+import { Input } from '@signozhq/input';
+import { toast } from '@signozhq/ui';
 import { Select } from 'antd';
 import inviteUsers from 'api/v1/invite/bulk/create';
 import sendInvite from 'api/v1/invite/create';
@@ -298,9 +295,8 @@ function InviteMembersModal({
 						showIcon
 						icon={<CircleAlert size={12} />}
 						className="invite-team-members-error-callout"
-					>
-						{getValidationErrorMessage()}
-					</Callout>
+						description={getValidationErrorMessage()}
+					/>
 				)}
 			</div>
 
@@ -310,7 +306,7 @@ function InviteMembersModal({
 					color="secondary"
 					size="sm"
 					className="add-another-member-button"
-					prefix={<Plus size={12} color={Style.L1_FOREGROUND} />}
+					prefixIcon={<Plus size={12} color={Style.L1_FOREGROUND} />}
 					onClick={addRow}
 				>
 					Add another

frontend/src/components/MembersTable/MembersTable.styles.scss

@@ -21,7 +21,7 @@
 	.ant-table-thead {
 		> tr > th,
 		> tr > td {
-			background: var(--l1-background);
+			background: var(--background);
 			font-size: var(--paragraph-small-600-font-size);
 			font-weight: var(--paragraph-small-600-font-weight);
 			line-height: var(--paragraph-small-600-line-height);

frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss

@@ -1,5 +1,3 @@
-// TODO: Improve the styling of the query aggregation container and its components. - @YounixM , @H4ad
-
 .query-builder-v2 {
 	display: flex;
 	flex-direction: row;
@@ -276,7 +274,7 @@
 					.ant-input-group-addon {
 						border-top-left-radius: 0px !important;
 						border-top-right-radius: 0px !important;
-						background: var(--l2-background);
+						background: var(--l3-background);
 						color: var(--l2-foreground);
 						font-size: 12px;
 						font-weight: 300;

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss

@@ -1,5 +1,3 @@
-// TODO: Improve the styling of the query aggregation container and its components. - @YounixM , @H4ad
-
 .query-add-ons {
 	width: 100%;
 }
@@ -104,7 +102,7 @@
 					border-top-right-radius: 0px;
 					border-bottom-right-radius: 0px;
 					padding: 0px !important;
-					background-color: var(--l2-background) !important;
+					background-color: var(--card) !important;
 
 					&:focus-within {
 						border-color: var(--l1-border);
@@ -213,7 +211,7 @@
 				.cm-line {
 					line-height: 36px !important;
 					font-family: 'Space Mono', monospace !important;
-					background-color: var(--l2-background) !important;
+					background-color: var(--card) !important;
 
 					::-moz-selection {
 						background: var(--l3-background) !important;
@@ -251,8 +249,8 @@
 
 		.close-btn {
 			border-radius: 0px 2px 2px 0px;
-			border: 1px solid var(--l2-border);
-			background: var(--l2-background);
+			border: 1px solid var(--l1-border);
+			background: var(--l3-background);
 			height: 38px;
 			width: 38px;
 
@@ -286,3 +284,108 @@
 		}
 	}
 }
+
+.lightMode {
+	.add-ons-list {
+		.add-ons-tabs {
+			.add-on-tab-title {
+				color: var(--l1-foreground) !important;
+			}
+
+			.tab {
+				border: 1px solid var(--l1-border) !important;
+				background: var(--l1-background) !important;
+
+				&:first-child {
+					border-left: 1px solid var(--l1-border) !important;
+				}
+			}
+
+			.tab::before {
+				background: var(--l3-background) !important;
+			}
+
+			.selected-view {
+				color: var(--primary-background) !important;
+				border: 1px solid var(--l1-border) !important;
+			}
+
+			.selected-view::before {
+				background: var(--l3-background) !important;
+			}
+		}
+
+		.compass-button {
+			border: 1px solid var(--l1-border) !important;
+			background: var(--l1-background) !important;
+		}
+	}
+
+	.having-filter-container {
+		.having-filter-select-container {
+			.having-filter-select-editor {
+				.cm-editor {
+					&:focus-within {
+						border-color: var(--l1-border) !important;
+					}
+
+					.cm-content {
+						border: 1px solid var(--l1-border) !important;
+						background: var(--l1-background) !important;
+
+						&:focus-within {
+							border-color: var(--l1-border) !important;
+						}
+					}
+
+					.cm-tooltip-autocomplete {
+						background: var(--l1-background) !important;
+						border: 1px solid var(--l1-border) !important;
+						color: var(--l1-foreground) !important;
+						box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
+
+						ul {
+							li {
+								color: var(--l1-foreground) !important;
+								&:hover {
+									background: var(--l3-background) !important;
+								}
+
+								&[aria-selected='true'] {
+									background: var(--l3-background) !important;
+									font-weight: 600 !important;
+								}
+							}
+						}
+					}
+
+					.cm-line {
+						background-color: var(--l1-background) !important;
+
+						::-moz-selection {
+							background: var(--l1-background) !important;
+						}
+
+						::selection {
+							background: var(--l3-background) !important;
+						}
+
+						.chip-decorator {
+							background: var(--l3-background) !important;
+							color: var(--l1-foreground) !important;
+						}
+					}
+
+					.cm-selectionBackground {
+						background: var(--l1-background) !important;
+					}
+				}
+			}
+
+			.close-btn {
+				border: 1px solid var(--l1-border) !important;
+				background: var(--l1-background) !important;
+			}
+		}
+	}
+}

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.styles.scss

@@ -1,5 +1,3 @@
-// TODO: Improve the styling of the query aggregation container and its components. - @YounixM , @H4ad
-
 .query-aggregation-container {
 	display: block;
 
@@ -142,7 +140,7 @@
 					.cm-line {
 						line-height: 36px !important;
 						font-family: 'Space Mono', monospace !important;
-						background-color: var(--l2-background) !important;
+						background-color: var(--l1-background) !important;
 
 						::-moz-selection {
 							background: var(--l3-background) !important;
@@ -198,7 +196,6 @@
 					min-width: auto;
 				}
 			}
-
 			.close-btn {
 				border-radius: 0px 2px 2px 0px;
 				border: 1px solid var(--l1-border);
@@ -273,7 +270,7 @@
 
 						.cm-line {
 							::-moz-selection {
-								background: var(--l2-background) !important;
+								background: var(--l1-background) !important;
 								opacity: 0.5 !important;
 							}
 

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.styles.scss

@@ -1,5 +1,3 @@
-// TODO: Improve the styling of the query aggregation container and its components. - @YounixM , @H4ad
-
 .code-mirror-where-clause {
 	width: 100%;
 	display: flex;
@@ -158,7 +156,7 @@
 		.cm-line {
 			line-height: 34px !important;
 			font-family: 'Space Mono', monospace !important;
-			background-color: var(--l2-background) !important;
+			background-color: var(--l1-background) !important;
 
 			::-moz-selection {
 				background: var(--l3-background) !important;
@@ -456,3 +454,30 @@
 		margin-top: -6px !important;
 	}
 }
+
+.lightMode {
+	.code-mirror-where-clause {
+		.cm-editor {
+			.cm-tooltip-autocomplete {
+				background: var(--l1-background) !important;
+				border: 1px solid var(--l1-border);
+				backdrop-filter: blur(20px);
+				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
+			}
+
+			.cm-line {
+				::-moz-selection {
+					background: var(--bg-robin-200) !important;
+				}
+
+				::selection {
+					background: var(--bg-robin-200) !important;
+				}
+			}
+
+			.cm-selectionBackground {
+				background: var(--bg-robin-200) !important;
+			}
+		}
+	}
+}

frontend/src/components/QuickFilters/QuickFilters.styles.scss

@@ -158,12 +158,12 @@
 
 	mask-image: radial-gradient(
 		circle at 50% 0,
-		color-mix(in srgb, var(--l1-background) 10%, transparent) 0,
+		color-mix(in srgb, var(--background) 10%, transparent) 0,
 		transparent 100%
 	);
 	-webkit-mask-image: radial-gradient(
 		circle at 50% 0,
-		color-mix(in srgb, var(--l1-background) 10%, transparent) 0,
+		color-mix(in srgb, var(--background) 10%, transparent) 0,
 		transparent 100%
 	);
 }

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -11,7 +11,7 @@ import {
 	ComboboxItem,
 	ComboboxList,
 	ComboboxTrigger,
-} from '@signozhq/ui';
+} from '@signozhq/combobox';
 import { Skeleton, Switch, Tooltip, Typography } from 'antd';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageKey from 'api/browser/localstorage/set';
@@ -200,6 +200,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 												setOpen(false);
 											}}
 											isSelected={validQueryIndex === option.value}
+											showCheck={false}
 										>
 											{option.label}
 										</ComboboxItem>

frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyCreatedPhase.tsx

@@ -1,5 +1,7 @@
+import { Button } from '@signozhq/button';
+import { Callout } from '@signozhq/callout';
 import { Check, Copy } from '@signozhq/icons';
-import { Badge, Button, Callout } from '@signozhq/ui';
+import { Badge } from '@signozhq/ui';
 import type { ServiceaccounttypesGettableFactorAPIKeyWithKeyDTO } from 'api/generated/services/sigNoz.schemas';
 
 export interface KeyCreatedPhaseProps {
@@ -41,7 +43,7 @@ function KeyCreatedPhase({
 			<Callout
 				type="info"
 				showIcon
-				title="Store the key securely. This is the only time it will be displayed."
+				message="Store the key securely. This is the only time it will be displayed."
 			/>
 		</div>
 	);

frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyFormPhase.tsx

@@ -1,6 +1,8 @@
 import type { Control, UseFormRegister } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
-import { Button, Input, ToggleGroup, ToggleGroupItem } from '@signozhq/ui';
+import { Button } from '@signozhq/button';
+import { Input } from '@signozhq/input';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
 import { DatePicker } from 'antd';
 import { popupContainer } from 'utils/selectPopupContainer';
 
@@ -54,7 +56,7 @@ function KeyFormPhase({
 							<ToggleGroup
 								type="single"
 								value={field.value}
-								onChange={(val): void => {
+								onValueChange={(val): void => {
 									if (val) {
 										field.onChange(val);
 									}
@@ -110,7 +112,6 @@ function KeyFormPhase({
 					</Button>
 					<Button
 						type="submit"
-						// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
 						form={FORM_ID}
 						variant="solid"
 						color="primary"

frontend/src/components/ServiceAccountDrawer/AddKeyModal/index.tsx

@@ -2,7 +2,8 @@ import { useCallback, useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
 import { useCopyToClipboard } from 'react-use';
-import { DialogWrapper, toast } from '@signozhq/ui';
+import { DialogWrapper } from '@signozhq/dialog';
+import { toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	invalidateListServiceAccountKeys,

frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx

@@ -1,6 +1,8 @@
 import { useQueryClient } from 'react-query';
+import { Button } from '@signozhq/button';
+import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { Trash2, X } from '@signozhq/icons';
-import { Button, DialogFooter, DialogWrapper, toast } from '@signozhq/ui';
+import { toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	getGetServiceAccountQueryKey,

frontend/src/components/ServiceAccountDrawer/EditKeyModal/EditKeyForm.tsx

@@ -1,13 +1,10 @@
 import type { Control, UseFormRegister } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
+import { Button } from '@signozhq/button';
 import { LockKeyhole, Trash2, X } from '@signozhq/icons';
-import {
-	Badge,
-	Button,
-	Input,
-	ToggleGroup,
-	ToggleGroupItem,
-} from '@signozhq/ui';
+import { Input } from '@signozhq/input';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
+import { Badge } from '@signozhq/ui';
 import { DatePicker } from 'antd';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
 import { popupContainer } from 'utils/selectPopupContainer';
@@ -75,7 +72,7 @@ function EditKeyForm({
 							<ToggleGroup
 								type="single"
 								value={field.value}
-								onChange={(val): void => {
+								onValueChange={(val): void => {
 									if (val) {
 										field.onChange(val);
 									}
@@ -150,7 +147,6 @@ function EditKeyForm({
 					</Button>
 					<Button
 						type="submit"
-						// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
 						form={FORM_ID}
 						variant="solid"
 						color="primary"

frontend/src/components/ServiceAccountDrawer/EditKeyModal/index.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
-import { DialogWrapper, toast } from '@signozhq/ui';
+import { DialogWrapper } from '@signozhq/dialog';
+import { toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	invalidateListServiceAccountKeys,

frontend/src/components/ServiceAccountDrawer/KeysTab.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from 'react';
+import { Button } from '@signozhq/button';
 import { KeyRound, X } from '@signozhq/icons';
-import { Button } from '@signozhq/ui';
 import { Skeleton, Table, Tooltip } from 'antd';
 import type { ColumnsType } from 'antd/es/table/interface';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
@@ -96,7 +96,7 @@ function buildColumns({
 				<Tooltip title={isDisabled ? 'Service account disabled' : 'Revoke Key'}>
 					<Button
 						variant="ghost"
-						size="sm"
+						size="xs"
 						color="destructive"
 						disabled={isDisabled}
 						onClick={(e): void => {

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 import { LockKeyhole } from '@signozhq/icons';
-import { Badge, Input } from '@signozhq/ui';
+import { Input } from '@signozhq/input';
+import { Badge } from '@signozhq/ui';
 import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import RolesSelect from 'components/RolesSelect';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';

frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx

@@ -1,6 +1,8 @@
 import { useQueryClient } from 'react-query';
+import { Button } from '@signozhq/button';
+import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { Trash2, X } from '@signozhq/icons';
-import { Button, DialogFooter, DialogWrapper, toast } from '@signozhq/ui';
+import { toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	getListServiceAccountKeysQueryKey,

frontend/src/components/ServiceAccountDrawer/SaveErrorItem.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
+import { Button } from '@signozhq/button';
 import { Color } from '@signozhq/design-tokens';
 import { ChevronDown, ChevronUp, CircleAlert, RotateCw } from '@signozhq/icons';
-import { Button } from '@signozhq/ui';
 import ErrorContent from 'components/ErrorModal/components/ErrorContent';
 import APIError from 'types/api/error';
 
@@ -42,7 +42,7 @@ function SaveErrorItem({
 					<Button
 						type="button"
 						aria-label="Retry"
-						size="sm"
+						size="xs"
 						onClick={async (e): Promise<void> => {
 							e.stopPropagation();
 							setIsRetrying(true);

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.styles.scss

@@ -5,21 +5,31 @@
 		margin-left: var(--margin-2);
 	}
 
+	&__layout {
+		display: flex;
+		flex-direction: column;
+		height: calc(100vh - 48px);
+	}
+
 	&__tabs {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
+		padding: var(--padding-3) var(--padding-4) var(--padding-2) var(--padding-4);
 		flex-shrink: 0;
 	}
 
 	&__tab-group {
 		[data-slot='toggle-group'] {
+			height: 32px;
 			border-radius: 2px;
+			border: 1px solid var(--l1-border);
 			background: var(--l2-background);
 			gap: 0;
 		}
 
 		[data-slot='toggle-group-item'] {
+			height: 32px;
 			border-radius: 0;
 			border-left: 1px solid var(--l1-border);
 			background: transparent;
@@ -30,7 +40,6 @@
 			padding: 0 var(--padding-7);
 			gap: var(--spacing-3);
 			box-shadow: none;
-			border: none;
 
 			&:first-child {
 				border-left: none;
@@ -79,7 +88,7 @@
 	&__body {
 		flex: 1;
 		overflow-y: auto;
-		padding-top: var(--padding-5);
+		padding: var(--padding-5) var(--padding-4);
 		display: flex;
 		flex-direction: column;
 		gap: var(--spacing-8);
@@ -103,11 +112,14 @@
 	}
 
 	&__footer {
+		height: 56px;
 		flex-shrink: 0;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		width: 100%;
+		padding: 0 var(--padding-4);
+		border-top: 1px solid var(--secondary);
+		background: var(--card);
 	}
 
 	&__keys-pagination {

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

@@ -1,13 +1,10 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQueryClient } from 'react-query';
+import { Button } from '@signozhq/button';
+import { DrawerWrapper } from '@signozhq/drawer';
 import { Key, LayoutGrid, Plus, Trash2, X } from '@signozhq/icons';
-import {
-	Button,
-	DrawerWrapper,
-	toast,
-	ToggleGroup,
-	ToggleGroupItem,
-} from '@signozhq/ui';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
+import { toast } from '@signozhq/ui';
 import { Pagination, Skeleton } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
@@ -382,7 +379,7 @@ function ServiceAccountDrawer({
 				<ToggleGroup
 					type="single"
 					value={activeTab}
-					onChange={(val): void => {
+					onValueChange={(val): void => {
 						if (val) {
 							setActiveTab(val as ServiceAccountDrawerTab);
 							if (val !== ServiceAccountDrawerTab.Keys) {
@@ -474,71 +471,69 @@ function ServiceAccountDrawer({
 					</>
 				)}
 			</div>
-		</div>
-	);
 
-	const footer = (
-		<div className="sa-drawer__footer">
-			{activeTab === ServiceAccountDrawerTab.Keys ? (
-				<Pagination
-					current={keysPage}
-					pageSize={PAGE_SIZE}
-					total={keys.length}
-					showTotal={(total: number, range: number[]): JSX.Element => (
-						<>
-							<span className="sa-drawer__pagination-range">
-								{range[0]} &#8212; {range[1]}
-							</span>
-							<span className="sa-drawer__pagination-total"> of {total}</span>
-						</>
-					)}
-					showSizeChanger={false}
-					hideOnSinglePage
-					onChange={(page): void => {
-						void setKeysPage(page);
-					}}
-					className="sa-drawer__keys-pagination"
-				/>
-			) : (
-				<>
-					{!isDeleted && (
-						<Button
-							variant="ghost"
-							color="destructive"
-							className="sa-drawer__footer-btn"
-							onClick={(): void => {
-								setIsDeleteOpen(true);
-							}}
-						>
-							<Trash2 size={12} />
-							Delete Service Account
-						</Button>
-					)}
-					{!isDeleted && (
-						<div className="sa-drawer__footer-right">
+			<div className="sa-drawer__footer">
+				{activeTab === ServiceAccountDrawerTab.Keys ? (
+					<Pagination
+						current={keysPage}
+						pageSize={PAGE_SIZE}
+						total={keys.length}
+						showTotal={(total: number, range: number[]): JSX.Element => (
+							<>
+								<span className="sa-drawer__pagination-range">
+									{range[0]} &#8212; {range[1]}
+								</span>
+								<span className="sa-drawer__pagination-total"> of {total}</span>
+							</>
+						)}
+						showSizeChanger={false}
+						hideOnSinglePage
+						onChange={(page): void => {
+							void setKeysPage(page);
+						}}
+						className="sa-drawer__keys-pagination"
+					/>
+				) : (
+					<>
+						{!isDeleted && (
 							<Button
-								variant="solid"
-								color="secondary"
-								size="sm"
-								onClick={handleClose}
+								variant="ghost"
+								color="destructive"
+								className="sa-drawer__footer-btn"
+								onClick={(): void => {
+									setIsDeleteOpen(true);
+								}}
 							>
-								<X size={14} />
-								Cancel
+								<Trash2 size={12} />
+								Delete Service Account
 							</Button>
-							<Button
-								variant="solid"
-								color="primary"
-								size="sm"
-								loading={isSaving}
-								disabled={!isDirty}
-								onClick={handleSave}
-							>
-								Save Changes
-							</Button>
-						</div>
-					)}
-				</>
-			)}
+						)}
+						{!isDeleted && (
+							<div className="sa-drawer__footer-right">
+								<Button
+									variant="solid"
+									color="secondary"
+									size="sm"
+									onClick={handleClose}
+								>
+									<X size={14} />
+									Cancel
+								</Button>
+								<Button
+									variant="solid"
+									color="primary"
+									size="sm"
+									loading={isSaving}
+									disabled={!isDirty}
+									onClick={handleSave}
+								>
+									Save Changes
+								</Button>
+							</div>
+						)}
+					</>
+				)}
+			</div>
 		</div>
 	);
 
@@ -552,15 +547,14 @@ function ServiceAccountDrawer({
 					}
 				}}
 				direction="right"
+				type="panel"
 				showCloseButton
 				showOverlay={false}
-				title="Service Account Details"
+				allowOutsideClick
+				header={{ title: 'Service Account Details' }}
+				content={drawerContent}
 				className="sa-drawer"
-				width="wide"
-				footer={footer}
-			>
-				{drawerContent}
-			</DrawerWrapper>
+			/>
 
 			<DeleteAccountModal />
 

frontend/src/components/ServiceAccountDrawer/__tests__/AddKeyModal.test.tsx

@@ -1,13 +1,7 @@
 import { toast } from '@signozhq/ui';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import {
-	render,
-	screen,
-	userEvent,
-	waitFor,
-	waitForElementToBeRemoved,
-} from 'tests/test-utils';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import AddKeyModal from '../AddKeyModal';
 
@@ -134,9 +128,11 @@ describe('AddKeyModal', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		const dialog = await screen.findByRole('dialog', { name: /Add a New Key/i });
+		await screen.findByRole('dialog', { name: /Add a New Key/i });
 		await user.click(screen.getByRole('button', { name: /Cancel/i }));
 
-		await waitForElementToBeRemoved(dialog);
+		expect(
+			screen.queryByRole('dialog', { name: /Add a New Key/i }),
+		).not.toBeInTheDocument();
 	});
 });

frontend/src/components/ServiceAccountDrawer/__tests__/EditKeyModal.test.tsx

@@ -29,14 +29,9 @@ function renderModal(
 		account: 'sa-1',
 		'edit-key': 'key-1',
 	},
-	onUrlUpdate?: jest.Mock,
 ): ReturnType<typeof render> {
 	return render(
-		<NuqsTestingAdapter
-			searchParams={searchParams}
-			hasMemory
-			onUrlUpdate={onUrlUpdate}
-		>
+		<NuqsTestingAdapter searchParams={searchParams} hasMemory>
 			<EditKeyModal keyItem={keyItem} />
 		</NuqsTestingAdapter>,
 	);
@@ -102,31 +97,14 @@ describe('EditKeyModal (URL-controlled)', () => {
 
 	it('cancel clears edit-key param and closes modal', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const onUrlUpdate = jest.fn();
-		renderModal(mockKey, undefined, onUrlUpdate);
+		renderModal();
 
 		await screen.findByDisplayValue('Original Key Name');
 		await user.click(screen.getByRole('button', { name: /Cancel/i }));
 
-		await waitFor(() => {
-			expect(onUrlUpdate).toHaveBeenCalled();
-		});
-
-		const latestUrlUpdate =
-			onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1]?.[0];
-		expect(latestUrlUpdate).toEqual(
-			expect.objectContaining({
-				queryString: expect.any(String),
-			}),
-		);
-		expect(latestUrlUpdate.queryString).toContain('account=sa-1');
-		expect(latestUrlUpdate.queryString).not.toContain('edit-key=');
-
-		await waitFor(() => {
-			expect(
-				screen.queryByRole('dialog', { name: /Edit Key Details/i }),
-			).not.toBeInTheDocument();
-		});
+		expect(
+			screen.queryByRole('dialog', { name: /Edit Key Details/i }),
+		).not.toBeInTheDocument();
 	});
 
 	it('revoke flow: clicking Revoke Key shows confirmation inside same dialog', async () => {

frontend/src/components/ServiceAccountDrawer/__tests__/ServiceAccountDrawer.test.tsx

@@ -6,15 +6,18 @@ import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import ServiceAccountDrawer from '../ServiceAccountDrawer';
 
-jest.mock('@signozhq/ui', () => ({
-	...jest.requireActual('@signozhq/ui'),
+jest.mock('@signozhq/drawer', () => ({
 	DrawerWrapper: ({
-		children,
+		content,
 		open,
 	}: {
-		children?: ReactNode;
+		content?: ReactNode;
 		open: boolean;
-	}): JSX.Element | null => (open ? <div>{children}</div> : null),
+	}): JSX.Element | null => (open ? <div>{content}</div> : null),
+}));
+
+jest.mock('@signozhq/ui', () => ({
+	...jest.requireActual('@signozhq/ui'),
 	toast: { success: jest.fn(), error: jest.fn() },
 }));
 

frontend/src/components/ServiceAccountsTable/ServiceAccountsTable.styles.scss

@@ -21,7 +21,7 @@
 	.ant-table-thead {
 		> tr > th,
 		> tr > td {
-			background: var(--l1-background);
+			background: var(--background);
 			font-size: var(--paragraph-small-600-font-size);
 			font-weight: var(--paragraph-small-600-font-weight);
 			line-height: var(--paragraph-small-600-line-height);

frontend/src/components/ShiftOverlay/shiftOverlay.scss

@@ -11,7 +11,7 @@
 		gap: 20px;
 		padding: 8px 12px;
 
-		background: var(--l1-background);
+		background: var(--background);
 		color: var(--l2-foreground);
 
 		border-radius: 8px;

frontend/src/components/WarningPopover/WarningPopover.styles.scss

@@ -1,11 +1,11 @@
 .warning-content {
 	display: flex;
 	flex-direction: column;
-
 	// === SECTION: Summary (Top)
 	&__summary-section {
 		display: flex;
 		flex-direction: column;
+		border-bottom: 1px solid var(--l1-border);
 	}
 
 	&__summary {

frontend/src/components/cmdKPalette/__test__/cmdkPalette.test.tsx

@@ -161,11 +161,10 @@ describe('CmdKPalette', () => {
 	});
 
 	test('clicking a navigation item calls history.push with correct route', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CmdKPalette userRole="ADMIN" />);
 
 		const homeItem = screen.getByText(HOME_LABEL);
-		await user.click(homeItem);
+		await userEvent.click(homeItem);
 
 		expect(history.push).toHaveBeenCalledWith(ROUTES.HOME);
 	});
@@ -195,11 +194,10 @@ describe('CmdKPalette', () => {
 	});
 
 	test('closing the palette via handleInvoke sets open to false', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CmdKPalette userRole="ADMIN" />);
 
 		const dashItem = screen.getByText('Go to Dashboards');
-		await user.click(dashItem);
+		await userEvent.click(dashItem);
 
 		// last call from handleInvoke should set open to false
 		expect(mockSetOpen).toHaveBeenCalledWith(false);

frontend/src/components/cmdKPalette/cmdKPalette.scss

@@ -41,7 +41,7 @@
 
 .cmdk-item-light:hover {
 	cursor: pointer;
-	background-color: var(--l1-background) !important;
+	background-color: var(--background) !important;
 }
 
 .cmdk-item-light[data-selected='true'] {

frontend/src/components/cmdKPalette/cmdKPalette.tsx

@@ -7,7 +7,7 @@ import {
 	CommandItem,
 	CommandList,
 	CommandShortcut,
-} from '@signozhq/ui';
+} from '@signozhq/command';
 import logEvent from 'api/common/logEvent';
 import { useThemeMode } from 'hooks/useDarkMode';
 import history from 'lib/history';

frontend/src/container/AppLayout/AppLayout.styles.scss

@@ -50,7 +50,6 @@
 	.app-content {
 		width: calc(100% - 54px); // width of the sidebar
 		z-index: 0;
-		background: var(--l1-background);
 
 		margin: 0 auto;
 
@@ -140,6 +139,22 @@
 	}
 }
 
+.isDarkMode {
+	.app-layout {
+		.app-content {
+			background: var(--background);
+		}
+	}
+}
+
+.isLightMode {
+	.app-layout {
+		.app-content {
+			background: var(--card);
+		}
+	}
+}
+
 .trial-expiry-banner,
 .slow-api-warning-banner,
 .workspace-restricted-banner {

frontend/src/container/CreateAlertV2/AlertCondition/styles.scss

@@ -82,7 +82,7 @@
 
 			.sentence-text {
 				color: var(--l2-foreground);
-				font-size: 13px;
+				font-size: 14px;
 				line-height: 1.5;
 				display: flex;
 				align-items: center;

frontend/src/container/CreateAlertV2/CreateAlertHeader/CreateAlertHeader.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo } from 'react';
-import { Button, Input } from '@signozhq/ui';
+import { Button } from 'antd';
 import logEvent from 'api/common/logEvent';
 import classNames from 'classnames';
 import { QueryParams } from 'constants/query';
@@ -59,18 +59,15 @@ function CreateAlertHeader(): JSX.Element {
 				<div className="alert-header__tab-bar">
 					<div className="alert-header__tab">New Alert Rule</div>
 					<Button
-						prefix={<RotateCcw size={12} />}
+						icon={<RotateCcw size={16} />}
 						onClick={handleSwitchToClassicExperience}
-						variant="solid"
-						color="secondary"
-						size="sm"
 					>
 						Switch to Classic Experience
 					</Button>
 				</div>
 			)}
 			<div className="alert-header__content">
-				<Input
+				<input
 					type="text"
 					value={alertState.name}
 					onChange={(e): void =>

frontend/src/container/CreateAlertV2/CreateAlertHeader/styles.scss

@@ -2,7 +2,6 @@
 	background-color: var(--l1-background);
 	font-family: inherit;
 	color: var(--l1-foreground);
-	padding: 12px 16px;
 
 	&__tab-bar {
 		display: flex;
@@ -15,20 +14,23 @@
 		display: flex;
 		align-items: center;
 		background-color: var(--l1-background);
+		padding: 0 12px;
 		height: 32px;
 		font-size: 13px;
 		color: var(--l1-foreground);
+		margin-left: 12px;
+		margin-top: 12px;
 	}
 
 	&__tab::before {
 		content: '•';
 		margin-right: 6px;
-		font-size: 13px;
+		font-size: 14px;
 		color: var(--l3-foreground);
 	}
 
 	&__content {
-		padding: 8px 0;
+		padding: 16px;
 		background: var(--l1-background);
 		display: flex;
 		flex-direction: column;
@@ -38,14 +40,22 @@
 	}
 
 	&__input.title {
+		font-size: 18px;
+		font-weight: 500;
 		background-color: transparent;
 		color: var(--l1-foreground);
 		width: 100%;
 		min-width: 300px;
 	}
 
+	&__input:focus,
+	&__input:active {
+		border: none;
+		outline: none;
+	}
+
 	&__input.description {
-		font-size: 13px;
+		font-size: 14px;
 		background-color: transparent;
 		color: var(--l2-foreground);
 	}

frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptionItem/styles.scss

@@ -13,7 +13,7 @@
 		.advanced-option-item-title {
 			color: var(--l2-foreground);
 			font-family: Inter;
-			font-size: 13px;
+			font-size: 14px;
 			font-weight: 500;
 			display: flex;
 			align-items: center;
@@ -23,7 +23,7 @@
 		.advanced-option-item-description {
 			color: var(--muted-foreground);
 			font-family: Inter;
-			font-size: 13px;
+			font-size: 14px;
 			font-weight: 400;
 		}
 

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/styles.scss

@@ -22,7 +22,7 @@
 				color: var(--l2-foreground);
 				font-weight: 500;
 				margin: 0 4px;
-				font-size: 13px;
+				font-size: 14px;
 			}
 		}
 
@@ -30,7 +30,7 @@
 			.ant-btn {
 				border: 1px solid var(--l1-border);
 				color: var(--l2-foreground);
-				font-size: 13px;
+				font-size: 14px;
 				display: flex;
 				align-items: center;
 				gap: 8px;
@@ -48,7 +48,7 @@
 
 	.evaluation-cadence-details-title {
 		color: var(--l1-foreground);
-		font-size: 13px;
+		font-size: 14px;
 		font-weight: 500;
 		padding-left: 16px;
 		padding-top: 16px;
@@ -138,7 +138,7 @@
 					border-radius: 4px;
 					color: var(--l2-foreground) !important;
 					font-family: 'Space Mono';
-					font-size: 13px;
+					font-size: 14px;
 
 					&::placeholder {
 						font-family: 'Space Mono';
@@ -202,7 +202,7 @@
 				gap: 8px;
 				height: 100%;
 				color: var(--l1-foreground);
-				font-size: 13px;
+				font-size: 14px;
 			}
 
 			.schedule-preview {
@@ -225,7 +225,7 @@
 
 					.schedule-preview-title {
 						color: var(--l2-foreground);
-						font-size: 13px;
+						font-size: 14px;
 						font-weight: 500;
 					}
 				}
@@ -281,7 +281,7 @@
 
 							.schedule-preview-date {
 								color: var(--l2-foreground);
-								font-size: 13px;
+								font-size: 14px;
 								font-weight: 400;
 								white-space: nowrap;
 							}
@@ -396,7 +396,7 @@
 
 						.schedule-preview-title {
 							color: var(--l1-foreground);
-							font-size: 13px;
+							font-size: 14px;
 							font-weight: 500;
 						}
 					}
@@ -422,7 +422,7 @@
 							.schedule-preview-content {
 								.schedule-preview-date {
 									color: var(--l1-foreground);
-									font-size: 13px;
+									font-size: 14px;
 									font-weight: 500;
 								}
 

frontend/src/container/CreateAlertV2/EvaluationSettings/TimeInput/TimeInput.scss

@@ -10,7 +10,7 @@
 		border: 1px solid var(--l1-border);
 		color: var(--l1-foreground);
 		font-family: 'Space Mono', monospace;
-		font-size: 13px;
+		font-size: 14px;
 		font-weight: 600;
 		text-align: center;
 		border-radius: 4px;
@@ -43,7 +43,7 @@
 
 	.time-input-separator {
 		color: var(--l2-foreground);
-		font-size: 13px;
+		font-size: 14px;
 		font-weight: 600;
 		margin: 0 4px;
 		user-select: none;

frontend/src/container/CreateAlertV2/EvaluationSettings/styles.scss

@@ -13,7 +13,7 @@
 
 		.ant-typography {
 			color: var(--l2-foreground);
-			font-size: 13px;
+			font-size: 14px;
 		}
 
 		.evaluate-alert-conditions-separator {
@@ -175,7 +175,7 @@
 				background-color: var(--l3-background);
 				border: 1px solid var(--l1-border);
 				color: var(--l2-foreground);
-				font-size: 13px;
+				font-size: 14px;
 			}
 		}
 	}

frontend/src/container/CreateAlertV2/Footer/Footer.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from 'react';
-import { Button, toast } from '@signozhq/ui';
-import { Tooltip } from 'antd';
+import { toast } from '@signozhq/ui';
+import { Button, Tooltip, Typography } from 'antd';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { Check, Loader, Send, X } from 'lucide-react';
@@ -147,8 +147,7 @@ function Footer(): JSX.Element {
 	const saveAlertButton = useMemo(() => {
 		let button = (
 			<Button
-				variant="solid"
-				color="primary"
+				type="primary"
 				onClick={handleSaveAlert}
 				disabled={disableButtons || Boolean(alertValidationMessage)}
 			>
@@ -157,7 +156,7 @@ function Footer(): JSX.Element {
 				) : (
 					<Check size={14} />
 				)}
-				Save Alert Rule
+				<Typography.Text>Save Alert Rule</Typography.Text>
 			</Button>
 		);
 		if (alertValidationMessage) {
@@ -175,13 +174,12 @@ function Footer(): JSX.Element {
 	const testAlertButton = useMemo(() => {
 		let button = (
 			<Button
-				variant="solid"
-				color="secondary"
+				type="default"
 				onClick={handleTestNotification}
 				disabled={disableButtons || Boolean(alertValidationMessage)}
 			>
 				{isTestingAlertRule ? <Loader size={14} /> : <Send size={14} />}
-				Test Notification
+				<Typography.Text>Test Notification</Typography.Text>
 			</Button>
 		);
 		if (alertValidationMessage) {
@@ -197,12 +195,7 @@ function Footer(): JSX.Element {
 
 	return (
 		<div className="create-alert-v2-footer">
-			<Button
-				variant="solid"
-				color="secondary"
-				onClick={handleDiscard}
-				disabled={disableButtons}
-			>
+			<Button type="default" onClick={handleDiscard} disabled={disableButtons}>
 				<X size={14} /> Discard
 			</Button>
 			<div className="button-group">

frontend/src/container/CreateAlertV2/Footer/styles.scss

@@ -4,8 +4,9 @@
 	left: 63px;
 	right: 0;
 	background-color: var(--l1-background);
+	height: 70px;
 	border-top: 1px solid var(--l1-border);
-	padding: 12px;
+	padding: 16px 24px;
 	z-index: 1000;
 	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
 	display: flex;

frontend/src/container/CreateAlertV2/NotificationSettings/styles.scss

@@ -29,14 +29,14 @@
 					align-items: center;
 					color: var(--l1-foreground);
 					font-family: Inter;
-					font-size: 13px;
+					font-size: 14px;
 					font-weight: 500;
 				}
 
 				.notification-message-header-description {
 					color: var(--l2-foreground);
 					font-family: Inter;
-					font-size: 13px;
+					font-size: 14px;
 					font-weight: 400;
 				}
 			}
@@ -59,7 +59,7 @@
 			border-radius: 4px;
 			color: var(--l2-foreground) !important;
 			font-family: Inter;
-			font-size: 13px;
+			font-size: 14px;
 		}
 	}
 
@@ -130,7 +130,7 @@
 				.multiple-notifications-header-title {
 					color: var(--l1-foreground);
 					font-family: Inter;
-					font-size: 13px;
+					font-size: 14px;
 					font-weight: 500;
 					display: flex;
 					align-items: center;
@@ -140,7 +140,7 @@
 				.multiple-notifications-header-description {
 					color: var(--l2-foreground);
 					font-family: Inter;
-					font-size: 13px;
+					font-size: 14px;
 					font-weight: 400;
 				}
 			}
@@ -179,14 +179,14 @@
 					.advanced-option-item-title {
 						color: var(--l2-foreground);
 						font-family: Inter;
-						font-size: 13px;
+						font-size: 14px;
 						font-weight: 500;
 					}
 
 					.advanced-option-item-description {
 						color: var(--muted-foreground);
 						font-family: Inter;
-						font-size: 13px;
+						font-size: 14px;
 						font-weight: 400;
 					}
 				}
@@ -206,7 +206,7 @@
 				flex-wrap: nowrap;
 
 				.ant-typography {
-					font-size: 13px;
+					font-size: 14px;
 					font-weight: 400;
 					color: var(--l2-foreground);
 					white-space: nowrap;

frontend/src/container/CreateAlertV2/QuerySection/styles.scss

@@ -16,8 +16,8 @@
 			margin-bottom: -1px;
 
 			.prom-ql-icon {
-				height: 13px;
-				width: 13px;
+				height: 14px;
+				width: 14px;
 			}
 
 			.explorer-view-option {

frontend/src/container/CreateAlertV2/Stepper/styles.scss

@@ -17,7 +17,7 @@
 	align-items: center;
 	justify-content: center;
 	font-weight: 600;
-	font-size: 13px;
+	font-size: 14px;
 	flex-shrink: 0;
 	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 }

frontend/src/container/CustomDomainSettings/CustomDomainEditModal.tsx

@@ -1,7 +1,9 @@
 import { useEffect, useState } from 'react';
+import { Button } from '@signozhq/button';
 import { Color } from '@signozhq/design-tokens';
+import { DialogWrapper } from '@signozhq/dialog';
 import { CircleAlert, CircleCheck, LoaderCircle } from '@signozhq/icons';
-import { Button, DialogWrapper, Input } from '@signozhq/ui';
+import { Input } from '@signozhq/input';
 import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';

frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx

@@ -1,4 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
+import { Button } from '@signozhq/button';
+import { Callout } from '@signozhq/callout';
 import {
 	Check,
 	ChevronDown,
@@ -9,7 +11,7 @@ import {
 	SolidAlertCircle,
 	X,
 } from '@signozhq/icons';
-import { Button, Callout, toast } from '@signozhq/ui';
+import { toast } from '@signozhq/ui';
 import { Dropdown, Skeleton } from 'antd';
 import {
 	RenderErrorResponseDTO,
@@ -42,9 +44,9 @@ function DomainUpdateToast({
 			<div className="custom-domain-toast-actions">
 				<Button
 					variant="ghost"
-					size="sm"
+					size="xs"
 					className="custom-domain-toast-visit-btn"
-					suffix={<ExternalLink size={12} />}
+					suffixIcon={<ExternalLink size={12} />}
 					onClick={(): void => {
 						window.open(url, '_blank', 'noopener,noreferrer');
 					}}
@@ -59,7 +61,7 @@ function DomainUpdateToast({
 						toast.dismiss(toastId);
 					}}
 					aria-label="Dismiss"
-					prefix={<X size={14} />}
+					prefixIcon={<X size={14} />}
 				/>
 			</div>
 		</div>
@@ -244,7 +246,7 @@ export default function CustomDomainSettings(): JSX.Element {
 						>
 							<Button
 								type="button"
-								size="sm"
+								size="xs"
 								className="workspace-url-trigger"
 								disabled={isFetchingHosts}
 							>
@@ -264,7 +266,7 @@ export default function CustomDomainSettings(): JSX.Element {
 					variant="solid"
 					size="sm"
 					className="custom-domain-edit-button"
-					prefix={<FilePenLine size={12} />}
+					prefixIcon={<FilePenLine size={12} />}
 					disabled={isFetchingHosts || isPollingEnabled}
 					onClick={(): void => setIsEditModalOpen(true)}
 				>
@@ -279,7 +281,7 @@ export default function CustomDomainSettings(): JSX.Element {
 					className="custom-domain-callout"
 					size="small"
 					icon={<SolidAlertCircle size={13} color="primary" />}
-					title={`Updating your URL to ⎯ ${customDomainSubdomain}.${dnsSuffix}. This may take a few mins.`}
+					message={`Updating your URL to ⎯ ${customDomainSubdomain}.${dnsSuffix}. This may take a few mins.`}
 				/>
 			)}
 

frontend/src/container/DashboardContainer/DashboardSettings/PublicDashboard/index.tsx

@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useMutation } from 'react-query';
 import { useCopyToClipboard } from 'react-use';
-import { Checkbox, toast } from '@signozhq/ui';
+import { Checkbox } from '@signozhq/checkbox';
+import { toast } from '@signozhq/ui';
 import { Button, Select, Typography } from 'antd';
 import createPublicDashboardAPI from 'api/dashboard/public/createPublicDashboard';
 import revokePublicDashboardAccessAPI from 'api/dashboard/public/revokePublicDashboardAccess';
@@ -246,11 +247,10 @@ function PublicDashboardSetting(): JSX.Element {
 				<div className="timerange-enabled-checkbox">
 					<Checkbox
 						id="enable-time-range"
-						value={timeRangeEnabled}
-						onChange={handleTimeRangeEnabled}
-					>
-						Enable time range
-					</Checkbox>
+						checked={timeRangeEnabled}
+						onCheckedChange={handleTimeRangeEnabled}
+						labelName="Enable time range"
+					/>
 				</div>
 
 				<div className="default-time-range-select">

frontend/src/container/ForgotPassword/SuccessScreen.tsx

@@ -1,5 +1,5 @@
+import { Button } from '@signozhq/button';
 import { ArrowLeft, Mail } from '@signozhq/icons';
-import { Button } from '@signozhq/ui';
 
 interface SuccessScreenProps {
 	onBackToLogin: () => void;
@@ -28,7 +28,7 @@ function SuccessScreen({ onBackToLogin }: SuccessScreenProps): JSX.Element {
 						data-testid="back-to-login"
 						className="login-submit-btn"
 						onClick={onBackToLogin}
-						prefix={<ArrowLeft size={12} />}
+						prefixIcon={<ArrowLeft size={12} />}
 					>
 						Back to login
 					</Button>

frontend/src/container/ForgotPassword/index.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo } from 'react';
+import { Button } from '@signozhq/button';
 import { ArrowLeft, ArrowRight } from '@signozhq/icons';
-import { Button, Input } from '@signozhq/ui';
+import { Input } from '@signozhq/input';
 import { Form, Select } from 'antd';
 import { ErrorResponseHandlerForGeneratedAPIs } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import { useForgotPassword } from 'api/generated/services/users';
@@ -190,7 +191,7 @@ function ForgotPassword({
 						data-testid="forgot-password-back"
 						className="forgot-password-back-button"
 						onClick={handleBackToLogin}
-						prefix={<ArrowLeft size={12} />}
+						prefixIcon={<ArrowLeft size={12} />}
 					>
 						Back to login
 					</Button>
@@ -203,7 +204,7 @@ function ForgotPassword({
 						type="submit"
 						data-testid="forgot-password-submit"
 						className="login-submit-btn"
-						suffix={<ArrowRight size={12} />}
+						suffixIcon={<ArrowRight size={12} />}
 					>
 						{isLoading ? 'Sending...' : 'Send reset link'}
 					</Button>

frontend/src/container/GeneralSettings/GeneralSettings.tsx

@@ -3,8 +3,8 @@ import { useTranslation } from 'react-i18next';
 import { UseQueryResult } from 'react-query';
 import { useInterval } from 'react-use';
 import { LoadingOutlined } from '@ant-design/icons';
+import { Button } from '@signozhq/button';
 import { Compass, ScrollText } from '@signozhq/icons';
-import { Button } from '@signozhq/ui';
 import { Modal, Spin } from 'antd';
 import setRetentionApi from 'api/settings/setRetention';
 import setRetentionApiV2 from 'api/settings/setRetentionV2';

frontend/src/container/GeneralSettings/LicenseKeyRow/LicenseKeyRow.tsx

@@ -1,6 +1,7 @@
 import { useCopyToClipboard } from 'react-use';
+import { Button } from '@signozhq/button';
 import { Copy, KeyRound } from '@signozhq/icons';
-import { Button, toast } from '@signozhq/ui';
+import { toast } from '@signozhq/ui';
 import { useAppContext } from 'providers/App/App';
 import { getMaskedKey } from 'utils/maskedKey';
 
@@ -31,7 +32,7 @@ function LicenseKeyRow(): JSX.Element | null {
 				</code>
 				<Button
 					type="button"
-					size="sm"
+					size="xs"
 					aria-label="Copy license key"
 					data-testid="license-key-row-copy-btn"
 					className="license-key-row__copy-btn"

frontend/src/container/GeneralSettings/LicenseKeyRow/LicenseRowDismissibleCallout/LicenseRowDismissibleCallout.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
-import { Callout } from '@signozhq/ui';
+import { Callout } from '@signozhq/callout';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import { FeatureKeys } from 'constants/features';
@@ -44,38 +44,39 @@ function LicenseRowDismissibleCallout(): JSX.Element | null {
 			type="info"
 			size="small"
 			showIcon
-			action="dismissible"
-			onClick={handleDismissCallout}
+			dismissable
+			onClose={handleDismissCallout}
 			className="license-key-callout"
-		>
-			<div className="license-key-callout__description">
-				This is <strong>NOT</strong> your ingestion or Service account key.
-				{(hasServiceAccountsAccess || hasIngestionAccess) && (
-					<>
-						{' '}
-						Find your{' '}
-						{hasServiceAccountsAccess && (
-							<Link
-								to={ROUTES.SERVICE_ACCOUNTS_SETTINGS}
-								className="license-key-callout__link"
-							>
-								Service account here
-							</Link>
-						)}
-						{hasServiceAccountsAccess && hasIngestionAccess && ' and '}
-						{hasIngestionAccess && (
-							<Link
-								to={ROUTES.INGESTION_SETTINGS}
-								className="license-key-callout__link"
-							>
-								Ingestion key here
-							</Link>
-						)}
-						.
-					</>
-				)}
-			</div>
-		</Callout>
+			description={
+				<div className="license-key-callout__description">
+					This is <strong>NOT</strong> your ingestion or Service account key.
+					{(hasServiceAccountsAccess || hasIngestionAccess) && (
+						<>
+							{' '}
+							Find your{' '}
+							{hasServiceAccountsAccess && (
+								<Link
+									to={ROUTES.SERVICE_ACCOUNTS_SETTINGS}
+									className="license-key-callout__link"
+								>
+									Service account here
+								</Link>
+							)}
+							{hasServiceAccountsAccess && hasIngestionAccess && ' and '}
+							{hasIngestionAccess && (
+								<Link
+									to={ROUTES.INGESTION_SETTINGS}
+									className="license-key-callout__link"
+								>
+									Ingestion key here
+								</Link>
+							)}
+							.
+						</>
+					)}
+				</div>
+			}
+		/>
 	) : null;
 }
 

frontend/src/container/GeneralSettings/Retention.tsx

@@ -7,7 +7,7 @@ import {
 	useRef,
 	useState,
 } from 'react';
-import { Input as SignozInput } from '@signozhq/ui';
+import { Input as SignozInput } from '@signozhq/input';
 import { Col, Row, Select } from 'antd';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { find } from 'lodash-es';

frontend/src/container/GridCardLayout/GridCardLayout.styles.scss

@@ -68,8 +68,8 @@
 			gap: 4px;
 			border-radius: 4px 0px 0px 0px;
 			background: var(--bg-sakura-500);
-			color: var(--l1-foreground);
 			backdrop-filter: blur(6px);
+			color: var(--foreground);
 			font-family: 'Space Mono';
 			font-size: 12px;
 			font-style: normal;

frontend/src/container/Home/DataSourceInfo/DataSourceInfo.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { Button } from '@signozhq/ui';
+import { Button } from '@signozhq/button';
 import { Skeleton } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { useGetHosts } from 'api/generated/services/zeus';
@@ -81,9 +81,15 @@ function DataSourceInfo({
 								color="primary"
 								size="sm"
 								className="periscope-btn primary"
-								prefix={<img src={containerPlusUrl} alt="plus" />}
+								prefixIcon={<img src={containerPlusUrl} alt="plus" />}
 								onClick={handleConnect}
-								// TODO - Support tabindex, keyboard events - @H4ad
+								role="button"
+								tabIndex={0}
+								onKeyDown={(e): void => {
+									if (e.key === 'Enter') {
+										handleConnect();
+									}
+								}}
 							>
 								Connect Data Source
 							</Button>

frontend/src/container/Home/Home.styles.scss

@@ -6,7 +6,7 @@
 	height: 100%;
 	width: 100%;
 
-	background: color-mix(in srgb, var(--l1-background) 90%, transparent);
+	background: color-mix(in srgb, var(--background) 90%, transparent);
 
 	&::-webkit-scrollbar {
 		width: 0.3rem;
@@ -759,11 +759,12 @@
 }
 
 .welcome-checklist-popover {
-	padding: 12px 24px;
+	padding: 1rem 1.5rem;
+	background-color: var(--l2-background);
 	border-radius: 2px;
 	border: 1px solid var(--l2-border);
 	background: var(--l2-background);
-	color: var(--l2-foreground);
+	color: var(--l1-foreground);
 
 	.ant-popover-content {
 		border: none;
@@ -776,7 +777,7 @@
 
 	.home-checklist-container {
 		background-color: transparent !important;
-		width: 420px;
+		width: 400px;
 	}
 }
 

frontend/src/container/Home/Home.tsx

@@ -3,8 +3,8 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { useMutation, useQuery } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
 import { Compass, Dot, House, Plus, Wrench } from '@signozhq/icons';
-import { Button, PersistedAnnouncementBanner } from '@signozhq/ui';
-import { Popover } from 'antd';
+import { PersistedAnnouncementBanner } from '@signozhq/ui';
+import { Button, Popover } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { useGetMetricsOnboardingStatus } from 'api/generated/services/metrics';
 import listUserPreferences from 'api/v1/user/preferences/list';
@@ -317,9 +317,8 @@ export default function Home(): JSX.Element {
 									rootClassName="welcome-checklist-popover"
 								>
 									<Button
-										variant="solid"
-										color="secondary"
-										size="sm"
+										type="default"
+										size="small"
 										className="periscope-btn secondary welcome-checklist-btn"
 									>
 										<img
@@ -512,10 +511,9 @@ export default function Home(): JSX.Element {
 
 										<div className="section-actions">
 											<Button
-												variant="solid"
-												color="secondary"
+												type="default"
 												className="periscope-btn secondary"
-												prefix={<Wrench size={14} />}
+												icon={<Wrench size={14} />}
 												onClick={(e: React.MouseEvent): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Logs',
@@ -529,10 +527,9 @@ export default function Home(): JSX.Element {
 											</Button>
 
 											<Button
-												variant="solid"
-												color="secondary"
+												type="default"
 												className="periscope-btn secondary"
-												prefix={<Wrench size={14} />}
+												icon={<Wrench size={14} />}
 												onClick={(e: React.MouseEvent): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Traces',
@@ -546,10 +543,9 @@ export default function Home(): JSX.Element {
 											</Button>
 
 											<Button
-												variant="solid"
-												color="secondary"
+												type="default"
 												className="periscope-btn secondary"
-												prefix={<Wrench size={14} />}
+												icon={<Wrench size={14} />}
 												onClick={(e: React.MouseEvent): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Metrics',
@@ -585,10 +581,9 @@ export default function Home(): JSX.Element {
 
 										<div className="section-actions">
 											<Button
-												variant="solid"
-												color="secondary"
+												type="default"
 												className="periscope-btn secondary"
-												prefix={<Plus size={14} />}
+												icon={<Plus size={14} />}
 												onClick={(e: React.MouseEvent): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Dashboards',
@@ -630,10 +625,9 @@ export default function Home(): JSX.Element {
 
 										<div className="section-actions">
 											<Button
-												variant="solid"
-												color="secondary"
+												type="default"
 												className="periscope-btn secondary"
-												prefix={<Plus size={14} />}
+												icon={<Plus size={14} />}
 												onClick={(e: React.MouseEvent): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Alerts',
@@ -712,8 +706,7 @@ export default function Home(): JSX.Element {
 								<Card.Footer>
 									<div className="checklist-footer-container">
 										<Button
-											variant="link"
-											color="secondary"
+											type="link"
 											onClick={handleWillDoThisLater}
 											loading={updatingUserPreferences}
 										>

frontend/src/container/Home/HomeChecklist/HomeChecklist.styles.scss

@@ -130,7 +130,7 @@
 				height: 18px;
 				border-radius: 50%;
 				background-color: var(--l2-background);
-				border: 1px dashed var(--l2-border);
+				border: 1px dashed var(--l1-border);
 				color: var(--l2-background);
 				display: flex;
 				align-items: center;

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/HeroSection.style.scss

@@ -77,3 +77,7 @@
 		}
 	}
 }
+
+.integrations-select {
+	height: 44px;
+}

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/AccountActions.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom-v5-compat';
+import { Button } from '@signozhq/button';
 import { Color } from '@signozhq/design-tokens';
-import { Button } from '@signozhq/ui';
 import { Select, Skeleton } from 'antd';
 import { SelectProps } from 'antd/lib';
 import logEvent from 'api/common/logEvent';
@@ -70,7 +70,7 @@ function AccountActionsRenderer({
 						variant="link"
 						size="sm"
 						color="secondary"
-						prefix={<PencilLine size={14} />}
+						prefixIcon={<PencilLine size={14} />}
 						onClick={onAccountSettingsModalOpen}
 					>
 						Edit Account
@@ -81,7 +81,7 @@ function AccountActionsRenderer({
 						size="sm"
 						color="secondary"
 						onClick={onIntegrationModalOpen}
-						prefix={<Plus size={14} />}
+						prefixIcon={<Plus size={14} />}
 					>
 						Add New Account
 					</Button>
@@ -93,7 +93,7 @@ function AccountActionsRenderer({
 		<Button
 			variant="solid"
 			color="primary"
-			prefix={<Plug size={14} />}
+			prefixIcon={<Plug size={14} />}
 			onClick={onIntegrationModalOpen}
 			size="sm"
 		>

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/AccountSettingsModal.style.scss

@@ -12,6 +12,8 @@
 		flex-direction: column;
 		gap: 17px;
 		border-radius: 3px;
+		border: 1px solid var(--l1-border);
+		padding: 14px;
 
 		&-account-info {
 			&-connected-account-details {
@@ -82,11 +84,11 @@
 	}
 
 	&__footer {
+		padding: 16px;
 		display: flex;
 		flex-direction: row;
 		gap: 10px;
 		justify-content: space-between;
-		width: 100%;
 
 		&-close-button,
 		&-save-button {

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/AccountSettingsModal.tsx

@@ -1,6 +1,7 @@
 import { Dispatch, SetStateAction, useCallback } from 'react';
 import { useQueryClient } from 'react-query';
-import { Button, DrawerWrapper } from '@signozhq/ui';
+import { Button } from '@signozhq/button';
+import { DrawerWrapper } from '@signozhq/drawer';
 import { Form } from 'antd';
 import { invalidateListAccounts } from 'api/generated/services/cloudintegration';
 import { INTEGRATION_TYPES } from 'container/Integrations/constants';
@@ -104,6 +105,24 @@ function AccountSettingsModal({
 						/>
 					</div>
 				</div>
+
+				<div className="account-settings-modal__footer">
+					<RemoveIntegrationAccount
+						accountId={account?.id}
+						onRemoveIntegrationAccountSuccess={handleRemoveIntegrationAccountSuccess}
+					/>
+
+					<Button
+						variant="solid"
+						color="secondary"
+						disabled={isSaveDisabled}
+						onClick={handleSubmit}
+						loading={isLoading}
+						prefixIcon={<Save size={14} />}
+					>
+						Update Changes
+					</Button>
+				</div>
 			</Form>
 		);
 	}, [
@@ -128,39 +147,19 @@ function AccountSettingsModal({
 		[handleClose],
 	);
 
-	const footer = (
-		<div className="account-settings-modal__footer">
-			<RemoveIntegrationAccount
-				accountId={account?.id}
-				onRemoveIntegrationAccountSuccess={handleRemoveIntegrationAccountSuccess}
-			/>
-
-			<Button
-				variant="solid"
-				color="secondary"
-				disabled={isSaveDisabled}
-				onClick={handleSubmit}
-				loading={isLoading}
-				prefix={<Save size={14} />}
-			>
-				Update Changes
-			</Button>
-		</div>
-	);
-
 	return (
 		<DrawerWrapper
 			open={true}
+			type="panel"
 			className="account-settings-modal"
-			title="Account Settings"
+			header={{
+				title: 'Account Settings',
+			}}
 			direction="right"
 			showCloseButton
+			content={renderAccountDetails()}
 			onOpenChange={handleDrawerOpenChange}
-			width="wide"
-			footer={footer}
-		>
-			{renderAccountDetails()}
-		</DrawerWrapper>
+		/>
 	);
 }
 

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/CloudAccountSetupModal.style.scss

@@ -23,6 +23,11 @@
 		}
 	}
 
+	&__footer {
+		padding: 16px;
+		margin-bottom: 16px;
+	}
+
 	.account-setup-modal-footer {
 		&__confirm-button {
 			background: var(--primary-background);
@@ -50,17 +55,17 @@
 	}
 
 	.cloud-account-setup-form {
+		padding: 16px;
+
 		.disabled {
 			opacity: 0.4;
 		}
-
 		&,
 		&__content {
 			display: flex;
 			flex-direction: column;
-			gap: 24px;
+			gap: 38px;
 		}
-
 		&__alert {
 			&.ant-alert {
 				padding: 12px;

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/CloudAccountSetupModal.tsx

@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
+import { Button } from '@signozhq/button';
 import { Color } from '@signozhq/design-tokens';
-import { Button, DrawerWrapper } from '@signozhq/ui';
+import { DrawerWrapper } from '@signozhq/drawer';
 import { useIntegrationModal } from 'hooks/integration/aws/useIntegrationModal';
 import { SquareArrowOutUpRight } from 'lucide-react';
 
@@ -59,6 +60,25 @@ function CloudAccountSetupModal({
 					onConnectionTimeout={handleConnectionTimeout}
 					onConnectionError={handleConnectionError}
 				/>
+
+				<div className="cloud-account-setup-modal__footer">
+					<Button
+						variant="solid"
+						color="primary"
+						prefixIcon={
+							<SquareArrowOutUpRight size={17} color={Color.BG_VANILLA_100} />
+						}
+						onClick={handleSubmit}
+						disabled={
+							selectedRegions.length === 0 ||
+							isLoading ||
+							isGeneratingUrl ||
+							modalState === ModalStateEnum.WAITING
+						}
+					>
+						Launch Cloud Formation Template
+					</Button>
+				</div>
 			</div>
 		);
 	}, [
@@ -81,25 +101,6 @@ function CloudAccountSetupModal({
 		handleConnectionError,
 	]);
 
-	const footer = (
-		<div className="cloud-account-setup-modal__footer">
-			<Button
-				variant="solid"
-				color="primary"
-				prefix={<SquareArrowOutUpRight size={17} color={Color.BG_VANILLA_100} />}
-				onClick={handleSubmit}
-				disabled={
-					selectedRegions.length === 0 ||
-					isLoading ||
-					isGeneratingUrl ||
-					modalState === ModalStateEnum.WAITING
-				}
-			>
-				Launch Cloud Formation Template
-			</Button>
-		</div>
-	);
-
 	const getSelectedRegionsCount = useCallback(
 		(): number => selectedRegions.length,
 		[selectedRegions],
@@ -152,16 +153,16 @@ function CloudAccountSetupModal({
 	return (
 		<DrawerWrapper
 			open={true}
+			type="panel"
 			className="cloud-account-setup-modal"
+			content={renderContent()}
 			onOpenChange={handleDrawerOpenChange}
 			direction="right"
 			showCloseButton
-			title={modalConfig.title}
-			width="wide"
-			footer={footer}
-		>
-			{renderContent()}
-		</DrawerWrapper>
+			header={{
+				title: modalConfig.title,
+			}}
+		/>
 	);
 }
 

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/RemoveIntegrationAccount.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Button } from '@signozhq/ui';
+import { Button } from '@signozhq/button';
 import { Modal } from 'antd/lib';
 import logEvent from 'api/common/logEvent';
 import { useDisconnectAccount } from 'api/generated/services/cloudintegration';
@@ -61,7 +61,8 @@ function RemoveIntegrationAccount({
 			<Button
 				variant="solid"
 				color="destructive"
-				prefix={<Unlink size={14} />}
+				prefixIcon={<Unlink size={14} />}
+				size="sm"
 				onClick={handleDisconnect}
 				disabled={isRemoveIntegrationLoading}
 			>

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/ServiceDetails/ServiceDetails.tsx

@@ -1,7 +1,10 @@
 import { useCallback, useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
-import { Button, Switch, Tabs, toast } from '@signozhq/ui';
+import { Button } from '@signozhq/button';
+import Tabs from '@signozhq/tabs';
+import { toast } from '@signozhq/ui';
+import { Switch } from '@signozhq/ui';
 import { Skeleton } from 'antd';
 import logEvent from 'api/common/logEvent';
 import {
@@ -353,8 +356,8 @@ function ServiceDetails(): JSX.Element | null {
 									color="secondary"
 									onClick={handleDiscard}
 									disabled={isUpdatingServiceConfig}
-									size="sm"
-									prefix={<X size={14} />}
+									size="xs"
+									prefixIcon={<X size={14} />}
 									className="discard-btn"
 									type="button"
 								>
@@ -363,9 +366,9 @@ function ServiceDetails(): JSX.Element | null {
 								<Button
 									variant="solid"
 									color="primary"
-									size="sm"
+									size="xs"
 									className="save-btn"
-									prefix={<Save size={14} />}
+									prefixIcon={<Save size={14} />}
 									type="submit"
 									loading={isUpdatingServiceConfig}
 									disabled={isS3SyncBucketsMissing || isUpdatingServiceConfig}

frontend/src/container/Integrations/CloudIntegration/Header/Header.tsx

@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom';
-import { Button } from '@signozhq/ui';
+import { Button } from '@signozhq/button';
 import Breadcrumb from 'antd/es/breadcrumb';
 import ROUTES from 'constants/routes';
 import { IntegrationType } from 'container/Integrations/types';
@@ -41,7 +41,7 @@ function Header({ title }: { title: IntegrationType }): JSX.Element {
 							'_blank',
 						);
 					}}
-					prefix={<LifeBuoy size={12} />}
+					prefixIcon={<LifeBuoy size={12} />}
 				>
 					Get Help
 				</Button>

frontend/src/container/Integrations/IntegrationDetailPage/IntegrationDetailPage.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
+import { Button } from '@signozhq/button';
 import { Color } from '@signozhq/design-tokens';
-import { Button } from '@signozhq/ui';
 import { Flex, Skeleton, Typography } from 'antd';
 import ROUTES from 'constants/routes';
 import { useGetIntegration } from 'hooks/Integrations/useGetIntegration';
@@ -73,7 +73,7 @@ function IntegrationDetailPage(): JSX.Element {
 				<Button
 					variant="link"
 					color="secondary"
-					prefix={<ArrowLeft size={14} />}
+					prefixIcon={<ArrowLeft size={14} />}
 					className="all-integrations-btn"
 					onClick={(): void => {
 						history.push(ROUTES.INTEGRATIONS);
@@ -95,7 +95,7 @@ function IntegrationDetailPage(): JSX.Element {
 								variant="solid"
 								color="primary"
 								onClick={(): Promise<any> => refetch()}
-								prefix={<RotateCw size={14} />}
+								prefixIcon={<RotateCw size={14} />}
 							>
 								Retry
 							</Button>

frontend/src/container/Integrations/IntegrationsHeader/IntegrationsHeader.styles.scss

@@ -28,6 +28,15 @@
 		display: block;
 	}
 
+	.view-data-sources-btn {
+		gap: 8px;
+		padding: 6px 14px;
+		height: 32px;
+		font-size: 12px;
+		font-weight: 500;
+		white-space: nowrap;
+	}
+
 	.integrations-search-request-container {
 		display: flex;
 		align-items: center;
@@ -47,6 +56,7 @@
 		gap: 16px;
 
 		.request-integration-input {
+			width: 100%;
 			color: var(--l1-foreground);
 		}
 	}

frontend/src/container/Integrations/IntegrationsHeader/IntegrationsHeader.tsx

@@ -1,6 +1,9 @@
-import { ChangeEvent, KeyboardEvent, useState } from 'react';
+import { useState } from 'react';
 import { useHistory } from 'react-router-dom';
-import { Button, DialogWrapper, Input, toast } from '@signozhq/ui';
+import { Button } from '@signozhq/button';
+import { DialogWrapper } from '@signozhq/dialog';
+import { Input } from '@signozhq/input';
+import { toast } from '@signozhq/ui';
 import { Flex, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
@@ -86,15 +89,14 @@ function IntegrationsHeader(props: IntegrationsHeaderProps): JSX.Element {
 				<Input
 					placeholder="Search for an integration..."
 					value={searchQuery}
-					onChange={(e: ChangeEvent<HTMLInputElement>): void =>
-						onSearchChange(e.target.value)
-					}
+					onChange={(e): void => onSearchChange(e.target.value)}
 				/>
 				<Button
 					variant="solid"
 					color="secondary"
 					className="request-integration-btn"
-					prefix={<Cable size={14} />}
+					prefixIcon={<Cable size={14} />}
+					size="sm"
 					onClick={(): void => setIsRequestIntegrationDialogOpen(true)}
 				>
 					Request Integration
@@ -111,12 +113,13 @@ function IntegrationsHeader(props: IntegrationsHeaderProps): JSX.Element {
 							Which integration are you looking for?
 						</div>
 						<Input
+							className="request-integration-input"
 							placeholder="Enter integration name..."
 							value={requestedIntegrationName}
-							onChange={(e: ChangeEvent<HTMLInputElement>): void => {
+							onChange={(e): void => {
 								setRequestedIntegrationName(e.target.value);
 							}}
-							onKeyDown={(e: KeyboardEvent<HTMLInputElement>): void => {
+							onKeyDown={(e): void => {
 								if (e.key === 'Enter' && requestedIntegrationName?.trim().length > 0) {
 									handleRequestIntegrationSubmit();
 								}
@@ -129,7 +132,8 @@ function IntegrationsHeader(props: IntegrationsHeaderProps): JSX.Element {
 						<Button
 							variant="solid"
 							color="primary"
-							prefix={<Check size={14} />}
+							size="sm"
+							prefixIcon={<Check size={14} />}
 							onClick={handleRequestIntegrationSubmit}
 							loading={isSubmittingRequestForIntegration}
 							disabled={
@@ -146,7 +150,8 @@ function IntegrationsHeader(props: IntegrationsHeaderProps): JSX.Element {
 				{isGetStartedWithCloudAllowed && (
 					<Button
 						variant="solid"
-						color="primary"
+						color="secondary"
+						className="view-data-sources-btn"
 						onClick={(): void => history.push(ROUTES.GET_STARTED_WITH_CLOUD)}
 					>
 						<span>View 150+ Data Sources</span>

frontend/src/container/Licenses/Licenses.styles.scss

@@ -4,7 +4,7 @@
 
 	.licenses-page-header {
 		border-bottom: 1px solid var(--l1-border);
-		background: var(--l1-background);
+		background: color-mix(in srgb, var(--background) 70%, transparent);
 		backdrop-filter: blur(20px);
 
 		.licenses-page-header-title {

frontend/src/container/LogsExplorerList/ColumnView/ColumnView.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { ColumnDef, DataTable, Row } from '@signozhq/ui';
+import { ColumnDef, DataTable, Row } from '@signozhq/table';
 import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import LogStateIndicator from 'components/Logs/LogStateIndicator/LogStateIndicator';

frontend/src/container/LogsExplorerList/TanStackTableView/TanStackHeaderRow.tsx

@@ -6,7 +6,7 @@ import type {
 import { useMemo } from 'react';
 import { CloseOutlined, MoreOutlined } from '@ant-design/icons';
 import { useSortable } from '@dnd-kit/sortable';
-import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui';
+import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/popover';
 import { flexRender, Header as TanStackHeader } from '@tanstack/react-table';
 import { GripVertical } from 'lucide-react';
 

frontend/src/container/MembersSettings/MembersSettings.tsx

@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useHistory } from 'react-router-dom';
+import { Button } from '@signozhq/button';
 import { Check, ChevronDown, Plus } from '@signozhq/icons';
-import { Button, Input } from '@signozhq/ui';
+import { Input } from '@signozhq/input';
 import type { MenuProps } from 'antd';
 import { Dropdown } from 'antd';
 import { useListUsers } from 'api/generated/services/users';
@@ -178,6 +179,7 @@ function MembersSettings(): JSX.Element {
 					>
 						<Button
 							variant="solid"
+							size="sm"
 							color="secondary"
 							className="members-filter-trigger"
 						>
@@ -196,12 +198,14 @@ function MembersSettings(): JSX.Element {
 								setPage(1);
 							}}
 							className="members-search-input"
+							color="secondary"
 							name="members-search"
 						/>
 					</div>
 
 					<Button
 						variant="solid"
+						size="sm"
 						color="primary"
 						onClick={(): void => setIsInviteModalOpen(true)}
 					>

frontend/src/container/MeterExplorer/Explorer/Explorer.styles.scss

@@ -64,7 +64,7 @@
 			}
 
 			.selected-view {
-				background: var(--l1-background);
+				background: var(--background);
 			}
 		}
 

frontend/src/container/MySettings/LicenseSection/LicenseSection.tsx

@@ -1,5 +1,5 @@
 import { useCopyToClipboard } from 'react-use';
-import { Button } from '@signozhq/ui';
+import { Button } from '@signozhq/button';
 import { Typography } from 'antd';
 import { useNotifications } from 'hooks/useNotifications';
 import { Copy } from 'lucide-react';

frontend/src/container/NewWidget/LeftContainer/ExplorerColumnsRenderer.styles.scss

@@ -93,7 +93,7 @@
 	border: 1px solid color-mix(in srgb, var(--bg-robin-300) 12%, transparent);
 	border-radius: 6px;
 	padding: 0px;
-	background: var(--l1-background);
+	background: var(--background);
 	> input {
 		height: 32px;
 		padding: 0 6px;

frontend/src/container/NewWidget/RightContainer/Threshold/ShowCaseValue.styles.scss

@@ -4,7 +4,7 @@
 }
 
 .show-case-dark {
-	background-color: var(--l1-background);
+	background-color: var(--background);
 }
 
 .show-case-light {

frontend/src/container/NewWidget/RightContainer/components/DisconnectValuesSelector/DisconnectValuesModeToggle.tsx

@@ -1,4 +1,4 @@
-import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
 import { Typography } from 'antd';
 import { DisconnectedValuesMode } from 'lib/uPlotV2/config/types';
 
@@ -16,7 +16,7 @@ export default function DisconnectValuesModeToggle({
 			type="single"
 			value={value}
 			size="lg"
-			onChange={(newValue): void => {
+			onValueChange={(newValue): void => {
 				if (newValue) {
 					onChange(newValue as DisconnectedValuesMode);
 				}

frontend/src/container/NewWidget/RightContainer/components/FillModeSelector/FillModeSelector.tsx

@@ -1,4 +1,4 @@
-import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
 import { Typography } from 'antd';
 import { FillMode } from 'lib/uPlotV2/config/types';
 
@@ -19,14 +19,15 @@ export default function FillModeSelector({
 			<ToggleGroup
 				type="single"
 				value={value}
+				variant="outline"
 				size="lg"
-				onChange={(newValue): void => {
+				onValueChange={(newValue): void => {
 					if (newValue) {
 						onChange(newValue as FillMode);
 					}
 				}}
 			>
-				<ToggleGroupItem value={FillMode.None} aria-label="None">
+				<ToggleGroupItem value={FillMode.None} aria-label="None" title="None">
 					<svg
 						className="fill-mode-icon"
 						viewBox="0 0 48 48"
@@ -40,7 +41,7 @@ export default function FillModeSelector({
 					</svg>
 					<Typography.Text className="section-heading-small">None</Typography.Text>
 				</ToggleGroupItem>
-				<ToggleGroupItem value={FillMode.Solid} aria-label="Solid">
+				<ToggleGroupItem value={FillMode.Solid} aria-label="Solid" title="Solid">
 					<svg
 						className="fill-mode-icon"
 						viewBox="0 0 48 48"
@@ -54,7 +55,11 @@ export default function FillModeSelector({
 					</svg>
 					<Typography.Text className="section-heading-small">Solid</Typography.Text>
 				</ToggleGroupItem>
-				<ToggleGroupItem value={FillMode.Gradient} aria-label="Gradient">
+				<ToggleGroupItem
+					value={FillMode.Gradient}
+					aria-label="Gradient"
+					title="Gradient"
+				>
 					<svg
 						className="fill-mode-icon"
 						viewBox="0 0 48 48"