ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: token selector spacing (#4314)

Browse Source 
* fixed issue
* updated snapshot
This commit is contained in:
cartcrom 2022-08-09 18:02:54 -04:00 committed by GitHub
parent a6de430cf3
commit 97be3bcd05
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 67 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/SearchModal/CurrencyList/__snapshots__/index.test.tsx.snap
View File

@ -26,6 +26,11 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
justify-content: flex-start;
}
.c5 {
display: grid;
grid-auto-rows: auto;
}
.c1 {
width: 100%;
display: -webkit-box;
@ -50,6 +55,12 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
justify-content: space-between;
}
.c8 {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.c3 {
padding: 4px 20px;
height: 56px;
@ -65,24 +76,12 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
}
.c6 {
max-width: 90%;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.c5 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
<div
style="position: relative; height: 10px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
>
@ -94,12 +93,16 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
style="position: absolute; left: 0px; top: 0px; height: 56px; width: 100%;"
tabindex="0"
>
CurrencyLogo currency=DAI
<div
class="c4"
>
CurrencyLogo currency=DAI
</div>
<div
class="c5"
>
<div
class="c5"
class="c0 c1"
>
<div
class="c6 css-vurnku"
@ -114,19 +117,30 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
DAI
</div>
</div>
<span />
<div
class="c4"
>
<div
class="c0 c1 c8"
style="justify-self: flex-end;"
/>
</div>
</div>
<div
class="c0 c1 c2 c3 token-item-0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"
style="position: absolute; left: 0px; top: 56px; height: 56px; width: 100%;"
tabindex="0"
>
CurrencyLogo currency=USDC
<div
class="c4"
>
CurrencyLogo currency=USDC
</div>
<div
class="c5"
>
<div
class="c5"
class="c0 c1"
>
<div
class="c6 css-vurnku"
@ -141,19 +155,30 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
USDC
</div>
</div>
<span />
<div
class="c4"
>
<div
class="c0 c1 c8"
style="justify-self: flex-end;"
/>
</div>
</div>
<div
class="c0 c1 c2 c3 token-item-0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599"
style="position: absolute; left: 0px; top: 112px; height: 56px; width: 100%;"
tabindex="0"
>
CurrencyLogo currency=WBTC
<div
class="c4"
>
CurrencyLogo currency=WBTC
</div>
<div
class="c5"
>
<div
class="c5"
class="c0 c1"
>
<div
class="c6 css-vurnku"
@ -168,7 +193,14 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
WBTC
</div>
</div>
<span />
<div
class="c4"
>
<div
class="c0 c1 c8"
style="justify-self: flex-end;"
/>
</div>
</div>
</div>
</div>

27
src/components/SearchModal/CurrencyList/index.tsx
View File

@ -21,10 +21,10 @@ import { useCombinedActiveList } from '../../../state/lists/hooks'
import { WrappedTokenInfo } from '../../../state/lists/wrappedTokenInfo'
import { ThemedText } from '../../../theme'
import { isTokenOnList } from '../../../utils'
import Column from '../../Column'
import Column, { AutoColumn } from '../../Column'
import CurrencyLogo from '../../CurrencyLogo'
import Loader from '../../Loader'
import { RowBetween, RowFixed } from '../../Row'
import Row, { RowBetween, RowFixed } from '../../Row'
import { MouseoverTooltip } from '../../Tooltip'
import ImportRow from '../ImportRow'
import { LoadingRows, MenuItem } from '../styleds'
@ -41,7 +41,6 @@ const StyledBalanceText = styled(Text)`
`
const CurrencyName = styled(Text)`
max-width: 90%;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
@ -82,14 +81,9 @@ const TokenListLogoWrapper = styled.img`
height: 20px;
`
const NameContainer = styled.div`
display: flex;
align-items: center;
`
function TokenTags({ currency }: { currency: Currency }) {
if (!(currency instanceof WrappedTokenInfo)) {
return <span />
return null
}
const tags = currency.tags
@ -159,12 +153,15 @@ function CurrencyRow({
disabled={isSelected}
selected={otherSelected}
>
<CurrencyLogo currency={currency} size={'24px'} />
<Column>
<NameContainer>
<CurrencyLogo currency={currency} size={'24px'} />
</Column>
<AutoColumn>
<Row>
<CurrencyName title={currency.name}>{currency.name}</CurrencyName>
{phase0Flag === Phase0Variant.Enabled && <TokenSafetyIcon warning={warning} />}
</NameContainer>
</Row>
<ThemedText.DeprecatedDarkGray ml="0px" fontSize={'12px'} fontWeight={300}>
{!currency.isNative && !isOnSelectedList && customAdded ? (
<Trans>{currency.symbol} • Added by user</Trans>
@ -172,8 +169,12 @@ function CurrencyRow({
currency.symbol
)}
</ThemedText.DeprecatedDarkGray>
</AutoColumn>
<Column>
<RowFixed style={{ justifySelf: 'flex-end' }}>
<TokenTags currency={currency} />
</RowFixed>
</Column>
<TokenTags currency={currency} />
{showCurrencyAmount && (
<RowFixed style={{ justifySelf: 'flex-end' }}>
{balance ? <Balance balance={balance} /> : account ? <Loader /> : null}