fix: follow custom design for token selector scrollbar (#5952)

* fix

* remove unused styled component

* update snapshot

* disable scroll on larger currency search modal

* update snapshot

src/components/SearchModal/CurrencyList/index.css.ts

+import { style } from '@vanilla-extract/css'
+import { themeVars } from 'nft/css/sprinkles.css'
+
+export const scrollbarStyle = style([
+  {
+    scrollbarWidth: 'thin',
+    scrollbarColor: `${themeVars.colors.backgroundOutline} transparent`,
+    height: '100%',
+    selectors: {
+      '&::-webkit-scrollbar': {
+        background: 'transparent',
+        width: '4px',
+      },
+      '&::-webkit-scrollbar-thumb': {
+        background: `${themeVars.colors.backgroundOutline}`,
+        borderRadius: '8px',
+      },
+    },
+  },
+])

src/components/SearchModal/CurrencyList/index.tsx

@@ -20,6 +20,7 @@ import CurrencyLogo from '../../Logo/CurrencyLogo'
 import Row, { RowFixed } from '../../Row'
 import { MouseoverTooltip } from '../../Tooltip'
 import { LoadingRows, MenuItem } from '../styleds'
+import * as styles from './index.css'
 
 function currencyKey(currency: Currency): string {
   return currency.isToken ? currency.address : 'ETHER'
@@ -288,21 +289,34 @@ export default function CurrencyList({
     return currencyKey(currency)
   }, [])
 
-  return isLoading ? (
-    <FixedSizeList height={height} ref={fixedListRef as any} width="100%" itemData={[]} itemCount={10} itemSize={56}>
-      {LoadingRow}
-    </FixedSizeList>
-  ) : (
-    <FixedSizeList
-      height={height}
-      ref={fixedListRef as any}
-      width="100%"
-      itemData={itemData}
-      itemCount={itemData.length}
-      itemSize={56}
-      itemKey={itemKey}
-    >
-      {Row}
-    </FixedSizeList>
+  return (
+    <div style={{ paddingRight: '8px', paddingTop: '8px' }}>
+      {isLoading ? (
+        <FixedSizeList
+          className={styles.scrollbarStyle}
+          height={height}
+          ref={fixedListRef as any}
+          width="100%"
+          itemData={[]}
+          itemCount={10}
+          itemSize={56}
+        >
+          {LoadingRow}
+        </FixedSizeList>
+      ) : (
+        <FixedSizeList
+          className={styles.scrollbarStyle}
+          height={height}
+          ref={fixedListRef as any}
+          width="100%"
+          itemData={itemData}
+          itemCount={itemData.length}
+          itemSize={56}
+          itemKey={itemKey}
+        >
+          {Row}
+        </FixedSizeList>
+      )}
+    </div>
   )
 }

src/components/SearchModal/CurrencySearch.tsx

@@ -32,6 +32,7 @@ import { PaddedColumn, SearchInput, Separator } from './styleds'
 const ContentWrapper = styled(Column)`
   background-color: ${({ theme }) => theme.backgroundSurface};
   width: 100%;
+  overflow: hidden;
   flex: 1 1;
   position: relative;
 `