Skip to content

I
interface
Commit 80edf5a0 authored by lynn's avatar lynn Committed by GitHub
Browse files
Options

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
parent 96f69291
Hide whitespace changes
Inline Side-by-side
Showing with 255 additions and 210 deletions
src/components/SearchModal/CurrencyList/__snapshots__/index.test.tsx.snap
View file @ 80edf5a0
...@@ -105,235 +105,240 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] = ...@@ -105,235 +105,240 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
} }
<div <div
style="position: relative; height: 10px; width: 100%; overflow: auto; will-change: transform; direction: ltr;" style="padding-right: 8px; padding-top: 8px;"
> >
<div <div
style="height: 168px; width: 100%;" class="CurrencyList_scrollbarStyle__1pi21y70"
style="position: relative; height: 10px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
> >
<div <div
class="c0 c1 c2 c3 token-item-0x6B175474E89094C44Da98b954EedeAC495271d0F" style="height: 168px; width: 100%;"
style="position: absolute; left: 0px; top: 0px; height: 56px; width: 100%;"
tabindex="0"
> >
<div <div
class="c4" class="c0 c1 c2 c3 token-item-0x6B175474E89094C44Da98b954EedeAC495271d0F"
> style="position: absolute; left: 0px; top: 0px; height: 56px; width: 100%;"
CurrencyLogo currency=DAI tabindex="0"
</div>
<div
class="c5"
style="opacity: 1;"
> >
<div <div
class="c0 c1" class="c4"
>
CurrencyLogo currency=DAI
</div>
<div
class="c5"
style="opacity: 1;"
> >
<div <div
class="c6 css-vurnku" class="c0 c1"
title="Dai Stablecoin"
>
Dai Stablecoin
</div>
<div
class="c7"
> >
<div <div
class="c8" class="c6 css-vurnku"
title="Dai Stablecoin"
>
Dai Stablecoin
</div>
<div
class="c7"
> >
<svg <div
class="c9" class="c8"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
> >
<path <svg
d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" class="c9"
/> fill="none"
<line height="24"
x1="12" stroke="currentColor"
x2="12" stroke-linecap="round"
y1="9" stroke-linejoin="round"
y2="13" stroke-width="2"
/> viewBox="0 0 24 24"
<line width="24"
x1="12" xmlns="http://www.w3.org/2000/svg"
x2="12.01" >
y1="17" <path
y2="17" d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
/> />
</svg> <line
x1="12"
x2="12"
y1="9"
y2="13"
/>
<line
x1="12"
x2="12.01"
y1="17"
y2="17"
/>
</svg>
</div>
</div> </div>
</div> </div>
<div
class="c10 css-yfjwjl"
>
DAI
</div>
</div> </div>
<div <div
class="c10 css-yfjwjl" class="c4"
> >
DAI <div
class="c0 c1 c11"
style="justify-self: flex-end;"
/>
</div> </div>
</div> </div>
<div <div
class="c4" class="c0 c1 c2 c3 token-item-0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"
style="position: absolute; left: 0px; top: 56px; height: 56px; width: 100%;"
tabindex="0"
> >
<div <div
class="c0 c1 c11" class="c4"
style="justify-self: flex-end;" >
/> CurrencyLogo currency=USDC
</div> </div>
</div>
<div
class="c0 c1 c2 c3 token-item-0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"
style="position: absolute; left: 0px; top: 56px; height: 56px; width: 100%;"
tabindex="0"
>
<div
class="c4"
>
CurrencyLogo currency=USDC
</div>
<div
class="c5"
style="opacity: 1;"
>
<div <div
class="c0 c1" class="c5"
style="opacity: 1;"
> >
<div <div
class="c6 css-vurnku" class="c0 c1"
title="USD//C"
>
USD//C
</div>
<div
class="c7"
> >
<div <div
class="c8" class="c6 css-vurnku"
title="USD//C"
> >
<svg USD//C
class="c9" </div>
fill="none" <div
height="24" class="c7"
stroke="currentColor" >
stroke-linecap="round" <div
stroke-linejoin="round" class="c8"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
> >
<path <svg
d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" class="c9"
/> fill="none"
<line height="24"
x1="12" stroke="currentColor"
x2="12" stroke-linecap="round"
y1="9" stroke-linejoin="round"
y2="13" stroke-width="2"
/> viewBox="0 0 24 24"
<line width="24"
x1="12" xmlns="http://www.w3.org/2000/svg"
x2="12.01" >
y1="17" <path
y2="17" d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
/> />
</svg> <line
x1="12"
x2="12"
y1="9"
y2="13"
/>
<line
x1="12"
x2="12.01"
y1="17"
y2="17"
/>
</svg>
</div>
</div> </div>
</div> </div>
<div
class="c10 css-yfjwjl"
>
USDC
</div>
</div> </div>
<div <div
class="c10 css-yfjwjl" class="c4"
> >
USDC <div
class="c0 c1 c11"
style="justify-self: flex-end;"
/>
</div> </div>
</div> </div>
<div <div
class="c4" class="c0 c1 c2 c3 token-item-0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599"
style="position: absolute; left: 0px; top: 112px; height: 56px; width: 100%;"
tabindex="0"
> >
<div <div
class="c0 c1 c11" class="c4"
style="justify-self: flex-end;" >
/> CurrencyLogo currency=WBTC
</div> </div>
</div>
<div
class="c0 c1 c2 c3 token-item-0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599"
style="position: absolute; left: 0px; top: 112px; height: 56px; width: 100%;"
tabindex="0"
>
<div
class="c4"
>
CurrencyLogo currency=WBTC
</div>
<div
class="c5"
style="opacity: 1;"
>
<div <div
class="c0 c1" class="c5"
style="opacity: 1;"
> >
<div <div
class="c6 css-vurnku" class="c0 c1"
title="Wrapped BTC"
>
Wrapped BTC
</div>
<div
class="c7"
> >
<div <div
class="c8" class="c6 css-vurnku"
title="Wrapped BTC"
>
Wrapped BTC
</div>
<div
class="c7"
> >
<svg <div
class="c9" class="c8"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
> >
<path <svg
d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" class="c9"
/> fill="none"
<line height="24"
x1="12" stroke="currentColor"
x2="12" stroke-linecap="round"
y1="9" stroke-linejoin="round"
y2="13" stroke-width="2"
/> viewBox="0 0 24 24"
<line width="24"
x1="12" xmlns="http://www.w3.org/2000/svg"
x2="12.01" >
y1="17" <path
y2="17" d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
/> />
</svg> <line
x1="12"
x2="12"
y1="9"
y2="13"
/>
<line
x1="12"
x2="12.01"
y1="17"
y2="17"
/>
</svg>
</div>
</div> </div>
</div> </div>
<div
class="c10 css-yfjwjl"
>
WBTC
</div>
</div> </div>
<div <div
class="c10 css-yfjwjl" class="c4"
> >
WBTC <div
class="c0 c1 c11"
style="justify-self: flex-end;"
/>
</div> </div>
</div> </div>
<div
class="c4"
>
<div
class="c0 c1 c11"
style="justify-self: flex-end;"
/>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -383,31 +388,36 @@ exports[`renders loading rows when isLoading is true 1`] = ` ...@@ -383,31 +388,36 @@ exports[`renders loading rows when isLoading is true 1`] = `
} }
<div <div
style="position: relative; height: 10px; width: 100%; overflow: auto; will-change: transform; direction: ltr;" style="padding-right: 8px; padding-top: 8px;"
> >
<div <div
style="height: 560px; width: 100%;" class="CurrencyList_scrollbarStyle__1pi21y70"
style="position: relative; height: 10px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
> >
<div <div
class="c0 c1" style="height: 560px; width: 100%;"
>
<div />
<div />
<div />
</div>
<div
class="c0 c1"
>
<div />
<div />
<div />
</div>
<div
class="c0 c1"
> >
<div /> <div
<div /> class="c0 c1"
<div /> >
<div />
<div />
<div />
</div>
<div
class="c0 c1"
>
<div />
<div />
<div />
</div>
<div
class="c0 c1"
>
<div />
<div />
<div />
</div>
</div> </div>
</div> </div>
</div> </div>
......
src/components/SearchModal/CurrencyList/index.css.ts 0 → 100644
View file @ 80edf5a0
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
View file @ 80edf5a0
...@@ -20,6 +20,7 @@ import CurrencyLogo from '../../Logo/CurrencyLogo' ...@@ -20,6 +20,7 @@ import CurrencyLogo from '../../Logo/CurrencyLogo'
import Row, { RowFixed } from '../../Row' import Row, { RowFixed } from '../../Row'
import { MouseoverTooltip } from '../../Tooltip' import { MouseoverTooltip } from '../../Tooltip'
import { LoadingRows, MenuItem } from '../styleds' import { LoadingRows, MenuItem } from '../styleds'
import * as styles from './index.css'
function currencyKey(currency: Currency): string { function currencyKey(currency: Currency): string {
return currency.isToken ? currency.address : 'ETHER' return currency.isToken ? currency.address : 'ETHER'
...@@ -288,21 +289,34 @@ export default function CurrencyList({ ...@@ -288,21 +289,34 @@ export default function CurrencyList({
return currencyKey(currency) return currencyKey(currency)
}, []) }, [])
return isLoading ? ( return (
<FixedSizeList height={height} ref={fixedListRef as any} width="100%" itemData={[]} itemCount={10} itemSize={56}> <div style={{ paddingRight: '8px', paddingTop: '8px' }}>
{LoadingRow} {isLoading ? (
</FixedSizeList> <FixedSizeList
) : ( className={styles.scrollbarStyle}
<FixedSizeList height={height}
height={height} ref={fixedListRef as any}
ref={fixedListRef as any} width="100%"
width="100%" itemData={[]}
itemData={itemData} itemCount={10}
itemCount={itemData.length} itemSize={56}
itemSize={56} >
itemKey={itemKey} {LoadingRow}
> </FixedSizeList>
{Row} ) : (
</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
View file @ 80edf5a0
...@@ -32,6 +32,7 @@ import { PaddedColumn, SearchInput, Separator } from './styleds' ...@@ -32,6 +32,7 @@ import { PaddedColumn, SearchInput, Separator } from './styleds'
const ContentWrapper = styled(Column)` const ContentWrapper = styled(Column)`
background-color: ${({ theme }) => theme.backgroundSurface}; background-color: ${({ theme }) => theme.backgroundSurface};
width: 100%; width: 100%;
overflow: hidden;
flex: 1 1; flex: 1 1;
position: relative; position: relative;
` `
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment