diff --git a/src/public/css/offers.css b/src/public/css/offers.css index ef6b307..63b2640 100644 --- a/src/public/css/offers.css +++ b/src/public/css/offers.css @@ -127,6 +127,20 @@ text-align: left; } +.icon-checkboxed-field { + display: flex; + align-items: center; +} + +.icon-checkboxed-field > * { + display: inline-block; + margin-right: 2px; + margin-left: 2px; + align-items: center; +} +.icon-checkboxed-field img { + height: 1.2em; +} .offer-card-content-title { color: gray; @@ -161,6 +175,16 @@ overflow-x: hidden; } +.bitcoin-methods-desc { + grid-column: 1; + grid-row: 5; + text-align: left; +} + +.offer-long-text { + font-size: 0.9em; +} + #create-offer-controls { text-align: center; diff --git a/src/public/img/bolt-lightning-black.svg b/src/public/img/bolt-lightning-black.svg new file mode 100644 index 0000000..abd020b --- /dev/null +++ b/src/public/img/bolt-lightning-black.svg @@ -0,0 +1,18 @@ + + + + + + + diff --git a/src/public/img/bolt-lightning-gray.svg b/src/public/img/bolt-lightning-gray.svg new file mode 100644 index 0000000..f688130 --- /dev/null +++ b/src/public/img/bolt-lightning-gray.svg @@ -0,0 +1,40 @@ + + + + + + + + diff --git a/src/public/img/bolt-lightning-lasecagold.svg b/src/public/img/bolt-lightning-lasecagold.svg new file mode 100644 index 0000000..ec20813 --- /dev/null +++ b/src/public/img/bolt-lightning-lasecagold.svg @@ -0,0 +1,18 @@ + + + + + + + diff --git a/src/public/img/bolt-lightning.svg b/src/public/img/bolt-lightning.svg new file mode 100644 index 0000000..14c065b --- /dev/null +++ b/src/public/img/bolt-lightning.svg @@ -0,0 +1,40 @@ + + + + + + + + diff --git a/src/public/img/chains-black.svg b/src/public/img/chains-black.svg new file mode 100644 index 0000000..ea8862e --- /dev/null +++ b/src/public/img/chains-black.svg @@ -0,0 +1,17 @@ + + + + + + + diff --git a/src/public/img/chains-gray.svg b/src/public/img/chains-gray.svg new file mode 100644 index 0000000..708794c --- /dev/null +++ b/src/public/img/chains-gray.svg @@ -0,0 +1,40 @@ + + + + + + + + diff --git a/src/public/img/chains-lasecagold.svg b/src/public/img/chains-lasecagold.svg new file mode 100644 index 0000000..00f3766 --- /dev/null +++ b/src/public/img/chains-lasecagold.svg @@ -0,0 +1,40 @@ + + + + + + + + diff --git a/src/public/img/chains.svg b/src/public/img/chains.svg new file mode 100644 index 0000000..a87a535 --- /dev/null +++ b/src/public/img/chains.svg @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/src/public/img/circle-xmark-gray.svg b/src/public/img/circle-xmark-gray.svg new file mode 100644 index 0000000..c6a219a --- /dev/null +++ b/src/public/img/circle-xmark-gray.svg @@ -0,0 +1,40 @@ + + + + + + + + diff --git a/src/public/javascript/offers.js b/src/public/javascript/offers.js index a756882..72da79b 100644 --- a/src/public/javascript/offers.js +++ b/src/public/javascript/offers.js @@ -277,6 +277,7 @@ class Offer { whereDescDiv.append(whereDescTitle); const whereDescData = document.createElement('p'); + whereDescData.classList.add('offer-long-text'); whereDescData.innerText = `${this.location_details}`; whereDescDiv.append(whereDescData); @@ -290,10 +291,83 @@ class Offer { whenDescDiv.append(whenDescTitle); const whenDescData = document.createElement('p'); + whenDescData.classList.add('offer-long-text'); whenDescData.innerText = `${this.time_availability_details}`; whenDescDiv.append(whenDescData); - offerCard.append(tradeDescDiv, premiumDescDiv, whereDescDiv, whenDescDiv); + const bitcoinMethodsDiv = document.createElement('div'); + bitcoinMethodsDiv.classList.add('bitcoin-methods-desc'); + bitcoinMethodsDiv.classList.add('subtle-box'); + + const bitcoinMethodsTitle = document.createElement('p'); + bitcoinMethodsTitle.classList.add('offer-card-content-title'); + bitcoinMethodsTitle.innerText = 'Protocolos Bitcoin aceptados'; + bitcoinMethodsDiv.append(bitcoinMethodsTitle); + + const onchainAcceptedContainer = document.createElement('div'); + onchainAcceptedContainer.classList.add('icon-checkboxed-field'); + if (this.is_onchain_accepted) { + const onchainIcon = document.createElement('img'); + onchainIcon.src = '/img/chains-lasecagold.svg'; + const onchainText = document.createElement('p'); + onchainText.innerText = 'Onchain'; + const checkIcon = document.createElement('img'); + checkIcon.src = '/img/circle-check-green.svg'; + + onchainAcceptedContainer.append(onchainIcon, onchainText, checkIcon); + } else { + const onchainIcon = document.createElement('img'); + onchainIcon.src = '/img/chains-gray.svg'; + const onchainText = document.createElement('p'); + onchainText.innerText = 'Onchain'; + const checkIcon = document.createElement('img'); + checkIcon.src = '/img/circle-xmark-gray.svg'; + + onchainAcceptedContainer.append(onchainIcon, onchainText, checkIcon); + } + const lightningAcceptedContainer = document.createElement('div'); + + lightningAcceptedContainer.classList.add('icon-checkboxed-field'); + if (this.is_lightning_accepted) { + const lightningIcon = document.createElement('img'); + lightningIcon.src = '/img/bolt-lightning-lasecagold.svg'; + const lightningText = document.createElement('p'); + lightningText.innerText = 'Lightning'; + const checkIcon = document.createElement('img'); + checkIcon.src = '/img/circle-check-green.svg'; + + lightningAcceptedContainer.append( + lightningIcon, + lightningText, + checkIcon + ); + } else { + const lightningIcon = document.createElement('img'); + lightningIcon.src = '/img/bolt-lightning-gray.svg'; + const lightningText = document.createElement('p'); + lightningText.innerText = 'Lightning'; + const checkIcon = document.createElement('img'); + checkIcon.src = '/img/circle-xmark-gray.svg'; + + lightningAcceptedContainer.append( + lightningIcon, + lightningText, + checkIcon + ); + } + + bitcoinMethodsDiv.append( + onchainAcceptedContainer, + lightningAcceptedContainer + ); + + offerCard.append( + tradeDescDiv, + premiumDescDiv, + whereDescDiv, + whenDescDiv, + bitcoinMethodsDiv + ); return offerCard; }