From a562fd981999719b78e9485f411de3d4a6ae82d2 Mon Sep 17 00:00:00 2001
From: Danh <nguyenhoaidanh2096@gmail.com>
Date: Tue, 3 Oct 2023 13:50:46 +0700
Subject: [PATCH] fix: zindex filter vs loading vs token name

---
 .../components/TokenFilter/WatchlistSelect.tsx     | 14 ++++++++++----
 src/pages/TrueSightV2/constants/index.tsx          |  3 ++-
 src/pages/TrueSightV2/pages/TokenAnalysisList.tsx  |  2 +-
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/pages/TrueSightV2/components/TokenFilter/WatchlistSelect.tsx b/src/pages/TrueSightV2/components/TokenFilter/WatchlistSelect.tsx
index 6d9e44ba04..d07dbce6d1 100644
--- a/src/pages/TrueSightV2/components/TokenFilter/WatchlistSelect.tsx
+++ b/src/pages/TrueSightV2/components/TokenFilter/WatchlistSelect.tsx
@@ -15,6 +15,12 @@ const Divider = styled.div`
   border-bottom: 1px solid ${({ theme }) => theme.border};
 `
 
+const CustomOption = styled(Row)`
+  :hover {
+    background-color: ${({ theme }) => theme.background};
+  }
+`
+
 const optionStyle: CSSProperties = { fontSize: '14px', padding: '10px 18px', alignItems: 'center' }
 const WatchlistSelect = ({
   menuStyle,
@@ -50,15 +56,15 @@ const WatchlistSelect = ({
         dropdownRender={menu => {
           return (
             <>
-              <Row style={optionStyle} onClick={() => onChange('')}>
+              <CustomOption style={optionStyle} onClick={() => onChange('')}>
                 {labelAll}
-              </Row>
+              </CustomOption>
               <Divider />
               {menu}
               <Divider />
-              <Row style={optionStyle} gap="6px" onClick={() => setIsOpen(true)}>
+              <CustomOption style={optionStyle} gap="6px" onClick={() => setIsOpen(true)}>
                 <Icon id="assignment" size={20} /> <Trans>Manage Lists</Trans>
-              </Row>
+              </CustomOption>
             </>
           )
         }}
diff --git a/src/pages/TrueSightV2/constants/index.tsx b/src/pages/TrueSightV2/constants/index.tsx
index d0e6fd2f60..006e07c1a3 100644
--- a/src/pages/TrueSightV2/constants/index.tsx
+++ b/src/pages/TrueSightV2/constants/index.tsx
@@ -122,7 +122,8 @@ export enum KYBERAI_CHART_ID {
 
 export const Z_INDEX_KYBER_AI = {
   HEADER_TABLE_TOKENS: 2,
-  LOADING_TOKENS_TABLE: 3,
+  LOADING_TOKENS_TABLE: 2,
+  TOKEN_NAME_TABLE_COLUMN: 1,
   FILTER_TOKEN_OPTIONS: 4,
 }
 
diff --git a/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx b/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx
index f924efb882..71e96c8f23 100644
--- a/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx
+++ b/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx
@@ -168,7 +168,7 @@ const Table = styled.table`
     td:nth-child(2),
     th:nth-child(2) {
       position: sticky;
-      z-index: 2;
+      z-index: ${Z_INDEX_KYBER_AI.TOKEN_NAME_TABLE_COLUMN};
     }
     td:nth-child(1),
     th:nth-child(1) {