m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

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.
This commit is contained in:
Mark Stacey 2020-10-09 16:12:13 -02:30 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 Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;

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

@ -71,7 +71,6 @@ 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>
@ -82,12 +81,10 @@ export default function SortList ({
<ToggleArrows />
</div>
</div>
</div>
<div
className="select-quote-popover__column-header select-quote-popover__network-fees"
className="select-quote-popover__column-header select-quote-popover__network-fees select-quote-popover__network-fees-header"
onClick={() => onColumnHeaderClick('rawNetworkFees')}
>
<div className="select-quote-popover__network-fees-header">
<span>{t('swapEstimatedNetworkFees')}</span>
<InfoTooltip
position="bottom"
@ -95,18 +92,14 @@ export default function SortList ({
/>
<ToggleArrows />
</div>
</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>
</>
</div>
</div>
<div className="select-quote-popover__rows">
{
sortedRows.map(({ destinationTokenValue, networkFees, isBestQuote, quoteSource, aggId }, i) => (
<div
@ -117,23 +110,17 @@ export default function SortList ({
onClick={() => onSelect(aggId)}
key={`select-quote-popover-row-${i}`}
>
<div
className="select-quote-popover__receiving"
>
<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"
>
<div className="select-quote-popover__network-fees" >
{networkFees}
</div>
<div
className="select-quote-popover__quote-source"
>
<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',
@ -159,7 +146,6 @@ export default function SortList ({
))
}
</div>
</div>
)
}