feat(typography): migrate to @signozhq/ui

cmd/authz.go

@@ -66,10 +66,9 @@ func runGenerateAuthz(_ context.Context) error {
 	registry := coretypes.NewRegistry()
 
 	allowedResources := map[string]bool{
-		coretypes.NewResourceRef(coretypes.ResourceServiceAccount).String():              true,
-		coretypes.NewResourceRef(coretypes.ResourceMetaResourcesServiceAccount).String(): true,
-		coretypes.NewResourceRef(coretypes.ResourceRole).String():                        true,
-		coretypes.NewResourceRef(coretypes.ResourceMetaResourcesRole).String():           true,
+		coretypes.NewResourceRef(coretypes.ResourceServiceAccount).String():    true,
+		coretypes.NewResourceRef(coretypes.ResourceRole).String():              true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourcesRole).String(): true,
 	}
 
 	allowedTypes := map[string]bool{}

docs/api/openapi.yml

@@ -9377,9 +9377,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - serviceaccount:list
+        - ADMIN
       - tokenizer:
-        - serviceaccount:list
+        - ADMIN
       summary: List service accounts
       tags:
       - serviceaccount
@@ -9439,9 +9439,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - serviceaccount:create
+        - ADMIN
       - tokenizer:
-        - serviceaccount:create
+        - ADMIN
       summary: Create service account
       tags:
       - serviceaccount
@@ -9489,9 +9489,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - serviceaccount:delete
+        - ADMIN
       - tokenizer:
-        - serviceaccount:delete
+        - ADMIN
       summary: Deletes a service account
       tags:
       - serviceaccount
@@ -9546,9 +9546,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - serviceaccount:read
+        - ADMIN
       - tokenizer:
-        - serviceaccount:read
+        - ADMIN
       summary: Gets a service account
       tags:
       - serviceaccount
@@ -9606,9 +9606,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - serviceaccount:update
+        - ADMIN
       - tokenizer:
-        - serviceaccount:update
+        - ADMIN
       summary: Updates a service account
       tags:
       - serviceaccount
@@ -9660,9 +9660,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - serviceaccount:read
+        - ADMIN
       - tokenizer:
-        - serviceaccount:read
+        - ADMIN
       summary: List service account keys
       tags:
       - serviceaccount
@@ -9728,9 +9728,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - serviceaccount:create
+        - ADMIN
       - tokenizer:
-        - serviceaccount:create
+        - ADMIN
       summary: Create a service account key
       tags:
       - serviceaccount
@@ -9783,9 +9783,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - serviceaccount:delete
+        - ADMIN
       - tokenizer:
-        - serviceaccount:delete
+        - ADMIN
       summary: Revoke a service account key
       tags:
       - serviceaccount
@@ -9848,9 +9848,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - serviceaccount:update
+        - ADMIN
       - tokenizer:
-        - serviceaccount:update
+        - ADMIN
       summary: Updates a service account key
       tags:
       - serviceaccount
@@ -9909,9 +9909,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - serviceaccount:read
+        - ADMIN
       - tokenizer:
-        - serviceaccount:read
+        - ADMIN
       summary: Gets service account roles
       tags:
       - serviceaccount
@@ -9971,11 +9971,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - serviceaccount:attach
-        - role:attach
+        - ADMIN
       - tokenizer:
-        - serviceaccount:attach
-        - role:attach
+        - ADMIN
       summary: Create service account role
       tags:
       - serviceaccount
@@ -10022,11 +10020,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - serviceaccount:attach
-        - role:attach
+        - ADMIN
       - tokenizer:
-        - serviceaccount:attach
-        - role:attach
+        - ADMIN
       summary: Delete service account role
       tags:
       - serviceaccount

docs/contributing/go/authz.md

@@ -1,171 +0,0 @@
-# Authorization (FGA)
-
-SigNoz uses OpenFGA for fine-grained authorization. Resources are modeled as FGA objects — the authz system checks whether a principal (user or service account) has a specific relation (read, update, delete, etc.) on a specific resource.
-
-This guide explains how to enable FGA for a new entity.
-
-## Overview
-
-Enabling FGA for an entity involves four steps:
-
-1. **Define the resource in `coretypes`** — Register the Kind, Resource, Type entries, and managed role transactions
-2. **Switch routes to the Check middleware** — Replace role-based middleware with resource-level FGA checks
-3. **Add a migration** — Backfill FGA tuples for existing organizations
-
-## Step 1: Define the resource in `coretypes`
-
-All FGA-managed entities are declared statically in the `pkg/types/coretypes/` package. You need to add entries in several registry files:
-
-### 1a. Add a Kind
-
-In `registry_kind.go`, add your kind to the `Kinds` slice and declare the variable:
-
-```go
-var Kinds = []Kind{
-    // ... existing kinds ...
-    KindMyEntity,
-}
-
-var (
-    // ... existing kinds ...
-    KindMyEntity = MustNewKind("my-entity")
-)
-```
-
-### 1b. Add Resources
-
-In `registry_resource.go`, add two resources — a `metaresource` (instance) and `metaresources` (collection):
-
-```go
-var Resources = []Resource{
-    // ... existing resources ...
-    ResourceMetaResourceMyEntity,
-    ResourceMetaResourcesMyEntity,
-}
-
-var (
-    // ... existing resources ...
-    ResourceMetaResourceMyEntity  = NewResourceMetaResource(KindMyEntity)
-    ResourceMetaResourcesMyEntity = NewResourceMetaResources(KindMyEntity)
-)
-```
-
-### 1c. Add managed role transactions
-
-In `registry_managed_role.go`, add the transactions for each managed role. Use the service account entries as a reference:
-
-```go
-var ManagedRoleToTransactions = map[string][]Transaction{
-    SigNozAdminRoleName: {
-        // ... existing admin transactions ...
-        // my-entity — admin full CRUD
-        {Verb: VerbRead, Object: *MustNewObject(ResourceRef{Type: TypeMetaResource, Kind: KindMyEntity}, WildCardSelectorString)},
-        {Verb: VerbUpdate, Object: *MustNewObject(ResourceRef{Type: TypeMetaResource, Kind: KindMyEntity}, WildCardSelectorString)},
-        {Verb: VerbDelete, Object: *MustNewObject(ResourceRef{Type: TypeMetaResource, Kind: KindMyEntity}, WildCardSelectorString)},
-        {Verb: VerbCreate, Object: *MustNewObject(ResourceRef{Type: TypeMetaResources, Kind: KindMyEntity}, WildCardSelectorString)},
-        {Verb: VerbList, Object: *MustNewObject(ResourceRef{Type: TypeMetaResources, Kind: KindMyEntity}, WildCardSelectorString)},
-    },
-    SigNozEditorRoleName: {
-        // ... existing editor transactions ...
-        // my-entity — editor read only
-        {Verb: VerbRead, Object: *MustNewObject(ResourceRef{Type: TypeMetaResource, Kind: KindMyEntity}, WildCardSelectorString)},
-        {Verb: VerbList, Object: *MustNewObject(ResourceRef{Type: TypeMetaResources, Kind: KindMyEntity}, WildCardSelectorString)},
-    },
-    SigNozViewerRoleName: {
-        // ... existing viewer transactions ...
-        // my-entity — viewer read only
-        {Verb: VerbRead, Object: *MustNewObject(ResourceRef{Type: TypeMetaResource, Kind: KindMyEntity}, WildCardSelectorString)},
-        {Verb: VerbList, Object: *MustNewObject(ResourceRef{Type: TypeMetaResources, Kind: KindMyEntity}, WildCardSelectorString)},
-    },
-}
-```
-
-The `authtypes.Registry` (which wraps `coretypes.Registry`) will automatically bridge these static definitions into operational `*authtypes.Transaction` instances at construction time.
-
-## Step 2: Switch routes to the Check middleware
-
-In your route file (e.g., `pkg/apiserver/signozapiserver/myentity.go`), replace `AdminAccess` / `EditAccess` / `ViewAccess` with the `Check` middleware:
-
-```go
-provider.authZ.Check(
-    handler,                                         // the HTTP handler func
-    authtypes.Relation{Verb: coretypes.VerbRead},    // the relation to check
-    coretypes.ResourceMetaResourceMyEntity,           // the coretypes.Resource
-    selectorCallback,                                 // extracts resource ID from the request
-    roles,                                            // role names for community edition fallback
-)
-```
-
-### Selector callbacks
-
-You need two callbacks — one for collection operations, one for instance operations:
-
-```go
-// For create/list — wildcard selector on the collection.
-func myEntityCollectionSelector(_ *http.Request, _ authtypes.Claims) ([]coretypes.Selector, error) {
-    return []coretypes.Selector{
-        coretypes.TypeMetaResources.MustSelector(coretypes.WildCardSelectorString),
-    }, nil
-}
-
-// For read/update/delete — specific instance ID + wildcard.
-func myEntityInstanceSelector(req *http.Request, _ authtypes.Claims) ([]coretypes.Selector, error) {
-    id := mux.Vars(req)["id"]
-    idSelector, err := coretypes.TypeMetaResource.Selector(id)
-    if err != nil {
-        return nil, err
-    }
-    return []coretypes.Selector{
-        idSelector,
-        coretypes.TypeMetaResource.MustSelector(coretypes.WildCardSelectorString),
-    }, nil
-}
-```
-
-The instance callback includes a wildcard selector so that roles with wildcard permission (`*`) also match. Use `Type.Selector()` (not `MustSelector`) for user-supplied path parameters to avoid panics on malformed input.
-
-### Role fallback
-
-The `roles` parameter is used by the **community edition**, where `CheckWithTupleCreation` only checks role membership (ignoring resource selectors). Pass the role names that should have access:
-
-```go
-var myEntityAdminRoles = []string{authtypes.SigNozAdminRoleName}
-var myEntityReadRoles  = []string{authtypes.SigNozAdminRoleName, authtypes.SigNozEditorRoleName, authtypes.SigNozViewerRoleName}
-```
-
-### OpenAPI security schemes
-
-Use `newScopedSecuritySchemes` with the exact FGA scope, generated via `Resource.Scope(verb)`:
-
-```go
-SecuritySchemes: newScopedSecuritySchemes([]string{
-    coretypes.ResourceMetaResourceMyEntity.Scope(coretypes.VerbRead),
-}),
-// produces: ["my-entity:read"]
-```
-
-## Step 3: Add a migration for existing organizations
-
-New organizations get FGA tuples automatically during bootstrap (via `CreateManagedUserRoleTransactions`). Existing organizations need a SQL migration to backfill the tuples.
-
-Create a migration file in `pkg/sqlmigration/` (use the next available number). Follow the pattern in `078_add_sa_managed_role_txn.go`:
-
-1. Select the OpenFGA store ID
-2. Iterate all organizations
-3. For each org x tuple, insert into the `tuple` and `changelog` tables
-4. Use `ON CONFLICT DO NOTHING` for idempotency
-5. Handle both PostgreSQL and SQLite dialects
-
-Register the migration in `pkg/signoz/provider.go`.
-
-## Checklist
-
-- [ ] Kind added to `coretypes/registry_kind.go`
-- [ ] Resources added to `coretypes/registry_resource.go` (both metaresource and metaresources)
-- [ ] Managed role transactions added to `coretypes/registry_managed_role.go`
-- [ ] Routes switched from `AdminAccess`/`EditAccess`/`ViewAccess` to `Check` middleware
-- [ ] Selector callbacks use `Type.Selector()` (not `MustSelector`) for user-supplied IDs
-- [ ] OpenAPI `SecuritySchemes` use `newScopedSecuritySchemes` with exact scope strings
-- [ ] Migration backfills FGA tuples for existing organizations
-- [ ] `make go-build-community` and `make go-build-enterprise` compile
-- [ ] `make go-test` passes

docs/contributing/go/readme.md

@@ -11,7 +11,6 @@ We adhere to three primary style guides as our foundation:
 We **recommend** (almost enforce) reviewing these guides before contributing to the codebase. They provide valuable insights into writing idiomatic Go code and will help you understand our approach to backend development. In addition, we have a few additional rules that make certain areas stricter than the above which can be found in area-specific files in this package:
 
 - [Abstractions](abstractions.md) - When to introduce new types and intermediate representations
-- [Authorization](authz.md) - Enabling FGA for new entities
 - [Errors](errors.md) - Structured error handling
 - [Endpoint](endpoint.md) - HTTP endpoint patterns
 - [Flagger](flagger.md) - Feature flag patterns

frontend/.oxlintrc.json

@@ -289,6 +289,8 @@
     // Prevents navigator.clipboard - use useCopyToClipboard hook instead (disabled in tests via override)
     "signoz/no-raw-absolute-path": "error",
     // Prevents window.open(path), window.location.origin + path, window.location.href = path
+    "signoz/no-antd-components": "error",
+    // Prevents the usage of specific antd components in favor of our lib
     "no-restricted-globals": [
       "error",
       {

frontend/package.json

@@ -50,7 +50,7 @@
     "@signozhq/design-tokens": "2.1.4",
     "@signozhq/icons": "0.1.0",
     "@signozhq/resizable": "0.0.2",
-    "@signozhq/ui": "0.0.12",
+    "@signozhq/ui": "0.0.14",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",

frontend/plugins/rules/no-antd-components.mjs

@@ -0,0 +1,66 @@
+/**
+ * Rule: no-antd-components
+ *
+ * Prevents importing specific components from antd.
+ *
+ * This rule catches patterns like:
+ *   import { Typography } from 'antd'
+ *   import { Typography, Button } from 'antd'
+ *   import Typography from 'antd/es/typography'
+ *   import { Text } from 'antd/es/typography'
+ *
+ * Add components to BANNED_COMPONENTS to ban them.
+ * Key should be PascalCase component name, will match lowercase path too.
+ */
+
+const BANNED_COMPONENTS = {
+	Typography: 'Use @signozhq/ui Typography instead of antd Typography.',
+};
+
+export default {
+	create(context) {
+		return {
+			ImportDeclaration(node) {
+				const source = node.source.value;
+
+				// Check direct antd import: import { Typography } from 'antd'
+				if (source === 'antd') {
+					for (const specifier of node.specifiers) {
+						if (specifier.type !== 'ImportSpecifier') {
+							continue;
+						}
+
+						const importedName = specifier.imported.name;
+						const message = BANNED_COMPONENTS[importedName];
+
+						if (message) {
+							context.report({
+								node: specifier,
+								message: `Do not import '${importedName}' from antd. ${message}`,
+							});
+						}
+					}
+					return;
+				}
+
+				// Check antd/es/<component> import: import Typography from 'antd/es/typography'
+				const match = source.match(/^antd\/es\/([^/]+)/);
+				if (!match) {
+					return;
+				}
+
+				const pathComponent = match[1].toLowerCase();
+
+				for (const [componentName, message] of Object.entries(BANNED_COMPONENTS)) {
+					if (pathComponent === componentName.toLowerCase()) {
+						context.report({
+							node,
+							message: `Do not import from '${source}'. ${message}`,
+						});
+						break;
+					}
+				}
+			},
+		};
+	},
+};

frontend/plugins/signoz.mjs

@@ -9,6 +9,7 @@ import noZustandGetStateInHooks from './rules/no-zustand-getstate-in-hooks.mjs';
 import noNavigatorClipboard from './rules/no-navigator-clipboard.mjs';
 import noUnsupportedAssetPattern from './rules/no-unsupported-asset-pattern.mjs';
 import noRawAbsolutePath from './rules/no-raw-absolute-path.mjs';
+import noAntdComponents from './rules/no-antd-components.mjs';
 
 export default {
 	meta: {
@@ -19,5 +20,6 @@ export default {
 		'no-navigator-clipboard': noNavigatorClipboard,
 		'no-unsupported-asset-pattern': noUnsupportedAssetPattern,
 		'no-raw-absolute-path': noRawAbsolutePath,
+		'no-antd-components': noAntdComponents,
 	},
 };

frontend/src/components/AppLoading/AppLoading.tsx

@@ -1,4 +1,4 @@
-import { Typography } from 'antd';
+import { Typography } from '@signozhq/ui';
 import get from 'api/browser/localstorage/get';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { THEME_MODE } from 'hooks/useDarkMode/constant';

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx

@@ -14,8 +14,8 @@ import {
 	TableColumnsType,
 	TableColumnType,
 	Tooltip,
-	Typography,
 } from 'antd';
+import { Typography } from '@signozhq/ui';
 import type { FilterDropdownProps } from 'antd/lib/table/interface';
 import logEvent from 'api/common/logEvent';
 import {

frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.tsx

@@ -1,5 +1,6 @@
 import { useHistory, useLocation } from 'react-router-dom';
-import { Select, Spin, Typography } from 'antd';
+import { Select, Spin } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
 import { QueryParams } from 'constants/query';
 import useUrlQuery from 'hooks/useUrlQuery';

frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { Color, Spacing } from '@signozhq/design-tokens';
-import { Divider, Drawer, Typography } from 'antd';
+import { Divider, Drawer } from 'antd';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import dayjs from 'dayjs';

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphGrid.tsx

@@ -1,7 +1,8 @@
 import { useMemo, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { Card, Typography } from 'antd';
+import { Card } from 'antd';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import { CardContainer } from 'container/GridCardLayout/styles';
 import { useIsDarkMode } from 'hooks/useDarkMode';

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Button, Modal, Typography } from 'antd';
+import { Button, Modal } from 'antd';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
 import { useNotifications } from 'hooks/useNotifications';

frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.tsx

@@ -554,10 +554,11 @@ function ClientSideQBSearch(
 				>
 					<Tooltip title={chipValue}>
 						<TypographyText
-							ellipsis
+							role="button"
+							tabIndex={0}
 							$isInNin={isInNin}
-							disabled={isDisabled}
 							$isEnabled={!!searchValue}
+							$disabled={isDisabled}
 							onClick={(): void => {
 								if (!isDisabled) {
 									tagEditHandler(value);

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useMemo, useState } from 'react';
-import { Button, Popover, Radio, Tooltip, Typography } from 'antd';
+import { Button, Popover, Radio, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { useExportRawData } from 'hooks/useDownloadOptionsMenu/useDownloadOptionsMenu';
 import { Download, DownloadIcon, Loader2 } from 'lucide-react';

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -15,8 +15,8 @@ import {
 	Row,
 	Select,
 	Space,
-	Typography,
 } from 'antd';
+import { Typography } from '@signozhq/ui';
 import axios from 'axios';
 import TextToolTip from 'components/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';

frontend/src/components/ExplorerCard/MenuItemGenerator.tsx

@@ -1,6 +1,7 @@
 import { MouseEvent, useCallback } from 'react';
 import { DeleteOutlined } from '@ant-design/icons';
-import { Col, Row, Tooltip, Typography } from 'antd';
+import { Col, Row, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useDeleteView } from 'hooks/saveViews/useDeleteView';
 import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
@@ -81,7 +82,7 @@ function MenuItemGenerator({
 						</Tooltip>
 					</Row>
 					<Row>
-						<Typography.Text type="secondary">Created by {createdBy}</Typography.Text>
+						<Typography.Text color="muted">Created by {createdBy}</Typography.Text>
 					</Row>
 				</Col>
 				<Col span={2}>

frontend/src/components/ExplorerCard/SaveViewWithName.tsx

@@ -1,5 +1,6 @@
 import { useTranslation } from 'react-i18next';
-import { Card, Form, Input, Typography } from 'antd';
+import { Card, Form, Input } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useSaveView } from 'hooks/saveViews/useSaveView';

frontend/src/components/HeaderRightSection/AnnouncementsModal.tsx

@@ -1,4 +1,4 @@
-import { Typography } from 'antd';
+import { Typography } from '@signozhq/ui';
 
 function AnnouncementsModal(): JSX.Element {
 	return (

frontend/src/components/HeaderRightSection/FeedbackModal.tsx

@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { toast } from '@signozhq/ui';
-import { Button, Input, Radio, RadioChangeEvent, Typography } from 'antd';
+import { Button, Input, Radio, RadioChangeEvent } from 'antd';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import { handleContactSupport } from 'container/Integrations/utils';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
@@ -135,12 +136,14 @@ function FeedbackModal({ onClose }: { onClose: () => void }): JSX.Element {
 				<div className="feedback-modal-content-footer-info-text">
 					<Typography.Text>
 						Have a specific issue?{' '}
-						<Typography.Link
+						<a
+							role="button"
+							tabIndex={0}
 							className="contact-support-link"
 							onClick={handleContactSupportClick}
 						>
 							Contact Support{' '}
-						</Typography.Link>
+						</a>
 						or{' '}
 						<a
 							href="https://signoz.io/docs/introduction/"

frontend/src/components/HeaderRightSection/ShareURLModal.tsx

@@ -4,7 +4,8 @@ import { useSelector } from 'react-redux';
 import { matchPath, useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Switch, Typography } from 'antd';
+import { Button, Switch } from 'antd';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';

frontend/src/components/HostMetricsDetail/WaitlistFragment/WaitlistFragment.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Typography } from 'antd';
+import { Button } from 'antd';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import { useNotifications } from 'hooks/useNotifications';
 import { CheckCircle2, HandPlatter } from 'lucide-react';

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { Button, Input, Typography } from 'antd';
+import { Button, Input } from 'antd';
+import { Typography } from '@signozhq/ui';
 import cx from 'classnames';
 import { X } from 'lucide-react';
 

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -1,7 +1,8 @@
 import { useMemo, useState } from 'react';
 import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Button, Modal, Tooltip, Typography } from 'antd';
+import { Button, Modal, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
 import cx from 'classnames';

frontend/src/components/LogDetail/index.tsx

@@ -4,7 +4,8 @@ import { useSelector } from 'react-redux'; // old code, TODO: fix this correctly
 import { useCopyToClipboard, useLocation } from 'react-use';
 import { Color, Spacing } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui';
-import { Divider, Drawer, Radio, Tooltip, Typography } from 'antd';
+import { Divider, Drawer, Radio, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import type { RadioChangeEvent } from 'antd/lib';
 import cx from 'classnames';
 import { LogType } from 'components/Logs/LogStateIndicator/LogStateIndicator';
@@ -587,7 +588,7 @@ function LogDetailInner({
 					<div className="log-detail-drawer__footer-hint">
 						<div className="log-detail-drawer__footer-hint-content">
 							<Typography.Text
-								type="secondary"
+								color="muted"
 								className="log-detail-drawer__footer-hint-text"
 							>
 								Use
@@ -596,7 +597,7 @@ function LogDetailInner({
 							<span>/</span>
 							<ArrowDown size={14} className="log-detail-drawer__footer-hint-icon" />
 							<Typography.Text
-								type="secondary"
+								color="muted"
 								className="log-detail-drawer__footer-hint-text"
 							>
 								to view previous/next log

frontend/src/components/Logs/CategoryHeading/index.tsx

@@ -6,7 +6,7 @@ interface ICategoryHeadingProps {
 	children: ReactNode;
 }
 function CategoryHeading({ children }: ICategoryHeadingProps): JSX.Element {
-	return <CategoryHeadingText type="secondary">{children}</CategoryHeadingText>;
+	return <CategoryHeadingText color="muted">{children}</CategoryHeadingText>;
 }
 
 export default CategoryHeading;

frontend/src/components/Logs/CategoryHeading/styles.ts

@@ -1,4 +1,4 @@
-import { Typography } from 'antd';
+import { Typography } from '@signozhq/ui';
 import styled from 'styled-components';
 
 export const CategoryHeadingText = styled(Typography.Text)`

frontend/src/components/Logs/ListLogView/index.tsx

@@ -1,6 +1,6 @@
 import { memo, useCallback, useMemo } from 'react';
 import { blue } from '@ant-design/colors';
-import { Typography } from 'antd';
+import { Typography } from '@signozhq/ui';
 import cx from 'classnames';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -89,7 +89,7 @@ function LogSelectedField({
 					</span>
 				</Typography.Text>
 			</AddToQueryHOC>
-			<Typography.Text ellipsis className={cx('selected-log-kv', fontSize)}>
+			<Typography.Text truncate={1} className={cx('selected-log-kv', fontSize)}>
 				<span className={cx('selected-log-field-key', fontSize)}>{': '}</span>
 				<span className={cx('selected-log-value', fontSize)}>
 					{fieldValue || "''"}

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Button, Input, InputNumber, Popover, Tooltip, Typography } from 'antd';
+import { Button, Input, InputNumber, Popover, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import type { DefaultOptionType } from 'antd/es/select';
 import cx from 'classnames';
 import { LogViewMode } from 'container/LogsTable';

frontend/src/components/MessagingQueueHealthCheck/AttributeCheckList.tsx

@@ -1,15 +1,8 @@
+import { Typography } from '@signozhq/ui';
 import { ReactNode, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { CaretDownOutlined, LoadingOutlined } from '@ant-design/icons';
-import {
-	Modal,
-	Select,
-	Spin,
-	Tooltip,
-	Tree,
-	TreeDataNode,
-	Typography,
-} from 'antd';
+import { Modal, Select, Spin, Tooltip, Tree, TreeDataNode } from 'antd';
 import { OnboardingStatusResponse } from 'api/messagingQueues/onboarding/getOnboardingStatus';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
@@ -84,9 +77,11 @@ function ErrorTitleAndKey({
 		key: `${title}-key-${uuid()}`,
 		title: (
 			<div className="attribute-error-title">
-				<Typography.Text className="tree-text" ellipsis={{ tooltip: title }}>
-					{title}
-				</Typography.Text>
+				<Tooltip title={title}>
+					<Typography.Text className="tree-text" truncate={1}>
+						{title}
+					</Typography.Text>
+				</Tooltip>
 				<Tooltip title={errorMsg}>
 					<div
 						className="attribute-error-warning"
@@ -125,9 +120,11 @@ function treeTitleAndKey({
 		key: `${title}-key-${uuid()}`,
 		title: (
 			<div className="attribute-success-title">
-				<Typography.Text className="tree-text" ellipsis={{ tooltip: title }}>
-					{title}
-				</Typography.Text>
+				<Tooltip title={title}>
+					<Typography.Text className="tree-text" truncate={1}>
+						{title}
+					</Typography.Text>
+				</Tooltip>
 				{isLeaf && (
 					<div className="success-attribute-icon">
 						<Tooltip title="Success">

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -13,7 +13,8 @@ import {
 	ReloadOutlined,
 } from '@ant-design/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Checkbox, Select, Typography } from 'antd';
+import { Button, Checkbox, Select } from 'antd';
+import { Typography } from '@signozhq/ui';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
@@ -755,15 +756,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						}}
 					>
 						<div className="option-content">
-							<Typography.Text
-								ellipsis={{
-									tooltip: {
-										placement: 'right',
-										autoAdjustOverflow: true,
-									},
-								}}
-								className="option-label-text"
-							>
+							<Typography.Text truncate={1} className="option-label-text">
 								{highlightMatchedText(String(option.label || ''), searchText)}
 							</Typography.Text>
 							{(option.type === 'custom' || option.type === 'regex') && (

frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { Button, Tooltip, Typography } from 'antd';
+import { Button, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.tsx

@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
-import { Button, Tooltip, Typography } from 'antd';
+import { Button, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import cx from 'classnames';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';

frontend/src/components/QueryCancelledPlaceholder/QueryCancelledPlaceholder.tsx

@@ -1,4 +1,4 @@
-import { Typography } from 'antd';
+import { Typography } from '@signozhq/ui';
 import eyesEmojiUrl from 'assets/Images/eyesEmoji.svg';
 
 import styles from './QueryCancelledPlaceholder.module.scss';

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable sonarjs/no-identical-functions */
 import { Fragment, useMemo, useState } from 'react';
-import { Button, Checkbox, Input, Skeleton, Typography } from 'antd';
+import { Button, Checkbox, Input, Skeleton } from 'antd';
+import { Typography } from '@signozhq/ui';
 import cx from 'classnames';
 import { removeKeysFromExpression } from 'components/QueryBuilderV2/utils';
 import {
@@ -574,7 +575,9 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 				</section>
 				<section className="right-action">
 					{isOpen && !!attributeValues.length && (
-						<Typography.Text
+						<span
+							role="button"
+							tabIndex={0}
 							className="clear-all"
 							onClick={(e): void => {
 								e.stopPropagation();
@@ -583,7 +586,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 							}}
 						>
 							Clear All
-						</Typography.Text>
+						</span>
 					)}
 				</section>
 			</section>
@@ -640,16 +643,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 											{filter.customRendererForValue ? (
 												filter.customRendererForValue(value)
 											) : (
-												<Typography.Text
-													className="value-string"
-													ellipsis={{
-														tooltip: {
-															placement: 'top',
-															mouseEnterDelay: 0.2,
-															mouseLeaveDelay: 0,
-														},
-													}}
-												>
+												<Typography.Text className="value-string" truncate={1}>
 													{String(value)}
 												</Typography.Text>
 											)}
@@ -677,12 +671,14 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 					)}
 					{visibleItemsCount < attributeValues?.length && (
 						<section className="show-more">
-							<Typography.Text
+							<span
+								role="button"
+								tabIndex={0}
 								className="show-more-text"
 								onClick={(): void => setVisibleItemsCount((prev) => prev + 10)}
 							>
 								Show More...
-							</Typography.Text>
+							</span>
 						</section>
 					)}
 				</>

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -12,7 +12,8 @@ import {
 	ComboboxList,
 	ComboboxTrigger,
 } from '@signozhq/ui';
-import { Skeleton, Switch, Tooltip, Typography } from 'antd';
+import { Skeleton, Switch, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageKey from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';

frontend/src/components/ResizeTable/TableComponent/DateComponent.tsx

@@ -1,4 +1,4 @@
-import { Typography } from 'antd';
+import { Typography } from '@signozhq/ui';
 
 import Time from './Time';
 

frontend/src/components/ResizeTable/TableComponent/Time.tsx

@@ -1,4 +1,4 @@
-import { Typography } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { useTimezone } from 'providers/Timezone';
 

frontend/src/components/SpanHoverCard/SpanHoverCard.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { Popover, Typography } from 'antd';
+import { Popover } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
 import dayjs from 'dayjs';

frontend/src/components/Styled/index.ts

@@ -11,10 +11,12 @@ import {
 	Space,
 	SpaceProps,
 	TabsProps,
-	Typography,
 } from 'antd';
-import type { TextProps } from 'antd/lib/typography/Text';
-import type { TitleProps } from 'antd/lib/typography/Title';
+import {
+	Typography,
+	TypographyTextProps,
+	TypographyTitleProps,
+} from '@signozhq/ui';
 import styled, { FlattenSimpleInterpolation } from 'styled-components';
 
 import { IStyledClass } from './types';
@@ -53,13 +55,13 @@ const StyledButton = styled(Button)<TStyledButton>`
 `;
 
 const { Text } = Typography;
-type TStyledTypographyText = TextProps & IStyledClass;
+type TStyledTypographyText = TypographyTextProps & IStyledClass;
 const StyledTypographyText = styled(Text)<TStyledTypographyText>`
 	${styledClass}
 `;
 
 const { Title } = Typography;
-type TStyledTypographyTitle = TitleProps & IStyledClass;
+type TStyledTypographyTitle = TypographyTitleProps & IStyledClass;
 const StyledTypographyTitle = styled(Title)<TStyledTypographyTitle>`
 	${styledClass}
 `;

frontend/src/components/TimePreferenceDropDown/config.tsx

@@ -1,4 +1,4 @@
-import { Typography } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { timeItems } from 'container/NewWidget/RightContainer/timeItems';
 
 export const menuItems = timeItems.map((item) => ({

frontend/src/components/TimePreferenceDropDown/index.tsx

@@ -1,6 +1,7 @@
 import { Dispatch, SetStateAction, useCallback, useMemo } from 'react';
 import { DownOutlined } from '@ant-design/icons';
-import { Button, Dropdown, Typography } from 'antd';
+import { Button, Dropdown } from 'antd';
+import { Typography } from '@signozhq/ui';
 import TimeItems, {
 	timePreferance,
 	timePreferenceType,

frontend/src/components/Uplot/Uplot.tsx

@@ -8,7 +8,7 @@ import {
 	useRef,
 } from 'react';
 import * as Sentry from '@sentry/react';
-import { Typography } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { ToggleGraphProps } from 'components/Graph/types';
 import { LineChart } from 'lucide-react';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';

frontend/src/components/ValueGraph/index.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ExclamationCircleFilled } from '@ant-design/icons';
-import { Tooltip, Typography } from 'antd';
+import { Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 
 import { getBackgroundColorAndThresholdCheck } from './utils';

frontend/src/container/AllAlertChannels/index.tsx

@@ -2,7 +2,8 @@ import { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
 import { PlusOutlined } from '@ant-design/icons';
-import { Tooltip, Typography } from 'antd';
+import { Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import getAll from 'api/channels/getAll';
 import logEvent from 'api/common/logEvent';
 import Spinner from 'components/Spinner';
@@ -21,7 +22,7 @@ import { Button, ButtonContainer, RightActionContainer } from './styles';
 
 import './AllAlertChannels.styles.scss';
 
-const { Paragraph } = Typography;
+const { Text } = Typography;
 
 function AlertChannels(): JSX.Element {
 	const { t } = useTranslation(['channels']);
@@ -60,9 +61,9 @@ function AlertChannels(): JSX.Element {
 	return (
 		<div className="alert-channels-container">
 			<ButtonContainer>
-				<Paragraph ellipsis type="secondary">
+				<Text truncate={1} color="muted">
 					{t('sending_channels_note')}
-				</Paragraph>
+				</Text>
 
 				<RightActionContainer>
 					<TextToolTip

frontend/src/container/AllError/index.tsx

@@ -1,3 +1,4 @@
+import { Typography } from '@signozhq/ui';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQueries } from 'react-query';
@@ -5,15 +6,7 @@ import { useQueries } from 'react-query';
 import { useSelector } from 'react-redux';
 import { Link, useLocation } from 'react-router-dom';
 import { SearchOutlined } from '@ant-design/icons';
-import {
-	Button,
-	Card,
-	Input,
-	Space,
-	TableProps,
-	Tooltip,
-	Typography,
-} from 'antd';
+import { Button, Card, Input, Space, TableProps, Tooltip } from 'antd';
 import type { ColumnType, TablePaginationConfig } from 'antd/es/table';
 import type { FilterValue, SorterResult } from 'antd/es/table/interface';
 import type { ColumnsType } from 'antd/lib/table';
@@ -360,13 +353,7 @@ function AllErrors(): JSX.Element {
 			width: 100,
 			render: (value): JSX.Element => (
 				<Tooltip overlay={(): JSX.Element => value}>
-					<Typography.Paragraph
-						ellipsis={{
-							rows: 2,
-						}}
-					>
-						{value}
-					</Typography.Paragraph>
+					<Typography.Text truncate={2}>{value}</Typography.Text>
 				</Tooltip>
 			),
 		},

frontend/src/container/AnomalyAlertEvaluationView/AnomalyAlertEvaluationView.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
-import { Checkbox, Input, Typography } from 'antd';
+import { Checkbox, Input } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { useResizeObserver } from 'hooks/useDimensions';

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/DomainDetails.tsx

@@ -2,7 +2,8 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { Spacing } from '@signozhq/design-tokens';
-import { Button, Divider, Drawer, Radio, Typography } from 'antd';
+import { Button, Divider, Drawer, Radio } from 'antd';
+import { Typography } from '@signozhq/ui';
 import type { RadioChangeEvent } from 'antd/lib';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import {

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/TopErrors.tsx

@@ -1,7 +1,8 @@
 import { useMemo, useState } from 'react';
 import { QueryFunctionContext, useQueries, useQuery } from 'react-query';
 import { LoadingOutlined } from '@ant-design/icons';
-import { Spin, Switch, Table, Tooltip, Typography } from 'antd';
+import { Spin, Switch, Table, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { getQueryRangeV5 } from 'api/v5/queryRange/getQueryRange';
 import { MetricRangePayloadV5, ScalarData } from 'api/v5/v5';
 import { useNavigateToExplorer } from 'components/CeleryTask/useNavigateToExplorer';

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/DependentServices.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useState } from 'react';
 import { UseQueryResult } from 'react-query';
-import { Skeleton, Table, TablePaginationConfig, Typography } from 'antd';
+import { Skeleton, Table, TablePaginationConfig } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { QueryParams } from 'constants/query';
 import {
 	dependentServicesColumns,

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/DomainMetrics.tsx

@@ -1,7 +1,8 @@
 import { useMemo } from 'react';
 import { useQueries } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
-import { Progress, Skeleton, Tooltip, Typography } from 'antd';
+import { Progress, Skeleton, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import {
@@ -87,28 +88,16 @@ function DomainMetrics({
 		<div className="domain-detail-drawer__endpoint">
 			<div className="domain-details-grid">
 				<div className="labels-row">
-					<Typography.Text
-						type="secondary"
-						className="domain-details-metadata-label"
-					>
+					<Typography.Text color="muted" className="domain-details-metadata-label">
 						EXTERNAL API
 					</Typography.Text>
-					<Typography.Text
-						type="secondary"
-						className="domain-details-metadata-label"
-					>
+					<Typography.Text color="muted" className="domain-details-metadata-label">
 						AVERAGE LATENCY
 					</Typography.Text>
-					<Typography.Text
-						type="secondary"
-						className="domain-details-metadata-label"
-					>
+					<Typography.Text color="muted" className="domain-details-metadata-label">
 						ERROR %
 					</Typography.Text>
-					<Typography.Text
-						type="secondary"
-						className="domain-details-metadata-label"
-					>
+					<Typography.Text color="muted" className="domain-details-metadata-label">
 						LAST USED
 					</Typography.Text>
 				</div>

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/EndPointMetrics.tsx

@@ -1,7 +1,8 @@
 import { useMemo } from 'react';
 import { UseQueryResult } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
-import { Progress, Skeleton, Tooltip, Typography } from 'antd';
+import { Progress, Skeleton, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import {
 	getDisplayValue,
 	getFormattedEndPointMetricsData,
@@ -37,28 +38,16 @@ function EndPointMetrics({
 		<div className="domain-detail-drawer__endpoint">
 			<div className="domain-details-grid">
 				<div className="labels-row">
-					<Typography.Text
-						type="secondary"
-						className="domain-details-metadata-label"
-					>
+					<Typography.Text color="muted" className="domain-details-metadata-label">
 						Rate
 					</Typography.Text>
-					<Typography.Text
-						type="secondary"
-						className="domain-details-metadata-label"
-					>
+					<Typography.Text color="muted" className="domain-details-metadata-label">
 						AVERAGE LATENCY
 					</Typography.Text>
-					<Typography.Text
-						type="secondary"
-						className="domain-details-metadata-label"
-					>
+					<Typography.Text color="muted" className="domain-details-metadata-label">
 						ERROR %
 					</Typography.Text>
-					<Typography.Text
-						type="secondary"
-						className="domain-details-metadata-label"
-					>
+					<Typography.Text color="muted" className="domain-details-metadata-label">
 						LAST USED
 					</Typography.Text>
 				</div>

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/ErrorState.tsx

@@ -1,4 +1,5 @@
-import { Button, Typography } from 'antd';
+import { Button } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { RotateCw } from 'lucide-react';
 
 import awwSnapUrl from '@/assets/Icons/awwSnap.svg';
@@ -13,7 +14,7 @@ function ErrorState({ refetch }: { refetch: () => void }): JSX.Element {
 					</div>
 					<div className="error-state-text">
 						<Typography.Text>Uh-oh :/ We ran into an error.</Typography.Text>
-						<Typography.Text type="secondary">
+						<Typography.Text color="muted">
 							Please refresh this panel.
 						</Typography.Text>
 					</div>

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/StatusCodeBarCharts.tsx

@@ -1,7 +1,8 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { UseQueryResult } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Card, Skeleton, Typography } from 'antd';
+import { Button, Card, Skeleton } from 'antd';
+import { Typography } from '@signozhq/ui';
 import cx from 'classnames';
 import { useNavigateToExplorer } from 'components/CeleryTask/useNavigateToExplorer';
 import {

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/StatusCodeTable.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import { UseQueryResult } from 'react-query';
-import { Table, Typography } from 'antd';
+import { Table } from 'antd';
+import { Typography } from '@signozhq/ui';
 import {
 	endPointStatusCodeColumns,
 	getFormattedEndPointStatusCodeData,

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -1,3 +1,4 @@
+import { Typography } from '@signozhq/ui';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMutation, useQuery } from 'react-query';
@@ -14,7 +15,6 @@ import {
 	Table,
 	TableColumnsType as ColumnsType,
 	Tag,
-	Typography,
 } from 'antd';
 import getUsage, { UsageResponsePayloadProps } from 'api/billing/getUsage';
 import logEvent from 'api/common/logEvent';
@@ -362,15 +362,19 @@ export default function BillingContainer(): JSX.Element {
 		[apiResponse, billAmount, isLoading, isFetchingBillingData],
 	);
 
-	const { Text } = Typography;
 	const subscriptionPastDueMessage = (): JSX.Element => (
 		<Typography>
 			{`We were not able to process payments for your account. Please update your card details `}
-			<Text type="danger" onClick={handleBilling} style={{ cursor: 'pointer' }}>
+			<a
+				role="button"
+				tabIndex={0}
+				onClick={handleBilling}
+				style={{ cursor: 'pointer', color: 'var(--bg-cherry-500)' }}
+			>
 				{t('here')}
-			</Text>
+			</a>
 			{` if your payment information has changed. Email us at `}
-			<Text type="secondary">cloud-support@signoz.io</Text>
+			<Typography.Text color="muted">cloud-support@signoz.io</Typography.Text>
 			{` otherwise. Be sure to provide this information immediately to avoid interruption to your service.`}
 		</Typography>
 	);
@@ -418,7 +422,7 @@ export default function BillingContainer(): JSX.Element {
 				<Typography.Text style={{ fontWeight: 500, fontSize: 18 }}>
 					{t('billing')}
 				</Typography.Text>
-				<Typography.Text color={Color.BG_VANILLA_400}>
+				<Typography.Text color="muted">
 					{t('manage_billing_and_costs')}
 				</Typography.Text>
 			</Flex>
@@ -472,7 +476,7 @@ export default function BillingContainer(): JSX.Element {
 
 				{trialInfo?.onTrial && trialInfo?.trialConvertedToSubscription && (
 					<Typography.Text
-						ellipsis
+						truncate={1}
 						style={{ fontWeight: '300', color: 'var(--bg-forest-500)', fontSize: 12 }}
 					>
 						{t('card_details_recieved_and_billing_info')}

frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useRef } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Card, Flex, Typography } from 'antd';
+import { Card, Flex } from 'antd';
+import { Typography } from '@signozhq/ui';
 import Uplot from 'components/Uplot';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
@@ -208,7 +209,7 @@ export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
 					<Typography.Text className="total-spent-title">
 						TOTAL SPENT
 					</Typography.Text>
-					<Typography.Text color={Color.BG_VANILLA_100} className="total-spent">
+					<Typography.Text className="total-spent">
 						${numberFormatter.format(billAmount)}
 					</Typography.Text>
 				</Flex>

frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Row, Tag, Typography } from 'antd';
+import { Row, Tag } from 'antd';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import { ALERTS_DATA_SOURCE_MAP } from 'constants/alerts';
 import { FeatureKeys } from 'constants/features';
@@ -78,7 +79,9 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 						data-testid={`alert-type-card-${option.selection}`}
 					>
 						{option.description}{' '}
-						<Typography.Link
+						<a
+							role="button"
+							tabIndex={0}
 							onClick={(e): void => {
 								e.preventDefault();
 								e.stopPropagation();
@@ -86,7 +89,7 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 							}}
 						>
 							Click here to see how to create a sample alert.
-						</Typography.Link>{' '}
+						</a>{' '}
 					</AlertTypeCard>
 				))}
 			</>

frontend/src/container/CreateAlertV2/AlertCondition/AlertThreshold.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
-import { Button, Select, Tooltip, Typography } from 'antd';
+import { Button, Select, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import classNames from 'classnames';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import getRandomColor from 'lib/getRandomColor';

frontend/src/container/CreateAlertV2/AlertCondition/AnomalyThreshold.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { Select, Typography } from 'antd';
+import { Select } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useAppContext } from 'providers/App/App';
 

frontend/src/container/CreateAlertV2/AlertCondition/ThresholdItem.tsx

@@ -1,5 +1,6 @@
 import { useMemo, useState } from 'react';
-import { Button, Input, Select, Tooltip, Typography } from 'antd';
+import { Button, Input, Select, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { CircleX, Trash } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 

frontend/src/container/CreateAlertV2/AlertCondition/utils.tsx

@@ -1,4 +1,5 @@
-import { Button, Flex, SelectProps, Switch, Typography } from 'antd';
+import { Button, Flex, SelectProps, Switch } from 'antd';
+import { Typography } from '@signozhq/ui';
 import type { BaseOptionType, DefaultOptionType } from 'antd/es/select';
 import { getInvolvedQueriesInTraceOperator } from 'components/QueryBuilderV2/QueryV2/TraceOperator/utils/utils';
 import { YAxisSource } from 'components/YAxisUnitSelector/types';

frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptionItem/AdvancedOptionItem.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
-import { Switch, Tooltip, Typography } from 'antd';
+import { Switch, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { Info } from 'lucide-react';
 
 import { IAdvancedOptionItemProps } from '../types';

frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptions.tsx

@@ -1,4 +1,5 @@
-import { Collapse, Input, Typography } from 'antd';
+import { Collapse, Input } from 'antd';
+import { Typography } from '@signozhq/ui';
 
 import { useCreateAlertState } from '../context';
 import AdvancedOptionItem from './AdvancedOptionItem';

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/EditCustomSchedule.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { Button, Typography } from 'antd';
+import { Button } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { useCreateAlertState } from 'container/CreateAlertV2/context';
 import { INITIAL_ADVANCED_OPTIONS_STATE } from 'container/CreateAlertV2/context/constants';
 import { IEditCustomScheduleProps } from 'container/CreateAlertV2/EvaluationSettings/types';

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/EvaluationCadence.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
-import { Input, Select, Tooltip, Typography } from 'antd';
+import { Input, Select, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { Info } from 'lucide-react';
 
 import { useCreateAlertState } from '../../context';

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/EvaluationCadenceDetails.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
-import { Button, DatePicker, Input, Select, Typography } from 'antd';
+import { Button, DatePicker, Input, Select } from 'antd';
+import { Typography } from '@signozhq/ui';
 import classNames from 'classnames';
 import { useCreateAlertState } from 'container/CreateAlertV2/context';
 import { AdvancedOptionsState } from 'container/CreateAlertV2/context/types';

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/EvaluationCadencePreview.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { Modal, Typography } from 'antd';
+import { Modal } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { Calendar, Info } from 'lucide-react';
 
 import { useCreateAlertState } from '../../context';

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowDetails.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { Input, Select, Typography } from 'antd';
+import { Input, Select } from 'antd';
+import { Typography } from '@signozhq/ui';
 
 import { ADVANCED_OPTIONS_TIME_UNIT_OPTIONS } from '../../context/constants';
 import {

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowPopover.tsx

@@ -1,4 +1,5 @@
-import { Button, Typography } from 'antd';
+import { Button } from 'antd';
+import { Typography } from '@signozhq/ui';
 import classNames from 'classnames';
 import { Check } from 'lucide-react';
 

frontend/src/container/CreateAlertV2/NotificationSettings/MultipleNotifications.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useMemo } from 'react';
-import { Select, Tooltip, Typography } from 'antd';
+import { Select, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { Info } from 'lucide-react';
 
@@ -98,9 +99,9 @@ function MultipleNotifications(): JSX.Element {
 					data-testid="multiple-notifications-select"
 				/>
 				{isMultipleNotificationsEnabled && (
-					<Typography.Paragraph className="multiple-notifications-select-description">
+					<Typography.Text className="multiple-notifications-select-description">
 						{groupByDescription}
-					</Typography.Paragraph>
+					</Typography.Text>
 				)}
 			</div>
 		);

frontend/src/container/CreateAlertV2/NotificationSettings/NotificationMessage.tsx

@@ -1,4 +1,5 @@
-import { Input, Tooltip, Typography } from 'antd';
+import { Input, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { Info } from 'lucide-react';
 
 import { useCreateAlertState } from '../context';

frontend/src/container/CreateAlertV2/NotificationSettings/NotificationSettings.tsx

@@ -1,4 +1,5 @@
-import { Input, Select, Typography } from 'antd';
+import { Input, Select } from 'antd';
+import { Typography } from '@signozhq/ui';
 
 import { useCreateAlertState } from '../context';
 import {

frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx

@@ -177,11 +177,7 @@ export default function CustomDomainSettings(): JSX.Element {
 	if (isLoadingHosts) {
 		return (
 			<div className="custom-domain-card custom-domain-card--loading">
-				<Skeleton
-					active
-					title={{ width: '40%' }}
-					paragraph={{ rows: 1, width: '60%' }}
-				/>
+				<Skeleton active paragraph={{ rows: 1, width: '60%' }} />
 			</div>
 		);
 	}

frontend/src/container/DashboardContainer/DashboardDescription/index.tsx

@@ -4,16 +4,8 @@ import { Layout } from 'react-grid-layout';
 import { useTranslation } from 'react-i18next';
 import { useCopyToClipboard } from 'react-use';
 import { PlusOutlined } from '@ant-design/icons';
-import {
-	Button,
-	Card,
-	Input,
-	Modal,
-	Popover,
-	Tag,
-	Tooltip,
-	Typography,
-} from 'antd';
+import { Button, Card, Input, Modal, Popover, Tag, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
 import { PANEL_GROUP_TYPES, PANEL_TYPES } from 'constants/queryBuilder';

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/DynamicVariable/DynamicVariable.tsx

@@ -7,7 +7,8 @@ import {
 	useState,
 } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Select, Typography } from 'antd';
+import { Select } from 'antd';
+import { Typography } from '@signozhq/ui';
 import CustomSelect from 'components/NewSelect/CustomSelect';
 import TextToolTip from 'components/TextToolTip';
 import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
@@ -213,7 +214,7 @@ function DynamicVariable({
 			</div>
 			{errorAttributeKeyMessage && (
 				<div>
-					<Typography.Text type="warning">
+					<Typography.Text color="warning">
 						{errorAttributeKeyMessage}
 					</Typography.Text>
 				</div>

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.tsx

@@ -5,7 +5,8 @@ import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { orange } from '@ant-design/colors';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Collapse, Input, Select, Switch, Tag, Typography } from 'antd';
+import { Button, Collapse, Input, Select, Switch, Tag } from 'antd';
+import { Typography } from '@signozhq/ui';
 import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
 import cx from 'classnames';
 import Editor from 'components/Editor';
@@ -485,7 +486,7 @@ function VariableItem({
 								}}
 							/>
 							<div>
-								<Typography.Text type="warning">{errorNameMessage}</Typography.Text>
+								<Typography.Text color="warning">{errorNameMessage}</Typography.Text>
 							</div>
 						</div>
 					</VariableItemRow>

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

@@ -11,7 +11,8 @@ import {
 import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import { arrayMove, SortableContext, useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { Button, Modal, Row, RowProps, Space, Table, Typography } from 'antd';
+import { Button, Modal, Row, RowProps, Space, Table } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { VariablesSettingsTabHandle } from 'container/DashboardContainer/DashboardDescription/types';
 import { convertVariablesToDbFormat } from 'container/DashboardContainer/DashboardVariablesSelection/util';
 import { useAddDynamicVariableToPanels } from 'hooks/dashboard/useAddDynamicVariableToPanels';

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

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Col, Input, Radio, Select, Space, Typography } from 'antd';
+import { Col, Input, Radio, Select, Space } from 'antd';
+import { Typography } from '@signozhq/ui';
 import AddTags from 'container/DashboardContainer/DashboardSettings/General/AddTags';
 import { useDashboardCursorSyncMode } from 'hooks/dashboard/useDashboardCursorSyncMode';
 import { useSyncTooltipFilterMode } from 'hooks/dashboard/useSyncTooltipFilterMode';

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

@@ -2,7 +2,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 { Button, Select, Typography } from 'antd';
+import { Button, Select } from 'antd';
+import { Typography } from '@signozhq/ui';
 import createPublicDashboardAPI from 'api/dashboard/public/createPublicDashboard';
 import revokePublicDashboardAccessAPI from 'api/dashboard/public/revokePublicDashboardAccess';
 import updatePublicDashboardAPI from 'api/dashboard/public/updatePublicDashboard';

frontend/src/container/DashboardContainer/DashboardVariablesSelection/SelectVariableInput.tsx

@@ -1,7 +1,8 @@
 import { memo, useMemo } from 'react';
 import { orange } from '@ant-design/colors';
 import { WarningOutlined } from '@ant-design/icons';
-import { Popover, Tooltip, Typography } from 'antd';
+import { Popover, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { CustomMultiSelect, CustomSelect } from 'components/NewSelect';
 import { OptionData } from 'components/NewSelect/types';
 import { popupContainer } from 'utils/selectPopupContainer';

frontend/src/container/DashboardContainer/DashboardVariablesSelection/VariableItem.tsx

@@ -1,6 +1,7 @@
 import { memo } from 'react';
 import { InfoCircleOutlined } from '@ant-design/icons';
-import { Tooltip, Typography } from 'antd';
+import { Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 import CustomVariableInput from './CustomVariableInput';
@@ -31,7 +32,7 @@ function VariableItem({
 
 	return (
 		<div className="variable-item">
-			<Typography.Text className="variable-name" ellipsis>
+			<Typography.Text className="variable-name" truncate={1}>
 				${name}
 				{description && (
 					<Tooltip title={description}>

frontend/src/container/DashboardContainer/DashboardVariablesSelection/styles.ts

@@ -1,5 +1,5 @@
 import { grey } from '@ant-design/colors';
-import { Typography } from 'antd';
+import { Typography } from '@signozhq/ui';
 import styled from 'styled-components';
 
 export const VariableContainer = styled.div`

frontend/src/container/DashboardContainer/PanelTypeSelectionModal/index.tsx

@@ -1,5 +1,6 @@
 import { memo } from 'react';
-import { Card, Modal, Typography } from 'antd';
+import { Card, Modal } from 'antd';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES, PANEL_TYPES_INITIAL_QUERY } from 'constants/queryBuilder';

frontend/src/container/EmptyLogsSearch/EmptyLogsSearch.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import { Typography } from 'antd';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import LearnMore from 'components/LearnMore/LearnMore';

frontend/src/container/ErrorDetails/index.tsx

@@ -2,7 +2,8 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Button, Divider, Space, Typography } from 'antd';
+import { Button, Divider, Space } from 'antd';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import getNextPrevId from 'api/errors/getNextPrevId';
 import Editor from 'components/Editor';

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -20,8 +20,8 @@ import {
 	RefSelectProps,
 	Select,
 	Tooltip,
-	Typography,
 } from 'antd';
+import { Typography } from '@signozhq/ui';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageKey from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';

frontend/src/container/ExportPanel/ExportPanelContainer.tsx

@@ -1,7 +1,8 @@
 import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMutation } from 'react-query';
-import { Button, Typography } from 'antd';
+import { Button } from 'antd';
+import { Typography } from '@signozhq/ui';
 import createDashboard from 'api/v1/dashboards/create';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { useGetAllDashboard } from 'hooks/dashboard/useGetAllDashboard';

frontend/src/container/ExportPanel/styles.ts

@@ -1,5 +1,6 @@
 import { FunctionComponent } from 'react';
-import { Button, Select, SelectProps, Space, Typography } from 'antd';
+import { Button, Select, SelectProps, Space } from 'antd';
+import { Typography } from '@signozhq/ui';
 import styled from 'styled-components';
 
 export const DashboardSelect: FunctionComponent<SelectProps> = styled(

frontend/src/container/FormAlertChannels/index.tsx

@@ -1,6 +1,7 @@
 import { Dispatch, ReactElement, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Form, FormInstance, Input, Select, Switch, Typography } from 'antd';
+import { Form, FormInstance, Input, Select, Switch } from 'antd';
+import { Typography } from '@signozhq/ui';
 import type { Store } from 'antd/lib/form/interface';
 import ROUTES from 'constants/routes';
 import {

frontend/src/container/FormAlertRules/QuerySection.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Tabs, Tooltip, Typography } from 'antd';
+import { Button, Tabs, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import PromQLIcon from 'assets/Dashboard/PromQl';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';

frontend/src/container/FormAlertRules/RuleOptions.tsx

@@ -8,8 +8,8 @@ import {
 	Select,
 	SelectProps,
 	Space,
-	Typography,
 } from 'antd';
+import { Typography } from '@signozhq/ui';
 import type { DefaultOptionType } from 'antd/es/select';
 import {
 	getCategoryByOptionId,

frontend/src/container/FormAlertRules/index.tsx

@@ -5,7 +5,8 @@ import { useQueryClient } from 'react-query';
 import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { ExclamationCircleOutlined, SaveOutlined } from '@ant-design/icons';
-import { Button, FormInstance, Modal, SelectProps, Typography } from 'antd';
+import { Button, FormInstance, Modal, SelectProps } from 'antd';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {

frontend/src/container/FormAlertRules/styles.ts

@@ -1,4 +1,5 @@
-import { Button, Card, Col, Form, Input, Select, Typography } from 'antd';
+import { Button, Card, Col, Form, Input, Select } from 'antd';
+import { Typography } from '@signozhq/ui';
 import styled from 'styled-components';
 
 const { TextArea } = Input;

frontend/src/container/GantChart/Span/index.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
-import { Popover, Typography } from 'antd';
+import { Popover } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
 import dayjs from 'dayjs';

frontend/src/container/GantChart/Span/styles.ts

@@ -1,4 +1,4 @@
-import { Typography } from 'antd';
+import { Typography } from '@signozhq/ui';
 import styled from 'styled-components';
 
 interface Props {
@@ -40,7 +40,7 @@ interface SpanTextProps extends Pick<Props, 'leftOffset'> {
 	isDarkMode: boolean;
 }
 
-export const SpanText = styled(Typography.Paragraph)<SpanTextProps>`
+export const SpanText = styled(Typography.Text)<SpanTextProps>`
 	&&& {
 		left: ${({ leftOffset }): string => `${leftOffset}%`};
 		top: 65%;

frontend/src/container/GantChart/SpanName/index.tsx

@@ -7,8 +7,8 @@ function SpanNameComponent({
 	return (
 		<Container title={`${name} ${serviceName}`}>
 			<SpanWrapper>
-				<Span ellipsis>{name}</Span>
-				<Service ellipsis>{serviceName}</Service>
+				<Span truncate={1}>{name}</Span>
+				<Service truncate={1}>{serviceName}</Service>
 			</SpanWrapper>
 		</Container>
 	);

frontend/src/container/GantChart/SpanName/styles.ts

@@ -1,7 +1,7 @@
-import { Typography } from 'antd';
+import { Typography } from '@signozhq/ui';
 import styled from 'styled-components';
 
-export const Span = styled(Typography.Paragraph)`
+export const Span = styled(Typography.Text)`
 	&&& {
 		font-size: 0.75rem;
 		margin: 0;
@@ -9,7 +9,7 @@ export const Span = styled(Typography.Paragraph)`
 	}
 `;
 
-export const Service = styled(Typography.Paragraph)`
+export const Service = styled(Typography.Text)`
 	&&& {
 		color: #acacac;
 		font-size: 0.75rem;

frontend/src/container/GantChart/Trace/index.tsx

@@ -8,7 +8,8 @@ import {
 	useState,
 } from 'react';
 import { CaretDownFilled, CaretRightFilled } from '@ant-design/icons';
-import { Col, Typography } from 'antd';
+import { Col } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { StyledCol, StyledRow } from 'components/Styled';
 import {
 	IIntervalUnit,