Skip to content

Commit e5ced44

Browse files
callilianlapham
callil
and
ianlapham
authored
Design tweaks (Uniswap#717)
* Prepare for V2 testing * Bug fixes and tweaks * Add form link * Design tweaks * higher quality favicon * Favicon... again. Co-authored-by: Ian Lapham <ianlapham@gmail.com>
1 parent cdbf440 commit e5ced44

13 files changed

Lines changed: 152 additions & 81 deletions

File tree

‎public/favicon.ico‎

6.59 KB
Binary file not shown.

‎src/assets/images/question.svg‎

Lines changed: 2 additions & 2 deletions
Loading

‎src/components/CurrencyInputPanel/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@ export default function CurrencyInputPanel({
167167
{!hideInput && (
168168
<LabelRow>
169169
<RowBetween>
170-
<TYPE.body color={theme.text2} fontWeight={500} fontSize={16}>
170+
<TYPE.body color={theme.text2} fontWeight={500} fontSize={14}>
171171
{label}
172172
</TYPE.body>
173173

@@ -176,7 +176,7 @@ export default function CurrencyInputPanel({
176176
onClick={onMax}
177177
color={theme.text2}
178178
fontWeight={500}
179-
fontSize={16}
179+
fontSize={14}
180180
style={{ display: 'inline' }}
181181
>
182182
{!hideBalance && !!token && userTokenBalance

‎src/components/ExchangePage/index.tsx‎

Lines changed: 62 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ const SectionBreak = styled.div`
8383
`
8484

8585
const BottomGrouping = styled.div`
86-
margin-top: 20px;
86+
margin-top: 12px;
8787
position: relative;
8888
`
8989

@@ -158,6 +158,12 @@ const StyledBalanceMaxMini = styled.button`
158158
}
159159
`
160160

161+
const TruncatedText = styled(Text)`
162+
text-overflow: ellipsis;
163+
width: 220px;
164+
overflow: hidden;
165+
`
166+
161167
// styles
162168
const Dots = styled.span`
163169
&::after {
@@ -955,9 +961,10 @@ function ExchangePage({ sendingInput = false, history, params }) {
955961
return (
956962
<AutoColumn gap={'sm'} style={{ marginTop: '20px' }}>
957963
<RowBetween align="flex-end">
958-
<Text fontSize={24} fontWeight={500}>
959-
{!!slippageAdjustedAmounts[Field.INPUT] && slippageAdjustedAmounts[Field.INPUT].toSignificant(6)}
960-
</Text>
964+
<TruncatedText fontSize={24} fontWeight={500}>
965+
{!!formattedAmounts[Field.INPUT] && formattedAmounts[Field.INPUT]}
966+
{/* {!!slippageAdjustedAmounts[Field.INPUT] && slippageAdjustedAmounts[Field.INPUT].toSignificant(6)} */}
967+
</TruncatedText>
961968
<RowFixed gap="4px">
962969
<TokenLogo address={tokens[Field.INPUT]?.address} size={'24px'} />
963970
<Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}>
@@ -969,9 +976,11 @@ function ExchangePage({ sendingInput = false, history, params }) {
969976
<ArrowDown size="16" color={'#888D9B'} />
970977
</RowFixed>
971978
<RowBetween align="flex-end">
972-
<Text fontSize={24} fontWeight={500} color={warningHigh ? '#FF6871' : ''}>
973-
{!!slippageAdjustedAmounts[Field.OUTPUT] && slippageAdjustedAmounts[Field.OUTPUT].toSignificant(6)}
974-
</Text>
979+
<TruncatedText fontSize={24} fontWeight={500} color={warningHigh ? '#FF6871' : ''}>
980+
{!!formattedAmounts[Field.OUTPUT] && formattedAmounts[Field.OUTPUT]}
981+
982+
{/* {!!slippageAdjustedAmounts[Field.OUTPUT] && slippageAdjustedAmounts[Field.OUTPUT].toSignificant(6)} */}
983+
</TruncatedText>
975984
<RowFixed gap="4px">
976985
<TokenLogo address={tokens[Field.OUTPUT]?.address} size={'24px'} />
977986
<Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}>
@@ -982,15 +991,19 @@ function ExchangePage({ sendingInput = false, history, params }) {
982991
<AutoColumn justify="flex-start" gap="sm" padding={'20px 0 0 0px'}>
983992
{independentField === Field.INPUT ? (
984993
<TYPE.italic textAlign="left" style={{ width: '100%', paddingTop: '.5rem' }}>
985-
{`Output is estimated. You will receive at least ${slippageAdjustedAmounts[Field.OUTPUT]?.toSignificant(
986-
6
987-
)} ${tokens[Field.OUTPUT]?.symbol} or the transaction will revert.`}
994+
{`Output is estimated. You will receive at least `}
995+
<b>
996+
{slippageAdjustedAmounts[Field.OUTPUT]?.toSignificant(6)} {tokens[Field.OUTPUT]?.symbol}{' '}
997+
</b>{' '}
998+
{` or the transaction will revert.`}
988999
</TYPE.italic>
9891000
) : (
9901001
<TYPE.italic textAlign="left" style={{ width: '100%', paddingTop: '.5rem' }}>
991-
{`Input is estimated. You will sell at most ${slippageAdjustedAmounts[Field.INPUT]?.toSignificant(6)} ${
992-
tokens[Field.INPUT]?.symbol
993-
} or the transaction will revert.`}
1002+
{`Input is estimated. You will sell at most `}{' '}
1003+
<b>
1004+
{slippageAdjustedAmounts[Field.INPUT]?.toSignificant(6)} {tokens[Field.INPUT]?.symbol}
1005+
</b>
1006+
{` or the transaction will revert.`}
9941007
</TYPE.italic>
9951008
)}
9961009
</AutoColumn>
@@ -1049,7 +1062,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
10491062
<TYPE.black fontSize={14} fontWeight={400}>
10501063
{independentField === Field.INPUT ? (sending ? 'Min sent' : 'Minimum received') : 'Maximum sold'}
10511064
</TYPE.black>
1052-
<QuestionHelper text="" />
1065+
<QuestionHelper text="A boundary is set so you are protected from large price movements after you submit your trade." />
10531066
</RowFixed>
10541067
<RowFixed>
10551068
<TYPE.black fontSize={14}>
@@ -1077,9 +1090,9 @@ function ExchangePage({ sendingInput = false, history, params }) {
10771090
<RowBetween>
10781091
<RowFixed>
10791092
<TYPE.black fontSize={14} fontWeight={400}>
1080-
Slippage
1093+
Price impact
10811094
</TYPE.black>
1082-
<QuestionHelper text="" />
1095+
<QuestionHelper text="The difference between the market price and your price due to trade size." />
10831096
</RowFixed>
10841097
<ErrorText
10851098
fontWeight={500}
@@ -1100,11 +1113,11 @@ function ExchangePage({ sendingInput = false, history, params }) {
11001113
<TYPE.black fontSize={14} fontWeight={400}>
11011114
Liquidity Provider Fee
11021115
</TYPE.black>
1103-
<QuestionHelper text="A portion of each trade goes to liquidity providers to incentivize liquidity on the protocol." />
1116+
<QuestionHelper text="A portion of each trade (0.03%) goes to liquidity providers to incentivize liquidity on the protocol." />
11041117
</RowFixed>
11051118
<TYPE.black fontSize={14}>
11061119
{feeTimesInputFormatted
1107-
? feeTimesInputFormatted?.toSignificant(8) + ' ' + tokens[Field.INPUT]?.symbol
1120+
? feeTimesInputFormatted?.toSignificant(6) + ' ' + tokens[Field.INPUT]?.symbol
11081121
: '-'}
11091122
</TYPE.black>
11101123
</RowBetween>
@@ -1155,8 +1168,8 @@ function ExchangePage({ sendingInput = false, history, params }) {
11551168
: priceSlippage.toFixed(4) + '%'
11561169
: '-'}
11571170
</ErrorText>
1158-
<Text fontWeight={500} fontSize={14} color={theme().text3} pt={1}>
1159-
Slippage
1171+
<Text fontWeight={500} fontSize={16} color={theme().text3} pt={1}>
1172+
Price Impact
11601173
</Text>
11611174
</AutoColumn>
11621175
</AutoRow>
@@ -1268,13 +1281,13 @@ function ExchangePage({ sendingInput = false, history, params }) {
12681281
/>
12691282
{sendingWithSwap ? (
12701283
<ColumnCenter>
1271-
<RowBetween padding="0 8px">
1284+
<RowBetween padding="0 12px">
12721285
<ArrowWrapper onClick={onSwapTokens}>
12731286
<ArrowDown size="16" color="#ff007a" onClick={onSwapTokens} />
12741287
</ArrowWrapper>
1275-
<ArrowWrapper onClick={() => setSendingWithSwap(false)} style={{ marginRight: '20px' }}>
1288+
<StyledBalanceMaxMini onClick={() => setSendingWithSwap(false)} style={{ marginRight: '0px' }}>
12761289
<TYPE.blue>Remove Swap</TYPE.blue>
1277-
</ArrowWrapper>
1290+
</StyledBalanceMaxMini>
12781291
</RowBetween>
12791292
</ColumnCenter>
12801293
) : (
@@ -1307,9 +1320,8 @@ function ExchangePage({ sendingInput = false, history, params }) {
13071320
otherSelectedTokenAddress={tokens[Field.INPUT]?.address}
13081321
/>
13091322
{sendingWithSwap && (
1310-
<RowBetween padding="0 8px">
1323+
<RowBetween padding="0 12px">
13111324
<ArrowDown size="16" />
1312-
<div> </div>
13131325
</RowBetween>
13141326
)}
13151327
</>
@@ -1337,32 +1349,32 @@ function ExchangePage({ sendingInput = false, history, params }) {
13371349
</AutoColumn>
13381350
)}
13391351
{!noRoute && tokens[Field.OUTPUT] && tokens[Field.INPUT] && (
1340-
<Card padding={advanced ? '.25rem .75rem 0 .75rem' : '.25rem .75rem 0 .75rem'} borderRadius={'20px'}>
1352+
<Card padding={advanced ? '.25rem 1.25rem 0 .75rem' : '.25rem .7rem .25rem 1.25rem'} borderRadius={'20px'}>
13411353
{advanced ? (
13421354
<PriceBar />
13431355
) : (
1344-
<AutoColumn style={{ cursor: 'pointer' }} gap="sm">
1356+
<AutoColumn gap="4px">
13451357
{' '}
13461358
<RowBetween align="center" justify="center">
1347-
<Text fontWeight={500} fontSize={16} color={theme().text2}>
1359+
<Text fontWeight={500} fontSize={14} color={theme().text2}>
13481360
Price
13491361
</Text>
13501362
<Text
13511363
fontWeight={500}
1352-
fontSize={16}
1364+
fontSize={14}
13531365
color={theme().text2}
13541366
style={{ justifyContent: 'center', alignItems: 'center', display: 'flex' }}
13551367
>
13561368
{pair && showInverted
13571369
? route.midPrice.invert().toSignificant(6) +
13581370
' ' +
13591371
tokens[Field.INPUT]?.symbol +
1360-
' / ' +
1372+
' per ' +
13611373
tokens[Field.OUTPUT]?.symbol
13621374
: route.midPrice.toSignificant(6) +
13631375
' ' +
13641376
tokens[Field.OUTPUT]?.symbol +
1365-
' / ' +
1377+
' per ' +
13661378
tokens[Field.INPUT]?.symbol}
13671379
<StyledBalanceMaxMini onClick={() => setShowInverted(!showInverted)}>
13681380
<Repeat size={14} />
@@ -1371,18 +1383,22 @@ function ExchangePage({ sendingInput = false, history, params }) {
13711383
</RowBetween>
13721384
{pair && (warningHigh || warningMedium) && (
13731385
<RowBetween>
1374-
<TYPE.main style={{ justifyContent: 'center', alignItems: 'center', display: 'flex' }}>
1386+
<TYPE.main
1387+
style={{ justifyContent: 'center', alignItems: 'center', display: 'flex' }}
1388+
fontSize={14}
1389+
>
13751390
Price Impact
1376-
<QuestionHelper text="The difference between the market price and your price due to trade size." />
13771391
</TYPE.main>
1378-
<ErrorText fontWeight={500} fontSize={16} warningMedium={warningMedium} warningHigh={warningHigh}>
1379-
{priceSlippage
1380-
? priceSlippage.toFixed(4) === '0.0000'
1381-
? '<0.0001%'
1382-
: priceSlippage.toFixed(4) + '%'
1383-
: '-'}{' '}
1384-
⚠️
1385-
</ErrorText>
1392+
<RowFixed>
1393+
<ErrorText fontWeight={500} fontSize={14} warningMedium={warningMedium} warningHigh={warningHigh}>
1394+
{priceSlippage
1395+
? priceSlippage.toFixed(4) === '0.0000'
1396+
? '<0.0001%'
1397+
: priceSlippage.toFixed(4) + '%'
1398+
: '-'}{' '}
1399+
</ErrorText>
1400+
<QuestionHelper text="The difference between the market price and your quoted price due to trade size." />
1401+
</RowFixed>
13861402
</RowBetween>
13871403
)}
13881404
</AutoColumn>
@@ -1510,9 +1526,9 @@ function ExchangePage({ sendingInput = false, history, params }) {
15101526
<RowBetween>
15111527
<RowFixed>
15121528
<TYPE.black fontSize={14} fontWeight={400}>
1513-
Slippage
1529+
Price Impact
15141530
</TYPE.black>
1515-
<QuestionHelper text="The difference between the market price and your price due to trade size." />
1531+
<QuestionHelper text="The difference between the market price and your quoted price due to trade size." />
15161532
</RowFixed>
15171533
<ErrorText
15181534
fontWeight={500}
@@ -1533,11 +1549,11 @@ function ExchangePage({ sendingInput = false, history, params }) {
15331549
<TYPE.black fontSize={14} fontWeight={400}>
15341550
Liquidity Provider Fee
15351551
</TYPE.black>
1536-
<QuestionHelper text="Price change due to trade size and LP fee" />
1552+
<QuestionHelper text="A portion of each trade (0.03%) goes to liquidity providers to incentivize liquidity on the protocol." />
15371553
</RowFixed>
15381554
<TYPE.black fontSize={14}>
15391555
{feeTimesInputFormatted
1540-
? feeTimesInputFormatted?.toSignificant(8) + ' ' + tokens[Field.INPUT]?.symbol
1556+
? feeTimesInputFormatted?.toSignificant(6) + ' ' + tokens[Field.INPUT]?.symbol
15411557
: '-'}
15421558
</TYPE.black>
15431559
</RowBetween>
@@ -1547,7 +1563,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
15471563
<TYPE.black fontWeight={400} fontSize={14}>
15481564
Set front running resistance
15491565
</TYPE.black>
1550-
<QuestionHelper text="Your transaction will revert if the price changes more than this amount after your submit your trade." />
1566+
<QuestionHelper text="Your transaction will revert if the price changes more than this amount after you submit your trade." />
15511567
</RowFixed>
15521568
<SlippageTabs
15531569
rawSlippage={allowedSlippage}

‎src/components/Header/index.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,9 @@ const HeaderFrame = styled.div`
3030
3131
${({ theme }) => theme.mediaWidth.upToExtraSmall`
3232
padding: 10px;
33-
width: calc(100% - 20px);
33+
width: calc(100% - 12px);
34+
position: relative;
35+
3436
`};
3537
z-index: 2;
3638
`
@@ -121,6 +123,11 @@ const MigrateBanner = styled(AutoColumn)`
121123
a {
122124
color: ${({ theme }) => theme.pink2};
123125
}
126+
127+
${({ theme }) => theme.mediaWidth.upToSmall`
128+
padding: 0;
129+
display: none;
130+
`};
124131
`
125132

126133
export default function Header() {

‎src/components/NavigationTabs/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ function NavigationTabs({ location: { pathname }, history }) {
105105
<>
106106
{adding || removing ? (
107107
<Tabs>
108-
<RowBetween style={{ padding: '1rem' }}>
108+
<RowBetween style={{ padding: '1rem 1rem 0 1rem' }}>
109109
<Hover onClick={() => history.goBack()}>
110110
<ArrowLink />
111111
</Hover>
@@ -114,7 +114,7 @@ function NavigationTabs({ location: { pathname }, history }) {
114114
text={
115115
adding
116116
? 'When you add liqudiity, you are given pool tokens that represent your position in this pool. These tokens automatically earn fees proportional to your pool share and can be redeemed at any time.'
117-
: 'Your liquidity is represented by a pool token (ERC20). Removing will convert your position back into tokens at the current rate and proportional to the amount of each token in the pool. Any fees you accrued are included in the token amounts your receive.'
117+
: 'Your liquidity is represented by a pool token (ERC20). Removing will convert your position back into tokens at the current rate and proportional to the amount of each token in the pool. Any fees you accrued are included in the token amounts you receive.'
118118
}
119119
/>
120120
</RowBetween>

‎src/components/NumericalInput/index.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,12 @@ const StyledInput = styled.input`
1818
white-space: nowrap;
1919
overflow: hidden;
2020
text-overflow: ellipsis;
21+
padding: 0px;
22+
-webkit-appearance: textfield;
23+
24+
::-webkit-search-decoration {
25+
-webkit-appearance: none;
26+
}
2127
2228
[type='number'] {
2329
-moz-appearance: textfield;

‎src/components/Popups/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const MobilePopupInner = styled.div`
3939

4040
const FixedPopupColumn = styled(AutoColumn)`
4141
position: absolute;
42-
top: 128px;
42+
top: 112px;
4343
right: 1rem;
4444
width: 355px;
4545

0 commit comments

Comments
 (0)