UI improvements

This commit is contained in:
sairaj mote 2023-10-04 03:13:04 +05:30
parent fc2dafa686
commit 8f0de4b0f0
4 changed files with 38 additions and 27 deletions

View File

@ -990,7 +990,7 @@ h3 {
#transaction_result { #transaction_result {
display: grid; display: grid;
gap: 0.5rem; gap: 1.5rem;
height: max(40vh, 24rem); height: max(40vh, 24rem);
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -1004,7 +1004,7 @@ h3 {
text-align: center; text-align: center;
width: 100%; width: 100%;
} }
#transaction_result .icon { #transaction_result > .icon {
justify-self: center; justify-self: center;
height: 4rem; height: 4rem;
width: 4rem; width: 4rem;
@ -1013,18 +1013,21 @@ h3 {
-webkit-animation: popup 1s; -webkit-animation: popup 1s;
animation: popup 1s; animation: popup 1s;
} }
#transaction_result .icon--success { #transaction_result > .icon--success {
fill: rgba(var(--background-color), 1); fill: rgba(var(--background-color), 1);
padding: 1rem; padding: 1rem;
background-color: #0bbe56; background-color: #0bbe56;
} }
#transaction_result .icon--failed { #transaction_result > .icon--failed {
background-color: rgba(var(--text-color), 0.03); background-color: rgba(var(--text-color), 0.03);
fill: var(--danger-color); fill: var(--danger-color);
} }
#transaction_result sm-copy { #transaction_result sm-copy {
font-size: 0.8rem; font-size: 0.8rem;
} }
#transaction_result #transaction_link {
justify-self: center;
}
@-webkit-keyframes popup { @-webkit-keyframes popup {
0% { 0% {

2
css/main.min.css vendored

File diff suppressed because one or more lines are too long

View File

@ -959,7 +959,7 @@ h3 {
} }
#transaction_result { #transaction_result {
display: grid; display: grid;
gap: 0.5rem; gap: 1.5rem;
height: max(40vh, 24rem); height: max(40vh, 24rem);
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -972,7 +972,7 @@ h3 {
text-align: center; text-align: center;
width: 100%; width: 100%;
} }
.icon { & > .icon {
justify-self: center; justify-self: center;
height: 4rem; height: 4rem;
width: 4rem; width: 4rem;
@ -992,6 +992,9 @@ h3 {
sm-copy { sm-copy {
font-size: 0.8rem; font-size: 0.8rem;
} }
#transaction_link {
justify-self: center;
}
} }
@keyframes popup { @keyframes popup {
0% { 0% {

View File

@ -2718,7 +2718,10 @@
<p id="transaction_result__description"> ${description} </p> <p id="transaction_result__description"> ${description} </p>
${success && result ? html` ${success && result ? html`
<div class="grid gap-1"> <div class="grid gap-1">
<a id="transaction_link" href=${`${floBlockchainAPI.current_server}tx/${result}`} style="margin-top: 1.5rem;" target="_blank">See transaction on blockchain</a> <a id="transaction_link" class="flex align-center button--colored" href=${`${floBlockchainAPI.current_server}tx/${result}`} style="margin-top: 1.5rem;" target="_blank">
See transaction on blockchain
<svg class="icon margin-left-0-5" 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="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></path> </svg>
</a>
<div class="grid"> <div class="grid">
<span class="label">Transaction ID</span> <span class="label">Transaction ID</span>
<sm-copy class="justify-self-center" value=${result}></sm-copy> <sm-copy class="justify-self-center" value=${result}></sm-copy>
@ -3215,8 +3218,10 @@
floBlockchainAPI.writeData(creatorAddress, floData, creatorPrivateKey, creatorAddress).then((txid) => { floBlockchainAPI.writeData(creatorAddress, floData, creatorPrivateKey, creatorAddress).then((txid) => {
showTransactionResult(true, txid, { showTransactionResult(true, txid, {
title: 'Smart contract creation initiated', title: 'Smart contract creation initiated',
description: html`Check details about your smart contract <a href=${`https://ranchimall.github.io/floscout/#/contract/${contractName}-${creatorAddress}`} target="_blank" rel="noopener noreferrer">here</a>. description: html`
<br> It may take some time for the smart contract to be created.` <strong> It may take some time for the smart contract to be created.</strong><br>
<a class="button button--small button--primary" style="margin-top: 0.5rem;" href=${`https://ranchimall.github.io/floscout/#/smart-contracts`} target="_blank" rel="noopener noreferrer">Check out created smart contract</a>
`
}) })
getRef('smart_contract_creation_form').reset() getRef('smart_contract_creation_form').reset()
document.getElementById('create_contract_button').disabled = true document.getElementById('create_contract_button').disabled = true