RanchiMall/btcwallet
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Minor UI/UX changes

Browse Source
This commit is contained in:
sairaj mote 2023-06-03 03:42:00 +05:30
parent 8de817482a
commit a25d7f3911
4 changed files with 56 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
css/main.css
View File

@ -22,7 +22,7 @@ body {
--background-color: 241, 243, 248; --background-color: 241, 243, 248;
--danger-color: rgb(255, 75, 75); --danger-color: rgb(255, 75, 75);
--green: #1cad59; --green: #1cad59;
--yellow: rgb(220, 165, 0); --yellow: rgb(255, 207, 65);
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-gutter: stable; scrollbar-gutter: stable;
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
@ -72,15 +72,8 @@ a:focus-visible {
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset; box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
} }
a.button { button,
padding: 0.4rem 0.6rem; .button {
border-radius: 0.3rem;
font-size: 0.9rem;
font-weight: 500;
color: inherit;
}
button {
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
user-select: none; user-select: none;
@ -99,18 +92,22 @@ button {
justify-content: center; justify-content: center;
flex-shrink: 0; flex-shrink: 0;
} }
button:focus-visible { button:focus-visible,
.button:focus-visible {
outline: var(--accent-color) solid medium; outline: var(--accent-color) solid medium;
} }
button:not(:disabled) { button:not(:disabled),
.button:not(:disabled) {
color: var(--accent-color); color: var(--accent-color);
cursor: pointer; cursor: pointer;
} }
button .icon { button .icon,
.button .icon {
fill: var(--accent-color); fill: var(--accent-color);
} }
.button { .button {
display: inline-flex;
background-color: rgba(var(--text-color), 0.06); background-color: rgba(var(--text-color), 0.06);
} }
.button--primary, .button--danger { .button--primary, .button--danger {
@ -128,6 +125,12 @@ button .icon {
.button--small { .button--small {
padding: 0.4rem 0.5rem; padding: 0.4rem 0.5rem;
} }
.button--colored {
color: var(--accent-color) !important;
}
.button--colored .icon {
fill: var(--accent-color);
}
.cta { .cta {
text-transform: uppercase; text-transform: uppercase;
@ -854,10 +857,9 @@ ol li::before {
} }
.transaction { .transaction {
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr;
gap: 0.5rem 1rem; gap: 0.5rem 1rem;
align-items: center; align-items: center;
grid-template-areas: "icon time amount" "icon receiver receiver" "icon txid txid";
} }
.transaction:not(:last-of-type) { .transaction:not(:last-of-type) {
padding-bottom: 2rem; padding-bottom: 2rem;
@ -865,7 +867,7 @@ ol li::before {
.transaction__amount { .transaction__amount {
white-space: nowrap; white-space: nowrap;
} }
.transaction.out .icon { .transaction.out .transaction__icon .icon {
fill: var(--danger-color); fill: var(--danger-color);
} }
.transaction.out .transaction__amount { .transaction.out .transaction__amount {
@ -874,7 +876,7 @@ ol li::before {
.transaction.out .transaction__amount::before { .transaction.out .transaction__amount::before {
content: "- "; content: "- ";
} }
.transaction.in .icon { .transaction.in .transaction__icon .icon {
fill: var(--green); fill: var(--green);
} }
.transaction.in .transaction__amount { .transaction.in .transaction__amount {
@ -883,14 +885,10 @@ ol li::before {
.transaction.in .transaction__amount::before { .transaction.in .transaction__amount::before {
content: "+ "; content: "+ ";
} }
.transaction.unconfirmed-tx { .transaction.unconfirmed-tx .transaction__icon .icon {
grid-template-areas: "icon time amount" "icon receiver receiver" "icon txid txid" "icon unconfirmed unconfirmed" "icon badge badge";
}
.transaction.unconfirmed-tx .icon {
fill: var(--yellow); fill: var(--yellow);
} }
.transaction__icon { .transaction__icon {
grid-area: icon;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -900,39 +898,29 @@ ol li::before {
border-radius: 2rem; border-radius: 2rem;
} }
.transaction__receiver { .transaction__receiver {
grid-area: receiver;
font-weight: 500; font-weight: 500;
margin-bottom: 0.3rem; margin-bottom: 0.3rem;
line-height: 1.5; line-height: 1.5;
} }
.transaction__time { .transaction__time {
grid-area: time;
font-size: 0.9rem; font-size: 0.9rem;
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
} }
.transaction .pending-badge { .transaction .pending-badge {
grid-area: badge;
font-size: 0.8rem; font-size: 0.8rem;
padding: 0.2rem 0.5rem; padding: 0.2rem 0.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: var(--yellow); background-color: var(--yellow);
color: rgba(var(--foreground-color), 1); color: rgba(0, 0, 0, 0.8);
font-weight: 500; font-weight: 500;
justify-self: flex-start; justify-self: flex-start;
} }
.transaction__amount { .transaction__amount {
grid-area: amount;
font-size: 1rem; font-size: 1rem;
font-weight: 700; font-weight: 700;
} }
.transaction__id { .transaction__id {
grid-area: txid;
font-size: 0.9rem; font-size: 0.9rem;
color: rgba(var(--text-color), 0.8);
}
.transaction .unconfirmed-wrapper {
grid-area: unconfirmed;
padding: 0.5rem 0;
} }
.tx-participant:not(:last-of-type) { .tx-participant:not(:last-of-type) {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

43
css/main.scss
View File

@ -21,7 +21,7 @@ body {
--background-color: 241, 243, 248; --background-color: 241, 243, 248;
--danger-color: rgb(255, 75, 75); --danger-color: rgb(255, 75, 75);
--green: #1cad59; --green: #1cad59;
--yellow: rgb(220, 165, 0); --yellow: rgb(255, 207, 65);
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-gutter: stable; scrollbar-gutter: stable;
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
@ -68,15 +68,8 @@ a {
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset; box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
} }
} }
a.button { button,
padding: 0.4rem 0.6rem; .button {
border-radius: 0.3rem;
font-size: 0.9rem;
font-weight: 500;
color: inherit;
}
button {
user-select: none; user-select: none;
position: relative; position: relative;
display: inline-flex; display: inline-flex;
@ -104,6 +97,7 @@ button {
} }
} }
.button { .button {
display: inline-flex;
background-color: rgba(var(--text-color), 0.06); background-color: rgba(var(--text-color), 0.06);
&--primary, &--primary,
&--danger { &--danger {
@ -121,6 +115,12 @@ button {
&--small { &--small {
padding: 0.4rem 0.5rem; padding: 0.4rem 0.5rem;
} }
&--colored {
color: var(--accent-color) !important;
.icon {
fill: var(--accent-color);
}
}
} }
.cta { .cta {
text-transform: uppercase; text-transform: uppercase;
@ -792,10 +792,9 @@ ol {
padding-bottom: 4rem; padding-bottom: 4rem;
} }
.transaction { .transaction {
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr;
gap: 0.5rem 1rem; gap: 0.5rem 1rem;
align-items: center; align-items: center;
grid-template-areas: "icon time amount" "icon receiver receiver" "icon txid txid";
&:not(:last-of-type) { &:not(:last-of-type) {
padding-bottom: 2rem; padding-bottom: 2rem;
} }
@ -803,7 +802,7 @@ ol {
white-space: nowrap; white-space: nowrap;
} }
&.out { &.out {
.icon { .transaction__icon .icon {
fill: var(--danger-color); fill: var(--danger-color);
} }
.transaction__amount { .transaction__amount {
@ -814,7 +813,7 @@ ol {
} }
} }
&.in { &.in {
.icon { .transaction__icon .icon {
fill: var(--green); fill: var(--green);
} }
.transaction__amount { .transaction__amount {
@ -825,13 +824,11 @@ ol {
} }
} }
&.unconfirmed-tx { &.unconfirmed-tx {
grid-template-areas: "icon time amount" "icon receiver receiver" "icon txid txid" "icon unconfirmed unconfirmed" "icon badge badge"; .transaction__icon .icon {
.icon {
fill: var(--yellow); fill: var(--yellow);
} }
} }
&__icon { &__icon {
grid-area: icon;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -841,39 +838,29 @@ ol {
border-radius: 2rem; border-radius: 2rem;
} }
&__receiver { &__receiver {
grid-area: receiver;
font-weight: 500; font-weight: 500;
margin-bottom: 0.3rem; margin-bottom: 0.3rem;
line-height: 1.5; line-height: 1.5;
} }
&__time { &__time {
grid-area: time;
font-size: 0.9rem; font-size: 0.9rem;
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
} }
.pending-badge { .pending-badge {
grid-area: badge;
font-size: 0.8rem; font-size: 0.8rem;
padding: 0.2rem 0.5rem; padding: 0.2rem 0.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: var(--yellow); background-color: var(--yellow);
color: rgba(var(--foreground-color), 1); color: rgba(0 0 0/ 0.8);
font-weight: 500; font-weight: 500;
justify-self: flex-start; justify-self: flex-start;
} }
&__amount { &__amount {
grid-area: amount;
font-size: 1rem; font-size: 1rem;
font-weight: 700; font-weight: 700;
} }
&__id { &__id {
grid-area: txid;
font-size: 0.9rem; font-size: 0.9rem;
color: rgba(var(--text-color), 0.8);
}
.unconfirmed-wrapper {
grid-area: unconfirmed;
padding: 0.5rem 0;
} }
} }
.tx-participant { .tx-participant {

29
index.html
View File

@ -1259,14 +1259,25 @@
return html.node` return html.node`
<li class="${className}" data-txid="${txid}" data-transacting-addresses=${transactingAddresses.slice(2)}> <li class="${className}" data-txid="${txid}" data-transacting-addresses=${transactingAddresses.slice(2)}>
<div class="transaction__icon">${icon}</div> <div class="transaction__icon">${icon}</div>
<time class="transaction__time">${getFormattedTime(time)}</time> <div class="grid gap-0-5">
<div class="transaction__amount amount-shown" data-btc-amount="${amount}">${formatAmount(getConvertedAmount(amount))}</div> <div class="flex gap-0-5 space-between align-center flex-wrap">
<div class="transaction__receiver"> <time class="transaction__time">${getFormattedTime(time)}</time>
${transactionReceiver} <div class="transaction__amount amount-shown" data-btc-amount="${amount}">${formatAmount(getConvertedAmount(amount))}</div>
${transactingAddresses.length > 2 ? html`<button onclick=${showAllAddresses} class="button button--small show-more" title="See all addresses">... +${transactingAddresses.length - 2} more</button>` : ''} </div>
<div class="transaction__receiver">
${transactionReceiver}
${transactingAddresses.length > 2 ? html`<button onclick=${showAllAddresses} class="button button--small show-more" title="See all addresses">... +${transactingAddresses.length - 2} more</button>` : ''}
</div>
<div class="flex gap-0-5 flex-wrap align-center">
<a class="button button--small gap-0-3 align-center button--colored transaction__id" href="${`#/check_details?query=${txid}`}">
<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>
View details
</a>
</div>
${!block ? html`
<p class="pending-badge">Confirmation pending: amount will be deducted after transaction is confirmed</p>
` : ''}
</div> </div>
<div class="transaction__id wrap-around">TXID: <a href="${`#/check_details?query=${txid}`}">${txid}</a></div>
${!block ? html`<p class="pending-badge">Confirmation pending: amount will be deducted after transaction is confirmed</p>` : ''}
</li> </li>
`; `;
}, },
@ -1318,8 +1329,6 @@
} }
txDetailsAbortController = new AbortController(); txDetailsAbortController = new AbortController();
btcOperator.getTx(txid).then(result => { btcOperator.getTx(txid).then(result => {
const { block, time, size, fee, inputs, outputs, confirmations, total_input_value, total_output_value } = result; const { block, time, size, fee, inputs, outputs, confirmations, total_input_value, total_output_value } = result;
console.debug('tx', result); console.debug('tx', result);
@ -1392,7 +1401,7 @@
</div> </div>
`) `)
}).catch(err => { }).catch(err => {
notify(err, 'error') notify('Invalid transaction ID', 'error')
renderElem(getRef('tx_details'), html``) renderElem(getRef('tx_details'), html``)
}) })
}, },