From 139a9247b6d786f03f836aee566fb660b5bc7bf9 Mon Sep 17 00:00:00 2001
From: Danh <nguyenhoaidanh2096@gmail.com>
Date: Thu, 5 Oct 2023 18:53:58 +0700
Subject: [PATCH] update css

---
 .../MultipleChainSelectV2/index.tsx           | 32 +++++++++++++++++--
 1 file changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/pages/MyEarnings/MultipleChainSelectV2/index.tsx b/src/pages/MyEarnings/MultipleChainSelectV2/index.tsx
index d13c1e78a5..3b9b3f6bc9 100644
--- a/src/pages/MyEarnings/MultipleChainSelectV2/index.tsx
+++ b/src/pages/MyEarnings/MultipleChainSelectV2/index.tsx
@@ -1,5 +1,6 @@
 import { ChainId } from '@kyberswap/ks-sdk-core'
 import { Trans } from '@lingui/macro'
+import { rgba } from 'polished'
 import { ReactNode, useState } from 'react'
 import { Box, Flex, Text } from 'rebass'
 import styled, { CSSProperties } from 'styled-components'
@@ -33,6 +34,29 @@ export type MultipleChainSelectProps = {
   labelColor?: string
   activeRender?: (node: ReactNode) => ReactNode
 }
+
+const ChainWrapper = styled.div`
+  max-height: 180px;
+  overflow-y: scroll;
+  /* width */
+  ::-webkit-scrollbar {
+    display: unset;
+    width: 8px;
+    border-radius: 999px;
+  }
+
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 999px;
+  }
+
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: ${({ theme }) => rgba(theme.subText, 0.4)};
+    border-radius: 999px;
+  }
+`
 const MultipleChainSelect: React.FC<MultipleChainSelectProps> = ({ className, style, ...props }) => {
   const { comingSoonList = [], selectedChainIds = [], handleChangeChains, chainIds = [], onTracking } = props
   const options = chainIds.map(id => ({ value: id, label: id }))
@@ -122,25 +146,27 @@ const MultipleChainSelect: React.FC<MultipleChainSelectProps> = ({ className, st
                 padding: '10px 18px',
               }}
             >
-              <Checkbox type="checkbox" checked={isAllSelected} onChange={onChangeChain} />
+              <Checkbox type="checkbox" id="checkAllChain" checked={isAllSelected} onChange={onChangeChain} />
 
               <Flex width="20px" alignItems="center" justifyContent="center">
                 <LogoKyber width="14px" height="auto" color={theme.primary} />
               </Flex>
 
               <Text
-                as="span"
+                as="label"
+                htmlFor="checkAllChain"
                 sx={{
                   fontWeight: 500,
                   fontSize: '14px',
                   lineHeight: '20px',
                   color: theme.text,
+                  cursor: 'pointer',
                 }}
               >
                 <Trans>All Chains</Trans>
               </Text>
             </Flex>
-            {menu}
+            <ChainWrapper>{menu}</ChainWrapper>
             <Box sx={{ margin: '10px 0', width: '100%', height: '0', borderBottom: `1px solid ${theme.border}` }} />
             <Flex padding={'0 22px'}>
               <ApplyButton