UI tweaks
This commit is contained in:
sairaj mote
parent
412d00e47d
commit
86b1cc4478
17
css/main.css
17
css/main.css
@ -30,6 +30,7 @@ body * {
|
||||
--danger-color: rgb(255, 75, 75);
|
||||
--green: #1cad59;
|
||||
--yellow: #f3a600;
|
||||
--loan-color: rgb(255, 196, 141);
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
@ -44,6 +45,7 @@ body[data-theme=dark] * {
|
||||
--danger-color: rgb(255, 106, 106);
|
||||
--green: #00e676;
|
||||
--yellow: #ffd13a;
|
||||
--loan-color: rgb(255, 201, 170);
|
||||
}
|
||||
|
||||
p,
|
||||
@ -983,7 +985,7 @@ strip-option:last-of-type {
|
||||
background-color: var(--green);
|
||||
}
|
||||
.legend:nth-of-type(2)::before {
|
||||
background-color: #ffbb61;
|
||||
background-color: var(--loan-color);
|
||||
}
|
||||
|
||||
.balance-card {
|
||||
@ -1224,6 +1226,17 @@ strip-option:last-of-type {
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
|
||||
.est-interest h3 {
|
||||
margin-top: 0.2rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
.est-interest h3::after {
|
||||
font-weight: 500;
|
||||
content: "% p.a";
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
#get_deposit_amount,
|
||||
#get_loan_amount {
|
||||
--font-size: 1.5rem;
|
||||
@ -1530,6 +1543,8 @@ strip-option:last-of-type {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
#user_section.reveal {
|
||||
-webkit-box-shadow: -0.5rem 0 1.5rem rgba(0, 0, 0, 0.1);
|
||||
box-shadow: -0.5rem 0 1.5rem rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -26,6 +26,7 @@ body {
|
||||
--danger-color: rgb(255, 75, 75);
|
||||
--green: #1cad59;
|
||||
--yellow: #f3a600;
|
||||
--loan-color: rgb(255, 196, 141);
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
@ -45,6 +46,7 @@ body[data-theme="dark"] {
|
||||
--danger-color: rgb(255, 106, 106);
|
||||
--green: #00e676;
|
||||
--yellow: #ffd13a;
|
||||
--loan-color: rgb(255, 201, 170);
|
||||
}
|
||||
}
|
||||
|
||||
@ -853,7 +855,7 @@ strip-option {
|
||||
}
|
||||
&:nth-of-type(2) {
|
||||
&::before {
|
||||
background-color: rgb(255, 187, 97);
|
||||
background-color: var(--loan-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1045,6 +1047,18 @@ strip-option {
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
}
|
||||
.est-interest {
|
||||
h3 {
|
||||
margin-top: 0.2rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
font-size: 1.3rem;
|
||||
&::after {
|
||||
font-weight: 500;
|
||||
content: "% p.a";
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
#get_deposit_amount,
|
||||
#get_loan_amount {
|
||||
--font-size: 1.5rem;
|
||||
@ -1277,7 +1291,9 @@ strip-option {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
padding-top: 0;
|
||||
box-shadow: -0.5rem 0 1.5rem rgba(0, 0, 0, 0.1);
|
||||
&.reveal {
|
||||
box-shadow: -0.5rem 0 1.5rem rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
&:not(.reveal) {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
89
index.html
89
index.html
@ -532,19 +532,22 @@
|
||||
</svg>
|
||||
</a>
|
||||
<sm-form>
|
||||
<div id="deposit__icon">
|
||||
<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" />
|
||||
<g>
|
||||
<path
|
||||
d="M19.83,7.5l-2.27-2.27c0.07-0.42,0.18-0.81,0.32-1.15C17.96,3.9,18,3.71,18,3.5C18,2.67,17.33,2,16.5,2 c-1.64,0-3.09,0.79-4,2l-5,0C4.46,4,2,6.46,2,9.5S4.5,21,4.5,21l5.5,0v-2h2v2l5.5,0l1.68-5.59L22,14.47V7.5H19.83z M13,9H8V7h5V9z M16,11c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1C17,10.55,16.55,11,16,11z" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="grid gap-0-5">
|
||||
<h3 class="h3">Deposit</h3>
|
||||
<p id="deposit_interest_rate"></p>
|
||||
<div class="flex space-between align-center">
|
||||
<div id="deposit__icon" class="grid gap-0-5">
|
||||
<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" />
|
||||
<g>
|
||||
<path
|
||||
d="M19.83,7.5l-2.27-2.27c0.07-0.42,0.18-0.81,0.32-1.15C17.96,3.9,18,3.71,18,3.5C18,2.67,17.33,2,16.5,2 c-1.64,0-3.09,0.79-4,2l-5,0C4.46,4,2,6.46,2,9.5S4.5,21,4.5,21l5.5,0v-2h2v2l5.5,0l1.68-5.59L22,14.47V7.5H19.83z M13,9H8V7h5V9z M16,11c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1C17,10.55,16.55,11,16,11z" />
|
||||
</g>
|
||||
</svg>
|
||||
<h3 class="h3">Deposit</h3>
|
||||
</div>
|
||||
<div class="grid est-interest justify-end text-align-right">
|
||||
<p>Get est. interest</p>
|
||||
<h3 id="deposit_interest_rate"></h3>
|
||||
</div>
|
||||
</div>
|
||||
<sm-input id="get_deposit_amount" type="number" min="1" step="0.01"
|
||||
error-text="Amount should be at least ₹1" placeholder="₹Amount" required>
|
||||
@ -563,17 +566,20 @@
|
||||
</svg>
|
||||
</a>
|
||||
<sm-form>
|
||||
<div id="loan__icon">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12.65,8.5H10.42a5.18,5.18,0,0,0-4,1.95L3.75,13.74a5,5,0,0,0-.68,5.31l0,0h0a5.07,5.07,0,0,0,4.5,2.73h7.88A5.08,5.08,0,0,0,20,19.05h0a5.39,5.39,0,0,0,.43-1.2,4.91,4.91,0,0,0-1-4.06l-2.66-3.34A5.17,5.17,0,0,0,12.65,8.5Z" />
|
||||
<path
|
||||
d="M9.71,6.59h3.94A2.94,2.94,0,0,0,16,5.39h0a1.13,1.13,0,0,0-.23-1.57,1.11,1.11,0,0,0-.95-.18h0a1.2,1.2,0,0,1-.92-.18l-.28-.21a3.64,3.64,0,0,0-4.22,0h0a1.18,1.18,0,0,1-1,.16L8.2,3.35a1.13,1.13,0,0,0-1.36.84A1.17,1.17,0,0,0,7,5H7A3.18,3.18,0,0,0,9.71,6.59Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="grid gap-0-5">
|
||||
<h3 class="h3">Loan</h3>
|
||||
<p id="loan_interest_rate"></p>
|
||||
<div class="flex space-between align-center">
|
||||
<div id="loan__icon" class="grid gap-0-5">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12.65,8.5H10.42a5.18,5.18,0,0,0-4,1.95L3.75,13.74a5,5,0,0,0-.68,5.31l0,0h0a5.07,5.07,0,0,0,4.5,2.73h7.88A5.08,5.08,0,0,0,20,19.05h0a5.39,5.39,0,0,0,.43-1.2,4.91,4.91,0,0,0-1-4.06l-2.66-3.34A5.17,5.17,0,0,0,12.65,8.5Z" />
|
||||
<path
|
||||
d="M9.71,6.59h3.94A2.94,2.94,0,0,0,16,5.39h0a1.13,1.13,0,0,0-.23-1.57,1.11,1.11,0,0,0-.95-.18h0a1.2,1.2,0,0,1-.92-.18l-.28-.21a3.64,3.64,0,0,0-4.22,0h0a1.18,1.18,0,0,1-1,.16L8.2,3.35a1.13,1.13,0,0,0-1.36.84A1.17,1.17,0,0,0,7,5H7A3.18,3.18,0,0,0,9.71,6.59Z" />
|
||||
</svg>
|
||||
<h3 class="h3">Loan</h3>
|
||||
</div>
|
||||
<div class="grid est-interest justify-end text-align-right">
|
||||
<p>Est. accrued interest</p>
|
||||
<h3 id="loan_interest_rate"></h3>
|
||||
</div>
|
||||
</div>
|
||||
<sm-input id="get_loan_amount" type="number" min="1" step="0.01" error-text="Amount should be at least ₹1"
|
||||
placeholder="₹Amount" required>
|
||||
@ -997,13 +1003,13 @@
|
||||
break;
|
||||
case 'deposit':
|
||||
const { I_s } = bank_app.getRates()
|
||||
getRef('deposit_interest_rate').textContent = `Make a deposit at estimated ${(I_s * 100).toFixed(2)}%.p.a`
|
||||
getRef('deposit_interest_rate').textContent = (I_s * 100).toFixed(2)
|
||||
// checks if there is transaction pending, if so then shows warning
|
||||
checkIfAllowed('deposit')
|
||||
break;
|
||||
case 'loan':
|
||||
const { I_b } = bank_app.getRates()
|
||||
getRef('loan_interest_rate').textContent = `Get a loan at estimated ${(I_b * 100).toFixed(2)}%.p.a`
|
||||
getRef('loan_interest_rate').textContent = (I_b * 100).toFixed(2)
|
||||
checkIfAllowed('loan')
|
||||
break;
|
||||
case 'transaction':
|
||||
@ -1246,6 +1252,9 @@
|
||||
uid: key,
|
||||
isPending: !requestResponsePairs.hasOwnProperty(key)
|
||||
}
|
||||
},
|
||||
formatAmount(amount) {
|
||||
return amount.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })
|
||||
}
|
||||
}
|
||||
const render = {
|
||||
@ -1301,7 +1310,7 @@
|
||||
card.querySelector('.activity-card__icon').innerHTML = icon
|
||||
card.querySelector('.activity-card__title').textContent = action
|
||||
card.querySelector('.activity-card__time').textContent = getFormattedTime(timestamp, true)
|
||||
card.querySelector('.activity-card__amount').textContent = amount.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })
|
||||
card.querySelector('.activity-card__amount').textContent = utils.formatAmount(amount)
|
||||
card.querySelector('.activity-card__status').classList.add(status)
|
||||
card.querySelector('.activity-card__status').textContent = status
|
||||
return card
|
||||
@ -1334,7 +1343,7 @@
|
||||
card.querySelector('.activity-card__icon').classList.add(status)
|
||||
card.querySelector('.activity-card__title').textContent = `${action} ${status === 'success' ? 'approved' : 'failed'}`
|
||||
if (status === 'success') {
|
||||
card.querySelector('.activity-card__description').textContent = `Your request for ${action} of ${amount.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })} was successful`
|
||||
card.querySelector('.activity-card__description').textContent = `Your request for ${action} of ${utils.formatAmount(amount)} was successful`
|
||||
} else {
|
||||
card.querySelector('.activity-card__description').textContent = `Reason: ${reason}`
|
||||
}
|
||||
@ -1350,7 +1359,7 @@
|
||||
card.querySelector('.activity-card__icon').innerHTML = icon
|
||||
card.querySelector('.activity-card__type').textContent = type
|
||||
card.querySelector('.activity-card__time').textContent = getFormattedTime(parseInt(status === 'active' ? openTime : closeTime), true)
|
||||
card.querySelector('.activity-card__amount').textContent = netAmt.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })
|
||||
card.querySelector('.activity-card__amount').textContent = utils.formatAmount(netAmt)
|
||||
return card
|
||||
},
|
||||
accountProgressStep(type, title, description = '', options = {}) {
|
||||
@ -1410,7 +1419,7 @@
|
||||
}
|
||||
Promise.all([bank_app.tokenAPI.getBalance(myFloID), floBlockchainAPI.getBalance(myFloID)])
|
||||
.then(([rupeeBalance, floBalance]) => {
|
||||
getRef('rupee_balance').textContent = rupeeBalance.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })
|
||||
getRef('rupee_balance').textContent = utils.formatAmount(rupeeBalance)
|
||||
getRef('flo_balance').textContent = floBalance
|
||||
if (button) {
|
||||
button.classList.remove('loading')
|
||||
@ -1487,7 +1496,7 @@
|
||||
const statusIcon = utils.getRelatedIcon(status)
|
||||
getRef('transaction_detail__icon').innerHTML = icon
|
||||
getRef('transaction_detail__type').textContent = type
|
||||
getRef('transaction_detail__amount').textContent = amount.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })
|
||||
getRef('transaction_detail__amount').textContent = utils.formatAmount(amount)
|
||||
|
||||
getRef('transaction__steps').innerHTML = ''
|
||||
getRef('transaction__steps').append(render.accountProgressStep('success', `Sent ${type} request`, getFormattedTime(timestamp)))
|
||||
@ -1612,9 +1621,9 @@
|
||||
getRef('account_detail__status').textContent = status
|
||||
getRef('account_detail__status').className = `status-tag flex align-center ${status}`
|
||||
getRef('account_detail__type').textContent = type
|
||||
getRef('account_detail__amount').textContent = amount.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })
|
||||
getRef('account_detail__amount').textContent = utils.formatAmount(amount)
|
||||
getRef('account_detail__interest_type').textContent = `Interest ${type === 'deposit' ? 'earned' : 'accrued'}`
|
||||
getRef('account_detail__interest').textContent = interest.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })
|
||||
getRef('account_detail__interest').textContent = utils.formatAmount(interest)
|
||||
getRef('account_detail__interest').className = type === 'deposit' ? 'positive' : 'negative'
|
||||
renderAccountProgress(index)
|
||||
|
||||
@ -1670,7 +1679,7 @@
|
||||
function selectGraphColors() {
|
||||
const colors = []
|
||||
const green = getComputedStyle(document.body).getPropertyValue('--green')
|
||||
const yellow = getComputedStyle(document.body).getPropertyValue('--yellow')
|
||||
const yellow = getComputedStyle(document.body).getPropertyValue('--loan-color')
|
||||
return [green, yellow]
|
||||
}
|
||||
|
||||
@ -1685,8 +1694,8 @@
|
||||
accountChart.data.datasets[0].data = [depositTotal, loanTotal]
|
||||
accountChart.update()
|
||||
}
|
||||
getRef('total_deposit').textContent = depositTotal.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })
|
||||
getRef('total_loan').textContent = loanTotal.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })
|
||||
getRef('total_deposit').textContent = utils.formatAmount(depositTotal)
|
||||
getRef('total_loan').textContent = utils.formatAmount(loanTotal)
|
||||
}
|
||||
|
||||
document.querySelector('theme-toggle').addEventListener('themechange', e => {
|
||||
@ -1901,7 +1910,7 @@
|
||||
card.querySelector('.activity-card').setAttribute('href', `#/transaction?requestID=${uid}`)
|
||||
card.querySelector('.activity-card__icon').innerHTML = utils.getRelatedIcon('pending')
|
||||
card.querySelector('.activity-card__title').textContent = `${action} in process`
|
||||
card.querySelector('.activity-card__amount').textContent = amount.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })
|
||||
card.querySelector('.activity-card__amount').textContent = utils.formatAmount(amount)
|
||||
getRef('pending_transaction').append(card)
|
||||
getRef('quick_actions_container').querySelectorAll('a').forEach(elem => {
|
||||
elem.classList.add('disabled')
|
||||
@ -2010,6 +2019,7 @@
|
||||
notify('New request arrived')
|
||||
}
|
||||
} else {
|
||||
refreshBalance()
|
||||
// checkPendingTransaction()
|
||||
}
|
||||
}
|
||||
@ -2031,6 +2041,7 @@
|
||||
} else {
|
||||
getRef('notifications_page_button').classList.remove('has-notification')
|
||||
}
|
||||
refreshBalance()
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -12263,9 +12274,9 @@
|
||||
let user = this.getUserDetails(myFloID)
|
||||
if (user.netTotal <= amount) {
|
||||
if (user.netTotal) {
|
||||
reject(`Deposit insufficient! Max eligible loan amount: ${user.netTotal.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })}`);
|
||||
reject(`Deposit insufficient! Max eligible loan amount: ${utils.formatAmount(user.netTotal)}`);
|
||||
} else {
|
||||
reject(`Deposit insufficient! Please make a deposit first greater than ${amount.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })} to take loan.`);
|
||||
reject(`Deposit insufficient! Please make a deposit first greater than ${utils.formatAmount(amount)} to take loan.`);
|
||||
}
|
||||
} else {
|
||||
let request = {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user