fix: zindex filter vs loading vs token name

KyberNetwork · Oct 3, 2023 · a562fd9 · a562fd9
1 parent 945fe75
commit a562fd9
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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) {