From c613e5c73f2643ca6d488a90be59284e74b30a86 Mon Sep 17 00:00:00 2001
From: AzizbekFayziyev <fayziyevazizbek07@gmail.com>
Date: Tue, 3 Feb 2026 16:59:48 +0500
Subject: [PATCH] fix: icon styles

---
 src/components/UI/TooltipWrapper/index.tsx       |  5 +++--
 .../UI/TooltipWrapper/styles.module.scss         |  2 ++
 src/components/UI/TooltipWrapper/types.ts        |  1 +
 src/components/default/PairsTable/PairsTable.tsx | 16 ++++++++--------
 .../dex/pairs/PairsCard/PairsCard.module.scss    |  1 -
 src/pages/dex/pairs/PairsCard/PairsCard.tsx      | 10 +++++-----
 6 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/components/UI/TooltipWrapper/index.tsx b/src/components/UI/TooltipWrapper/index.tsx
index f9f3520..09efc05 100644
--- a/src/components/UI/TooltipWrapper/index.tsx
+++ b/src/components/UI/TooltipWrapper/index.tsx
@@ -1,12 +1,13 @@
+import { classes } from '@/utils/utils';
 import styles from './styles.module.scss';
 import { TooltipWrapperProps } from './types';
 
-const TooltipWrapper = ({ children, text }: TooltipWrapperProps) => {
+const TooltipWrapper = ({ children, text, className }: TooltipWrapperProps) => {
 	return (
 		<div className={styles.tooltip}>
 			{children}
 
-			<div className={styles.tooltip__text}>{text}</div>
+			<div className={classes(styles.tooltip__text, className)}>{text}</div>
 		</div>
 	);
 };
diff --git a/src/components/UI/TooltipWrapper/styles.module.scss b/src/components/UI/TooltipWrapper/styles.module.scss
index f09eb5f..a3d591e 100644
--- a/src/components/UI/TooltipWrapper/styles.module.scss
+++ b/src/components/UI/TooltipWrapper/styles.module.scss
@@ -2,6 +2,8 @@
 	cursor: pointer;
 	position: relative;
 	width: max-content;
+	display: grid;
+	place-content: center;
 
 	&:hover {
 		.tooltip__text {
diff --git a/src/components/UI/TooltipWrapper/types.ts b/src/components/UI/TooltipWrapper/types.ts
index 0b9bd4b..82fbfc2 100644
--- a/src/components/UI/TooltipWrapper/types.ts
+++ b/src/components/UI/TooltipWrapper/types.ts
@@ -3,4 +3,5 @@ import { ReactNode } from 'react';
 export interface TooltipWrapperProps {
 	children: ReactNode;
 	text: string;
+	className?: string;
 }
diff --git a/src/components/default/PairsTable/PairsTable.tsx b/src/components/default/PairsTable/PairsTable.tsx
index 3fcff6c..051fdac 100644
--- a/src/components/default/PairsTable/PairsTable.tsx
+++ b/src/components/default/PairsTable/PairsTable.tsx
@@ -88,22 +88,22 @@ function PairsTable({ data }: IProps) {
 								<span>{quote.name}</span>
 							</div>
 
-							{featured && (
-								<TooltipWrapper text="Featured">
+							{whitelisted && (
+								<TooltipWrapper text="Whitelisted">
 									<Image
-										src="/ui/featured.svg"
-										alt="featured"
+										src="/ui/whitelisted.svg"
+										alt="whitelisted"
 										width={18}
 										height={18}
 									/>
 								</TooltipWrapper>
 							)}
 
-							{whitelisted && (
-								<TooltipWrapper text="Whitelisted">
+							{featured && (
+								<TooltipWrapper text="Featured">
 									<Image
-										src="/ui/whitelisted.svg"
-										alt="whitelisted"
+										src="/ui/featured.svg"
+										alt="featured"
 										width={18}
 										height={18}
 									/>
diff --git a/src/pages/dex/pairs/PairsCard/PairsCard.module.scss b/src/pages/dex/pairs/PairsCard/PairsCard.module.scss
index 55d78bb..74d193c 100644
--- a/src/pages/dex/pairs/PairsCard/PairsCard.module.scss
+++ b/src/pages/dex/pairs/PairsCard/PairsCard.module.scss
@@ -8,7 +8,6 @@
 		align-items: center;
 		flex-direction: row;
 		gap: 8px;
-
 		border-top-left-radius: 10px;
 		border-top-right-radius: 10px;
 		background-color: var(--table-header-bg);
diff --git a/src/pages/dex/pairs/PairsCard/PairsCard.tsx b/src/pages/dex/pairs/PairsCard/PairsCard.tsx
index 6ba9bba..584d7e3 100644
--- a/src/pages/dex/pairs/PairsCard/PairsCard.tsx
+++ b/src/pages/dex/pairs/PairsCard/PairsCard.tsx
@@ -60,16 +60,16 @@ export default function PairsCard({ pair }: IProps) {
 					<span>/</span>
 					<span>{secondCurrency.name}</span>
 				</div>
-				{isFeatured && (
-					<TooltipWrapper text="Featured">
-						<Image src="/ui/featured.svg" alt="featured" width={24} height={24} />
-					</TooltipWrapper>
-				)}
 				{isWhitelisted && (
 					<TooltipWrapper text="Whitelisted">
 						<Image src="/ui/whitelisted.svg" alt="whitelisted" width={24} height={24} />
 					</TooltipWrapper>
 				)}
+				{isFeatured && (
+					<TooltipWrapper text="Featured">
+						<Image src="/ui/featured.svg" alt="featured" width={24} height={24} />
+					</TooltipWrapper>
+				)}
 			</div>
 			<div className={styles.card__body}>
 				<div className={styles.card__body_wrapper}>