UI and UX improvements
This commit is contained in:
sairaj mote
parent
a77f7d77d6
commit
042d8a53ca
@ -18,8 +18,8 @@ body {
|
||||
body {
|
||||
--accent-color: #504dff;
|
||||
--text-color: 20, 20, 20;
|
||||
--background-color: 240, 240, 240;
|
||||
--foreground-color: 250, 250, 250;
|
||||
--foreground-color: 252, 253, 255;
|
||||
--background-color: 241, 243, 248;
|
||||
--danger-color: rgb(255, 75, 75);
|
||||
--green: #1cad59;
|
||||
scrollbar-width: thin;
|
||||
@ -32,8 +32,8 @@ body {
|
||||
body[data-theme=dark] {
|
||||
--accent-color: #a3a1ff;
|
||||
--text-color: 220, 220, 220;
|
||||
--background-color: 10, 10, 10;
|
||||
--foreground-color: 24, 24, 24;
|
||||
--foreground-color: 27, 28, 29;
|
||||
--background-color: 21, 22, 22;
|
||||
--danger-color: rgb(255, 106, 106);
|
||||
--green: #00e676;
|
||||
}
|
||||
@ -689,7 +689,6 @@ sm-checkbox {
|
||||
|
||||
.listed-asset {
|
||||
position: relative;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem 0;
|
||||
border-radius: 0.5rem;
|
||||
@ -701,22 +700,39 @@ sm-checkbox {
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
color: inherit;
|
||||
grid-template-columns: auto 1fr auto auto;
|
||||
grid-template-areas: "icon name rate right-arrow" "icon name countdown right-arrow";
|
||||
}
|
||||
.listed-asset__icon {
|
||||
grid-area: icon;
|
||||
padding: 0.5rem;
|
||||
border-radius: 1rem;
|
||||
display: flex;
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
.listed-asset__icon .icon {
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
fill: rgba(var(--background-color), 1);
|
||||
}
|
||||
.listed-asset__name {
|
||||
grid-area: name;
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
.listed-asset__rate {
|
||||
grid-area: rate;
|
||||
}
|
||||
.listed-asset__countdown {
|
||||
grid-area: countdown;
|
||||
justify-self: flex-end;
|
||||
border-radius: 0.3rem;
|
||||
padding: 0.2rem 0.4rem;
|
||||
grid-column: 1/-1;
|
||||
font-size: 0.8rem;
|
||||
background-color: #f0e68cc0;
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
.listed-asset__icon {
|
||||
display: flex;
|
||||
}
|
||||
.listed-asset__icon .icon {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
.listed-asset__right-arrow {
|
||||
grid-area: right-arrow;
|
||||
}
|
||||
|
||||
.quantity-selector .button {
|
||||
@ -1294,7 +1310,7 @@ sm-checkbox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: 16rem minmax(0, 1fr);
|
||||
grid-template-columns: 17rem minmax(0, 1fr);
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
|
||||
2
docs/css/main.min.css
vendored
2
docs/css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -18,8 +18,8 @@ body {
|
||||
body {
|
||||
--accent-color: #504dff;
|
||||
--text-color: 20, 20, 20;
|
||||
--background-color: 240, 240, 240;
|
||||
--foreground-color: 250, 250, 250;
|
||||
--foreground-color: 252, 253, 255;
|
||||
--background-color: 241, 243, 248;
|
||||
--danger-color: rgb(255, 75, 75);
|
||||
--green: #1cad59;
|
||||
scrollbar-width: thin;
|
||||
@ -32,8 +32,8 @@ body {
|
||||
body[data-theme="dark"] {
|
||||
--accent-color: #a3a1ff;
|
||||
--text-color: 220, 220, 220;
|
||||
--background-color: 10, 10, 10;
|
||||
--foreground-color: 24, 24, 24;
|
||||
--foreground-color: 27, 28, 29;
|
||||
--background-color: 21, 22, 22;
|
||||
--danger-color: rgb(255, 106, 106);
|
||||
--green: #00e676;
|
||||
sm-popup::part(popup) {
|
||||
@ -654,7 +654,6 @@ sm-checkbox {
|
||||
}
|
||||
.listed-asset {
|
||||
position: relative;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem 0;
|
||||
border-radius: 0.5rem;
|
||||
@ -663,21 +662,38 @@ sm-checkbox {
|
||||
transition: background-color 0.3s;
|
||||
user-select: none;
|
||||
color: inherit;
|
||||
grid-template-columns: auto 1fr auto auto;
|
||||
grid-template-areas: "icon name rate right-arrow" "icon name countdown right-arrow";
|
||||
&__icon {
|
||||
grid-area: icon;
|
||||
padding: 0.5rem;
|
||||
border-radius: 1rem;
|
||||
display: flex;
|
||||
background-color: var(--accent-color);
|
||||
.icon {
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
fill: rgba(var(--background-color), 1);
|
||||
}
|
||||
}
|
||||
&__name {
|
||||
grid-area: name;
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
&__rate {
|
||||
grid-area: rate;
|
||||
}
|
||||
&__countdown {
|
||||
grid-area: countdown;
|
||||
justify-self: flex-end;
|
||||
border-radius: 0.3rem;
|
||||
padding: 0.2rem 0.4rem;
|
||||
grid-column: 1/-1;
|
||||
font-size: 0.8rem;
|
||||
background-color: #f0e68cc0;
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
&__icon {
|
||||
display: flex;
|
||||
.icon {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
&__right-arrow {
|
||||
grid-area: right-arrow;
|
||||
}
|
||||
}
|
||||
.quantity-selector {
|
||||
@ -1180,7 +1196,7 @@ sm-checkbox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: 16rem minmax(0, 1fr);
|
||||
grid-template-columns: 17rem minmax(0, 1fr);
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@ -697,6 +697,11 @@
|
||||
<h4 class="listed-asset__name"></h4>
|
||||
<b class="listed-asset__rate"></b>
|
||||
<div class="listed-asset__countdown"></div>
|
||||
<svg class="icon listed-asset__right-arrow hide-on-desktop" xmlns="http://www.w3.org/2000/svg"
|
||||
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
@ -1446,15 +1451,15 @@
|
||||
<h3>${formatAmount(floGlobals.exchangeRates[asset])}</h3>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div style="font-size: 0.8rem; font-weight: 500; margin-bottom: 0.3rem;">${tradeType === 'buy' ? 'Highest' : 'Lowest'} price</div>
|
||||
<div style="font-size: 0.8rem; font-weight: 500; margin-bottom: 0.3rem;">Valid ${tradeType === 'buy' ? 'upto' : 'until'}</div>
|
||||
<h3>${formatAmount(getSuggestedPrice(asset))}</h3>
|
||||
</div>
|
||||
<div class="tooltip">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
|
||||
<p class="banner">
|
||||
${tradeType === 'buy' ?
|
||||
`<b>Highest price</b> is the max price upto which your order can be executed, which is <b>${DEFAULT_TRADE_PRICE_DEVIATION * 100}%</b> higher than current price.` :
|
||||
`<b>Lowest price</b> is the min price until which your order can be executed, which is <b>${DEFAULT_TRADE_PRICE_DEVIATION * 100}%</b> lower than current price.`
|
||||
`<b>Valid upto</b> is the max price upto which your order can be executed, which is <b>${DEFAULT_TRADE_PRICE_DEVIATION * 100}%</b> higher than current price.` :
|
||||
`<b>Valid until</b> is the min price until which your order can be executed, which is <b>${DEFAULT_TRADE_PRICE_DEVIATION * 100}%</b> lower than current price.`
|
||||
} System will always try to execute your order at the <b>nearest price possible to current price</b>.
|
||||
</p>
|
||||
</div>
|
||||
@ -1483,7 +1488,7 @@
|
||||
clone.querySelector('.listed-asset__rate').textContent = formatAmount(rate)
|
||||
clone.querySelector('.listed-asset__name').textContent = asset
|
||||
floGlobals.countDowns.intervals[asset] = setInterval(() => {
|
||||
clone.querySelector('.listed-asset__countdown').textContent = `Est. time left: ${getTimeLeft(countDown)}`;
|
||||
clone.querySelector('.listed-asset__countdown').textContent = getTimeLeft(countDown);
|
||||
}, 1000);
|
||||
floGlobals.countDowns.timeouts[asset] = setTimeout(() => {
|
||||
updateRate()
|
||||
@ -1510,7 +1515,7 @@
|
||||
card.querySelector('.transaction-card__type').textContent = type
|
||||
card.querySelector('.transaction-card__quantity').textContent = `${quantity} ${asset}`
|
||||
card.querySelector('.transaction-card__price').textContent = formatAmount(unitValue)
|
||||
card.querySelector('.transaction-card__total').textContent = formatAmount(parseFloat(unitValue * quantity))
|
||||
card.querySelector('.transaction-card__total').textContent = formatAmount(parseFloat(unitValue * quantity), true)
|
||||
card.querySelector('.more-info').dataset.buyer = buyer
|
||||
card.querySelector('.more-info').dataset.seller = seller
|
||||
card.querySelector('.more-info').dataset.other = other
|
||||
@ -1525,7 +1530,7 @@
|
||||
card.classList.add(`transaction-card--${type}`)
|
||||
card.querySelector('.transaction-card__quantity').textContent = `${quantity} ${asset}`
|
||||
card.querySelector('.transaction-card__price').textContent = formatAmount(unitValue)
|
||||
card.querySelector('.transaction-card__total').textContent = formatAmount(parseFloat(unitValue * quantity))
|
||||
card.querySelector('.transaction-card__total').textContent = formatAmount(parseFloat(unitValue * quantity), true)
|
||||
card.querySelector('.more-info').dataset.time = time_placed
|
||||
card.querySelector('.more-info').dataset.buyer = type === 'buy' ? floID : undefined
|
||||
card.querySelector('.more-info').dataset.seller = type === 'sell' ? floID : undefined
|
||||
@ -1537,7 +1542,7 @@
|
||||
const card = getRef('market_transaction_template').content.cloneNode(true).firstElementChild
|
||||
card.querySelector('.transaction-card__quantity').textContent = `${quantity} ${asset}`
|
||||
card.querySelector('.transaction-card__price').textContent = `₹${unitValue}`
|
||||
card.querySelector('.transaction-card__total').textContent = formatAmount(parseFloat(unitValue * quantity))
|
||||
card.querySelector('.transaction-card__total').textContent = formatAmount(parseFloat(unitValue * quantity), true)
|
||||
card.querySelector('.more-info').dataset.time = time
|
||||
card.querySelector('.more-info').dataset.buyer = buyer
|
||||
card.querySelector('.more-info').dataset.seller = seller
|
||||
@ -1567,6 +1572,7 @@
|
||||
value: rate
|
||||
}
|
||||
})
|
||||
if (lineSeries)
|
||||
lineSeries.setData(data);
|
||||
new ResizeObserver(entries => {
|
||||
chartDimensions.height = entries[0].contentRect.height - 10;
|
||||
@ -2402,7 +2408,7 @@
|
||||
clearInterval(floGlobals.countDowns.intervals[asset]);
|
||||
}
|
||||
floGlobals.countDowns.intervals[asset] = setInterval(() => {
|
||||
listedAsset.querySelector('.listed-asset__countdown').textContent = `Est. time left: ${getTimeLeft(countDown[asset])}`
|
||||
listedAsset.querySelector('.listed-asset__countdown').textContent = getTimeLeft(countDown[asset])
|
||||
}, 1000)
|
||||
if (floGlobals.countDowns.timeouts.hasOwnProperty(asset)) {
|
||||
clearTimeout(floGlobals.countDowns.timeouts[asset]);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user