From 75cfbf0a606d88b97eb5041d405a074fc096b685 Mon Sep 17 00:00:00 2001
From: Nada <nada.ajinas@deriv.com>
Date: Fri, 2 Aug 2024 10:50:38 +0400
Subject: [PATCH] fix: ad row glitch

---
 .../AlertComponent/AlertComponent.scss        |  4 +++
 .../AlertComponent/AlertComponent.tsx         | 25 ++++++++++++-------
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/pages/my-ads/components/AlertComponent/AlertComponent.scss b/src/pages/my-ads/components/AlertComponent/AlertComponent.scss
index 5c58e831..11dd18b4 100644
--- a/src/pages/my-ads/components/AlertComponent/AlertComponent.scss
+++ b/src/pages/my-ads/components/AlertComponent/AlertComponent.scss
@@ -14,4 +14,8 @@
         margin-top: -0.4rem;
         margin-left: 1rem;
     }
+
+    & .tooltip-menu-icon:hover {
+        background: none;
+    }
 }
diff --git a/src/pages/my-ads/components/AlertComponent/AlertComponent.tsx b/src/pages/my-ads/components/AlertComponent/AlertComponent.tsx
index 458d84ce..b0e296af 100644
--- a/src/pages/my-ads/components/AlertComponent/AlertComponent.tsx
+++ b/src/pages/my-ads/components/AlertComponent/AlertComponent.tsx
@@ -1,19 +1,26 @@
+import { TooltipMenuIcon } from '@/components/TooltipMenuIcon';
 import { LegacyWarningIcon } from '@deriv/quill-icons';
-import { Button, Tooltip } from '@deriv-com/ui';
+import { useTranslations } from '@deriv-com/translations';
 import './AlertComponent.scss';
 
 type TAlertComponentProps = {
     onClick: () => void;
 };
 
-const AlertComponent = ({ onClick }: TAlertComponentProps) => (
-    <div className='alert-component'>
-        <Tooltip message='Ad not listed' position='bottom'>
-            <Button className='p-0 hover:bg-none' color='white' onClick={onClick} variant='outlined'>
+const AlertComponent = ({ onClick }: TAlertComponentProps) => {
+    const { localize } = useTranslations();
+    return (
+        <div className='alert-component'>
+            <TooltipMenuIcon
+                as='button'
+                onClick={onClick}
+                tooltipContent={localize('Ad not listed')}
+                tooltipPosition='top'
+            >
                 <LegacyWarningIcon data-testid='dt_alert_icon' iconSize='xs' />
-            </Button>
-        </Tooltip>
-    </div>
-);
+            </TooltipMenuIcon>
+        </div>
+    );
+};
 
 export default AlertComponent;