TheDude
/
ciphermask
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add margins between quote list columns (#9528)

Browse Source 
The quote list columns have been adjusted to add more space in between
the columns. Additionally, the third column cells are now better
aligned under the header. A few unnecessary `<div>`s and CSS classes
have been removed as well.
feature/default_network_editable
Mark Stacey 4 years ago committed by GitHub
parent d35db87447
commit d8818a47c4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 102 additions and 136 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 110
      ui/app/pages/swaps/select-quote-popover/index.scss
  2. 128
      ui/app/pages/swaps/select-quote-popover/sort-list/sort-list.js

110
ui/app/pages/swaps/select-quote-popover/index.scss
Unescape View File

@ -39,8 +39,20 @@
&__sort-list {
display: flex;
flex-flow: column;
flex-direction: column;
align-items: center;
}
&__column-headers,
&__row {
display: flex;
align-items: center;
padding-left: 20px;
width: 100%;
> * + * {
margin-left: 8px;
}
}
&__column-headers {
@ -48,20 +60,8 @@
font-weight: bold;
color: $Black-100;
display: flex;
align-items: center;
height: 43px;
width: 100%;
padding-left: 20px;
margin-bottom: 4px;
.select-quote-popover__receiving {
width: 96px;
}
.select-quote-popover__quote-source {
margin-right: 60px;
}
}
&__column-header {
@ -69,24 +69,13 @@
font-size: 12px;
}
&__rows {
display: flex;
flex-flow: column;
align-items: center;
width: 100%;
}
&__row {
@include H6;
cursor: pointer;
color: $black;
display: flex;
align-items: center;
height: 49px;
width: 100%;
border-bottom: 1px solid $Grey-100;
padding-left: 20px;
margin-bottom: 8px;
border-radius: 8px;
background: $Grey-000;
@ -143,7 +132,37 @@
&__receiving {
display: flex;
flex-direction: column;
width: 102px;
width: 88px;
}
&__network-fees {
width: 99px;
}
&__quote-source {
width: 28px;
display: flex;
align-items: flex-end;
margin-right: 3px;
}
&__caret-right {
color: $Grey-500;
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
i {
transform: rotate(90deg);
}
&:hover {
border-radius: 8px;
background: white;
border: 1px solid $Blue-500;
}
}
&__receiving-value {
@ -168,34 +187,14 @@
font-weight: normal;
}
&__network-fees {
width: 110px;
}
&__quote-source {
width: 28px;
display: flex;
align-items: flex-end;
margin-right: 18px;
@media screen and (min-width: 576px) {
margin-right: 36px;
}
}
&__quote-source-toggle {
margin-left: 2px;
height: 12px;
}
&__receiving-header {
display: flex;
flex-flow: column;
}
&__network-fees-header {
display: flex;
flex-flow: row;
flex-direction: row;
align-items: flex-end;
> span {
@ -236,25 +235,6 @@
}
}
&__caret-right {
color: $Grey-500;
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
i {
transform: rotate(90deg);
}
&:hover {
border-radius: 8px;
background: white;
border: 1px solid $Blue-500;
}
}
&__quote-source-label {
height: 18px;
display: flex;

128
ui/app/pages/swaps/select-quote-popover/sort-list/sort-list.js
Unescape View File

@ -71,94 +71,80 @@ export default function SortList ({
className="select-quote-popover__column-header select-quote-popover__receiving"
onClick={() => onColumnHeaderClick('destinationTokenValue')}
>
<div className="select-quote-popover__receiving-header">
<span className="select-quote-popover__receiving-symbol">{swapToSymbol}</span>
<div className="select-quote-popover__receiving-label">
<span>{t('swapReceiving')}</span>
<InfoTooltip
position="bottom"
contentText={t('swapReceivingInfoTooltip')}
/>
<ToggleArrows />
</div>
</div>
</div>
<div
className="select-quote-popover__column-header select-quote-popover__network-fees"
onClick={() => onColumnHeaderClick('rawNetworkFees')}
>
<div className="select-quote-popover__network-fees-header">
<span>{t('swapEstimatedNetworkFees')}</span>
<span className="select-quote-popover__receiving-symbol">{swapToSymbol}</span>
<div className="select-quote-popover__receiving-label">
<span>{t('swapReceiving')}</span>
<InfoTooltip
position="bottom"
contentText={t('swapEstimatedNetworkFeesInfo')}
contentText={t('swapReceivingInfoTooltip')}
/>
<ToggleArrows />
</div>
</div>
<div
className="select-quote-popover__column-header select-quote-popover__network-fees select-quote-popover__network-fees-header"
onClick={() => onColumnHeaderClick('rawNetworkFees')}
>
<span>{t('swapEstimatedNetworkFees')}</span>
<InfoTooltip
position="bottom"
contentText={t('swapEstimatedNetworkFeesInfo')}
/>
<ToggleArrows />
</div>
<div
className="select-quote-popover__column-header select-quote-popover__quote-source"
onClick={() => onColumnHeaderClick('liquiditySource')}
>
<>
{t('swapQuoteSource')}
<div className="select-quote-popover__quote-source-toggle"><ToggleArrows /></div>
</>
{t('swapQuoteSource')}
<div className="select-quote-popover__quote-source-toggle"><ToggleArrows /></div>
</div>
</div>
<div className="select-quote-popover__rows">
{
sortedRows.map(({ destinationTokenValue, networkFees, isBestQuote, quoteSource, aggId }, i) => (
<div
className={classnames('select-quote-popover__row', {
'select-quote-popover__row--selected': selectedRow === i,
'select-quote-popover__row--no-hover': noRowHover,
})}
onClick={() => onSelect(aggId)}
key={`select-quote-popover-row-${i}`}
>
<div
className="select-quote-popover__receiving"
>
<div className="select-quote-popover__receiving-value">
{isBestQuote && <SunCheckIcon reverseColors={selectedRow !== i} />}
<div className="select-quote-popover__receiving-value-text" title={destinationTokenValue}>{destinationTokenValue}</div>
</div>
{ quoteSource === 'RFQ' && <span className="select-quote-popover__zero-slippage">{t('swapZeroSlippage')}</span> }
</div>
<div
className="select-quote-popover__network-fees"
>
{networkFees}
</div>
<div
className="select-quote-popover__quote-source"
>
<div
className={classnames('select-quote-popover__quote-source-label', {
'select-quote-popover__quote-source-label--green': quoteSource === 'AGG',
'select-quote-popover__quote-source-label--orange': quoteSource === 'RFQ',
'select-quote-popover__quote-source-label--blue': quoteSource === 'DEX',
})}
>
{quoteSource}
</div>
{
sortedRows.map(({ destinationTokenValue, networkFees, isBestQuote, quoteSource, aggId }, i) => (
<div
className={classnames('select-quote-popover__row', {
'select-quote-popover__row--selected': selectedRow === i,
'select-quote-popover__row--no-hover': noRowHover,
})}
onClick={() => onSelect(aggId)}
key={`select-quote-popover-row-${i}`}
>
<div className="select-quote-popover__receiving" >
<div className="select-quote-popover__receiving-value">
{isBestQuote && <SunCheckIcon reverseColors={selectedRow !== i} />}
<div className="select-quote-popover__receiving-value-text" title={destinationTokenValue}>{destinationTokenValue}</div>
</div>
{ quoteSource === 'RFQ' && <span className="select-quote-popover__zero-slippage">{t('swapZeroSlippage')}</span> }
</div>
<div className="select-quote-popover__network-fees" >
{networkFees}
</div>
<div className="select-quote-popover__quote-source" >
<div
className="select-quote-popover__caret-right"
onClick={(event) => {
event.stopPropagation()
onCaretClick(aggId)
}}
onMouseEnter={() => setRowNowHover(true)}
onMouseLeave={() => setRowNowHover(false)}
className={classnames('select-quote-popover__quote-source-label', {
'select-quote-popover__quote-source-label--green': quoteSource === 'AGG',
'select-quote-popover__quote-source-label--orange': quoteSource === 'RFQ',
'select-quote-popover__quote-source-label--blue': quoteSource === 'DEX',
})}
>
<i className="fa fa-angle-up" />
{quoteSource}
</div>
</div>
))
}
</div>
<div
className="select-quote-popover__caret-right"
onClick={(event) => {
event.stopPropagation()
onCaretClick(aggId)
}}
onMouseEnter={() => setRowNowHover(true)}
onMouseLeave={() => setRowNowHover(false)}
>
<i className="fa fa-angle-up" />
</div>
</div>
))
}
</div>
)
}

Write Preview
Loading…
Cancel
Save