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/__snapshots__/index.test.tsx.snap

@@ -105,6 +105,10 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
 }
 
 <div
+    style="padding-right: 8px; padding-top: 8px;"
+  >
+    <div
+      class="CurrencyList_scrollbarStyle__1pi21y70"
       style="position: relative; height: 10px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
     >
       <div
@@ -337,6 +341,7 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
         </div>
       </div>
     </div>
+  </div>
 </DocumentFragment>
 `;
 
@@ -383,6 +388,10 @@ exports[`renders loading rows when isLoading is true 1`] = `
 }
 
 <div
+    style="padding-right: 8px; padding-top: 8px;"
+  >
+    <div
+      class="CurrencyList_scrollbarStyle__1pi21y70"
       style="position: relative; height: 10px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
     >
       <div
@@ -411,5 +420,6 @@ exports[`renders loading rows when isLoading is true 1`] = `
         </div>
       </div>
     </div>
+  </div>
 </DocumentFragment>
 `;

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,12 +289,23 @@ export default function CurrencyList({
     return currencyKey(currency)
   }, [])
 
-  return isLoading ? (
-    <FixedSizeList height={height} ref={fixedListRef as any} width="100%" itemData={[]} itemCount={10} itemSize={56}>
+  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%"
@@ -304,5 +316,7 @@ export default function CurrencyList({
         >
           {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;
 `