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

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

29
index.html
View File

@ -1259,14 +1259,25 @@
return html.node`
<li class="${className}" data-txid="${txid}" data-transacting-addresses=${transactingAddresses.slice(2)}>
<div class="transaction__icon">${icon}</div>
<time class="transaction__time">${getFormattedTime(time)}</time>
<div class="transaction__amount amount-shown" data-btc-amount="${amount}">${formatAmount(getConvertedAmount(amount))}</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 class="grid gap-0-5">
<div class="flex gap-0-5 space-between align-center flex-wrap">
<time class="transaction__time">${getFormattedTime(time)}</time>
<div class="transaction__amount amount-shown" data-btc-amount="${amount}">${formatAmount(getConvertedAmount(amount))}</div>
</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 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>
`;
},
@ -1318,8 +1329,6 @@
}
txDetailsAbortController = new AbortController();
btcOperator.getTx(txid).then(result => {
const { block, time, size, fee, inputs, outputs, confirmations, total_input_value, total_output_value } = result;
console.debug('tx', result);
@ -1392,7 +1401,7 @@
</div>
`)
}).catch(err => {
notify(err, 'error')
notify('Invalid transaction ID', 'error')
renderElem(getRef('tx_details'), html``)
})
},