fix: icon styles

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>
 	);
 };

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 {

src/components/UI/TooltipWrapper/types.ts

@@ -3,4 +3,5 @@ import { ReactNode } from 'react';
 export interface TooltipWrapperProps {
 	children: ReactNode;
 	text: string;
+	className?: string;
 }

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}
 									/>

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);

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}>