feat: add tooltip for badges

src/components/UI/TooltipWrapper/index.tsx

@@ -0,0 +1,14 @@
+import styles from './styles.module.scss';
+import { TooltipWrapperProps } from './types';
+
+const TooltipWrapper = ({ children, text }: TooltipWrapperProps) => {
+	return (
+		<div className={styles.tooltip}>
+			{children}
+
+			<div className={styles.tooltip__text}>{text}</div>
+		</div>
+	);
+};
+
+export default TooltipWrapper;

src/components/UI/TooltipWrapper/styles.module.scss

@@ -0,0 +1,46 @@
+.tooltip {
+	cursor: pointer;
+	position: relative;
+	width: max-content;
+
+	&:hover {
+		.tooltip__text {
+			opacity: 1;
+		}
+	}
+
+	&__text {
+		z-index: 10;
+		opacity: 0;
+		pointer-events: none;
+		position: absolute;
+		top: calc(100% + 3px);
+		left: 50%;
+		transform: translateX(-50%);
+		background-color: #11316B;
+		padding: 10px;
+		border-radius: 5px;
+		font-size: 14px;
+		font-weight: 500;
+		line-height: 100%;
+
+		&::before {
+			content: "";
+			position: absolute;
+			width: 10px;
+			height: 10px;
+			background-color: #11316B;
+			top: 0;
+			left: 50%;
+			transform: rotate(45deg) translateX(-50%);
+		}
+
+		[data-theme="light"] & {
+			background-color: #D2E8FB;
+
+			&::before {
+				background-color: #D2E8FB;
+			}
+		}
+	}
+}

src/components/UI/TooltipWrapper/types.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+
+export interface TooltipWrapperProps {
+	children: ReactNode;
+	text: string;
+}

src/components/default/PairsTable/PairsTable.module.scss

@@ -95,7 +95,7 @@ $table-radius: 10px;
 		}
 	}
 
-	> img {
+	img {
 		width: 18px;
 		height: 18px;
 		background: var(--icon-bg-color);
@@ -139,4 +139,4 @@ $table-radius: 10px;
 			background-color: var(--table-button-bg-hover);
 		}
 	}
-}
+}

src/components/default/PairsTable/PairsTable.tsx

@@ -8,6 +8,8 @@ import { Store } from '@/store/store-reducer';
 import PairData from '@/interfaces/common/PairData';
 import { ContextState } from '@/interfaces/common/ContextValue';
 import { tradingKnownCurrencies, roundTo, notationToString, getAssetIcon } from '@/utils/utils';
+import Tooltip from '@/components/UI/Tooltip/Tooltip';
+import TooltipWrapper from '@/components/UI/TooltipWrapper';
 import styles from './PairsTable.module.scss';
 import { Row } from './types';
 
@@ -85,12 +87,14 @@ function PairsTable({ data }: IProps) {
 							</div>
 
 							{featured && (
-								<Image
+								<TooltipWrapper text="Featured">
-									src="/ui/featured.svg"
+									<Image
-									alt="featured"
+										src="/ui/featured.svg"
-									width={24}
+										alt="featured"
-									height={24}
+										width={18}
-								/>
+										height={18}
+									/>
+								</TooltipWrapper>
 							)}
 						</div>
 					);

src/components/dex/MatrixConnectionBadge/styles.module.scss

@@ -16,6 +16,10 @@
 			width: 16px;
 			height: 16px;
 		}
+
+		svg:not(.stroked):not(.no-svg-style svg) * {
+			fill: transparent;
+		}
 	}
 
 	&__tooltip {
@@ -33,4 +37,4 @@
 			background-color: var(--trade-table-tooltip) !important;
 		}
 	}
-}
+}

src/pages/dex/pairs/PairsCard/PairsCard.tsx

@@ -5,6 +5,7 @@ import ArrowRight from '@/assets/images/UI/arrow_right.svg';
 import { Store } from '@/store/store-reducer';
 import PairData from '@/interfaces/common/PairData';
 import { getAssetIcon, notationToString, roundTo } from '@/utils/utils';
+import TooltipWrapper from '@/components/UI/TooltipWrapper';
 import styles from './PairsCard.module.scss';
 
 interface IProps {
@@ -59,7 +60,9 @@ export default function PairsCard({ pair }: IProps) {
 					<span>{secondCurrency.name}</span>
 				</div>
 				{isFeatured && (
-					<Image src="/ui/featured.svg" alt="featured" width={24} height={24} />
+					<TooltipWrapper text="Featured">
+						<Image src="/ui/featured.svg" alt="featured" width={24} height={24} />
+					</TooltipWrapper>
 				)}
 			</div>
 			<div className={styles.card__body}>