mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Add margins between quote list columns (#9528)
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.
This commit is contained in:
Mark Stacey
GitHub
parent
d35db87447
commit
d8818a47c4
@ -39,29 +39,29 @@
|
||||
|
||||
&__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 {
|
||||
@include H8;
|
||||
|
||||
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;
|
||||
|
||||
@ -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> }
|
||||
{
|
||||
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__network-fees"
|
||||
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',
|
||||
})}
|
||||
>
|
||||
{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>
|
||||
</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" />
|
||||
{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>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user