UI/UX improvements
This commit is contained in:
sairaj mote
parent
6468c8431b
commit
9b6d4240a9
22
css/main.css
22
css/main.css
@ -707,21 +707,21 @@ h3 {
|
||||
|
||||
#balance_list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.balance-card {
|
||||
display: flex;
|
||||
flex: 1 1 12rem;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
padding: 0.7rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
.balance-card span:last-of-type {
|
||||
font-weight: 700;
|
||||
.balance-card > span:last-of-type {
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
@ -919,6 +919,15 @@ h3 {
|
||||
flex: 1;
|
||||
order: 1;
|
||||
}
|
||||
#balance_list {
|
||||
overflow-x: auto;
|
||||
margin: 0 -1rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
.balance-card {
|
||||
flex: 1 1 12rem;
|
||||
min-width: 42vw;
|
||||
}
|
||||
.hide-on-small {
|
||||
display: none !important;
|
||||
}
|
||||
@ -933,6 +942,9 @@ h3 {
|
||||
.popup__header {
|
||||
padding: 1.5rem 1.5rem 0 0.75rem;
|
||||
}
|
||||
#balance_list {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#request_loan_popup {
|
||||
--width: 32rem;
|
||||
}
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -666,19 +666,19 @@ h3 {
|
||||
}
|
||||
#balance_list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.balance-card {
|
||||
display: flex;
|
||||
flex: 1 1 12rem;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
padding: 0.7rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
span:last-of-type {
|
||||
font-weight: 700;
|
||||
& > span:last-of-type {
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
@ -872,6 +872,15 @@ h3 {
|
||||
flex: 1;
|
||||
order: 1;
|
||||
}
|
||||
#balance_list {
|
||||
overflow-x: auto;
|
||||
margin: 0 -1rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
.balance-card {
|
||||
flex: 1 1 12rem;
|
||||
min-width: 42vw;
|
||||
}
|
||||
.hide-on-small {
|
||||
display: none !important;
|
||||
}
|
||||
@ -887,6 +896,9 @@ h3 {
|
||||
.popup__header {
|
||||
padding: 1.5rem 1.5rem 0 0.75rem;
|
||||
}
|
||||
#balance_list {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#request_loan_popup {
|
||||
--width: 32rem;
|
||||
}
|
||||
|
||||
74
index.html
74
index.html
@ -480,7 +480,7 @@
|
||||
${!selfCollateral ? html`
|
||||
<sm-input id="collateral_provider" type="text" placeholder="Collateral provider address" animate data-address required></sm-input>
|
||||
`: ''}
|
||||
<button class="button button--primary" type="submit" onclick=${confirmDetails} disabled>Request ${loanAmount ? formatAmount(loanAmount) : 'loan'}</button>
|
||||
<button class="button button--primary" type="submit" onclick=${confirmDetails} disabled>Request ${loanAmount ? formatAmount(loanAmount, 'usd') : 'loan'}</button>
|
||||
</sm-form>
|
||||
`
|
||||
})
|
||||
@ -881,6 +881,7 @@
|
||||
`}
|
||||
`: html`
|
||||
<h4>Waiting for collateral to be locked</h4>
|
||||
<p>Collateral is locked in a 2-of-3 multisig address for safe keeping.</p>
|
||||
<p>${isCoborrower ? 'You need' : 'Loan co-borrower needs'} to lock collateral before loan can be issued.</p>
|
||||
${hasAgreedToLend && (isBorrower || isCoborrower) ? html`
|
||||
${floCrypto.isSameAddr(borrower, coborrower) ? html`
|
||||
@ -1108,19 +1109,44 @@
|
||||
const isBorrower = floCrypto.isSameAddr(borrower, floDapps.user.id)
|
||||
const isCoborrower = floCrypto.isSameAddr(coborrower, floDapps.user.id)
|
||||
const isLender = floCrypto.isSameAddr(lender, floDapps.user.id)
|
||||
const hasStartedRepayment = Object.values({
|
||||
...floGlobals.myInbox,
|
||||
...floGlobals.myOutbox
|
||||
})
|
||||
.find(request => request.message.loan_id === loanID)
|
||||
return html`
|
||||
<li class="loan">
|
||||
${hasStartedRepayment && !close_time ? html`
|
||||
let hasStartedRepayment = false
|
||||
let loanStatus = '';
|
||||
let loanStatusBadge = '';
|
||||
if (close_time) {
|
||||
loanStatus = 'Closed'
|
||||
loanStatusBadge = html`
|
||||
<div class="status">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M22,5.18L10.59,16.6l-4.24-4.24l1.41-1.41l2.83,2.83l10-10L22,5.18z M19.79,10.22C19.92,10.79,20,11.39,20,12 c0,4.42-3.58,8-8,8s-8-3.58-8-8c0-4.42,3.58-8,8-8c1.58,0,3.04,0.46,4.28,1.25l1.44-1.44C16.1,2.67,14.13,2,12,2C6.48,2,2,6.48,2,12 c0,5.52,4.48,10,10,10s10-4.48,10-10c0-1.19-0.22-2.33-0.6-3.39L19.79,10.22z"/></svg>
|
||||
Closed
|
||||
</div>
|
||||
`
|
||||
} else {
|
||||
hasStartedRepayment = Object.values({
|
||||
...floGlobals.myInbox,
|
||||
...floGlobals.myOutbox
|
||||
})
|
||||
.find(request => request.message.loan_id === loanID)
|
||||
if (hasStartedRepayment) {
|
||||
loanStatus = 'Repaying'
|
||||
loanStatusBadge = html`
|
||||
<div class="status">
|
||||
<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.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>
|
||||
Repayment in-process
|
||||
Repaying
|
||||
</div>
|
||||
`: ''}
|
||||
`
|
||||
} else {
|
||||
loanStatus = 'Active'
|
||||
loanStatusBadge = html`
|
||||
<div class="status">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M11,21h-1l1-7H7.5c-0.88,0-0.33-0.75-0.31-0.78C8.48,10.94,10.42,7.54,13.01,3h1l-1,7h3.51c0.4,0,0.62,0.19,0.4,0.66 C12.97,17.55,11,21,11,21z"/></g></svg>
|
||||
Active
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
return html`
|
||||
<li class="loan">
|
||||
${loanStatusBadge}
|
||||
<sm-copy value=${loan_id} clip-text>
|
||||
<p>Loan ID: ${loan_id}</p>
|
||||
</sm-copy>
|
||||
@ -1153,7 +1179,7 @@
|
||||
`: ``}
|
||||
</div>
|
||||
<div class="grid gap-0-3">
|
||||
<p>Interest ${isLender ? 'earned' : 'accrued'}</p>
|
||||
<p>Interest ${isLender ? 'earned' : close_time ? 'paid' : 'accrued'}</p>
|
||||
<b style=${`color: ${isLender ? 'var(--green)' : 'var(--danger-color)'}`}>${formatAmount(amountDue - loan_amount, 'usd')}</b>
|
||||
</div>
|
||||
<details>
|
||||
@ -1178,7 +1204,7 @@
|
||||
`: ''}
|
||||
</div>
|
||||
</details>
|
||||
${isBorrower && !hasStartedRepayment ? html`
|
||||
${isBorrower && loanStatus === 'active' ? html`
|
||||
<div class="flex align-center space-between gap-1-5">
|
||||
<div class="grid gap-0-3">
|
||||
<p>Amount due (If paid now)</p>
|
||||
@ -1392,7 +1418,7 @@
|
||||
fetchBalance()
|
||||
}, [])
|
||||
return html`
|
||||
<div class="grid gap-1-5">
|
||||
<div class="grid gap-1">
|
||||
<div class="flex align-center space-between gap-1">
|
||||
<h4>My balances</h4>
|
||||
<button class="button button--colored button--small" disabled=${isRefreshing} onclick=${fetchBalance}>
|
||||
@ -1405,16 +1431,25 @@
|
||||
</div>
|
||||
<ul id="balance_list">
|
||||
<li class="balance-card">
|
||||
<span>BTC</span>
|
||||
<div class="flex align-center space-between gap-1">
|
||||
<p>BTC</p>
|
||||
<a href=${`https://ranchimall.github.io/btcwallet/#/check_details?query=${floGlobals.myBtcID}`} target="_blank" class="button button--small button--colored">History</a>
|
||||
</div>
|
||||
<span>${formatAmount(btcBalance)}</span>
|
||||
</li>
|
||||
<li class="balance-card">
|
||||
<span>FLO</span>
|
||||
<span>${formatAmount(floBalance, 'FLO')}</span>
|
||||
<div class="flex align-center space-between gap-1">
|
||||
<p>USD</p>
|
||||
<a href=${`https://ranchimall.github.io/flowallet/#/search?type=address&query=${floGlobals.myFloID}&page=1`} target="_blank" class="button button--small button--colored">History</a>
|
||||
</div>
|
||||
<span>${formatAmount(usdBalance, 'usd')}</span>
|
||||
</li>
|
||||
<li class="balance-card">
|
||||
<span>USD</span>
|
||||
<span>${formatAmount(usdBalance, 'usd')}</span>
|
||||
<div class="flex align-center space-between gap-1">
|
||||
<p>FLO</p>
|
||||
<a href=${`https://ranchimall.github.io/flowallet/#/search?type=address&query=${floGlobals.myFloID}&page=1`} target="_blank" class="button button--small button--colored">History</a>
|
||||
</div>
|
||||
<span>${formatAmount(floBalance, 'FLO')}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -1538,7 +1573,6 @@
|
||||
<ul class="grid gap-1">
|
||||
${loanRequestsInProcess.map(loan => render.loanProcess(loan))}
|
||||
</ul>
|
||||
<a href="#/apply-loan" class="button button--primary margin-right-auto">Apply for a new loan</a>
|
||||
`: ''}
|
||||
${view === 'coBorrowed' && coBorrowed.length ? html`
|
||||
<ul class="grid gap-1">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user